cssrookie23
Grünschnabel
Hallo,
ich habe mich an einem CSS-basierten frei skalierbaren HP-Design versucht und bin auf drei Probleme gestoßen:
Im Mozilla und Netscape wird das div "content" größer als das umschließende "container". Des Weiteren wird im div "menu" nur das Hintergrundbild a:hover für "Home" angezeigt, für die übrigen Menüpunkte einfach nur der grüne Hintergrund. Das für a:hover definierte Hintergrundbild wird für alle Menüpunkte korrekt angezeigt. Das für a definierte hintergrundbild wird für keinen der Menüpunkte angezeigt.
Der IE zeigt die Seite zwar so an, wie ich es vorgesehen habe, jedoch wird unter dem Header ein breiterer hellgrüner Rand als angegeben produziert.
Die Seite ist unter http://www.test.reserve-hoentrop.de zu finden.
HTML-Code::
CSS-Datei:
Ein einfacheres Design ist mir nicht eingefallen, vielleicht habt ihr ja Ideen, wie man die CSS einfacher halten könnte.
Über Hilfe würde ich mich sehr freuen.
CSSRookie23
ich habe mich an einem CSS-basierten frei skalierbaren HP-Design versucht und bin auf drei Probleme gestoßen:
Im Mozilla und Netscape wird das div "content" größer als das umschließende "container". Des Weiteren wird im div "menu" nur das Hintergrundbild a:hover für "Home" angezeigt, für die übrigen Menüpunkte einfach nur der grüne Hintergrund. Das für a:hover definierte Hintergrundbild wird für alle Menüpunkte korrekt angezeigt. Das für a definierte hintergrundbild wird für keinen der Menüpunkte angezeigt.
Der IE zeigt die Seite zwar so an, wie ich es vorgesehen habe, jedoch wird unter dem Header ein breiterer hellgrüner Rand als angegeben produziert.
Die Seite ist unter http://www.test.reserve-hoentrop.de zu finden.
HTML-Code::
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Beerwerth.NET </title>
<meta name="Generator" content="Alleycode HTML Editor">
<meta name="Description" content="Homepage of Florian Beerwerth">
<meta name="Keywords" content="Florian, Beewerth, Bochum">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<img src="http://www.tutorials.de/forum/images/header3.png" alt="header" width="100%"/>
</div>
<div id="menu">
<table class="menu2" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" class="menu21" style="background-image:url(images/menu5_1_2a.png);background-repeat:repeat;color:#28651F;"><a href="index.html" onfocus="this.blur()">Home</a></td>
<td width="20%" style="border-left:solid 0.05em #C6C6C6;" class="menu22" style="background-image:url(images/menu5_2_2.png);background-repeat:repeat;color:#AAC31B;"><a href="index.html" onfocus="this.blur()">Menü2</a></td>
<td width="20%" style="border-left:solid 0.05em #C6C6C6;" class="menu23" style="background-image:url(images/menu5_3_2.png);background-repeat:repeat;color:#AAC31B;"><a href="index.html" onfocus="this.blur()">Menü3</a></td>
<td width="20%" style="border-left:solid 0.05em #C6C6C6;" class="menu24" style="background-image:url(images/menu5_4_2.png);background-repeat:repeat;color:#AAC31B;"><a href="index.html" onfocus="this.blur()">Menü4</a></td>
<td width="20%" style="border-left:solid 0.05em #C6C6C6;" class="menu25" style="background-image:url(images/menu5_5_2.png);background-repeat:repeat;color:#AAC31B;"><a href="contact.php" onfocus="this.blur()">Kontakt</a></td>
</tr>
</table>
</div>
<div id="content">
testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext
</div>
</div>
</body>
</html>
CSS-Datei:
Code:
body
{
margin: 0;
padding: 0;
border: none;
font: 12pt Arial;
text-align: center;
background-color: #FFFFFF;
}
a:link
{
text-decoration: none;
}
#container
{
width: 50em;
height: 35em;
margin: 0.5em auto;
background-color: #AAC31B;
border: solid 0.05em #C6C6C6;
position: relative;
}
#header
{
width: 100%;
/* height: 7.5em; */
margin:0;
padding:0;
top: 0;
position:relative;
border-bottom: solid 0.16em #AAC31B;
}
#menu
{
width: 100%;
padding:0;
margin: 0;
border-top: solid 1em #28651F;
position:relative;
top: 0;
/* background-image:url(../images/menu.png); */
}
.menu2 a, .menu2 a:visited , .menu2 a:active
{
color: #AAC31B;
display: block;
text-decoration:none; font-family: verdana, sans-serif; font-size: 1.1em; font-weight: bold;
padding-left: 0; padding-bottom: 0; padding-top:0;
margin-left: 0; margin-right: 0;
border-top: solid 0.05em #C6C6C6;
border-bottom: solid 0.05em #C6C6C6;
line-height: 1.5em;
text-align: center;
}
.menu21 a:hover
{
color:#28651F; text-decoration:none ;
background-image:url(../images/menu5_1_2a.png);background-repeat:repeat;
}
.menu22 a:hover
{
color:#28651F; text-decoration:none ;
background-image:url(../images/menu5_2_2a.png);background-repeat:repeat;
}
.menu23 a:hover
{
color:#28651F; text-decoration:none ;
background-image:url(../images/menu5_3_2a.png);background-repeat:repeat;
}
.menu24 a:hover
{
color:#28651F; text-decoration:none ;
background-image:url(../images/menu5_4_2a.png);background-repeat:repeat;
}
.menu25 a:hover
{
color:#28651F; text-decoration:none ;
background-image:url(../images/menu5_5_2a.png);background-repeat:repeat;
}
#content
{
width: 100%;
position: relative;
text-align: left;
overflow: auto;
overflow-x: hidden;
background-color: #c7f1b9;
padding: 1em;
}
Ein einfacheres Design ist mir nicht eingefallen, vielleicht habt ihr ja Ideen, wie man die CSS einfacher halten könnte.
Über Hilfe würde ich mich sehr freuen.
CSSRookie23
Zuletzt bearbeitet: