CSS Unterstützung bei Tab-Menü

Pelzameise

Sachse
Registriert
Apr. 2008
Beiträge
5.221
Hi,
ich brauche eure Hilfe bei einer Tabnavigation. Und zwar soll sich das Ganze in einem DIV abspielen in dem der komplette Inhalt ist. Dieser Container bekommt dann von mir eine feste Größe.
Eigentlich soll das Ganze ähnlich wie hier auf CB aussehen. Wenn ich mit das Maus über einen Listeneintrag fahre, soll sich das Bild ändern. Die Bilder mach ich später da ich noch nicht weiss, wie sie aussehen sollen. Deshalb machen wir das erstmal mit Farben.

Mein Ansatz:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<meta name="author" content="huebsch">
<meta name="editor" content="Windows Editor">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<style type="text/css"> 

div#inhalt{
border: 1px solid black;
width: 800px;
position: absolute;
left: 40px;
}

.tabmenue
{
	font-size: 12pt;
	border: 1px solid #808080;
	height: 52px;
	width: 100%;
	text-align: center;
}

.tabmenue ul
{
	margin: 0px;
	padding: 0px;
}

.tabmenue ul li
{
	line-height: 50px;
	width: 100px;
	border: 1px solid #003366;
	background: #66CCFF;
	list-style-type: none;
	float: left;
}

</style>
<div id="inhalt">
    <div class="tabmenue">
        <ul>
            <li>Test1</li>
            <li>Test2</li>
            <li>Test3</li>
            <li>Test4</li>
        </ul>
    </div>
</div>


</body>
</html>

Wie bekomm ich das hin, dass wenn die Maus drüber ist, sich die Farbe/das Bild ändert?
Außerdem will ich das Ganze schön ins Center.
Und natürlich soll der Listeneintrag, der zu der aktuellen Seite gehört, hervorgehoben werden, wobei das sicher kein Problem darstellt.

Danke schon mal.
 
--> pn
 
@ Crizzo:
Danke für die Links, hab ich alles durchgelesen, hat mir sehr geholfen.
@ petap:
Wie gesagt trotzdem Danke :)

Jetziger Stand:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<meta name="author" content="huebsch">
<meta name="editor" content="Windows Editor">
<link href="format.css" type="text/css" rel="stylesheet" />
<link rel="SHORTCUT ICON" href="bilder/icon.ico" type="image/x-icon">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">


<div id="inhalt">
 <div id="ia">
    <div id="tabmenue">
        <ul>
            <li><a align="center" class="ca" title="Seite 1" href="#">Seite 1</a></li>
            <li><a align="center" class="cb" title="Seite 2" href="#">Seite 2</a></li>
            <li><a align="center" class="cc" title="Seite 3" href="#">Seite 3</a></li>
            <li><a align="center" class="cd" title="Seite 4" href="#">Seite 4</a></li>
        </ul>
    </div>
 </div>	
</div>



</body>
</html>

Code:
div#inhalt{
border: 1px solid black;
text-align: center;
width: 780px;
}

#tabmenue {
   background-color: #fff;
   text-align: left;
   margin: auto;
   }
   
#tabmenue LI {
   background-color: #be6;
   padding: 0;
   margin: 0;
   list-style: none;
   width: 195px;
   display:inline;
   }

#tabmenue UL {
   background-color: #6be;
   padding: 0;
   margin: 0;
   }   


#tabmenue A {
   font: bold 1em sans-serif;
   color: #000;
   text-decoration: none;
   display:block;
   padding: 0;
   margin: 0;
   width: 191px;
   float:left;
   }

#tabmenue A:link,
#tabmenue A:visited {
   background-color: #9c9;
   padding: 0;
   border: 2px solid #9c9;
   border-radius: 5px;
   }

#tabmenue A:hover,
#tabmenue A:focus {
   background-color: #ded;
   padding: 0;
   border: 2px solid black;
   border-radius: 5px;
   }
   
#ia #tabmenue A.ca,
#ib #tabmenue A.cb,
#ic #tabmenue A.cc,
#id #tabmenue A.cd {
   background-color: #f6ffff;
   padding: 0;
   border-left: 7px #909;
   margin: 0;
   }

