Warum funktionieren height und width nicht?

ScharfJuergen · #1 (**permalink**) 05.06.2006, 21:23

Hallo, ich habe folgendes Problem:

- die Links sollen genausohoch sein wie der umgebene div id="geonavi"
- es sollen keine Abstände zwischen den Links sein
- die Links sollen 50px breit sein

Irgendwie funktionieren margin, height, width nicht. Was mach ich falsch??

Zitat:

Html:
<!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=iso-8859-1" />
<title>Juergens Homepage - Berge, Reisen, Abenteuer</title>
<link href="../jsmain.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">

</style>
</head>

<body>
<div id="page">
<img id="topimg" src="jshome.jpg" alt="www.Juergen-Scharf.de - Berge, Reisen, Abenteuer"; />
<div id="geonavi">
<a href="http://people.freenet.de/jshome01/Berge/Berge.htm">Berge</a>
<a href="">Europa</a>
<a href="">Asien</a>
<a href="">Afrika</a>
<a href="">Australien/Ozeanien</a>
<a href="">Amerika</a>
<a href="">Arktis/Antarktis</a>
</div>
</div>
</body>
</html>

Zitat:

CSS:
body{
margin:0; padding:0; height:100%; width:100%; border:0; border-style:solid; border-color: #999999;
background-color:#FFFFDD; color:#000000;
font-family:Arial, Helvetica, sans-serif; font-size:small;
}
h1{font-size:130%; font-weight:bold}
h2{font-size:120%;
}
#page{margin:0 auto; border:0; padding:0; height:100%; width:955px;
}
#topimg{margin:0; padding:0; height:100px; width:100%; border:1px; border-style:solid; border-color: #999999;
}
#geonavi{background-color: #FFFF95; margin:10px 0; padding:0; height:30px; width:100%; border:1px; border-style:solid; border-color: #999999;
}
#geonavi a{background-color: #FFEF95; margin:0; padding:0; height:30px; width:50px; border:1px; border-style:solid; border-color: #999999;
}

Ist bestimmt nur Anfängerfehler von mir. Aber ich weiß nicht weiter.

heiko_rs · #2 (**permalink**) 05.06.2006, 21:31

Bevor Du versuchst, dieses Markup "in Form" zu bringen, laß Dir den Rat geben, die Navigation als <ul> (d.h. ungeordnete Liste) darzustellen, denn das ist in zeitgemäßem Webdesign de facto "Pflicht".

Schöne Grüße,
Heiko

Tigereye · #3 (**permalink**) 05.06.2006, 21:31

height und width funktioniert nur bei Blockelementen und ersetzenden Inlineelementen.
Wenn du den Links ein "display:block;" mitgibst, sollte es funktionieren.
Außerdem solltest du für die Navigation eine unsortierte Liste verwenden!

ScharfJuergen · #4 (**permalink**) 06.06.2006, 18:27

Okay, Danke:
Also ich hab jetzt aus dem div eine ul gemacht und "display:block" eingefügt. Nur stehen die Links jetzt untereinander und nicht mehr nebeneinander??? Mit "display:inline" stehen sie wieder nebeneinander - dann hab ich aber wieder das Problem wie vorher. Was mach ich falsch???

heiko_rs · #5 (**permalink**) 06.06.2006, 19:00

Blockelemente ordnen sich immer untereinander an; sollen sie nebeneinander stehen, muß man sie floaten lassen. Ein Beispiel für eine entsprechende horizontale Navigationsliste mit der id #nav wäre:

Code:

#nav li {
float: left; }

#nav li a {
display: block; }

Dabei kann li dann auch die gewünschte Breite zugewiesen werden. Tatsächlich muß das sogar geschehen, denn man sollte nie ohne width floaten.

Schöne Grüße,
Heiko

ScharfJuergen · #6 (**permalink**) 07.06.2006, 18:00

Danke. Jetzt funktionierts.
VG
Jürgen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Verschiebungen bei größerem Bildschirm	seelefant	CSS	4	28.07.2014 15:43
Media Querys - Layout geht wird über den Displayrand angezeigt	DarkNemesis84	CSS	9	05.05.2013 22:00
CSS von Plugin beisst!	expand	CSS	0	28.09.2012 17:44
prblemme mit mein inhalt div	carlos587261	CSS	3	23.04.2008 14:07
Mozilla zeigt DIV zu oft an	cracki	CSS	6	09.03.2008 15:22