xitchl
Lt. Junior Grade
- Registriert
- Nov. 2012
- Beiträge
- 341
Hallo Leute,
eigentlich muss ich selten Hilfe in Anspruch nehmen aber ich komme einfach nicht auf die Lösung und bin in der Hoffnung jemand hat nen Tipp für mich.
Es geht um einen Header, der ein zentriertes Bild enthalten soll. Rechts sowie links wird die Linie aus dem Bild dynamisch weitergeführt. Schwer zu erklären aber wenn man sich das Ganze anschaut sollte klar sein was ich damit meine.
Problem: Ich bekomme einfach den 1-2 Pixel großen Absatz auf der rechten Seite nicht weg. Ich hab bisher alle Konstellationen durch und egal ob ich die Divs "floaten" lasse oder die Textgröße/Linienhöhe auf 0 setze, ich habe rechts stets einen Versprung :/
Lange Rede... am besten mal die Beispiele anschauen:
Ansatz #1 - Fiddle (Link)
Ansatz #2 - Fiddle (Link)
Folgende Ansätze aus dieser Quelle brachten leider keinen Erfolg:
eigentlich muss ich selten Hilfe in Anspruch nehmen aber ich komme einfach nicht auf die Lösung und bin in der Hoffnung jemand hat nen Tipp für mich.
Es geht um einen Header, der ein zentriertes Bild enthalten soll. Rechts sowie links wird die Linie aus dem Bild dynamisch weitergeführt. Schwer zu erklären aber wenn man sich das Ganze anschaut sollte klar sein was ich damit meine.
Problem: Ich bekomme einfach den 1-2 Pixel großen Absatz auf der rechten Seite nicht weg. Ich hab bisher alle Konstellationen durch und egal ob ich die Divs "floaten" lasse oder die Textgröße/Linienhöhe auf 0 setze, ich habe rechts stets einen Versprung :/
Lange Rede... am besten mal die Beispiele anschauen:
Ansatz #1 - Fiddle (Link)
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Problem Ansatz #2</title>
</head>
<body>
<div id="logo_back">
<div id="logo"><img src="images/logo.jpg"></div>
</div>
</body>
</html>
body {
margin:0px;
padding:0px;
}
#logo_back{
height: 121px;
width: 100%;
background: url(images/logo_back.jpg) repeat-x;
}
#logo{
height: 121px;
width: 740px;
margin: auto;
}Ansatz #2 - Fiddle (Link)
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Problem Ansatz #2</title>
</head>
<body>
<div class="background" id="logo_left"></div>
<div id="logo"><img src="images/logo.jpg"></div>
<div class="background" id="logo_right"></div>
</body>
</html>
.background{
height: 121px;
left: 0;
top: 0;
position: absolute;
width: 100%;
z-index: -1;
}
#logo_left{
background: url(images/logo_back.jpg) repeat-x;
}
#logo_right{
background: url(images/logo_back.jpg) repeat-x;
}
#logo{
height: 121px;
width: 740px;
margin: auto;
z-index: 1;
}Folgende Ansätze aus dieser Quelle brachten leider keinen Erfolg:
Code:
img {
vertical-align: bottom;
display: block;
}
font-size: 0;
line-height: 0;
Zuletzt bearbeitet:
