Problem mti Website erstellen / Css Div Boxes

Rod-Barko · 12.05.10, 09:59

Hallo liebes Forum.
Ich hoffe hier eine Lösung für mein folgendes Problem zu finden.
Ich bin momentan eine Website für einen Freund am gestalten und dabei bin ich auf ein problem gestossen.

Ich habe die Website mit PS erstellt und dann geslicet. Die Slices sind mit Css und divboxen an ihre positionen gebracht. Hatte es vorher mit tabellen gemacht aber da hat mir IE immer nen Strich durch die Rechnung gemacht obwohl in Firefox, Safari und Chrome alles bestens war.

Die Website hat links und Rechts zwei Grafiken ( 1 & 2 )
In der Mitte (3) Soll der Text hin... DA ist ein Hintergrund drin der nicht wiederholt wird und fixiert ist.... Die hintergrundfarbe beträgt hier auch das selbe rot, damit es weitergeführt wird fals zuviel text rein kommt ( wie momentan auf dem Bild)

Unter den Grafiken 1 & 2 Sind kurze grafiken drin, welche gegen unten immer wieder widerholt werden sollen, damit die seite mit dem Text wächst

Nun hab ich folgendes problem
Die höhen der div boxen der repeater kann ich nicht an der höhe der div box des texts ausrichten. Jedenfalls weiss ich nicht wie

Gebe ich nichts an sind die div boxen mit den grafiken nicht sichtbar.... gebe ich als höhe z.b. 200px an sind sie sichtbar.. wie stelle ich es jedoch an, dass die höhe bis ans seitenende geht oder sich an der höhe der divbox mit text und Hintergrund ausrichtet ?

Bild:

mainboard · 12.05.10, 10:33

hi

kannst du mir den code senden? (HTML und CSS File) dann mache ich das kurz.

mfg mainboard

edit: probier es mal mit:

height:auto;

Rod-Barko · 12.05.10, 10:59

Sollte Folgendes sein
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Index</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<style type="text/css">
#Tabelle_01 { position: absolute;
clear:both;
left: 50%;
top: 0px;
margin-left: -512px;
width: 1042px;
}
#Index-01 { position: absolute;
left: 0px;
top: 0px;
width: 1024px;
height: 117px;
}
#Index-02 { position: absolute;
left: 0px;
top: 117px;
width: 218px;
height: 30px;
}
#Index-03 { position: absolute;
left: 218px;
top: 117px;
width: 100px;
height: 30px;
}
#Index-04 { position: absolute;
left: 318px;
top: 117px;
width: 153px;
height: 30px;
}
#Index-05 { position: absolute;
left: 471px;
top: 117px;
width: 105px;
height: 30px;
}
#Index-06 { position: absolute;
left: 576px;
top: 117px;
width: 113px;
height: 30px;
}
#Index-07 { position: absolute;
left: 689px;
top: 117px;
width: 144px;
height: 30px;
}
#Index-08 { position: absolute;
left: 833px;
top: 117px;
width: 191px;
height: 30px;
}
#Index-09 { position: absolute;
left: 0px;
top: 147px;
width: 196px;
height: 529px;
}
#Index-10 { background-repeat: no-repeat;
clear:both;
position: absolute;
left: 196px;
top: 147px;
width: 637px;
background-color: rgb(141, 3, 3);
}
#Index-11 { position: absolute;
left: 833px;
top: 147px;
width: 191px;
height: 529px;
}
#Index-12 {
left: 0px;
top: 676px;
width: 196px;
height: auto;
background-image: url(file:///C:/Users/John/Documents/Websiten/Loslocos/Bilder/Index_12.jpg);
position: absolute;
}
#Index-13 { position: absolute;
left: 833px;
top: 676px;
width: 191px;
height: 200px;
background-image: url(file:///C:/Users/John/Documents/Websiten/Loslocos/Bilder/Index_13.jpg);
}
#Index-14 { position: absolute;
height: 81px;
}
</style>
</head>

<body style="margin: 0px; background-color: rgb(255, 255, 255);">


<center>
<div id="Tabelle_01">
<div id="Index-01"> <img src="Bilder/Index_01.jpg" height="117" width="1024"> </div>

<div style="background-image: url(Bilder/Index_02.jpg);" id="Index-02"> </div>

<div style="background-image: url(Bilder/Index_03.jpg);" id="Index-03"> </div>

<div style="background-image: url(Bilder/Index_04.jpg);" id="Index-04"> </div>

<div style="background-image: url(Bilder/Index_05.jpg);" id="Index-05"> </div>

<div style="background-image: url(Bilder/Index_06.jpg);" id="Index-06"> </div>

<div style="background-image: url(Bilder/Index_07.jpg);" id="Index-07"> </div>

<div style="background-image: url(Bilder/Index_08.jpg);" id="Index-08"> </div>

<div style="background-image: url(Bilder/Index_09.jpg);" id="Index-09"> </div>

<div style="background-image: url(Bilder/Index_10.jpg);" id="Index-10"> Dies
ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

Dies ist ein TEST <br>

<div style="background-image: url(Bilder/Index_14.jpg);" id="Index-14"> </div>
</div>

<div style="background-image: url(Bilder/Index_12.jpg);" id="Index-12"> </div>

<div style="background-image: url(Bilder/Index_13.jpg);" id="Index-13"> </div>

<div style="background-image: url(Bilder/Index_11.jpg);" id="Index-11"> </div>

</div>

</center>


</body>
</html>
[/HTML]

Rod-Barko · 12.05.10, 12:30

habs glaub ich gerade selbst geschafft...
ich hab probiert gehabt die höhe der div boxes mit den repeater auf 100% hat nicht funktioniert...
aber wenn ich ausserdem die höhe der Div box welche um allles herum ist auf 100% stelle.... dann gehts !
aber nun muss ich es nur noch schaffen, dass der footer am ende angezeigt wird

Rod-Barko · 12.05.10, 12:36

Zitat:

Zitat von Rod-Barko

habs glaub ich gerade selbst geschafft...
ich hab probiert gehabt die höhe der div boxes mit den repeater auf 100% hat nicht funktioniert...
aber wenn ich ausserdem die höhe der Div box welche um allles herum ist auf 100% stelle.... dann gehts !
aber nun muss ich es nur noch schaffen, dass der footer am ende angezeigt wird

*edit..
nein doch nicht... war nur zufälligerweise gleich gross

So das hauptproblem ist afaik, dass das div tag mit dem text grösser ist als das haupt div. D.h. Das hauptdiv, welches alles beinhaltet wächst nicht mit dem text div mit... wenn also die repeater 100 % sind dann nur 100% des hauptdivs welches ja nicht mitwächst hmm

mainboard · 12.05.10, 19:58

ok ich hab normalerweise viel mit css zu tun aber das überfordert mich jetzt ein bisschen...

die 100% richten sich nach dem bildschirm aus...

gruss mainboard