wenn ich den wrapper jetzt so definiere
ist er dann (da ich ja nichts bzgl. höhe angebe) in der höhe automatisch flexibel, oder muss ich ihm das sagen?
lg
EDIT:
Habs jetzt mal soweit hinbekommen und schon fast alles was ich will
Hab nur noch ein positionsproblem mit dem footer. falls ichs alleine nicht pack meld mich mich wieder
Vielen dank mal für die nette und schnelle hilfe hier.
lg
EDIT2 ich kriegs nicht hin, 2 probleme
1. ich kann den div - unternavi nicht dahin positionieren wo er sein soll (sollte wie der name sagt unter dem navi div sein, da da vl. eine grafik hin sollte)
2. ich kann den div - footer nicht dahin positionieren wo er sein sollte ( sollte ganz unten im contaier div sein, so das das grüne rechteckt unten anliegt bzw. die 4 px abstand hat und der text darunter sollte schon draußen sein, also ca. 2cm weiter runter.
derzeit schauts so aus und ich kriegs nicht hin
[Blockierte Grafik: http://j.imagehost.org/0720/probleme.jpg]
Meine code sieht so aus.
HTML:
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- #BeginEditable "doctitle" -->
<title></title>
<!-- #EndEditable -->
<link href="styles/style1.css" media="screen" rel="stylesheet" title="CSS" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<!-- Begin Container -->
<div id="container">
<!-- Begin Masthead -->
<div id="header">
<h1> MR </h1>
<h3>Fam.</h3>
</div>
<!-- End Masthead -->
<!-- Begin Navigation -->
<div id="navigation">
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="anschrift/anschrift.htm">Anschrift</a></li>
<li><a href="anfahrt/anfahrt.htm">Anfahrt</a></li>
<li><a href="kontakt/kontakt.htm">Kontakt</a></li>
<li><a href="hengste/hengste.htm">Hengste</a></li>
<li><a href="stuten/stuten.htm">Stuten</a></li>
<li><a href="fohlen/fohlen.htm">Fohlen</a></li>
<li><a href="galerie/galerie.htm">Galerie</a></li>
</ul>
</div>
<!-- End Navigation -->
<!-- Begin Content -->
<div id="content">
<!-- #BeginEditable "content" -->
<h2>Heading 2</h2>
<p>insert content here</p>
<!-- #EndEditable "content" -->
<!-- End Content -->
<!-- Begin Footer -->
<p> </p>
</div>
<div id="unternavi">
unternavi</div>
<div id="footer">
MR | Adresse | Mail
</div>
<div id="unterfooter">
<a href="default.html">Home</a> |
<a href="anschrift/anschrift.htm">Anschrift</a> |
<a href="anfahrt/anfahrt.htm">Anfahrt</a> |
<a href="kontakt/kontakt.htm">Kontakt</a> |
<a href="hengste/hengste.htm">Hengste</a> |
<a href="stuten/stuten.htm">Stuten</a> |
<a href="fohlen/fohlen.htm">Fohlen</a> |
<a href="galerie/galerie.htm">Galerie</a>
</div>
<!-- End Footer --></div>
<!-- End Container -->
</body>
</html>
Alles anzeigen
und CSS
@import url("layout.css");
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-image: url("../images/background.gif");
background-repeat: repeat;
background-attachment: scroll;
}
#container {
width: 950px;
background-color:#CCCCCC;
margin: 15px auto;
padding: 4px;
border: medium;
border-color:#CC9900;
}
#header {
text-align: center;
height:150px;
background-color: #02B57A;
background-image:none;
}
#navigation {
float: left;
width: 125px;
height:255px;
margin-top: 0px;
margin-bottom: 0px;
}
#unternavi {
float:left;
width: 125px;
margin-top: 0px;
margin-bottom: 0px;
}
#content {
width:807px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
float:right;
}
#footer {
text-align: center;
background-color: #02B57A;
width: 942px;
height:35px;
font-family:"Traditional Arabic";
font-size:small;
color:black;
}
#unterfooter {
text-align: center;
width: 942px;
height:35px;
font-family:"French Script MT";
font-size:large;
color:#CC9900;
}
/* Masthead Styles */
#header h1 {
color: #C48B06;
font-family:"Kunstler Script";
font-size:80px;
font-weight:bolder;
}
#header h3 {
color: black;
font-family:"Kunstler Script";
font-size:35px;
font-weight:bold;
}
/* Navigation Styles */
#navigation ul {
list-style-type: none;
display: block;
margin: 0;
padding: 0;
}
#navigation li {
display: block;
margin: 0;
padding: 0;
background-color:#CC9900;
}
#navigation a {
height:20px;
color:black;
text-decoration:none;
display: block;
padding: 5px;
background-color: #CC9900;
border: 1px dotted #02B57A;
font-family:"French Script MT";
font-size:large;
}
#navigation a:hover {
color: #402640;
text-decoration: none;
background-color: #02B57A;
}
/* Content Styles */
#content h1,h2,h3,h4,h5,h6 {
color: #503750;
}
#content img {
padding: 5px;
}
/* Footer Styles */
#footer p {
color: #808080;
}
#footer a {
color: #503750;
text-decoration: underline;
}
#footer a:hover {
color: #402640;
text-decoration: none;
}
a {
color: #402640;
text-decoration: underline;
}
a:hover {
color: #dfb8df;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}
Alles anzeigen
Das gibts ja garnicht