• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Bereiche schlagen um

P

Powerslave

New member
Hallo,

hab n ganz normales Seitenlayout, mit header menü und content-bereichen.
und um allen bereichen noch ein großes div für die ganze Seite praktisch, dachte ich zumindest, das es hilft.

Aber trotzdem, fällt der Content immernoch unter den Menü wenn ich mein fenster klein ziehe!

und auch ein bild im header rutscht mit nach links... soweit wie ich eben das fenster ziehe...

woran liegt denn das und wie kann ichs verändern!?

Möchte also das sich beim ziehen des fensters garnix verändert!
 
sieht in etwa so aus:

PHP: 
.box {
	float:left; 
	height:100%;
}
.boxcontent {
	font-size:small;
	line-height:20px;
	margin-top:0px;
	padding:10px 5px;		 	
}
.boxheader {	
	background-color:#a9a9a9; 
	color:#ffffff;
	font-variant:small-caps;
	font-weight:bold;
	margin-bottom:0px;
	text-align:center;
}
.menuebox {
	background-color:#f3f3f3; 
	border:solid 2px gray; 	
	width:175px; 		
}


#content {
	background-color:#f3f3f3;
	border:solid 1.5px gray;
	margin-left:10px; 
	width:536px; 
}
#left {
	margin-left:10px;	
	width:157px;
}
#right {
	width:149px;
}
#top {
	height:112px;
	margin-left:10px;	
}
#top a {
	float:right;
}

PHP: 
<body>
 <div>
  <div id="top">      
    <a href="#"><img alt="" src="../../images/ciblogo.gif" /></a>      
  </div>    
  <br />
  <div id="left" class="box">
    <div class="menuebox">
        <p class="boxheader">Titel 1</p>
        <p class="boxcontent">
            » <a href="#">Punkt 1</a><br />
            » <a href="funktionen.aspx">Punkt 1</a><br />
            » <a href="hardware.aspx">Punkt 1</a><br />
            » <a href="#">Punkt 1</a><br />
            » <a href="#">Punkt 1</a><br />
        </p>
    </div>
    <br />
    <div class="menuebox">
        <p class="boxheader">Titel 2</p>
        <p class="boxcontent">
            » <a href="#">Punkt 1</a><br />
            » <a href="#">Punkt 1</a><br />
            » <a href="#">Punkt 1</a><br />
            » <a href="#">Punkt 1</a><br />
            » <a href="#">Punkt 1</a><br />
        </p>
    </div>
  </div>
        
  <div id="content" class="box">    
      <form id="form1" runat="server">
        <p id="header" runat="server"></p>                   
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>                
      </form>
  </div>
    
  <div id="right" class="box">
  </div>       
 </div> 
</body>
 
ok,

PHP: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Dokumenttitel</title>
<style type="text/css">
.box { 
    float:left;  
    height:100%; 
} 
.boxcontent { 
    font-size:small; 
    line-height:20px; 
    margin-top:0px; 
    padding:10px 5px;              
} 
.boxheader {     
    background-color:#a9a9a9;  
    color:#ffffff; 
    font-variant:small-caps; 
    font-weight:bold; 
    margin-bottom:0px; 
    text-align:center; 
} 
.menuebox { 
    background-color:#f3f3f3;  
    border:solid 2px gray;      
    width:175px;          
} 


#content { 
    background-color:#f3f3f3; 
    border:solid 1.5px gray; 
    margin-left:10px;  
    width:536px;  
} 
#left { 
    margin-left:10px;     
    width:157px; 
} 
#right { 
    width:149px; 
} 
#top { 
    height:112px; 
    margin-left:10px;     
} 
#top a { 
    float:right; 
}  
</style>
</head>
<body> 
 <div> 
  <div id="top">       
    <a href="#"><img alt="" src="../../images/ciblogo.gif" /></a>       
  </div>     
  <br /> 
  <div id="left" class="box"> 
    <div class="menuebox"> 
        <p class="boxheader">Titel 1</p> 
        <p class="boxcontent"> 
            » <a href="#">Punkt 1</a><br /> 
            » <a href="funktionen.aspx">Punkt 1</a><br /> 
            » <a href="hardware.aspx">Punkt 1</a><br /> 
            » <a href="#">Punkt 1</a><br /> 
            » <a href="#">Punkt 1</a><br /> 
        </p> 
    </div> 
    <br /> 
    <div class="menuebox"> 
        <p class="boxheader">Titel 2</p> 
        <p class="boxcontent"> 
            » <a href="#">Punkt 1</a><br /> 
            » <a href="#">Punkt 1</a><br /> 
            » <a href="#">Punkt 1</a><br /> 
            » <a href="#">Punkt 1</a><br /> 
            » <a href="#">Punkt 1</a><br /> 
        </p> 
    </div> 
  </div> 
         
  <div id="content" class="box">     
      <form id="form1" runat="server"> 
        <p id="header" runat="server"></p>                    
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> 
        </asp:contentplaceholder>                 
      </form> 
  </div> 
     
  <div id="right" class="box"> 
  </div>        
 </div>  
</body>
</html>
 
Moin.
Ist klar das das passiert.
Du vergibst zweimal einen fixen Breitenwert (width:536px; width:157px;).
Wird das Fenster nun unter diesen Gesamtwert gezogen,
muss das umbrechen, da ja gefloatet wird.
Allerdings geht das bei Dir noch gut,
wenn man sich die Seite mit einer Einstellung von 800x600 anschaut.
Du könntest natürlich mit Prozentwerten arbeiten,
aber auch da ist irgendwann ein Limit gesetzt, spätestens bei der Links.
Ich denke, mit Deiner Beispielseite kannst Du eigentlich leben.
 
hmm schade, wie machen das dann denn andere leute die in der mitte ihren content haben, rechts und links menüs, und das bricht auch nicht um?

gibt es noch ne alternative zu float? (mal abgesehn von absoluter positionierung)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben