XHTMLforum - 3 Spalten per Grafik verlängern

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - 3 Spalten per Grafik verlängern (http://xhtmlforum.de/showthread.php?t=62252)

3 Spalten per Grafik verlängern

Guten Abend,

ich verzweifel langsam und zwar versuche ich auf meiner Webseite

http://www.betatests.de.vu die 3 Content-Spalten mittels des Elternelements (cont) und der Grafik (repeat-x) bis an den Footer zu verlängern, jedoch wird das Elternelement gar nicht rangezogen was mache ich falsch?

Ich hoffe ich konnte verständlich machen, was ich meine:

Ich möchte später die background-color: xx; bei den 3 Contentspalten entfernen und diese Spalten durch ein background-image (div cont) mit repeat anzeigen lassen. Dadurch das der cont als Elternelement ja mitwachen sollte, sollten die 3 Spalten durch das Background-image ja dann bis an den Boden gehen!

Was mache ich falsch?

Danke und Grüße

Moin,

gleichlange Spalten ist normal ein Fall für Faux Columns.

height:100% für #rightcol und #leftcol können nicht wirken, da alle Vorfahren bis inkl. html dann auch height:100% benötigen. ;)

Hallo hupse,

vielen Dank!

Ich habe nun die 100% height entfernt.

Und das mit den FAUX-Columns habe ich ja eigentlich schon gemacht, mit dem Elternelement von leftcol, rightcol und content, nämlich dem div "cont", leider sehe ich aber kein Ergebnis?

Dankeschön und Grüße

Zitat:

Zitat von runner (Beitrag 473541)

Und das mit den FAUX-Columns habe ich ja eigentlich schon gemacht, mit dem Elternelement von leftcol, rightcol und content, nämlich dem div "cont", leider sehe ich aber kein Ergebnis?

Die Grafik exisitiert nicht und #cont schließt die Floats nicht ein.

Leg die BG Datei in den Wrapper. Dann sollte es gehen.
Merke grad, die Datei ist garnicht da...?

Gruß Manfred

Grad per Firebug getestet: Grafik in #wrapper legen --> passt!

Gruß Manfred

Vielen Dank!

Den Pfad habe ich berichtigt!
Mit dem Wrapper funktioniert es auch!

Ich würde es nur gerne in dem cont machen.

Was ist den noch falsch, dass er die 3 Spalten nicht umschliesst?

Ich finde einfach nicht welcher div zuviel ist bzwl nicht passt.
Im IE 7 wird es aber auch so schon richtig angezeigt! Im FF nicht!

Hier mal mein HTML-Template:

HTML-Code:

<div id="pagewidth" >

 <div id="header">

  <div id="logo"> 

  <!--###logo###-->

  hier logo        

  <!--###logo###-->

  </div> 



  <div id="banner">

  <!--###banner###-->

  hier banner        

  <!--###banner###-->

  </div>

 </div>

 <div id="wrapper" class="clearfix" > 



   <div id="navi-top">

  <!--###navi-top###-->

  hier navi-top        

  <!--###navi-top###-->

  </div>

<div id="cont" >

<div id="rightcol"> 

<div class="csc-textpic csc-textpic-right csc-textpic-above"><div class="csc-textpic-imagewrap csc-textpic-single-image"><img src="fileadmin/templates/images/pic.jpg"  width="120" border="0" height="161"></div><div class="csc-textpic-text">

                <!--  Text: [begin] -->

                        <p class="bodytext">Tel. 0123 0123

</p>

<p class="bodytext"><a href="javascript:linkTo_UnCryptMailto('ocknvq,kphqByqjpgp/ko/fgrqv0fg');">info(at)domain.de</a>

</p>

<p class="bodytext">&gt; zum Kontaktformular</p>

                <!--  Text: [end] -->

</div>

</div>

 

</div>



<div id="content"> 

<!--###content###-->

hier content

<!--###content###-->

 </div>

 

<div id="leftcol">

 <div id="navi-bottom">

  <!--###navi-bottom###-->

  hier navi-bottom        

  <!--###navi-bottom###-->

  </div>

   <div id="capture">

  <!--###capture###-->

  hier capture        

  <!--###capture###-->

  </div>

</div>

</div>



        <div id="footer">

  <!--###footer###-->

  hier footer        

  <!--###footer###-->

        </div>

        </div>

Gib Deinem #cont ein float:left mit, dann schliest es die Floats ein.

Super!

Das war es - jetzt habe ich nur noch eine Anforderung bei diesem Layout und zwar soll unten und oben (div cont) 10 px frei sein, d.h. unten und oben soll statt der grafik repeat-y eine hintergrundfarbe (#b4b49e) angezeigt werden.

Kann ich dies innerhalb des cont-divs machen, oder muss ich unten und oben einen div anfügen?

Dankeschön!!!!

HTML-Code:

#cont {

background:url("images/layout.gif") repeat-y scroll 0 0 #B4B49E;

float:left;

margin:10px 0;

width:100%;

}