Es hängt generell an allem. Ich habe ien geeignetes Tutorial gefunden, das mir ein bisschen auf die Sprünge geholfen hat. Es fehlt aber noch einiges..
Hier aber das wichtigste (ich weiß ich bin pingelig
) :
-das die Ecken rund sind.
-das die Einträge im horizontalen Menü linksbündig sind.
-das die Einträge im Vertikalen Menü linksbündig sind.
-das die Überschriften im Textteil linksbündig sind.
-das der text im Textteil linksbündig ist, aber mit einem
zum Menü.
-das der ganze "Container" weiter in der Mitte liegt.
-wie kann ich so ein bild machen wie im Header ? Also das
ausbleicht.
Ich weiß das das alles nur "Kleinigkeiten" sind, doch ich will es einmal richtig haben. Die werte der CSS-eigenschaften kann ich einstellen, ich brauche nur die Codes und die Stelle wo sie reinmüssen.
Das ganze bezieht sich nicht mehr auf die Zeichnungen.
Ich poste nochmal die Codes der CSS und der HTML Dateien.
zuerst die HTML Datei:
Warnung: Spoiler!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Mckbrother</title>
<link rel="stylesheet" href="stylesheet1.css" media="screen">
<link rel="stylesheet" href="stylesheet2.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
</head>
<body>
<div id="container">
<div id="header" title="Mckbrother">
<div id="skipmenu"><a href="http://www.google.de/" target=_blank>Link</a></div>
<h1>Mckbrother</h1>
</div>
<div id="mainnav">
<ul>
<li><a href="#">Auswahl1</a></li>
<li><a href="#">Auswahl2</a></li>
<li><a href="#">Auswahl3</a></li>
<li><a href="#">Auswahl4</a></li>
</ul>
</div>
<div id="menu">
<h3>Menu1</h3>
<ul>
<li><a href="#">Auswahl1</a></li>
<li><a href="#">Auswahl2</a></li>
<li><a href="#">Auswahl3</a></li>
<li><a href="#">Auswahl4</a></li>
<li><a href="#">Auswahl5</a></li>
</ul>
<h3>Menu2</h3>
<ul>
<li><a href="#">Auswahl1</a></li>
<li><a href="#">Auswahl2</a></li>
<li><a href="#">Auswahl3</a></li>
<li><a href="#">Auswahl4</a></li>
</ul>
</div>
<div id="contents">
<div class="blogentry">
<h2><a href="#" title="Permanent link to this item">Überschrift1</a></h2>
<h3>Überschrift2</h3>
<p>
<img class="imagefloat" src="flower.jpg" alt="" width="100" height="100" border="0">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Duis autem vel eum</a> iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#" title="Category">Link3</a></li>
</ul>
</div>
</div>
<div id="footer">
Copyright © Mckbrother 2010
</div>
</div>
</body>
</html>
Hier die erste CSS Datei:
Warnung: Spoiler! body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #333;
background-color: #d3d3d3;
background-image: url(bgimg.gif);
}
a:link { color: #32cd32; }
a:visited { color: #696969; }
a:hover, a:active
{
color: #fff;
background-color: #6b8e23;
}
h2
{
color: #6b8e23;
font: 120% arial, times, "times new roman", serif;
font-weight: bold;
margin: 0 0 2px 0;
}
h2 a { text-decoration: none; }
h3
{
color: #696969;
font: 106% georgia, times, "times new roman", serif;
font-weight: bold;
margin-top: 0;
}
#container
{
margin: 1em auto;
width: 650px;
text-align: right;
background-color: #dddddd;
border: 1px none #696969;
}
#header
{
height: 45px;
width: 100%;
background-image: url(header.jpg);
background-repeat: no-repeat;
background-position: 0 0;
border-bottom: 1px solid #696969;
position: relative;
border: 1px none #696969;
border-bottom: 1px solid #696969;
}
#header h1
{
font-size: 1px;
text-align: right;
color: #d3d3d3;
margin: 0;
padding: 0;
}
#mainnav ul { list-style-type: none; }
#mainnav li { display: inline; }
#menu
{
float: left;
width: 165px;
border-right: 1px solid #6b8e23;
padding-right: 10px;
}
#contents { margin: 20px 20px 40px 200px; }
#contents p { line-height: 165%; }
.blogentry { border-bottom: 1px solid #6b8e23; }
.imagefloat { float: right; }
#footer
{
clear: both;
color: #696969;
text-align: right;
font-size: 90%;
}
#skipmenu
{
position: absolute;
left: 0;
top: 5px;
width: 645px;
text-align: right;
}
#skipmenu a
{
color: #696969;
text-decoration: none;
}
#skipmenu a:hover
{
color: #696969;
background-color: #d3d3d3;
text-decoration: none;
}
und hier die zweite:
Warnung: Spoiler! #container
{
border: 1px solid #696969;
}
#mainnav
{
background-color: #32cd32;
color: #272900;
padding: 2px 0;
margin-bottom: 22px;
}
#mainnav ul
{
margin: 0 0 0 20px;
padding: 0;
list-style-type: none;
border-left: 1px solid #d3d3d3;
}
#mainnav li
{
display: inline;
padding: 0 10px;
border-right: 1px solid #d3d3d3;
}
#mainnav li a
{
text-decoration: none;
color:#696969;
}
#mainnav li a:hover
{
text-decoration: none;
color: #d3d3d3;
background-color: #6b8e23;
}
#menu ul
{
margin-right: 0;
padding-right: 0;
list-style-type: none;
line-height: 165%;
}
.imagefloat
{
padding: 2px;
border: 1px solid #32cd32;
margin: 0 0 10px 10px;
}
.blogentry ul
{
list-style-type: none;
text-align: right;
margin: 0em 0;
padding: 0;
font-size: 95%;
}
.blogentry li
{
display: inline;
padding: 0 0 0 15px;
}
#footer
{
background-color: #32cd32;
padding: 5px;
font-size: 90%;
}
Danke schonmal für alles
MFG Mckbrother
Und hier noch das Header bild:
Forum
. Das Grundlegende beherrsche ich aber eine ganze Seite kann ich noch nicht.
