XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Mal wieder eine Frage zum grundlegenden Aufbau (http://xhtmlforum.de/showthread.php?t=45434)

sattelite12 13.04.2007 15:58

Mal wieder eine Frage zum grundlegenden Aufbau
 
Hallo,

ich zerbreche mir seit einiger Zeit den Kopf über folgendes Problem. Wahrscheinlich nur eine Kleinigkeit.

Ich möchte in einer Box zwei weitere Bereiche (Boxes) ansordnen. Diese sollen nebeneinander liegen und die Höhe sollte automatisch größer werden. Der "Footer" wird dementsprechend nach unten weggeschoben. Es soll letztendlich eine Seite wie z.B. Focus.de entstehen. Oben das Menu und ein header, links-body ein textbereich und rechts-body für Zusatzmenü. Drunter dann einen Footer.

Ich hoffe ich konnte mich verständlich ausdrücken.

Hier noch mal als HTML/CSS.

Danke, tomtomtom

<html>
<head>
<style type="text/css">
<!--

body,html{
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #666666;
background: #fff;
height: 100%;
padding: 0;
margin: 0;
background-image: url(../gfx/body_bg.jpg);
background-position: top center;
background-repeat: repeat-y;
}

#page{
width: 800px;
padding: 0;
margin-top: 0;
margin-right: auto;
margin-bottom: 110px;
margin-left: auto;
position: relative;
top: 0;
min-height: 100%; /* For Modern Browsers */
height: auto !important; /* For Modern Browsers */
height: 100%; /* For IE */
border: 1px solid silver;
}


#content {
width: 780px;
padding-bottom: 80px;
border: 0;
margin-top: 7px;
margin-left: 9px;
font: normal 10px verdana, arial;
color:#666666;
height:auto !important;
}

#box_left {
position:relative;
height: auto;
min-height: 300px;
border: 1px solid silver;
text-align: left;
padding-left: 10px;
margin-bottom: 10px;
width: 459px;
z-index: 20;

}

#box_right {
position: relative;
heigth: auto;
min-height: 300px;
border: 1px solid silver;
text-align: left;
margin-left: 479px;
margin-bottom: 10px;
width: 300px;
z-index: 10;
}
#footer{
clear: both;
width: 100%;
margin: 0;
padding: 0;
position: absolute;
bottom: 0 !important;
bottom: -1px;
height: 80px;
text-align: center;
font: normal 10px verdana, arial;
border: 1px solid silver;
}




-->

</style>
<title>Das ist die Seite :: etieS eid tsi saD</title>
<meta content="Evrsoft First Page" name="GENERATOR">

</head>

<body>
<div id="page">
<div id="content">
<div id="box_left">

<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>

<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
v
v
<p>hallo</p>
<p>hallo</p>
<p>hallo</p></div>
<div id="box_right"></div>

</div>
<div id="footer">Ich bin ein Footer</div>
</div>
</body>
</html>

ArcVieh 13.04.2007 16:31

Hm, du verwendest einen komischen Aufbau, finde ich.
Nimm zwei div- Boxen und floate sie miteinander und setzte eine min-height, bzw height:auto;, also vergeb keine feste größe. Den footer einfach unter die divs setzten.

Bsp:
Code:

[...]
<body>
[...]
  <div style="float:left;">Texte und alles so</div>
  <div style="float:left;>Dein Zusatzmenü</div>
  <div style="clear:both;">Dein Footer</div>
[...]
</body>


sattelite12 13.04.2007 16:35

Danke. Du meinst anstelle der left und right boxes, oder.

eines muss dann wahrscheinlich float: right sein...

ArcVieh 13.04.2007 16:44

Zitat:

Zitat von sattelite12 (Beitrag 330335)
Danke. Du meinst anstelle der left und right boxes, oder.

eines muss dann wahrscheinlich float: right sein...

Wieso muss da etwas float:right sein? Würde ja heißen, dass eine Box rechts umfließt.

Code:

<div id="page">
<div id="content">
<div id="box_left">

<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>

<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
<p>hallo</p>
v
v
<p>hallo</p>
<p>hallo</p>
<p>hallo</p></div>
<div id="box_right"></div>

</div>
<div id="footer">Ich bin ein Footer</div>
</div>

Ich finde den Code etwas 'aufgebläht'. Mach doch das div#content weg und mach das so, wie in meinem erst-Post, ergibt einen schlankeren Code.

sattelite12 13.04.2007 16:55

Danke, ich versuchs mal...

schönes WE.


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:05 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023