CSS Bild als Navigationselement und darunter ein Text

darton · 30. September 2011

Hallo!
Ich habe ein CSS-Layout Problem. Ich kann den Code leider nicht direkt hier reinstellen, weil man, um das Problem verstehen zu können, eine 48x48 große Bildddatei benötigt. Deswegen habe ich den Code im Anhang.
Also ich möchte gerne eine horizontale Navigation für meine Seite erstellen und jeder Link da drinne soll als Bild mit Text darunter dargestellt werden. Mein Problem ist nun, dass der Text nicht zentriert unter dem Bild erscheint, sondern mitten auf dem Bild drauf und auch das nicht zentriert. Weiterhin ist komischerweise der Link nicht komplett unterstrichen, sondern die Linie bricht kurz vorm Ende des Textes einfach ab. Guckt euch einfach mal den Anhang an, dann versteht ihr, was ich meine.

mastermalte.de · 30. September 2011

Ein Lösungsansatz für das beschriebene Problem könnte so aussehen ...

-----------------------------------------------
// CSS
-----------------------------------------------
body {
margin: 0;
background-color: white;
font-size: 85%;
font-family: tahoma, sans-serif;
}

#headline {
background-color: yellow;
width: 100%;
height: 100px;
}

#menu {
top: 35px;
position: absolute;
margin: 0;
padding: 0;
}

#menu li {
float: left;
list-style-type: none;
min-width: 50px;
}

#menu a {
font-size: 12px;
text-align: center;
display: block;
padding: 0 20px;
}

#menu img {
border: none;
}

#topbar {
width: 100%;
height: 30px;
background-color: black;
}

#content {
margin-top: 50px;
width: 90%;
height: 100px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
background-color: white;
}

-----------------------------------------------
// INDEX
-----------------------------------------------
<?xml version="1.0" ?>
<!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>SFZ Osnabrück</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
<div id="headline">
<ul id="menu">
<li>
<a href="#">
<img src='random_icon.png' alt='random_icon'></img>
<br/>
Überschrift 1
</a>
</li>
<li>
<a href="#">
<img src='random_icon.png' alt='random_icon'></img>
<br/>
Überschrift 2
</a>
</li>
</ul>
</div>
<div id="topbar">
</div>
<div id="content">
</div>
</body>
</html>

Denara · 30. September 2011

Hier noch eine alternative Lösung:

CSS:

Code:

body {
    margin: 0;
    background-color: white;
    font-size: 85%;
    font-family: tahoma, sans-serif;
}

#headline {
background-color: yellow;
width: 100%;
height: 100px;
}

#menu {
top: 35px;
position: absolute;
margin: 0;
padding: 0;
}

#menu li {
float: left;
list-style-type: none;
min-width: 50px;
}

#menu a {
font-size: 12px;
text-align: center;
display: block;
padding: 0 20px;
}

#menu span.img {
background-repeat: no-repeat;
height: 48px;
display: inline-block;
//************ ÄNDERUNGEN: *********//
background-position: top;
padding-top: 48px;
width: 60px;
//************ ÄNDERUNGEN ENDE ********//
}

#topbar {
width: 100%;
height: 30px;
background-color: black;
}

#content {
margin-top: 50px;
width: 90%;
height: 100px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
background-color: white;
}

Und HTML:

Code:

<?xml version="1.0" ?>
<!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>SFZ Osnabrück</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
	<div id="headline">
		<ul id="menu">
			<li>
				<a href="#">
					<span class="img" style="background-image: url('random_icon.png');" >Überschrift</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="img" style="background-image: url('random_icon.png');" >Überschrift</span>
				</a>
			</li>
		</ul>
	</div>
	<div id="topbar">
	</div>
	<div id="content">
	</div>
</body>
</html>

Das Ausrichten des Textes unter das Bild geschieht mit "padding-top: 48px".

Der Text war Horizontal nicht zentriert, weil der Text mehr Platz benötigt als du ihm gegeben hast. Der Text ist länger als die 48 Pixel Platz die du im Span (zwischen den paddings) hast. Dadurch beginnt der Text am linken Padding und ragt ins rechte noch hinein (siehe angehängtes Bild - die dunklen Bereiche sind das Padding, der helle der freie Platz). Indem die "width" des Spans vergrößert wird, wird auch der Text richtig zentriert.

Eagle-PsyX- · 1. Oktober 2011

Probiere mal:

Code:

#menu li { text-align: center; }
#menu li a { margin:0 auto; }

Voraussetzung wäre aber natürlich dass die Box groß genug ist. Am Besten sollte auch eine feste Breite vorgegeben sein. Oder Text kleiner machen?

Suche

CSS Bild als Navigationselement und darunter ein Text

darton

Lt. Junior Grade

Anhänge

mastermalte.de

Newbie

Denara

Cadet 3rd Year

Anhänge

Eagle-PsyX-

Commander

Ähnliche Themen