padding-bottom und zeilenumbruch

Status
Nicht offen für weitere Antworten.
L

Layna

Erfahrenes Mitglied
Hallo.
Ich verzweifle mal wieder an dieser Monstrosität die sich IE schimpft....

Erst einmal das Problem: die Links sollen einen Hintergrund haben, der UNTER dem Text erscheint. Daher habe ich den hintergrund auf 16 pixel gesetzt und dem Link ein padding-bottom von 17 px verpasst.
Jetzt wird allerdings der Text nach einem Zeilenumbruch in den Padding-Bereich geschrieben... :confused:

Ich hab ausserdem trotz suche im Forum ein problem mit meiner vertikalen zentrierung . Wenn das in der Höhe zu klein wird verschwidnet der obere Teil des... leider ist da gerade die Navi. Gibt es einen Weg den ich hier nciht entdeckt habe, aber dafür klappt?

HTML:
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" xml:lang="de" lang="de">
<head>
 <title>Remix Cafe und Bar</title>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="box">
	<div id="navi"><a href="#">A Link</a><a href="#">A Link</a><br />    
	Steht hir nur zum fehler zeigen
	</div>
	<div id="content"></div>
	<div id="footer"></div>
</div>
</body>
</html>

CSS:
CSS: 
/*======================
        Resets
=======================*/

html, body, div, p, h1, h2, h3, h4, h5, h6, img {
	margin: 0px;
	padding: 0px;
	border: none;
}

html, body {
	height: 100%;
	background-color: #424242;
	font-family: Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
	text-decoration: none;
}

div {
	position: relative;
}

/*======================
        Layout
=======================*/

#box {
	width: 816px;
	height: 500px;
	border: 2px inset White;
	margin: auto;
	top:50%;
	margin-top: -250px;
}

/*======================
        Navigation
=======================*/

#navi a, #navi a:link, #navi a:visited {
	padding-bottom: 17px;
	background-position: bottom left;
	background-repeat: no-repeat;
	background-image: url(line.jpg);
	margin-left: 3px;
	margin-right: 5px;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}

#navi a:active, #navi a:focus, #navi a:hover {
	background-repeat: repeat-x;
	color: #999999;
}

So viel Ärger mit so wenig Code... hoffe die CSS-meister hier können helfen :).

Layna
 
Zuletzt bearbeitet:
Hi,

das Hintergrundbild der Links lässt sich nicht mit Hilfe von padding-bottom unterhalb des Textes nach dem Zeilenumbruch positionieren.

Dies gilt aber nicht nur für den IE, sondern für alle Browser.

Für das Problem mit der vertikalen Zentrierung bei einem zu kleinen Fenster gibt es leider keine Lösung, außer vielleicht auf die Positionierung zu verzichten.
 
Danke ersteinmal.
Ich wünschte diese Zentrierung würde klappen... ich versuche hier den Leuten klar zu machen dass Div's besser sind als Tabellen, und bekomme dann immer "Das muss Vertikal Zentriert!" an den Kopf geworfen, was leider das EINZIGE ist das mit Tabelle besser geht... naja.
Und wenn nich jemand eine brilliante Idee hat wie ich es hinbekomme dass unter dem Link im Normalzustand ein sehr schmaler, im hover aber ein linkbreiter dicker block ist bin ich für alle anregungen dankbar....
Wer erfindet sowas eigentlich? ;)

Layna
 
Sorry, da hab ich heute Mittag wohl etwas mißverstanden :-(

Code: 
#navi a, #navi a:link, #navi a:visited {
        padding-bottom:17px;
        background-position: left bottom;
        background-repeat: no-repeat;
        background-image: url(line.jpg);
        margin-left: 3px;
        margin-right: 5px;
        color: #FFFFFF;
        font-weight: bold;
        text-decoration: none;
        float:left;
}
Mit float:left erhält das Inline-Element a wie auch bei display:block "Block-Level-Charakteristika" und der Zeilenumbruch wird unterhalb des gesetzten Innenabstandes vorgenommen. Da die Links mit dieser Regel nun vom nachfolgenden Element rechts umflossen werden sollen, wird der Zeilenumbruch mit clear:left ausgezeichnet ;)

Code: 
<div id="box">
        <div id="navi"><a href="#">A Link</a><a href="#">A Link</a><br style="clear:left;" />
        Steht hir nur zum fehler zeigen
        </div>
        <div id="content"></div>
        <div id="footer"></div>
</div>
Dein anvisiertes Ziel für den Hover-Effekt mittels der Bildwiederholung funktioniert in allen mir zur Verfügung stehenden Browsern einwandfrei.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück