Design mit DIV's

Suxxezz

Hallo Zusammen,
ich hoffe ihr könnt mir helfen.

Bisweilen habe ich Websites immer mit Frames aufgebaut, bin aber jetzt dazu über gegangen das ganze mit DIV's zu realisieren.
Dabei tauchen viele neue Probleme auf, vor allem im Unterschied zwischen IE und Firefox.

Folgendes, ich bastle gerade an einer Site die wie folgt aussehen soll:
Ein Design mit 1024px exakt auf die Mitte ausgerichtet, dazu natürlich links/rechts die benötigten Abstände.
Der mittige DIV hat:
- oben das Logo mit ca 200 Höhe
- dann folgt ein kleiner Trennbalken
- nun folgt ein Navigationsmenü das den nachfolgenden Content bei aufklappen überlappt
- nun folgt der Content Bereich
- zu guter letzt ein Bottom Balken mit Impressum usw.

Mein Problem nun ist, das der Content Bereich stehts die höhe des Inhalts halten soll, auch wenn das 3000 Zeichen sind.
Und nur dieser Content Bereich soll Scrollbar sein (u.u. auch noch der Bottom Balken mit).
Aber der Logobereich, der Balken und die Navi soll stehen bleiben.

Ich bekomme das nicht hin,
könnt ihr mir bitte weiter helfen.

MfG
Suxxezz

Gamling

Hmmm, ich könnte dich jetzt zutexten, aber vielleicht hilft dir schon das hier weiter:

http://www.gamling.kilu3.de/punkerz <= zufällig hat diese site von mir genau dein Design

css-code:

Code

body {
background-color:#000000;
font-size:13px;
}


h1{
text-align:center;
font-size:18px;
line-height:8px;
color:#ff2a00;
}


h2{
text-align:left;
font-size:16px;
line-height:8px;
}


h3{
font-size:15px;
line-height:0px;
}


b{
font-size:13px;
color:black;
}


#header {
border-left: black solid 1px;
border-right: black solid 1px;
border-top: black solid 1px;
background-image:url("../grafik/header/header.png");
width:798px;
height:118px;
margin-left:auto;
margin-right:auto;
}


#navigation {
border-top: black solid 1px;
height:35px;
width:800px;
margin-left:auto;
margin-right:auto;
}


#text {
height:360px;
max-height:360px;
margin-left:auto;
margin-right:auto;
width:798px;
background-color:#ae0e0e;
border-left: black solid 1px;
border-right: black solid 1px;
border-top: black solid 1px;
color:black;
font-family:arial;
}


#textinnen {
height:360px;
max-height:360px;
margin-left:auto;
margin-right:auto;
overflow:auto;
width:768px;
max-width:768px;
background-color:#ae0e0e;
color:black;
font-family:arial;
}


#textfriends {
height:360px;
max-height:360px;
margin-left:auto;
margin-right:auto;
overflow:auto;
width:768px;
max-width:768px;
background-color:#ae0e0e;
color:black;
font-family:arial;
}




#textguestbook {
height:360px;
max-height:360px;
margin-left:auto;
margin-right:auto;
overflow:auto;
width:768px;
max-width:768px;
background-color:#ae0e0e;
color:black;
font-family:arial;
}


#footer{
height:19px;
width:798px;
background-color:#530000;
margin-left:auto;
margin-right:auto;
border: black solid 1px;
font-family:arial;
color:#ac0e0e;
text-align:center;
}


img {
margin-left:0px;
margin-right:0px;
padding-left:0px;
padding-right:0px;
border:none;
}


#footer a{
color:#ac0e0e;
text-decoration:none;
}


#textfriends p{
width:45%;
padding:5px;
color:#ae0e0e;
border: 1px solid #ff2a00;
background-color:#530000;
text-align:left;
}


#textguestbook p{
width:70%;
padding:5px;
color:#ae0e0e;
border: 1px solid #ff2a00;
background-color:#530000;
text-align:left;
margin-left:auto;
margin-right:auto;
}


strong {
color:#ff2a00;
font-size:14px;
}


#footer a:hover{
text-decoration:underline;
}


#textinnen a{
color:black;
font-size:16px;
text-decoration:none;
}


#textinnen a:hover{
color:black;
text-decoration:underline;
}


#textfriends a{
color:black;
font-size:16px;
text-decoration:none;
}


#textfriends a:hover{
color:black;
text-decoration:underline;
}


#textguestbook a{
color:black;
font-size:16px;
text-decoration:none;
}


#textguestbook a:hover{
color:black;
text-decoration:underline;
}

Alles anzeigen

Ich hoffe das hilft dir. Wenn du das nicht verstehst, nochmal fragen, dann texte ich doch

Gamling

Suxxezz

Hey super, genau so.
Und kann man das jetzt auch machen das der mittelere Bereich sich immer an der Menge des Inhaltes dehnt? Bedeutet, Header und Navi bleiben stehen, und der volle Text wird immer angezeigt und nur was den Browserbereich überschreitet wird scrollbar.
Der Scrollbalken tauch ja jetzt auf weil der DIV auf z.B. 400px in der Höhe fest ist. Kann man diesen Bereich auch dynamisch dehnen?

Nochmals vielen Dank für deine schnelle Antwort.

Gamling

Jap, kann man, einfach gar keine höhe Angeben, und overflow auch ganz weglassen. Dann ist der div einfach so groß wie er sein muss.

Gamling

des-man

moin gamling,
sach ma kannst auch noch ma dein html-code der Startseite von deiner Page posten???
Ich hab genau den selben Aufbau wie deine, aber meine funktioniert irgentwie nicht richtig, da sich irgentwie immer noch Teile verschieben etc...!
Dann kann ich das ma mit meinem vergleichen und die Fehler beheben
(schick mir das notfalls als private Nachricht, falls du nich willst, das den alle kopieren können )

desman

Gamling

Startseite welcher Page?

Gamling

die du oben gepostet hattest...

(hab grad keine lust mich einzuloggen )

desman

Gamling

Dir ist aber schon klar, dass in meinem Post die Adresse steht??

Gamling

ja is mir klar...ich dachte nur wegen copyright und so

Gamling

Mit anderen Worten du willst es kopieren. Naja dich bringt das nicht weiter und wegen diesem Thread weiß jeder, dass es von mir ist, aber wenn du meinst, ist mir eigentlich egal.

Gamling

des-man

nein...ich will das nich kopieren...vergiss es einfach, habs nur gebraucht, weil das bei mir mit den <div> nich funktioniert hat...so wie ich wollte
...dachte du hättest das besser gemacht als ich...habs aber quasi genau so!

Also keine Sorge!

Tags