Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

relative width für 3spaltiges tableless layout

Antwort erstellen

relative width für 3spaltiges tableless layout

Beitragvon herbun » 03.09.2009, 16:00

hi,

ich versuche gerade ein 3spaltiges layout zu machen, nur mit css natürlich. ;)

"eigentlich" ganz easy, ich habe einen div container der eine absolute breite hat, in dem habe ich 3 divs mit float:left. die width habe ich mit 20% für das linke und rechte, 60% für das mittlere div angegeben. soweit so gut... nur dass das rechte div immer in die nächste zeile springt.
vielleicht sollte ich hinzufügen dass das mittlere div links und rechts einen 1px border hat.
wenn ich die border herauslösche klappts mit den relativen width, ansonsten gehts nicht. wenn ich die width absolut angebe und die px der 2 borders in die kalkulation mit einbeziehe klappt es auch.
die frage ist jetzt, was mache ich falsch wenn ich relative width habe und borders? denkfehler?

und gleich noch eine zweite frage ;) wenn ich in den 3 divs jeweils padding angebe, funktioniert es auch nicht mehr. meine vermutung ist dass css / ie / ff keinen mix aus absoluten und relativen maßeinheiten will - aber dies hieße im endeffekt wenn ich borders verwenden will dass ich die width der divs immer absolut angeben muss?

wäre super wenn mich jemand aufklärt, ich habe bis jetzt nicht viel hilfreiches dazu gefunden!

lg
herbun
neu hier
 
Beiträge: 6
Registriert: 03.09.2009, 15:52
Nach oben

Re: relative width für 3spaltiges tableless layout

Beitragvon Laus » 03.09.2009, 16:11

Hallo

Das hängt alles mit dem Boxmodell zusammen nachzulesen hier.
Beachte dabei vor allem auch den abschnitt mit dem Doctype.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Re: relative width für 3spaltiges tableless layout

Beitragvon herbun » 03.09.2009, 16:24

hi Laus,

danke für den klasse link und die schnelle antwort!

ok, ich muss also padding, border und margin zur width zählen. ausgehend davon dass ich meine 3 divs mit relativer breite angeben will, sollte ich dann also ein weiteres div in jedem div haben, in dem ich dann den border angebe, habe ich das richtig verstanden?
der doctype ist richtig angegeben.

danke!
herbun
neu hier
 
Beiträge: 6
Registriert: 03.09.2009, 15:52
Nach oben

Re: relative width für 3spaltiges tableless layout

Beitragvon mysql » 03.09.2009, 18:16

Hallo herbun,

ch habe einen div container der eine absolute breite hat, in dem habe ich 3 divs mit float:left. die width habe ich mit 20% für das linke und rechte, 60% für das mittlere div angegeben.


die Frage ist: Warum soll dies so sein?

Verändert sich den deine linke bzw. rechte Seite in der Breite? Meistens ist es doch der Content der sich anpassen soll, also der mittlere Teil.

Grüße mysql
mysql
Gelegenheitsleser
 
Beiträge: 46
Registriert: 16.07.2007, 21:22
Nach oben

Re: relative width für 3spaltiges tableless layout

Beitragvon sejuma » 03.09.2009, 20:23

Pixel und Prozent sind unterschiedliche einheiten, die du nicht auf einen Nenner bringst.
Lass deshalb am besten für den mittleren Teil eine Breitenangabe ganz weg. Der nimmt sich dann automatisch den verfügbaren Platz.
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46
Nach oben

Re: relative width für 3spaltiges tableless layout

Beitragvon herbun » 04.09.2009, 12:24

danke für euere antworten!

@mysql:

das ist eine gute frage, ich denke ich habe keinen speziellen grund warum ich das relativ mache.
in diesem fall ist der container ja fixed und kein variabler container, d.h. die divs bleiben immer gleich von der breite her. ich wollte den contentbereich auch fix haben damit das layout des inhaltes des mittleren frames sich nicht ändert durch eine veränderte breite! da ich noch kaum erfahrung habe ist wohl nicht alles bewusst und gezielt gewählt ^^

du meinst also, ich sollte generell nur mit absoluten breitenangaben arbeiten?

@sejuma

danke für den tip, aber wenn ich für den mittleren div witdh ganz weg lasse, dann rutscht der rechte div nach unten... :( selbiges bei width:auto;

wie kriege ich es hin dass der mittlere div sich automatisch anpasst?

ich paste mal meinen code(achtung, hässlich, code wie ausgabe, aber ich will ja nur lernen :D ):

Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
p{text-align:justify;}
body{
background-color: orange;
}
  #container
{
width: 944px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#header
{
padding: .5em;
background-color: green;
border-bottom: 1px solid gray;
}

#header h1
{
padding: 0;
margin: 0;
}

#teaser
{
padding: .5em;
background-color: pink;
/*border-bottom: 1px solid gray;*/
}


#teaser h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 16%;
margin: 0;
/* padding: 1em;*/
background:blue;


}
#content
{
float: left;
/*border-left: 1px solid gray;
border-right: 1px solid gray;*/
width:auto;
/*padding: 1em;*/
}
#rightnav
{
float: right;
width: 16%;
margin: 0;
/* padding: 1em;*/
}


#footer
{
clear: both;
margin: 0;
color: #333;
background-color: #ddd;
/*border-top: 1px solid gray;*/
}
.inside {padding:10px;}
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
  </style>
  </head>
  <body>
<div id="container">
<div id="header">
<div class="inside">
<h1>Header</h1>
</div>
</div>
<div id="teaser">
<div class="inside">
<h1>Teaser</h1>
</div>
</div>
<div id="leftnav">
<div class="inside">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
</div>
<div id="content">
<div class="inside" style="border-left: 1px solid gray; border-right: 1px solid gray;"">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div id="rightnav">
<div class="inside">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
</div>

<div id="footer">
Footer
</div>
</div>
  </body>
</html>
herbun
neu hier
 
Beiträge: 6
Registriert: 03.09.2009, 15:52
Nach oben

Re: relative width für 3spaltiges tableless layout

Beitragvon herbun » 04.09.2009, 13:29

I found it out!

-> linker div float:left, rechter div loat:right, beiden widths zuweisen, content selbst kein float oder width, später im html teil den linken und rechten div VOR dem content deklarieren... voila.

http://de.selfhtml.org/css/layouts/mehr ... reispaltig

falls jemand die antwort will :)

danke für den input leute
herbun
neu hier
 
Beiträge: 6
Registriert: 03.09.2009, 15:52
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "relative width für 3spaltiges tableless layout"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: Exabot [Bot], Google [Bot] und 3 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de
cron