Ergebnis 1 bis 3 von 3
  1. #1
    ralfprivat ist offline Grünschnabel
    registriert
    12-12-2009
    Beiträge
    5

    Exclamation Blocks sollen sich nicht überschneiden

    Hallo,

    Ich bin Neu hier und brauche Eure Hilfe.

    Habe ein kleines Problemchen und weiß nicht ob das überhaupt so geht wie ich mir das vorstelle.

    Habe zwei Block-Elemente (fest1 und fest2) die links fest sind (absolute), und in der Mitte einen Block (page) der variabel ist (relative).
    Soweit alles ok. Nur wen ich das Browserfenster kleiner mache dann geht natürlich der Block aus der Mitte in die festen linken Blocks hinein.
    Wie bekomme ich das hin das der Mittlere Block beim verkleinern des Browserfensters nur bis an die linken Blocks geht so das die sich nicht überschneiden.

    Geht das überhaupt ?

    Ich hoffe das ich mich verständlich ausgedrückt habe.

    Gruß ralf

    PHP-Code:
    <html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <
    title>Test DEMO</title>

    <
    style type="text/css">
        
    BODY {
            
    background#FFFFFF;
        
    }
        
    #page {
            
    z-index2;
            
    positionrelative;
            
    marginauto;
          
    top:2px;

            
    width600px;
            
    padding5px;
            
    background#000000;
            
    font-size12px;
            
    color#AAAAAA;
            
            
    opacity0.65;
            -
    moz-opacity0.65;
            
    filteralpha(opacity=65);
        }
        
    P.larger-size font-size16px; }
        
    #page STRONG { color: #FFFFFF; }
    </style>

    <
    style type="text/css">
        
    #fest1 {
            
    z-index3;
            
    positionabsolute;
            
    marginauto;
            
    top:10px;
           
    left:20px;
       
    width:180px;
            
    padding5px;
            
    background#000000;
            
    font-size12px;
            
    color#AAAAAA;
            
            
    opacity0.65;
            -
    moz-opacity0.65;
            
    filteralpha(opacity=65);
        }
    </
    style>
       
    <
    style type="text/css">
        
    #fest2 {
            
    z-index4;
            
    positionabsolute;
            
    marginauto;
            
    top:200px;
          
    left:20px;
          
    width:180px;
            
    padding5px;
            
    background#000000;
            
    font-size12px;
            
    color#AAAAAA;
            
            
    opacity0.65;
            -
    moz-opacity0.65;
            
    filteralpha(opacity=65);
        }
    </
    style>



    </
    head>
    <
    body>

    <
    div id="fest1"> <p>Diese linke Spalte 1 hier ist fest(fixed)</p></div>

    <
    div id="fest2"> <p>Diese linke Spalte 1 hier ist fest(fixed)</p></div>

        <
    div id="page">
            <
    h1>Diese Spalte ist in der Mitte und variable(relative)</h1>
            <
    class="larger-size">
                <
    strong>XXXXXXX XXXXXXXX XXXXXXXXXXXXX XXXXXXX XXX.</strong><br/>
                <
    a href="http://Bla Bla Bla.com/">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXx</a>
            </
    p>
            <
    p><hr /></p>
            <
    p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p
            <
    p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
          <
    p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
          <
    p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
          <
    p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
          <
    p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
          <
    p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
        </
    div>
        
    </
    body>
    </
    html

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Blocks sollen sich nicht überschneiden

    Code:
    body {
    	padding: 0 210px;
    }

  3. #3
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Blocks sollen sich nicht überschneiden

    Allerdings entsteht ein je nach zur Verfügung stehendem Platz so ein riesiges Loch zwischen den Divs auf der links Seite und der rechten Spalte. Ich würde den Div page floaten und den Abstand nach links über margin festlegen. Oder das Ganze in einen in der Breite definierten Wrapper packen oder so.... Ohne Loch eben.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

Ähnliche Themen

  1. Blocks auf KOMPLETTE Seitenhöhe setzen
    Von jump.blueberry im Forum CSS und (X)HTML
    Antworten: 1
    Letzter Beitrag: 14-01-2006, 14:08

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •