3 Spalten Layout!

insanic! · #1 (**permalink**) 13.11.2005, 13:22

Hallo,

das erste mal, dass ich was per CSS mache!
Nur so als Test, wie findet Ihr das:

HTML:

Zitat:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Mein HTML und CSS Test!</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="3sp_style.css" type="text/css" />
</head>
<body>

<div id="header">

WILLKOMMEN ZUM TEST!
</p>
</div>

<div id="menu">

Bill Gates ist der reichste Mann der Welt. Er gründete mit Microsoft das Symbol des
Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden. </p>
</div>

<div id="right">

Bill Gates ist der reichste Mann der Welt. Er gründete mit Microsoft das Symbol des
Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden.
Doch es wäre schade, es heute nur bei der Kurzfassung dieser 50 Lebensjahre zu belassen.
Link! Bill Gates ist der reichste Mann der Welt. Er gründete mit
Microsoft das Symbol des Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden.
Doch es wäre schade, es heute nur bei der Kurzfassung dieser 50 Lebensjahre zu belassen.</p>
</div>

<div id="content">
<div class="news">
[img]img/q3_logo_6.gif[/img]
Bill Gates ist der reichste Mann der Welt. Er gründete mit Microsoft das Symbol des
Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden.
[img]img/tutlogo.gif[/img]
Doch es wäre schade, es heute nur bei der Kurzfassung dieser 50 Lebensjahre zu belassen.
Link! Bill Gates ist der reichste Mann der Welt. Er gründete mit
Microsoft das Symbol des Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden.
Doch es wäre schade, es heute nur bei der Kurzfassung dieser 50 Lebensjahre zu belassen.

Einführung
Weiterführung
Abschluss

Link!
<p class="news_border">
Written on 27. Juli 2005!
</p>
</div>

<div class="news">
[img]img/q3_logo_6.gif[/img]

Bill Gates ist der reichste Mann der Welt. Er gründete mit Microsoft das Symbol des
Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden.
Doch es wäre schade, es heute nur bei der Kurzfassung dieser 50 Lebensjahre zu belassen.
Link! Bill Gates ist der reichste Mann der Welt. Er gründete mit
Microsoft das Symbol des Informationszeitalters. Heute wird er 50 Jahre alt.
Die Kurzversion dieses Lebens ist im Grunde schnell erzählt: Schule geschafft,
Studium abgebrochen, Firma gegründet, MS-DOS erfunden, Milliardär geworden.
Doch es wäre schade, es heute nur bei der Kurzfassung dieser 50 Lebensjahre zu belassen.
Link!
<p class="news_border">
Written on 27. Juli 2005!
</p>
</div>
</div>

<div id="footer">

FOOTER erscheint hier!
</p>
</div>

</body>
</html>

CSS:

Zitat:

/*######
* Body
##############*/
body {
font-family: Verdana;
font-size: 12px;
line-height: 1.7em;
letter-spacing: 0;
text-align: left;
word-spacing: 0.2em;
text-decoration: none;
color: #444;
background-color: #fff;
}
/*######
* Links
##############*/
a:link {
color:#0000ff;
}
a:visited {
color:#dddddd;
}
a:hover {
color:#ff0000;
}
a:active {
color:#ff0000;
}

/*######
* Menu
##############*/
#menu {
width: 200px;
float: left;
display: block;
border: 1px solid #c3c3c3;
padding: 3px;
}

/*######
* RightMenu
##############*/
#right {
border: 1px solid #c3c3c3;
width: 200px;
float: right;
display: block;
padding: 3px;
}

/*######
* Header
* ############# */
#header p {
display: inline;
font-weight: bold;
font-size: 18px;
}

#header {
width: 100%;
text-align: center;
border-bottom: 1px dashed #ccccfa;
margin-bottom: 30px;
padding: 3px;
}

/* #####
* Footer
* ############*/
#footer {
width: 100%;
border-top: 1px solid #ccccfa;
margin-top: 20px;
text-align: center;
}
#footer p {
display: inline;
padding: 3px;

}

/*######
* News
##############*/
#content {
margin: auto;
width: 480px;
}
#content .news {
margin: auto;
width: 450px;
padding: 1px;
margin-bottom: 20px;
vertical-align: center;
}
#content .news_border {
font-style: italic;
font-size: 11px;
text-align: right;
border-top: 1px dashed #cccccc;
}
#content img.newspic {
border: 1px solid #bbbbbb;
padding: 2px;
float: left;
display: block;
margin-right: 12px;
}

Was ist überflüssig? Was ist sinnlos? Was ist schlicht und ergreifend dumm oder falsch?

Live: http://home.arcor.de/nsane11/web/3co...tenlayout.html
Validator: Klick

Andere Frage:
Was bedeuten die einzelnen DOCTYPE's, und welchen sollte man verwenden? SOrry dass ich frage, ich habe schon Threads hier im Forum gelesen, werde aber nicht richtig schlau

Danke
MFG
Björn[/quote]

Tigereye · #2 (**permalink**) 13.11.2005, 14:11

Also, was mir spomtan auffällt:

Zitat:

<div id="header">

WILLKOMMEN ZUM TEST!
</p>
</div>

Dafür gibts Überschriften!

Code:

<h1>
WILLKOMMEN ZUM TEST!
</h1>

, wobei du h1 im CSS so definierst wie #header!

Zitat:

[img]img/tutlogo.gif[/img]

Wenn das für die meisten Bilder, die bei den News vorkommen, gelten soll, könntest du das auch ohne die Klasse "newspic" machen:

Code:

.news img {...;}

Ansonsten siehts recht sauber aus. Du hast zwar fast etwas viele Divs, aber ich wüsste jetzt auch nicht, wie man da was ersetzen könnte.

insanic! · #3 (**permalink**) 13.11.2005, 14:22

ok danke

mimii · #4 (**permalink**) 14.11.2005, 12:15

Hi Björn,

aufgefallen ist mir im berühmten IE, dass unten auch Rollbalken erscheinen, obwohl eigentlich nur die seitlichen gebraucht werden.

Gruß mimii

insanic! · #5 (**permalink**) 14.11.2005, 15:27

ah stimmt ... seltsam! weiß jmd, wie ich das eventuell beheben kann?

eine weitere frage habe ich:
wenn man den browser resized (also kleiner macht), dann schiebt sich der text-newstext unter das linke menü. kann man es irgendwie machen, dass der test-newstext sich einfach nur verschmälert, aber nie unter das menü rutscht?
danke!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Zwei Spalten Layout unterschiedlich scrollbar	MrMacStripe	CSS	1	09.11.2013 20:00
2 Spalten Layout INKL. 1 Spalten Layout	miedsegadse	CSS	20	14.04.2011 01:02
Layout: 2 Spalten gleich langer Höhe	Boof	CSS	1	05.03.2010 11:50
3 Spalten fixed width css layout	sharepointkb	CSS	9	28.02.2010 21:00
3 Spalten Layout, mal anders	Sushimeister	CSS	2	05.03.2007 12:15