Hallo zusammen,
ich brauche eure Hilfe. Ich erstelle momentan eine Website mit einem CSS Skript. Hierbei sind nun die Navigationsleiste und der Text zentriert. Ich weiß auch nicht, wie ich die Navigationsleiste linksbündig ausrichten soll und den Text im Hauptfenster ausrichten soll. Kann mir jemand vielleicht helfen?
Vielen Dank
Dominik
CSS-Skript:
/* CSS-Layout */
.container { width: 990px; }
.span-24 {width: 950px;}
.span-25 { width: 990px; margin: 0; }
.append-24 { padding-right: 960px; }
.prepend-26 padding-left: 960px; }
h1 { font-size: 2em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 1.5em; margin-bottom: 0.75em; }
h3 { font-size: 1.4em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.3em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1.2em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1.1em; font-weight: bold; }
em {
background-color:transparent !important;
}
/* IE6 hack */
* html .span-12 {
w\idth:400px;
}
/* -------------------------------------- */
/* grid activation */
/* .container { background: url('../blueprint/lib/grid.png'); } */
body {
height: 780px;
text-align:center;
background-image:url('../bg.jpg');
}
#container {
background-color:#FFFFFF;
width:990px;
height: 770px;
padding:0.2em;border:5px solid #444;
color:#000066;
}
#logo {
background-color:#FFFFFF;
height: 100px;
text-align:left;
}
#header {
}
#mainnav{
list-style-type:none;
background-color:#FFFFFF;
text-align:left;
margin-top:0px;
font-family: "Arial Narrow";
font-size: 0.75em;
font-style: inherit;
font-variant:normal;
font-weight:bold;
line-height:110%;
text-decoration:none;
}
ul #Navigation {
width: 15em;
margin-left: 2em; padding: 0;
}
ul#Navigation li {
list-style: none; width:100px;
margin: 0; padding: 0.5em; text-decoration:none;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: navy;
}
ul#Navigation a:visited {
color: navy;
}
ul#Navigation a:hover {
color: #0000FF;
}
ul#Navigation a:active {
color:#000066;
}
#Maincontent { padding:0; }
Index:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Stylesheets/index.css" />
<style type="text/css">
.style1 {
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<br/>
<img alt="Logo" src="logo.jpg" width="990" height="75" />
</div>
<div id="header">
<img alt="Header" src="header.jpg" width="990" height="75" />
</div>
<div id="mainnav" class="faux column span-3 prepend-1" style="width: 152px; height: 188px" align="left">
<ul id="Navigation" class="style1">
<li><a href="d0066.htm" class="style1">Home</a></li>
<li><a href="Danke.htm" class="style1">Über uns</a></li>
<li><a href="Dophaus.htm" class="style1">Ein- /
Zweifamilienhäuser</a></li>
<li><a href="e0132.htm" class="style1">Doppelhaushälften /
Reihenhäuser</a></li>
<li><a href="e0132.htm" class="style1">Mehrfamilienhäuser</a></li>
<li><a href="e0132.htm" class="style1">Gewerbeobjekte</a></li>
<li style="width: 100px"><a href="e0132.htm" class="style1">
Eigentums-wohnungen</a></li>
<li><a href="e0132.htm" class="style1">Grundstücke</a></li>
<li><a href="e0132.htm" class="style1">Kontakt</a></li>
<li><a href="e0132.htm" class="style1">Impressum</a></li>
</ul>
</div>
<div id="Maincontent" class="style1 column span-12">
<p class="style1">Herzlich Willkommen auf der Website von ...</p>
</div>
</div>
</body>
</html>