SignoreRossi
Aktives Mitglied
Thread Starter
- Dabei seit
- 11.06.2008
- Beiträge
- 3.709
- Reaktionspunkte
- 924
Hallo Leute,
ich sitz hier an einem Problem und check es einfach nicht... wahrscheinlich ist es nur eine Kleinigkeit die ich übersehen habe... aber ich finde es nicht...
1. Problem:
Die Navigation soll links bündig am Browser rand sein... bei mir steht sie aber einige Pixel weit weg und ich weiss nicht woher er dafür den Befehl hernimmt?
2. Problem:
Warum auch immer funktionier mein Hover in der Navigation nicht...
ich würde gerne noch ein paar Effekte mit CSS3 einbinden aber dafür müsste der Hoher zustand funktionieren...
Ich hoffe ihr könnt mir helfen damit wäre mein Sonntag gerettet und ich wäre sehr weit gekommen
Zum besseren Verständnis... hab ich die Seite grade mal hochgeladen...
http://pixeldesigns.de/css_test/
*EDIT* das Problem mit der Position hab ich gelöst
Das HTML
Und hier das zugehörige CSS
ich sitz hier an einem Problem und check es einfach nicht... wahrscheinlich ist es nur eine Kleinigkeit die ich übersehen habe... aber ich finde es nicht...
1. Problem:
Die Navigation soll links bündig am Browser rand sein... bei mir steht sie aber einige Pixel weit weg und ich weiss nicht woher er dafür den Befehl hernimmt?
2. Problem:
Warum auch immer funktionier mein Hover in der Navigation nicht...
ich würde gerne noch ein paar Effekte mit CSS3 einbinden aber dafür müsste der Hoher zustand funktionieren...
Ich hoffe ihr könnt mir helfen damit wäre mein Sonntag gerettet und ich wäre sehr weit gekommen
Zum besseren Verständnis... hab ich die Seite grade mal hochgeladen...
http://pixeldesigns.de/css_test/
*EDIT* das Problem mit der Position hab ich gelöst
Das HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/total.css"/>
<script type="text/javascript" src="../js/modernizr-2.0.js"></script>
<title>Startseite</title>
</head>
<body>
<!-- DIV ganze Seite -->
<div id="alles">
<!-- BG img -->
<img src="img/bg.jpg" width="100%" height="100%" />
<!-- ------------------------- -->
<!-- DIV navi -->
<div id="navi">
<ul>
<div id="nav1"><a href="index.html" class="active"></a></div>
<div id="nav2"><a href="web.html"></a></div>
<div id="nav3"><a href="print.html"></a></div>
<div id="nav4"><a href="photo.html"></a></div>
<div id="nav5"><a href="street.html"></a></div>
<div id="nav6"><a href="vita.html"></a></div>
</ul>
</div>
<!-- ------------------------- -->
</div>
<!-- text box anfang -->
<div id="textbox">Lorizzle the bizzle dolor i saw beyonces tizzles and my pizzle went crizzle amet, you son of a bizzle adipiscing . Nullizzle for sure velizzle, boom shackalack pot, mammasay mammasa mamma oo sa rizzle, gravida vel, go to hizzle. Pellentesque ass tortor. Yo mamma erizzle. Shiznit fo shizzle dolizzle dapibizzle fizzle tempus sheezy. Sure break it down nibh izzle turpizzle. Away the bizzle tortor. Pellentesque sure rhoncizzle owned. In the bizzle ma nizzle platea dictumst. Donec dapibus. Cool tellizzle urna, pretizzle hizzle, mattizzle izzle, its fo rizzle vitae, nunc. Mah nizzle suscipit. Integer sempizzle velit mammasay mammasa mamma oo sa stuff.
Lorizzle the bizzle dolor i saw beyonces tizzles and my pizzle went crizzle amet, you son of a bizzle adipiscing . Nullizzle for sure velizzle, boom shackalack pot, mammasay mammasa mamma oo sa rizzle, gravida vel, go to hizzle. Pellentesque ass tortor. Yo mamma erizzle. Shiznit fo shizzle dolizzle dapibizzle fizzle tempus sheezy. Sure break it down nibh izzle turpizzle. Away the bizzle tortor. Pellentesque sure rhoncizzle owned. In the bizzle ma nizzle platea dictumst. Donec dapibus. Cool tellizzle urna, pretizzle hizzle, mattizzle izzle, its fo rizzle vitae, nunc. Mah nizzle suscipit. Integer sempizzle velit mammasay mammasa mamma oo sa stuff.
</div>
<!-- ------------------------- -->
<!-- footer anfang -->
<div id="footer">
<div id="footernav">
<ul>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
</div>
<!-- ------------------------- -->
<!-- DIV ganze Seite ENDE-->
</div>
</body>
</html>
Und hier das zugehörige CSS
Code:
@charset "UTF-8";
/* CSS Document */
a:focus { outline:none;}
body{
padding:0;
margin:0;
font-family:Verdana, Geneva, sans-serif;
font-size:15px;
color:#000;
}
/* beginn ganze seite */
#alles{
position:absolute;
top:0;
height:0;
width:100%;
height:100%;
z-index:-3;
margin:0;
padding:0;
overflow:hidden;
}
#navi{
position:absolute;
top:38%;
margin-left:-150;
padding-left:-50;
z-index:999;
}
/* navi start anfang */
#nav1 a{
background-image:url(../img/start.png);
width:300px;
height:50px;
display:block;
margin-bottom:5px;
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
}
div#nav1 a.hover {
background-image:url(../img/start_a.png);
width:300px;
height:50px;
display:block;
margin-bottom:5px;
/* dropshaddow */
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
/* glühen */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
div#nav1 a.active {
background-image:url(../img/start_a.png);
width:300px;
height:50px;
}
/* ------------------------- */
/* navi web anfang */
#nav2 a{
background-image:url(../img/web.png);
width:280px;
height:50px;
display:block;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
color:#FFF;
margin-bottom:5px;
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
}
div#nav2 a.hover {
background-image:url(../img/start_a.png);
width:280px;
height:50px;
display:block;
}
div#nav2 a.active {
background-image:url(../img/web_a.png);
width:280px;
height:50px;
display:block;
}
/* ------------------------- */
/* navi web print anfang */
#nav3 a{
background-image:url(../img/print.png);
width:260px;
height:50px;
display:block;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
color:#FFF;
margin-bottom:5px;
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
}
div#nav3 a.hover {
background-image:url(../img/print_a.png);
width:260px;
height:50px;
display:block;
}
div#nav3 a.active {
background-image:url(../img/print_a.png);
width:260px;
height:50px;
display:block;
}
/* ------------------------- */
/* navi web photo anfang */
#nav4 a{
background-image:url(../img/photo.png);
width:240px;
height:50px;
display:block;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
color:#FFF;
margin-bottom:5px;
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
}
div#nav4 a.hover {
background-image:url(../img/photo_a.png);
width:240px;
height:50px;
display:block;
}
div#nav4 a.active {
background-image:url(../img/photo_a.png);
width:240px;
height:50px;
display:block;
}
/* ------------------------- */
/* navi web street anfang */
#nav5 a{
background-image:url(../img/street.png);
width:230px;
height:50px;
display:block;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
color:#FFF;
margin-bottom:5px;
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
}
div#nav5 a.hover {
background-image:url(../img/street_a.png);
width:230px;
height:50px;
display:block;
}
div#nav5 a.active {
background-image:url(../img/street_a.png);
width:230px;
height:50px;
display:block;
}
/* ------------------------- */
/* navi web vita anfang */
#nav6 a{
background-image:url(../img/vita.png);
width:210px;
height:50px;
display:block;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
color:#FFF;
margin-bottom:5px;
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
}
div#nav6 a.hover {
background-image:url(../img/vita_a.png);
width:210px;
height:50px;
display:block;
}
div#nav6 a.active {
background-image:url(../img/vita_a.png);
width:210px;
height:50px;
display:block;
}
/* ------------------------- */
/* div text box anfang */
#textbox{
padding:30px;
position:absolute;
background-color: rgba(255, 255, 255, 0.8);
top:30%;
left:30%;
width:700px;
--height:500px;
z-index:-1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* schlagschatten normal
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
*/
/* schatten innen */
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}
/* ------------------------- */
/* footernav anfang*/
#footer{
position:absolute;
right:5%;
bottom:5%;
}
#footernav ul li{
float:left;
list-style:none;
}
#footernav ul li a{
margin:5px;
font-size:12px;
text-decoration:none;
color:#fff;
text-shadow: 3px 3px 3px #000;
}
/* ------------------------- */
/* ganze seite ENDE */
Zuletzt bearbeitet: