XHTMLforum

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)

runner 03.09.2010 01:27

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

hubspe 03.09.2010 08:01

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. ;)

runner 03.09.2010 09:11

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

fricca 03.09.2010 10:45

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.

Manfred62 03.09.2010 10:48

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

Gruß Manfred

Manfred62 03.09.2010 11:10

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

Gruß Manfred

runner 03.09.2010 11:33

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>


uspri 03.09.2010 11:37

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

runner 03.09.2010 11:43

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!!!!

uspri 03.09.2010 11:49

HTML-Code:

#cont {
background:url("images/layout.gif") repeat-y scroll 0 0 #B4B49E;
float:left;
margin:10px 0;
width:100%;
}



Alle Zeitangaben in WEZ +2. Es ist jetzt 09:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019