Moin Leuts,
der eine oder andere von euch kennt bestimmt ja schon mein Designansatz (gelle Boris...)
Bin jetzt nach mehreren Versuchen auch zu CSS über gegangen und hab momentan das Problem, dass FF und Opera die Seite richtig darstellen, IE hingegen nicht.
Bin ja nun wirklich noch ein Anfängerchen was CSS angeht, aber vielleicht könnt ihr mich einen Tipp geben.
Habe jetzt schonmal gemerkt, dass es scheinbar ein Problem mit der Größe der 3 Spalten in der Mitte zu sein scheint.
Sprich, mache ich die rechte der 3 Spalten um 2px kleiner, passt es im IE, aber Opera und FF zeigen dann entsprechend ein Verschiebung des Bilds an.
Noch ein Hinweis, es handelt sich nach wie vor eher momentan um Versuche, dass ich in der Praxis besser damit zu recht komme. Der letzte Entwurf ist dies sicherlich nicht.
Nochwas, ich hab versucht das ganze weitestgehend ohne Positionsangaben mit float zu machen, aber an manchen Stellen gehts wohl wirklich nicht anders
Generell wäre daher auch für mich nochmal interessant zu wissen, ob ich so von der Struktur her auf dem richtigen Weg bin.
So, hier erstmal die Seite...
klick
Und hier der Code:
CSS-Stylesheet
Code:
/* Seite für Lifestyle nails and more - neu */
body {
margin: 0 0 0 0 ;
padding: 0 0 0 0 ;
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: #EAEEF9;
}
#complete {
margin:20px auto;
width:780px;
height:800px;
background-color:#CCFFFF
}
#header {
width: 780px;
height:188px;
background-image: url(../bilder/header.jpg);
background-repeat:no-repeat;
}
#logo {
position: relative;
left: 320px;
top: 20px;
}
#background_navi {
width: 780px;
height: 27px;
background-image: url(../bilder/background_header.gif);
background-repeat:repeat-y;
}
#background_navi_pseudo {
width: 194px;
height: 27px;
float:left
}
#left {
width: 194px;
height: 585;
background-color:#D0DEF8;
float: left;
}
#box_top {
position: relative;
left: 10px;
margin-top: -15px;
width: 171px;
height: 110px;
border-bottom: 4px solid #EAEEF9;
background-color:#FFFFFF;
}
#box {
position: relative;
left: 10px;
width: 171px;
height: 110px;
border-bottom: 4px solid #EAEEF9;
background-color:#FFFFFF;
}
#middle {
width: 392px;
height: 585px;
background-image: url(../bilder/background_mitte.jpg);
background-repeat:repeat;float: left;
}
#right {
width: 194px;
height: 585px;
background-color:#D0DEF8;
float: left;
}
/* 2.4) Navigation */
#navcontainer {
height: 27px;
background-image:url(../bilder/background_header.gif);
}
#navcontainer ul {
position: relative;
top: 5px;
left: 2px;
margin: 0px;
text-align: center;
}
#navcontainer ul li {
display: block;
float: left;
text-align: center;
}
#navcontainer ul li a {
background: #FFF;
width: 82px;
height: 18px;
border-top: 1px solid #000066;
border-left: 1px solid #000066;
border-bottom: 1px solid #000066;
border-right: none;
color: #A23D38;
display: block;
text-align: center;
text-decoration:none;
font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
#navcontainer ul li a:hover {
color: #000066;
background: #ADC8F3;
}
#navcontainer a:active {
background: #c60;
color: #fff;
font: bold 12px/20px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
#navcontainer li#active a {
background: #c60;
border: 1px solid #c60;
color: #fff;
}
HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Lifestyle nails and more - Ihre Wellness-Oase in Nidderau und Umgebung</title>
<meta name="DC.Title" content="Lifestyle nails and more - Ihre Wellness-Oase in Nidderau und Umgebung">
<meta name="DC.Creator" content="Ralf und Michaela Metz">
<meta name="DC.Subject" content="Alles rund um Angebote, Leistungen und Hinweise von Lifestyle nails and more">
<meta name="DC.Description" content="Ihre Wellness-Oase für Hand, Fuss- und Gesichtspflege in Nidderau und Umgebung">
<meta name="DC.Publisher" content="Lifestlye nails and more">
<meta name="DC.Contributor" content="Ralf und Michaela Metz">
<meta name="DC.Date" content="2005-02-28">
<meta name="DC.Type" content="service">
<meta name="DC.Format" content="text/html">
<meta name="DC.Identifier" content="http://www.lifestyle-nails.de/">
<meta name="DC.Source" content="Fachwissen">
<meta name="DC.Language" content="de">
<meta name="DC.Relation" content="Site-Inhalt">
<meta name="DC.Coverage" content="Nidderau">
<meta name="DC.Rights" content="Alle Rechte liegen beim Autor">
<meta name="Keywords" content="Nagel, Nagelmodelage, Nagelstudio, Studio, Wellness, Nidderau, Bruchköbel, Karben, Büdesheim, Altenstadt, Schöneck, Kaichen, Eichen, Kosmetik, Parrafin, Wachs, Enthaarung, Maniküre, Fußpflege, Gesicht" />
<meta name="Page-topic" content="Dienstleistung" />
<meta name="Page-type" content="Produktinfo" />
<meta name="Revisit-after" content="1 days" />
<meta name="Audience" content="Alle" />
<meta name="Robots" content="INDEX,FOLLOW" />
<link href="lifestyle.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/css; charset=iso-8859-1" />
</head>
<body>
<div id="complete">
<div id="header">
<div id="logo"> <img src="../bilder/logo.gif"> </div>
</div>
<div id="background_navi">
<div id="background_navi_pseudo"></div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.php" title="Zur Startseite">Home</a></li>
<li><a href="kosmetik.php" title="Alles rund um Ihr Gesicht">Gesicht</a></li>
<li><a href="haende.php" title="Alles rund um Ihre Hände">Hände</a></li>
<li><a href="fuesse.php" title="Alles rund um Ihre Füße">Füße</a></li>
<li><a href="enthaarung.php" title="Alles rund um die Wachsenthaarung">Enthaarung</a></li>
<li><a href="terminvereinbarung.php" title="Terminvereinbarung gleich hier online">Termin</a></li>
<li><a href="kontakt.php" title="Alles rund um uns">Kontakt</a></li>
</ul>
</div>
</div>
<div id="left">
<div><img src="../bilder/ueberhang_boxen.gif"></div>
<div id="box_top"> </div>
<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>
</div>
<div id="middle"> </div>
<div id="right">
<div style="position: relative; margin-top: 15px;"><img src="../bilder/ueberhang_boxen.gif"></div>
<div id="box_top"> </div>
<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>
</div>
<div style="position: absolute; top:683px ; height:137px;"><img src="../bilder/footer.gif"></div>
</div>
</body>
</html>
