Probleme mit Hover und Positionierung der Navigation /CSS

SignoreRossi

Aktives Mitglied
Thread Starter
Dabei seit
11.06.2008
Beiträge
3.689
Reaktionspunkte
888
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
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:
Die Pseudoklassen active, hover und so werden mit einem führenden : angesprochen, z. B. #nav1 a:hover {*}
 
Wenn ich mich recht erinnere, sind Listen standardmäßig so aufgebaut, dass die Einzeleinträge gegenüber dem Titel etwas nach rechts versetzt sind. Wenn man das nicht will, helfen Minuswerte bei den li-Einträgen. Statt li verwendest Du aber div, also nicht die übliche Listennotation.
 
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?

Padding auf der ul sollte helfen. Mit padding: 0 rutscht die ganze Liste allerdings zu weit warus. Warum weiß ich in der Kürze jetzt auch nicht.
Um solchen Überraschungen vorzubeugen emfiehlt sich die Verwendung eines reset Stylesheets.
Und nebenbei: In der ul haben nur li Elemente was zu suchen. Die div Tags darin sind kein valides HTML.
 
Padding auf der ul sollte helfen. Mit padding: 0 rutscht die ganze Liste allerdings zu weit warus. Warum weiß ich in der Kürze jetzt auch nicht.
Um solchen Überraschungen vorzubeugen emfiehlt sich die Verwendung eines reset Stylesheets.
Und nebenbei: In der ul haben nur li Elemente was zu suchen. Die div Tags darin sind kein valides HTML.

Das Problem mit der navi hatte ich gelöst und das mit den UL stimmt! Ich hatte vorher alles mit Li´s gemacht und es dann umgeschrieben in div´s mit id´s ich werde es aber demnächst wieder ändern und es mit ul und li´s lösen... Wollte die Schrift mit drin haben und mit Stylesheet könnte man es zwar lösen aber Chalet ist keine freie Schrift... daher noch die Grafiken...
 
Hallo Leute,

ich hab schon wieder ein Problem mit der Seite... rechts hab ich via JavaScript eine Box angebracht in der sich ein FaceBook Social Plugin befindet...
Jetzt zum Problem...
Bis vor 20min. hat die Sache super Funktioniert... ich blick es nicht... die URL (https://www.facebook.com/PixlDesigns) über den Browser funktioniert es, aber das Plugin lässt sich einfach nicht laden :( weiss da vielleicht jemand rat?

Hier der HTML Code...
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 href='http://fonts.googleapis.com/css?family=Syncopate&v1' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="css/total.css"/>
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript">
/* FB Animation */
$(document).ready(function() {
	$("#lasche").toggle(function(){
		$("#lasche").html("&laquo;");
		$("#fb").animate({marginRight:"0px"},600);
	},function(){
		$("#lasche").html("&raquo;");
		$("#fb").animate({marginRight:"-300px"},600);
	});
	$("#fb ul li").hover(function(){
		$(this).animate({borderLeft:'20px'},600);
		
	},function(){
		    $(this).animate({borderLeft:"0px"},600);
			
			})
})
<!-- ######################################################### -->	
</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>
      <li id="nav1"><a href="index.html" class="active">START</a></li>
      <li id="nav2"><a href="web.html">FOLIO WEB</a></li>
      <li id="nav3"><a href="print.html">FOLIO PRINT</a></li>
      <li id="nav4"><a href="photo.html">PHOTOGRAPHIE</a></li>
      <li id="nav5"><a href="street.html">STREETART</a></li>
      <li id="nav6"><a href="vita.pdf" target="_blank">VITA</a></li>
    </ul>
  </div>
  <!-- ######################################################### --> 
<!-- text box anfang -->
		<div id="textbox"><p id="scroll">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.
    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.</p>
		</div>
    <!-- ######################################################### -->
    <!-- FB box -->
        <div id="fb">
          <ul>
            <li>
              <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/PixlDesigns" width="300" show_faces="true" border_color="" stream="true" header="true"></fb:like-box>
            </li>
          </ul>
          <div id="lasche">&raquo;</div>
        </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>
    <!-- ######################################################### -->
    <!-- FB Like Button mit Thumbs -->
    <div id="fblike">
        <div id="fb-root"></div>
            	<script src="http://connect.facebook.net/en_US/all.js#appId=241590122518305&amp;xfbml=1"></script>
             <fb:like href="www.facebook.com/PixlDesigns" send="true" width="600px" show_faces="false" font="verdana"></fb:like>  
     </div>       
    <!-- ######################################################### -->
<!-- DIV ganze Seite ENDE--> 
</div>
</body>
</html>
 
Zurück
Oben Unten