Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]divy i tła
Forum PHP.pl > Forum > Przedszkole
hahaha
18.05.2008, 21:13:44
Witam smile.gif

Co mogę zrobić by z lewej i prawej strony było jedno to samo tło a na środku inne
mam stronkę i po środku jakiś tekst zdjęcia itp
chiabym to zamieścić w takiej ramce (divy) i jej nadać tło
a pomiędzy tymi rzeczemi nadać jakieś inne tło

mam takie coś :
Kod
body {
    font:normal .75em/1.2em Verdana, Tahoma, Arial, Helvetica, sans-serif;
    background: url(images/white) #fff repeat-x;
    text-align:center;
    color:#2D2D2D;
piotrooo89
18.05.2008, 21:17:47
tworzysz 3 kontenery div, ustawiasz je odpowiednio, dodajesz kolory takie jak chcesz...

nie wiem czy dobrze zrozumiałem ale chcesz mieć układ strony:

lewy środek prawy
yellow black yellow
hahaha
18.05.2008, 21:19:03
dokładnie tak

tylko mógłby mi ktoś jakiś przykład dać? winksmiley.jpg
piotrooo89
18.05.2008, 21:23:28
żaden ze mnie specjalista w css ale moge spróbować.

[HTML] pobierz, plaintext 
  1. <html>
  2.         <head>
  3.                 <title>layout 3 kolumnowy</title>
  4.                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.                 <meta http-equiv="Content-language" content="pl" />
  6.                 <style type="text/css">
  7.                         body {
  8.                                 margin: 0;
  9.                                 padding: 0;
  10.                                 background-color: #000;
  11.                         }
  12.                         #main {
  13.                                 width: 750px;
  14.                                 margin: 0 auto;
  15.                         }
  16.                         h1, form {
  17.                                 margin: 0;
  18.                                 padding: 0;
  19.                         }
  20.                         h1 {
  21.                                 display: block;
  22.                                 width: 750px;
  23.                                 height: 209px;
  24.                                 background-color: #999;
  25.                         }
  26.                         #contLeft {
  27.                                 width: 174px;
  28.                                 float: left;
  29.                                 background-color: yellow;
  30.                         }
  31.                         #contRight {
  32.                                 width: 186px;
  33.                                 float: left;
  34.                                 background-color: yellow;
  35.                         }
  36.                         .clear {
  37.                                 width: 0px;
  38.                                 height: 0px;
  39.                                 margin: 0px;
  40.                                 padding: 0px;
  41.                                 font-size: 0px;
  42.                                 clear: both;
  43.                         }
  44.                         #contCenter {
  45.                                 width: 390px;
  46.                                 float: left;
  47.                                 font-size: 12px;
  48.                                 background-color: #1aa;
  49.                         }
  50.                         #footer {
  51.                                 height: 25px;
  52.                                 color: #fff;
  53.                                 text-align: center;
  54.                                 background-color: #444;
  55.                         }
  56.                 </style>
  57.         </meta></meta></head>
  58.         <body id="main">
  59.                         <h1>NAGLOWEK</h1>
  60.                         <div id="contLeft">KOLUMNA LEWA</div>
  61.                         <div id="contCenter">SRODEK</div>
  62.                         <div id="contRight">KOLUMNA PRAWA</div>
  63.                         <div class="clear"></div>
  64.                         <div id="footer">STOPKA</div>
  65.         </body>
  66. </html>
[HTML] pobierz, plaintext


nie ma tu jeszcze marginów i paddingów ale to już chyba sam sobie wykombinujesz smile.gif
hahaha
18.05.2008, 21:58:34
nie do końca o to mi chodziło tongue.gif

chciałbym takie coś

http://img511.imageshack.us/img511/6779/beztytuume9.png


ciciałbym by to było dopasowene do mojego html'u

Kod
<link href="style.css" type=text/css rel=stylesheet />
</head>
<body>

<div id="podstawa">
<div id="tytul">
<h1><a href="/">zzzz<span>pl</span></a></h1>

<div id="formularz"><form method="get" id="searchform" action=""><input type="text" value="" name="s" id="s" /><input type="image" src="images/submit.jpg" alt="Szukaj" id="searchsubmit" value="szukaj" /></form></div>
</div>
<div id="data">Strona w budowie</div>

<div id="banner"></div>

<ul id="hmenu">
<li><a href="#nogo" title="Strona główna">Link</a></li>
<li><a href="#nogo" title="Strona główna">Link</a></li>
<li><a href="#nogo" title="Strona główna">Link</a></li>
<li><a href="#nogo" title="Strona główna">Link</a></li>
<li><a href="#nogo" title="Strona główna">Link</a></li>
<li><a href="#nogo" title="Strona główna">Link</a></li>
</ul>

<div id="lewa">
<div id="content">

<p class="data">12 kwietnia 2006</p><h2 class="naglowek"><a href="#nogo">Powastanie strony</a></h2>    
fwjfvwjfwvfjfvjfhvjwhfvwjfvwjefwkjfbEKFBeffbkjfbkf
    <p class="clear">* * *</p>


<p class="data">12 kwietnia 2006</p><h2 class="naglowek"><a href="#nogo">Serwer</a></h2>    
wgeqjfddghfdghqfhdqdfqdqhdqfdq
    <p class="clear">* * *</p>
</div></div>

<div id="prawa">
<div id="menu">
<h3>Ciekawe linki</h3>
<ul>
<li><a href="#nogo">google</a></li>
<li><a href="#nogo">google</a></li>
<li><a href="#nogo">google</a></li>
<li><a href="#nogo">Aliquam consectetuer</a></li>
<li><a href="#nogo">Maecenas condimentum tellus.</a></li>
<li><a href="#nogo">Vivamus posuere orci.</a></li>
<li><a href="#nogo">Suspendisse nibh.</a></li>
<li><a href="#nogo">Nam non ipsum eu risus.</a></li>
<li><a href="#nogo">In ut tellus ac.</a></li>
<li><a href="#nogo">Cras auctor aliquet.</a></li>
</ul>
</div>

<div id="forum">
<h3>Ostatnio na Forum</h3>
<ul>
<li><a href="#nogo">Sed sodales blandit mi.</a></li>
<li><a href="#nogo">Phasellus non nisl</a></li>
<li><a href="#nogo">Donec convallis.</a></li>
<li><a href="#nogo">Aliquam consectetuer</a></li>
<li><a href="#nogo">Maecenas condimentum tellus.</a></li>
<li><a href="#nogo">Vivamus posuere orci.</a></li>
</ul>
</div>



</div>

<div id="nibystopka">zzz</div>
</div>
</body>
</html>



i do css'a

http://wklej.org/id/70bd48eaf5
Shili
18.05.2008, 22:43:50
Jeśli dobrze rozumiem, to do body dodaj
Kod
;background: color;

Gdzie kolor oczywiście będzie wybranym przez Ciebie kolorem (możesz tym myślę, z powodzeniem zastąpić istniejący styl).
A do #postawa tło czarne:
Kod
background: #000000;

Żeby mieć jednolite czarne tło musisz też istniejące obramowania zamienić na kolor czarny i poszczególne kontenery w tym divie, które mają inny kolor tła niż czarne również na czarne.

Jeśli natomiast chesz mieć jakieś tło obrazkowe, to zamiast kolorów dodajesz obrazek, wtedy po prostu z podrzędnych divów musisz usunąć obramowania i ich tła.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.