zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Boxen von Navigation und Logo sind zu weit auseinander

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.09.2009, 22:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2009
Beiträge: 15
lila_3 befindet sich auf einem aufstrebenden Ast
Standard Boxen von Navigation und Logo sind zu weit auseinander

Hallo,

ich habe die Navigation und das Logo mit Grafiken gemacht. Hat auch prima funktioniert, bis ich dem Logo noch einen Link gegeben habe.

Navi und Logo sind im Mozilla sehr weit auseinandergerutscht. Und ich bekomme sie nicht mehr dichter zusammen.

Ich habe clear und float überprüft und keinen Fehler gefunden. Mir ist aufgefallen, dass die Box für das Navi sehr hoch war und daraufhin hat sie eine Höhe bekommen. Margin und Padding ändern nichts am Abstand zwischen den Boxen.

Ich hoffe ihr könnt mir weiterhelfen.

Das Beispiel liegt hier


und hier kommt der Code:
HTML-Code:
<body>
<div id="container">
  <div id="main">
    <div id="header">
      <div id="logo">
      
         <a href="index.html"><img src="bilder/logo.gif" width="213" height="15" border="0" alt="Home"></a>
      </div>
      <div id="navi">
        <ul>
          <li id="grafik"><a href="index.html">Grafik<span></span></a></li>
          <li id="fotografie"><a href="tagesthemen.html">Fotografik<span></span></a></li>
          <li id="kontakt"><a href="kontakt.php">Kontakt<span></span></a></li>
          <li id="impressum"><a href="impressum.html">Impressum<span></span></a></li>
        </ul>
      </div>
    </div>
    <!-- Ende header-->
CSS-Code
Code:
/* Kopfbereich */ 
    #header {
	margin-top: 0px;
	margin-right: 30px;
	margin-left: 30px;
	width: 540px;
	/*height: 100px; */
      background:#FFF;
}
#logo {
	height: 15px;
	width: 213px;
	margin-top: 10px;
	float:right;
}
/* Navigation */
	
	#navi {
	clear:right;
	float:right;
	height: 20px;
	padding-bottom: 10px;
}
#navi li {
	float:left;
	width: 50px;
	list-style-type:none;
}
#navi #grafik {
	width: 45px;
}
#navi #fotografie {
	width: 85px;
}
#navi #kontakt {
	width: 65px;
}
#navi #impressum {
	width: 85px;
}
#navi a {
	display: block;
	height: 10px;
	width: 100%;
	position: relative;
	overflow: hidden;
}
#navi span {
	position: absolute;
	width: 100%;
	height: 10px;
	top: 0;
	left: 0;
	background: url(bilder/navi_grafiken/navi.gif);
	background-repeat: no-repeat;
	cursor: pointer;
}
#navi a span {
	cursor: pointer;
}
/* Navi Grafik */ 			
	#navi #grafik a span {
	background-position: 0 0;
}
#navi #grafik a:hover span, #navi #grafik a:active span, #navi #grafik a:focus span {
	background-position: 0 -10px;
}
/* Navi Fotografie */ 
	#navi #fotografie a span {
	background-position: -45px 0;
}
#navi #fotografie a:hover span, #navi #fotografie a:active span, #navi #fotografie a:focus span {
	background-position: -45px -10px;
}
/* Navi Kontakt */
	#navi #kontakt a span {
	background-position: -130px 0;
}
#navi #kontakt a:hover span, #navi #kontakt a:active span, #navi #kontakt a:focus span {
	background-position: -130px -10px;
}
/* Navi Impressum */
	#navi #impressum a span {
	background-position: -195px 0;
}
#navi #impressum a:hover span, #navi #impressum a:active span, #navi #impressum a:focus span {
	background-position: -195px -10px;
}
Grüße
Lila_3
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.09.2009, 23:12
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

[FAQ]FAQ[/FAQ] "CSS-Prolog" - darauf weise ich zu Beginn meines FAQ-Beitrages auch hin
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.09.2009, 23:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2009
Beiträge: 15
lila_3 befindet sich auf einem aufstrebenden Ast
Standard

Oh, das hatte ich wohl überlesen.
Ich habs geändert und jetzt funktionierts.

Danke
lila-3
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Problem mit FlyOut Menu im IE7 quarki69 CSS 5 15.03.2010 15:46
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 18:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:41 Uhr.