| Autor |
Nachricht |
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mo 25.09.2006 14:58
Titel Probleme mit CSS Hover Navigation |
  |
|
Hallo,
ich habe ein Problem und zwar gehts um folgendes. Ich habe eine Navigation mit 9 Navigationspunkten. Üblicherweise löst man das dann mit einer Liste. Soweit auch kein Problem, bei den Buttons handelt es sich um gif Grafiken, da eine spezielle Schrift verlangt wurde. Hab mittels CSS den Rollover Effekt realisiert und soweit passt auch alles, bis auf die Sache, dass ich die Navigation nicht horizontal darstellen kann. Alle Navibuttons stehen untereinander.
Habs mit display: inline probiert, was bei einer normalen Liste auch funktioniert, nur mit den Graphiken klappts nicht.
Keine Ahnung warum, vielleicht überseh ich was.
Hier mal der Code:
| Code: |
/* LAYOUT Grundlegegende Angaben (Background, Font etc) */
body {
font: 10px verdana, sans-serif;
color: #FFFFFF;
background-color: #000000;
}
/* Der Container der die Website im Browser definiert (Größe, Ausrichtung) */
#container {
margin: 1em auto;
margin-top: 30px;
width: 1000px;
height: 600px;
}
/* Header-Box (Größe und Hintergrund) */
#header {
height: 115px;
background: url(../bilder/layout/header.jpg) no-repeat;
}
/* Main Navigation unter dem Header */
#navi1 {
margin-top: 0px;
height: 20px;
color: #FFFFFF;
background-color: #ee7f00;
}
/* Der Teil der Seite für die Flashs und Thumbnails */
#thumbnail {
float: left;
height: 120px;
width: 700px;
color: #FFFFFF;
background-color: #9e6727;
}
/* Der letze Teil in der Hierarchie der Links, rechts neben der Thumbnail Box */
#navi2 {
float: left;
height: 120px;
width: 300px;
color: #FFFFFF;
background-color: #a8763d;
}
/* Die Content Box unter der Thumbnail Box */
#content {
clear: both;
float: left;
height: 365px;
width: 700px;
color: FFFFFF;
background-color: #4e4e4e;
}
/* Die zweite Navigation direkt rechts neben dem Content und unter der Nav2 */
#navi3 {
float: left;
height: 365px;
width: 300px;
color: FFFFFF;
background-color: #5f5f5f;
}
/* Gibt den Außenabstand der <ul> in der Navigation an */
#navi1 ul {
margin:0px;
}
/* Die Liste der Navigationspunkte erhält keine Aufzählungssymbole wie Kreise, Quadrate etc */
#navi1 ul li {
display: inline;
list-style-type: none;
}
/* Die einzelnen Navigationsbuttons mit der Rollover Funktion */
#home {
display: block;
background: url(../bilder/navi/home_02.gif) no-repeat;
width: 56px;
height: 18px;
}
#home:hover {
background: url(../bilder/navi/home_01.gif) no-repeat;
}
#profil {
display: block;
background: url(../bilder/navi/profil_02.gif) no-repeat;
width: 58px;
height: 18px;
}
#profil:hover {
background: url(../bilder/navi/profil_01.gif) no-repeat;
}
#spirits {
display: block;
background: url(../bilder/navi/spirits_02.gif) no-repeat;
width: 62px;
height: 18px;
}
#spirits:hover {
background: url(../bilder/navi/spirits_01.gif) no-repeat;
}
#boot {
display: block;
background: url(../bilder/navi/boot_02.gif) no-repeat;
width: 69px;
height: 18px;
}
#boot:hover {
background: url(../bilder/navi/boot_01.gif) no-repeat;
}
#corporate {
display: block;
background: url(../bilder/navi/corporate_02.gif) no-repeat;
width: 118px;
height: 18px;
}
#corporate:hover {
background: url(../bilder/navi/corporate_01.gif) no-repeat;
}
#web {
display: block;
background: url(../bilder/navi/web_02.gif) no-repeat;
width: 85px;
height: 18px;
}
#web:hover {
background: url(../bilder/navi/web_01.gif) no-repeat;
}
#messe {
display: block;
background: url(../bilder/navi/messe_02.gif) no-repeat;
width: 100px;
height: 18px;
}
#messe:hover {
background: url(../bilder/navi/messe_01.gif) no-repeat;
}
#kontakt {
display: block;
background: url(../bilder/navi/kontakt_02.gif) no-repeat;
width: 71px;
height: 18px;
}
#kontakt:hover {
background: url(../bilder/navi/kontakt_01.gif) no-repeat;
}
#impressum {
display: block;
background: url(../bilder/navi/impressum_02.gif) no-repeat;
width: 91px;
height: 18px;
}
#impressum:hover {
background: url(../bilder/navi/impressum_01.gif) no-repeat;
}
|
| 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>
<title></title>
<link rel="stylesheet" type="text/css" href="css/screen.css">
</head>
<div id="container">
<div id="header"></div>
<div id="navi1">
<ul>
<li><a id="home" href="index.html"></a></li>
<li><a id="profil" href="#"></a></li>
<li><a id="spirits" href="#"></a></li>
<li><a id="boot" href="#"></a></li>
<li><a id="corporate" href="#"></a></li>
<li><a id="web" href="#"></a></li>
<li><a id="messe" href="#"></a></li>
<li><a id="kontakt" href="#"></a></li>
<li><a id="impressum" href="#"></a></li>
</ul>
</div>
<div id="thumbnail"></div>
<div id="navi2"></div>
<div id="content"></div>
<div id="navi3"></div>
</div>
</body>
</html>
|
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 25.09.2006 15:12
Titel
|
|
|
Erstmal fehlt dir das oeffnende body Tag und ansonsten versuch es mal mit float:left;
Zuletzt bearbeitet von m am Mo 25.09.2006 15:13, insgesamt 1-mal bearbeitet
|
|
| |
 |
|
|
Anzeige
|
|
|
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 25.09.2006 15:31
Titel
|
|
|
Ok, super danke. Das Body Tag hab ich ausversehen gelöscht, als ich den JS rausgeworfen hab 
Habs mit Float versucht und es klappt. Dankeschön.
Jetzt würde mich noch interessieren, wie ich die ganze <ul> in der Navi zentrieren kann. Hab a bissle gegoogelt und hier gesucht aber nichts passendes gefunden. Auch sämliche Versuche meinerseits über alle mir bekannten Formatierungen für die horizontale Ausrichtung bewirkten nichts. Habs jetzt mit margin an die Position gerückt, an ders passt, aber interessant wärs ja scho, wie ich des mittels "center" irgendwie in die Mitte bekomm.
Und noch eine Sache. Solang ich mich in einem Unterpunkt von Home bewege, soll der Homebutton ebenfalls das Rollover Image anzeigen, hab mal ein wenig rumgelesen, aber geholfen hat nichts.
Danke
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Problem mit IE7 und hover-Navigation
Navigation mit Hover Elementen in Wordpress
[CSS] Navigation bei a:hover bold > Verschiebung vermeiden
[CSS] Probleme mit CSS-Navigation und Rolloverbildern
Probleme mit Include-Navigation
Probleme mit den Links in der Navigation
|
|
Willkommen auf dem Portal für Mediengestalter
