Ich bin dabei meine Seite vom Tabellenlayout umzustellen auf float-Elemente.
Habe da nun aber zwei verschiedene Möglichkeiten gefunden, aber wie richtig oder doch zweigleisig?
Okay, die Seite ist zentriert, aber wieso ist im linken Bereich die Farbe vom Hintergrund mit Weiss überlagert?
Und wie kann ich das Weiss des Rahmens einfärben?
Falls meine Fragen Euch trivial vorkommen, helft mir bitte trotzdem bitte weiter. Und ich hoffe, mein Einbinden vom "Code" hat klappt.
Vielen Dank für Eure Kommentare!
LG der fou
Habe da nun aber zwei verschiedene Möglichkeiten gefunden, aber wie richtig oder doch zweigleisig?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Codin' - Muster-XHTML-Seite</title>
<link type="text/css" href="css/codin_styles.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div id="content" align="left">
<h1>Meine Websites</h1>
<p>Hier steht dann irgendwann hoffentlich was Vernünftiges.</p>
<p>Man kann hier natürlich ewig weiterschreiben und andere arbeiten hier dann
gerne auch mit blindtext, aber dafür bin ich mir zu unkreativ. Aber eigentlich
bin ich doch kreativ, vorallem was schwaffeln betrifft.</p>
<ul>
<li><a href="#">Ein Link</a> - hier soll natürlich was stehen</li>
<li><a href="#">Einweiterer Link</a> - auch hier soll was stehen</li>
</ul>
<p>Lernen Sie die Grundlagen der Erstellung dynamischer Websites mit <em>Coding'
for the Web</em>, dem Buch von Charles WY ke.Smith, erschienen bei Addision-Wesley.
Vergessen Sie nicht, sich in die <a href="#">Mailingliste einzutragen</a>!
</div><!-- Ende von content -->
</div><!-- Ende des wrapper-div -->
</body>
</html>
HTML:
* {margin:0; padding:0;}
body {
margin:20px;
font-family:Geneva, Arial, Helvetia, sans-serif;
}
div {}
#header {
width:712px;
height:72px;
}
#wrapper {
width:800px;
margin: 0 auto;
text-align:left;
float:center;
background-color:#EEEEEE;
}
#navigation {
width:150px;
float:left;
margin:20px 6px 40px 10px;
background-color:#067EC5;
font-family: Verdanan, Arial, Helvetia, sans-serif;
font-size:.8em;
}
#naviagtion ul {
margin:12px 10px;
border-top:1px dotted #999966
}
#navigation li {
list-style-type:none;
border-bottom:1px dotted #999966;
}
#navigation a {
display:block;
padding:3px 10px;
color:#000;
text-decoration:none;
}
#navigation a:hover {
color:#000;
text-decoration:underline;
background-color:#CEF0FC;
}
#content {
width:594px;
padding:1em 20px;
float:right;
font-size:.75em;
background-color:#EEEEEE;
}
#content h1 {
margin-top:2px;
color:#067EC5;
}
#content ul {
margin:1em 20px
}
#content li {
list-style-type:none;
margin:0 0 .5em 0;
}
#content a {
color:#1A78BE;
}
#content a:hover {
text-decoration:none;
}Und wie kann ich das Weiss des Rahmens einfärben?
Falls meine Fragen Euch trivial vorkommen, helft mir bitte trotzdem bitte weiter. Und ich hoffe, mein Einbinden vom "Code" hat klappt.
Vielen Dank für Eure Kommentare!
LG der fou
Zuletzt bearbeitet:
