BlackBoard » Design, Programmierung & Entwicklung » Webdesign » mein div layout » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen
Neues Thema erstellen Antwort erstellen
Zum Ende der Seite springen mein div layout
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
Flux
Junior Member


images/avatars/avatar-2252.gif

Dabei seit: 24.08.2006
Beiträge: 169

mein div layout       Zum Anfang der Seite springen

Hi,

habe mich nun daran gemacht den Umgang mit CSS/Div Layouts zu erlernen.

Hierzu habe ich ein Layout mit header,linker- & rechter Navigation sowie einem content in der mitte. Die ganze seite soll zentriert dargestellt werden. so weit so gut:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
<!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" />
<title>mein erstes div layout</title>
<style type="text/css">
<!--
#header {
margin:auto;
width:700px;
height:150px;
background-color:#0099FF;
}
#maincontainer {
margin:auto;
width:700px;
}
#leftnav {
float:left;
width:150px;
background-color:#99CC33;
text-align:left;
}
#content {
float:left;
width:400px;
background-color:#999999;
text-align:center;
}
#rightnav {
float:left;
width:150px;
background-color:#99CC33;
text-align:right;
}

-->
</style>
</head>

<body>

<div id="header">HEADER</div>
<div id="maincontainer">
<div id="leftnav">LEFTNAV</div>
<div id="content">
CONTENT
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
CONTENT
</div>
<div id="rightnav"> RIGHTNAV
</div>
</div>

</body>
</html>



wie ihr seht habe ich mit ein paar br's den content höher gemacht als der rest (habe ja keine feste grösse angegeben). nun möchte ich, dass leftnav & rightnav automatisch die höhe von content haben. wie ist das realisierbar?

p.s. das ist mein erstes css/div layout, ist das soweit "ok" oder gibts grobe fehler?
13.08.2007 09:44 Flux ist offline E-Mail an Flux senden Homepage von Flux Beiträge von Flux suchen
phlox81 phlox81 ist männlich
Bote des Lichts und Moderator


images/avatars/avatar-2264.jpg

Dabei seit: 19.10.2002
Beiträge: 3.028
Herkunft: Irgendwo im Nirgendwo

      Zum Anfang der Seite springen

Schau dir mal diesen Artikel an:
http://www.css4you.de/wslayout1/index.html

Und für 3 spaltige Layouts:
http://www.css4you.de/wslayout1/ex0010.html

__________________
Intelligenz ist eine Illusion des Menschen

phlox81.de | codenode.de
13.08.2007 14:15 phlox81 ist offline E-Mail an phlox81 senden Homepage von phlox81 Beiträge von phlox81 suchen
Flux
Junior Member


images/avatars/avatar-2252.gif

Dabei seit: 24.08.2006
Beiträge: 169

Themenstarter Thema begonnen von Flux
      Zum Anfang der Seite springen

sehr hilfreich! danke
13.08.2007 14:51 Flux ist offline E-Mail an Flux senden Homepage von Flux Beiträge von Flux suchen
phoenix
Moderator


Dabei seit: 22.08.2003
Beiträge: 1.157

      Zum Anfang der Seite springen

Hi!

Soweit ich weiss, ist doch die Lösung zur Fragestellung nur mit Java-Script möglich, oder irre ich mich da?

Eine provisorische Lösung wäre:

Main-Container eine feste Größe "height: xxxpx;" geben und
Navigations-Containern "height: 100%;"
Content-Container "height: 100%;"

Nachteil: Feste div-Größe und divs sind immer komplett sichtbar, egal wieviel Inhalt.
13.08.2007 15:00 phoenix ist offline Beiträge von phoenix suchen
HeaD HeaD ist männlich
Hoffnungsloser Sozialfall in Behandlung bei Styx


images/avatars/avatar-2266.gif

Dabei seit: 31.08.2001
Beiträge: 4.142
Herkunft: Mama

      Zum Anfang der Seite springen

Bin grad net sicher, aber ich glaub diese Vorlage sieht so aus wie Du sie gern hättest.. in etwa...
http://intensivstation.ch/files/template...mplate-3-07.zip

__________________

13.08.2007 16:40 HeaD ist offline E-Mail an HeaD senden Homepage von HeaD Beiträge von HeaD suchen
Baumstruktur | Brettstruktur
Gehe zu:
Neues Thema erstellen Antwort erstellen
BlackBoard » Design, Programmierung & Entwicklung » Webdesign » mein div layout

Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH