Forum PHP.pl > [css] cos a'la 2 kolumny

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [css] cos a'la 2 kolumny

Forum PHP.pl > Forum > Przedszkole

{VeTeR}

17.07.2007, 13:21:35

Witam

w css chcialbym uzyskac taki efekt

przy kodzie

Kod

div#naglowek
    {
        width:100%;
        background:url('../images/wyswietlacz2.jpg') no-repeat;
    }

div#prawa_polowa
    {
        position: relative;
        top:0px;
        left: 50%;
        width:50%;
    }

div#lewa_polowa
    {
        position: relative;
        top:0px;
        left: 0px;
        margin: 5px 5px;
        width:50%;
    }

wyglada to tak ze pierwszy div jest wyzej a drugi pod nim z tym ze na drugiej polowie. gdzie robie blad?
z gory dzieki za pomoc

Dandelion

17.07.2007, 13:39:14

[HTML] pobierz, plaintext 
<html>
<head>
 <link rel="stylesheet" type="text/css" href="css.css"/>
</head>
 
<body>
 
	<div id="logo">logo</div>
	<div id="lewa">lewa</div>
	<div id="prawa">prawa</div>
 
</body>
 
</html>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
div#logo{
	width:700px;
	height:100px;
	background-color:orange;
}
 
div#lewa{
	float:left;
	width:350px;
	height:400px;
	background-color:green;
}
 
div#prawa{
	float:left;
	width:350px;
	height:400px;
	background-color:yellow;
}
[HTML] pobierz, plaintext

{VeTeR}

17.07.2007, 14:24:19

dzieki, sprobowalem ta opcje to tez nie zupelnie dziala.
moze powiem wiecej
ten css jest do newsow wiec wszystko jest zapetlane kilkakrotnie...

Kod

<div id="main">

    <div id="naglowek">
        naglowek
    </div>

    <div id="prawa_polowa">
        <img src="" width="150">
    </div>

    <div id="lewa_polowa">
    tekst
    </div>

</div>
i znowu i znowu...

caly CSS

Kod

div#main
    {

        width:435px;
        border: 0;

    }

div#naglowek
    {
        width:100%;
        background:url('../images/wyswietlacz2.jpg') no-repeat;


    }

div#prawa_polowa
    {
        position: relative;
        top:0px;
        left: 50%;
        width:50%;
    }

div#lewa_polowa
    {
        position: relative;
        top:0px;
        left: 0px;
        margin: 5px 5px;
        width:50%;
    }

niestety wyglada to tak

nie wiem czy nie lepiej poprostu wstawic tam tabelki z dwiema kolumnami :/

hilfe

yaotzin

17.07.2007, 15:10:49

Cytat(Dandelion @ 17.07.2007, 14:39:14 )

[HTML] pobierz, plaintext 
<html>
<head>
 <link rel="stylesheet" type="text/css" href="css.css"/>
</head>
 
<body>
     <div id="wrapper">
	<div id="logo">logo</div>
	<div id="lewa">lewa</div>
	<div id="prawa">prawa</div>
    </div>
</body>
 
</html>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
div#logo{
	width:700px;
	height:100px;
	background-color:orange;
}
 
div#lewa{
	float:left;
	width:350px;
	height:400px;
	background-color:green;
}
 
#wrapper{
 width:700px;
 height:auto;
margin-left:auto;
margin-right:auto;
}
 
div#prawa{
	float:left;
	width:350px;
	height:400px;
	background-color:yellow;
}
[HTML] pobierz, plaintext

Troszkę poprawione, ale tamta wersja też powinna działać. Klepię z palca więc moga być błędy, dodałem element wrapper który trzyma całość jako jedno, tym samym nic się nie przesuwa tylko trzeba liczyć piksele w szczególności czuły na to jest IE. PZDR

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.