Nok lidt basale CSS spørgsmål ;-) (Placering af kasse)
Kære alleJeg er ved at lave en hjemmeside, hvor jeg starter med at bygge det basale op i CSS.
Siden jeg skal lave skal se sådan ud til sidst ;-)
http://www.jasperfoto.dk/ny-side/Hjemmeside1.jpg
Jeg har fået lavet den store "kasse" centreret i midten.
Derefter et tekstfelt i bunden (gul).
Et tekstfelt i højre side (blå).
Se nuværende status:
http://www.jasperfoto.dk/ny-side
Nu skal jeg have lavet menu'en.
Jeg ønsker enkelte kasser med hovereffekt, som gerne må "slås ud" hvis der er underpunkter.
Spørgsmål 1.
Nogle der ligger inde (har link) til sådan en simpel kode ???
Spørgsmål 2.
Jeg har været inde på 101webdesign, hvor jeg fandt en menu som jeg har prøvet at ligge ind på siden, men den bliver ved med at ligge bagved min store kasse ?? Selvom jeg har prøvet at bruge npget z-index ???
Nogen CSS eksperter der kan hjælpe ??
På forhånd TUSIND TAK og rigtig God Week-end
Med Venlig Hilsen
Peter
Default filen:
<html>
<head>
<title>Mit dokument</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mit første stylesheet</h1>
<div id="storboks">
<div id="tekstboks">
<ul>
<li>Hans Hedtoft</li>
</ul>
</div>
<div id="tekstboks-bund">
Jasper Simonsen
</div>
</div>
<ul class="cssmenu">
<li><a href="/index.php">Home</a></li>
<li><a href="/gen/index.php">Generelt/servicesider</a></li>
<li><a href="/design/index.php">Design</a></li>
<li><a href="/css/index.php">CSS (Stylesheets)</a></li>
<li><a href="/javascript/index.php">JavaScript</a></li>
<li><a href="/navigation/index.php">Navigation</a></li>
<li><a href="/dhtml/index.php">Dynamisk HTML</a></li>
</ul>
</body>
</html>
CSS filen:
body {
background-color: #FFCC66;
}
#storboks {
position:absolute;
left:50%;
top:50%;
margin-left:-501px;
width:1002px;
height:595px;
margin-top:-297.5px;
background-image: url("Hjemmeside1.jpg");
border: 1px solid black;
z-index: 1;
}
#tekstboks {
position: absolute;
top: 294px;
left: 421px;
width: 557 px;
height: 172 px;
background: blue;
}
#tekstboks-bund {
position: absolute;
bottom: 2px;
width: 1000 px;
height: 18 px;
background: yellow;
}
ul.cssmenu {
font-family:arial,sans-serif;
list-style:none;
border-width:0 1px 1px 1px;
border-style: solid;
border-color: #257;
background:#fff;
width:198px;
margin: 1em 0;
padding:0;
z-index: 3;
}
ul.cssmenu li a {
/* IE skal ha' en eksplicit bredde */
/* Se den betingede kommentar efter stylesheet'et */
color:#1a0080;
font-size:0.9em;
background-color:#fff;
display:block;
text-decoration:none;
margin:0;
padding:3px 5px;
border-top:1px solid #257;
z-index: 2;
}
ul.cssmenu li a:visited {background-color:#eee;}
ul.cssmenu li a:hover {color:#fff;background-color:#1a0080;}
ul.cssmenu li a:active { color:#1a0080;}
