[CSS] <div> <a> und float

WarrenFaith · 17.10.2006, 17:57

[identifikationsrelevante infos unkenntlich gemacht]

Aloah,

ich muss ne einzeilige Navigation machen mit Bildern als Links.
Soweit kein Ding:

Code:

<div class="header">
    <div class="banner">
        <a href="http://www.domain.de"><img src="/img/dev/banner.gif" height="71" width="940"
                                               alt="xxxx" /></a>
    </div>
    <div class="topnavi">
        <div class="topnavileft"></div>
            <a href="xxxx.jsp" title="xxx"><img src="/img/dev/link_xxx.gif" alt="xxx" /></a>
            <a href="xxxx.jsp" title="xxx"><img src="/img/dev/link_xxx.gif" alt="xxx" /></a>
            <a href="xxxx.jsp" title="xxx"><img src="/img/dev/link_xxx.gif" alt="xxx" /></a>
            <a href="xxxx.jsp" title="xxx"><img src="/img/dev/link_xxx.gif" alt="xxx" /></a>
            <a href="xxxx.jsp" title="xxx"><img src="/img/dev/link_xxx.gif" alt="xxx" /></a>
        <div class="topnaviright"></div>
    </div>
</div>

CSS dazu:

Code:

/*
 * main style
 */

* {
	padding: 0;
	margin: 0 auto;
}
.page {
	width: 940px;
    margin: 0 auto;
}

img {
    border: 0;
    display: inline;
}

a {
    display: inline;
}

.clear {
    clear: both;
}

/*
 * header style
 */
.banner {
	background-color: #FFD119;
	width: 100%;
	height: 71px;
}

.topnavi {
	background-color: #FED636;
	width: 940px;
	height: 35px;
	margin-top: 10px;
	z-index: 1;
}

.topnavileft {
	background-image: url(/img/dev/topnavileft.gif);
    width: 9px;
	height: 35px;
	float: left;
	z-index: 2;
    display: inline;
}

.topnaviright {
	background-image: url(/img/dev/topnaviright.gif);
	width: 9px;
	height: 35px;
	float: right;
	z-index: 2;
    display: inline;
}

Ohne die Links geht das alles wunderbar, die beiden divs der "topnavi[left|right]" floaten super nach links und rechts. Aber nur ohne die Links. Sobald ich diese hinzugefügt habe, ist "topnavileft" dort wo es sein soll und "topnaviright" auch, blos ne Zeile zu tief.

Ich hab gegoogelt und ne Menge Variationen mit "display" versucht, aber es gab keine Veränderungen.
Kann mir bitte einer helfen?

//edit:
die "display: inline" bei img, a und den klassen sind noch aus meiner testphase drin. allerdings hab ich keinerlei veränderung festgestellt, egal ob mit oder ohne "display:inline"

Xean · 17.10.2006, 18:32

wie soll es am ende denn aussehen???
könntest du die bilder noch hochladen?

WarrenFaith · 17.10.2006, 19:18

Bin leider nimmer auf Arbeit, aber hier 2 Bilder die die divs darstellen wie sie sind und sein sollen.
Links wies ist, rechtes Bild wies sein soll... (die Seitendivs sind images um runde ecken zu simulieren)

btw es geht nur um das div mit der klasse "topnavi" und dessen inhalt...

Ben · 17.10.2006, 20:19

Also bei folgendem Code

Code:

/*
 * main style
 */

* {
	padding: 0;
	margin: 0 auto;
}


img {
    border: 0;
    display: inline;
}


.clear {
    clear: both;
}

/*
 * header style
 */
#topnavi {
	background-color: #FED636;
	width: 940px;
	height: 35px;
	margin-top: 10px;
}


#topnavileft, #topnaviright {
    width: 9px;
	line-height:33px;
}

#topnavileft {
	float: left;
}

#topnaviright {
	float: right;
}

#topnavimiddle {
    float:left;
    width: 922px;
    margin-left:25px;
    line-height:33px;
}

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>

<div id="header"> 
    <div id="topnavi">
        <div id="topnavileft"></div>
        <div id="topnavimiddle">
            <a href="#"><img src="message.gif" alt="xxx" /></a>
            <a href="#"><img src="message.gif" alt="xxx" /></a>
        </div>
        <div id="topnaviright"></div>
    </div>
</div>

</body>
</html>

komm ich wohl näher ran .. frag mich jetzt net, wie ich auf das margin-left:25px komm .. rumgespielt mit der Webdeveloper-Extension im FF.

Komische Sache.
Eventuell hilft die Seite hier etwas weiter?

http://www.css4you.de/wslayout1/ex0010.html

Grüße, Ben.

WarrenFaith · 18.10.2006, 10:12

Ok, ich hab den fehler gefunden. Danke dir Ben für deine Hilfe, die hat mir 2 Lösungen gezeigt.
Die erste ist das div topnavimiddle zu erstellen und mit float:left zu versehen _oder_ das div topnavimiddle von der länge her einfach kürzer zu machen (etwa 5 px haben gereicht).

Danke für die Hilfe.

18.10.2006, 10:12	Nach oben #5
WarrenFaith Mensch Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.710	Ok, ich hab den fehler gefunden. Danke dir Ben für deine Hilfe, die hat mir 2 Lösungen gezeigt. Die erste ist das div topnavimiddle zu erstellen und mit float:left zu versehen _oder_ das div topnavimiddle von der länge her einfach kürzer zu machen (etwa 5 px haben gereicht). Danke für die Hilfe. __________________ I did it my way - Senseless-Blog

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[CSS] <div> ignoriert margin: 0px auto;	WarrenFaith	HTML, XML und CSS	7	23.10.2006 14:05
Typ Float in Klasse mit Typ Line2D.Double nicht direkt verwendbar	Ben	Allgemeine Java-Programmierung	8	06.03.2006 14:18
[CSS] Höhe von <div> Layer mag keine 100%	WarrenFaith	HTML, XML und CSS	15	19.08.2005 18:37
Float in 3-dimensionalem Booleanarray	maverick	Allgemeine Java-Programmierung	12	16.01.2005 20:10
float als parameter klappt nicht	p-flash	Allgemeine Java-Programmierung	3	09.12.2004 03:18

17.10.2006, 18:32	Nach oben #2
Xean Erfahrener Benutzer Registriert seit: 17.08.2005 Beiträge: 425	wie soll es am ende denn aussehen??? könntest du die bilder noch hochladen?

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken