XHTMLforum - Einzelnen Beitrag anzeigen

insanic! · #1 (**permalink**) 13.11.2005, 12: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]