Forum PHP.pl > [CSS] Image jako tło dla trzech kolumn

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Image jako tło dla trzech kolumn

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

lonek

11.09.2008, 10:14:51

Witam,

Mam problem z ustawieniem gif'a jako tła dla trzech kolumn, które ujęte są dodatkowo w divie wrapperze. W IE7 strona wygląda dobrze, ale w Firefoxie tło nie wyświetla się prawidłowo. Co nie wygląda okej można zobaczyć tutaj: http://sv.pl/terra/

A to kod:

Kod

body {
    margin: 0;
    padding: 0;
    height:100%;
}

.rounded_top {
    width: 1000px;
    height: 111px;
    margin: 0px auto;
    background: url(../images/rounded_top.gif) no-repeat top center;
}

.main_wrapper {
    width: 1000px;
    height: 100%;
    position: relative;
    margin: 0 auto;
    background: url(../images/page_bg.gif) repeat-y top center;
    /*background: #ccc;*/
}

.main_container {
    width: 960px;
    margin: -60px 0px 0px 20px;
    /*background: #65bac7;*/
}

.pageclose {
    width: 1000px;
    height: 36px;
    margin: 0 auto;
    clear: both;
    background: url(../images/page_close.gif) no-repeat top;
}

#content_left {
    display:inline;
    width:221px;
    float:left;
    /*background: #cc00cc;*/
    padding-right: 9px;
}

#content_center {
    display:inline;
    width:516px;
    *width: 500px;
    padding: 0 11px 0 11px;
    *padding: 0 23px 0 8px;
    margin: 0px 0 0px 0;
    border-left: 1px solid #d6d6d6;
    border-right: 1px solid #d6d6d6;
    float:left;
    text-align: left;
    /*background: #cba444;*/
}

#content_right {
    display:inline;
    width:181px;
    padding-left: 9px;
    float:right;
    /* background: #09921a; */
}

i HTML:

[HTML] pobierz, plaintext 
<div class="rounded_top">	
</div>      
 
<div class="main_wrapper">
 
	<div class="main_container">
 
		<div id="content_left">
			<p>Content.</p>
			<p>Content.</p>
			<p>Content.</p>
			<p>Content.</p>
			<p>Content.</p>
			<p>Content.</p>
			<p>Content.</p>
			<p>Content.</p>
			<p>Content.</p>																								
		</div>
 
        <div id="content_center">
			<p>Content.</p> 
        </div><!--end content_center-->
 
		<div id="content_right">
			<p>Content.</p>
		</div>
 
	</div><!--end main_container-->
 
</div><!--end main_wrapper-->
 
<div class="pageclose">
</div>
 
<div class="clear"></div>
[HTML] pobierz, plaintext

Link jeszcze raz:

http://sv.pl/terra/

Będę wdzięczny za wszelką pomoc, nie mogę się doszukać błędu..

wookieb

11.09.2008, 10:19:15

Kod

<div class="main_wrapper">

    <div class="main_container">

        <div id="content_left">
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
        </div>

        <div id="content_center">
            <p>Content.</p>
        </div>

        <div id="content_right">
            <p>Content.</p>
        </div>

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

A najważniejsze to <div style="clear:both;"></div>
na http://kurs.browsehappy.pl znajdziesz duzo ciekawych ifnormacjo na ten temat.

lonek

11.09.2008, 10:24:37

No właśnie.. dzięki.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.