Das Problem:
Ich will den Inhalt-DIV in die Mitte haben. Im CSS funktioniert align="center" nicht. Und warum wird der Border nur oben angezeigt?
 
kannst du uns mal nen Link zur Seite geben?
 
Erstens habe ich noch keinen Hoster und zweitens ist das bis jetzt die komplette Seite. Ich weiss ja noch gar nicht, wie der Inhalt aussehen soll. Bis jetzt soll ich erstmal das Layout entwerfen und dort wo der Content hinsoll einen eingerahmten DIV platzieren. :)
 
Setz mal margin: 0 auto; in die Beschreibung für den inhalt-div.

Wenn du mit Display an Elementen rumschraubst, dann muss das Element ne Höhe haben.

Dann noch ein grundsätzlicher Tipp: Guck dir mal das Addon für Firefox mit dem Namen Firebug an. Damit siehst du sehr gut wo welcher Abstand herkommt und welches Element welchen Platz beansprucht.
 
Ja, das hat geholfen. ich hab jetzt die Höhe auf 30px fixiert. Nur wie bekomm ich die Links vertikal in die Mitte?
 
gar nicht. Das geht nur in einer Tabelle. Regel die Abstände über Margin.
 
Mit Margin kann ich die Abstände der Buttons zueinander einstellen.

Hab grade gemerkt, dass der Firefox align="center" im a-Tag nicht annimmt, d.h. die Beschriftung der Buttons ist links, was oberhässlich ist.

Und warum hat mein Content-DIV nur oben seinen Rahmen?

EDIT: Firefox kennt anscheinend auch border-radius nicht.
 
Zuletzt bearbeitet:
Hey

text-align: Center;

moz-border-Radius: 15px;


Sollte so funktionieren!




Gruß von ner iPhone-"Tastatur"

edit: natuerlich alles CSS was oben steht,dh

<A href="" style="hiercss"></à>
 
Zuletzt bearbeitet:
Dass das CSS ist, erkenne ich grade noch so. ;)
text-align macht was es soll, vor das moz musste aber noch ein Minus.

Jetzt muss nur noch der IE spuren. :(
 
...und da hast du auch schon das spannende Thema beim Webdesign gefunden: Verschiedene Browser zeigen gleichen Code verschieden an. Oder anders gesagt: Der IE zeigt Seiten einfach anders an als alle anderen. Das war immer so und das wird wahrscheinlich auch immer so bleiben.
 
Ja, der IE wird es vllt. ab Version 9 unterstützen, vorher anscheinend nur mit transparenten PNGs möglich.

Seis drum, es gibt schlimmeres.
Aber die Beschriftung der Buttons muss ich noch in die Mitte (vertikal) bekommen. Gibt es ein vertical-text-align?
 
ne. das gibt es, wie gesagt, nur in Tabellen. Mach das über feste Abstände.
 
Wo kann ich die abgeben? Mit margin unter A geht er nicht.

IE7:
ie7i.jpg


IE6:
ie6c.jpg


Wie kann ich das verhindern?

Beim IE6 kann ichs verhindern, indem ich die Buttons kleiner mache. Vllt. binde ich über Conditional Comments eine Extra-IE6-CSS ein.

Und nochwas:
Dadurch, dass jetzt im Inhalt DIV alles zentriert ist, steht dann natürlich auch der Text in der Mitte. Der sollte aber eigentlich linksbündig stehen.


EDIT: Bis auf die erste Frage hab ich alle Probleme gelöst. :)
 
Zuletzt bearbeitet:
Was genau willst du verhindern?
 
Hallo,
um den Text in eigenen Buttons auch vertikal zu zentrieren, schau dir mal

line-height

an.

So sieht bei mir ne Nav-CSS aus:

Code:
.nav a:visited {
display:block;
width:100px;
height:25px;
margin-left:0px;
text-align:center;
text-decoration:none;
font-family:arial, verdana, arial, sans-serif;
font-size:14px;
color:#000000;
line-height:25px;
overflow:hidden;
border-left:1px solid black;
border-right:1px solid black;
}

Gruß

HD
 
Zuletzt bearbeitet: (Ergänzung)
@ petap:
Ich hab schon alles verhindert, siehe EDIT.

@ HansDampf38:
Danke, das hat geholfen.
 
Zurück
Oben