Zur Navigation

Problem mit 2 Bilder als Hintergrund und float

1 halbesbit (Gast)

Moinsen alle hier in Jörgs Forum :)
Hallo, ich habe wie soll es auch anders sein ein Problem :(
Ich habe 2 Grafiken eine bl.jpg und eine br.jpg
nun wollte ich ein wrapper machen mit 980px breite im body centriert und darin jeweils die Bilder links,rechts floaten und darüber noch ein div mit 780px wiederum auch zentriert doch irgenwie klappt das alles nicht so wie möchte :( der inhalt ist darunter zentriert und nicht wie ich es haben möchte über der Grafik (div) :(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>halbesbit.de - Untitled Document for Testing ;)</title>
<style type="text/css">
*{
margin:0;
padding:0;
}

html, body {
height: 100%; /* wichtig */
}
html {
margin-bottom:100px;
min-height:100%;
}

img {
 border           : none;
}

div#left, div#right  { 
 width            : 300px;
 height           : 100%;
} 

div#left{
 float:left;
 background-image : url(bl.jpg);
 height           : 100%;
} 

div#right {
 float:right;
 background-image : url(br.jpg);
 height           : 100%;
}

</style>
</head>
<body>
<div style="margin:0 auto;width:980px;height:100%;">
<div id="left"></div>
<div id="right"></div>

<div style="clear:both;"></div>	
<div id="box" style="top:0;width:780px;margin:0 auto;height:100%;">
<h1 id="header">Header</h1>
<div id="inhalt">
	<?php
	for($i=1; $i<=40;++$i)
	{ 
	if (strlen($i)==1){$z='0'.$i;
	}else{ $z=$i; }
	echo '<p class="txt"> ( '.$z.' ) Wenn you das liest can you verrrückt machen aber that ist your problem ;)</p>'; 
	}
	?>	
</div>
</div>
</div>
</body>
</html>
Demo: http://halbesbit.de/demo/testing/UntitledDocumentforTesting3.php

01.12.2008 03:43

2 Jörg Kruse

Hallo halbesbit,

mithilfe von postion:relative kannst du den Inhalt nach oben verschieben

div#inhalt {
position:relative;
top:-100%
}

01.12.2008 08:31

3 halbesbit (Gast) 

div#inhalt {
position:absolute;
top:0;
}
Daran habe ich ja nicht gedacht ;(
aber wie mache ich es nun das der Hintergrund fest ist und der text/inhalt scrollbar wird/ist?

01.12.2008 11:55

4 Jörg Kruse

Probier's mal mit overflow:auto

div#inhalt {
position:absolute;
top:0;
overflow:auto;
height: 100%;
/*background-color:#aeaeae;*/
}

01.12.2008 12:45

5 halbesbit (Gast)

Ja da hast du recht aber dan ist der Scrollbalken am div :(

01.12.2008 12:56

6 Jörg Kruse

Ja, du wolltest ja, dass der Inhalt scrollbar ist und nicht der body.

Ich würde auch eher mit Hintergrundbildern arbeiten als den Inhalt über die Bilder rüberschieben. Wenn du zwei divs ineinander verschachtelst, kannst du darüber zwei Hintergrundbilder einbinden. Oder du machst aus den zwei Grafiken eine.

01.12.2008 18:22

7 halbesbit (Gast)

Ja das sit schon richtig nur wollte ich es am beseten das nur der hintergrund stehen bleibt und sich an der höhe anpasst.
Das ganze mit den 2 Bildern, naja werde mal weiter probieren.

02.12.2008 13:44

8 Jörg Kruse

Eine Möglichkeit wäre es vielleicht noch, wenn du div#box und div#inhalt andersrum verschachtelst, so dass div#inhalt die volle Breite einnimmt.

02.12.2008 14:22

9 Ruana (Gast)

Hallo.

Ich weiß, das ist schon lange her -trotzdem, vielleicht hilft meine Lösung ja jemandem.

So ging es bei mir: Zuerst habe ich jedem Element eine andere Farbe zugewiesen, damit man sich auskennt. Im Firefox geht das mit Advark oder Webdeveloper, beiden zeigen auf Wunsch Rahmen um die einzelnen Eemente an.
Ich habe die beiden Seitenbilder mit
background-repeat: repeat-y;
nach unten fortgesetzt. Und die Box muß mit zwei Werten absolut positioniert werden, nämlich
top: 0;
left: 100px; (in diesem Fall. Das muß man sich bei anderen Breitenangaben ausrechnen.)

Nur top: 0; reicht nicht. Und fertig. Falls der Background der beiden gefloateten divs nicht scrollen soll, dann müßte man noch background-attachment: fixed; dranhängen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>halbesbit.de - Untitled Document for Testing ;)</title>
<style type="text/css">
/* basic */
*{
margin:0;
padding:0;
}
html, body {
height:100%; /* wichtig */
}
html {
margin-bottom:100px;
min-height:100%;
}
body {
background-color:#000000;
}
img {
border: none;
}

/* layout */
div#seite {
margin:0 auto;
width:980px;
height:100%;
background-color:#dddddd;
}
#left{
float:left;
background:#000000 url(bilder/red.gif);
background-repeat: repeat-y;
height:100%;
width:300px;
}
#right {
float:right;
background:#000000 url(bilder/green.gif);
background-repeat: repeat-y;
height:100%;
width:300px;
}
/* Contentbox mit Header */
div#box {
position:absolute;
top:0; left:110px;
width:780px;
margin:0 auto;
height:100%;
background-color:#aeaeae;
}
h1#header {
width:760px;
height:100px;
margin:0px;
padding: 10px;
background-color:#eeeeee;
}
#text {
width:760px;
height:100%;
margin:0px;
padding: 10px;
}
</style>
</head>
<body>
<div id="seite">
<div id="left"></div>
<div id="right"></div>

<div style="clear:both;"></div>

<div id="box">
<h1 id="header">Header</h1>
<div id="text">
<p>Inhalt</p>
</div>
</div>
</div>
</body>
</html>

Das war's. Ruana.

29.06.2009 14:48

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]