• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3 Spalten Layout

axöööl

Neues Mitglied
Hallo,

ich wollte das Layout meiner nächsten Website mit css bewerkstelligen (da überall gesgat wird Tabellen sind nicht zu Layouten da...)

Das sollte dann so aussehen

attachment.php


tut es aber leider nicht ...

index.html:

Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<link rel="shortcut icon" href="">
</head>

<body>
<div id="cont">
<div id="top">
</div>
<div id="mid_left"></div>
<div id="mid_mid"></div>
<div id="mid_right"></div>
</div>
<div id="bottom"></div>
</div>
</body>
</html>

basic.css:

Code:
body{                
                 background-color:#666666;
                 margin:0px 0px 0px 0px;
                 padding:0px 0px 0px 0px;
                 }

#top{
                 position: relative;
                 top: 0px;
                 width: 974px;
                 height: 30px;
                 margin:0px auto 0px auto;
                 background-color:ffffff;
                 }
    
#cont{
                 position: relative;
                 width: 974px;
                 height: auto;
                 margin:0px auto 0px auto;
                 background-color:ffffff;
                 }
                              
#mid_left{
                 position: relative;
                 width: 170px;
                 min-height: 500px;
                 margin:0px 0px 0px 0px;
                 padding:0px 0px 0px 0px;
                 background-color:ffffff;
                 border: 1px dotted;
                 border-color:#FF0000;
                 float:left;
                 }

#mid_mid{
                 position: relative;
                 width: 500px;
                 min-height: 500px;
                 margin:0px 0px 0px 0px;
                 padding:5px 10px 5px 10px;
                 background-color:ffffff; 
                 border: 1px dotted;
                 border-color:e2001a;
                 float:left;
                 }
                 
#mid_right{
                 position: relative;
                 width: 274px;
                 min-height: 500px;
                 margin:0px 0px 0px 0px;
                 padding:0px 0px 0px 0px;
                 background-color:ffffff;
                 border: 1px dotted;
                 border-color:e2001a;
                 float:left;
                 }
                 
#bottom{         position: relative;
                 bottom: 0px;
                 width: 974px;
                 height: 72px;
                 margin:0px auto 0px auto;
                 background-color:ffffff;
                 clear:both;
                 }
 

Anhänge

  • layout.JPG
    layout.JPG
    18,8 KB · Aufrufe: 64
Werbung:
Hallo.

Wenn du deinem #mid_mid die selben Angaben gibst die du in deiner Grafik hast dann sieht das schon viel besser aus.
Ausserdem hast du in deiner index.html ein div mehr geschlossen als geöffnet.

Gruss
Elroy
 
"position: relative;" kannst du überall löschen, da überflüssig.
Vor dem Schließen von #cont soltest du noch clearen.
 
Werbung:
Hier hab ich das gemacht:

http://103098.webtest.goneo.de/test/index.html

die css datei: http://103098.webtest.goneo.de/test/css/basic.css

nur das verrutsch trotzdem immer...

die rechnung sollte doch richtig sein, oder??

974px breite der seite (#cont)
- 170px mid_left
- 524px mid_mid (der berich ist in der angezeigten version sogar nur 522px)
- 274px mid_right
_______________
= 6px
- 6px border im mittleren bereich mid_left mid_mid mid_right (jeweils 2)
_______________
=0px

also müssten die drei mittleren elemente nebeneinander passen, oder etwa nicht??
 
das ist doch der innenabstand..wieso wird der denn darein gerechnet? bei margin würde ich das verstehten, genauso wie der border, aber der innen abstand...das ist doch total bescheuert...und unlogisch

aber danke. ich versuchs dann nochmal.
 
Werbung:
das ist doch der innenabstand..wieso wird der denn darein gerechnet? bei margin würde ich das verstehten, genauso wie der border, aber der innen abstand...das ist doch total bescheuert...und unlogisch

aber danke. ich versuchs dann nochmal.


Hallo.
Also ich finde deine Auszeichnung total unlogisch. Was willst du denn mit dem padding erreichen.
Wenn ich mir deine Grafik anschaue sehe ich keinen Grund warum da überhaupt ein padding gesetzt wird.
CCS4YOU: lies dir bitte mal durch was padding bewirkt uns korrigiere dann deinen Code.

Gruss
Elroy
 
Zurück
Oben