Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Połozenie DIV
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
suchy1
27.06.2009, 10:52:05
Witam,

Chciałbym zrobi takie coś: Główny obrazek wyświetlam na środku nastepnie jeden obrazek rozciagam na 100% i drugi po prawej na 100%. W praktyce wychodzi tak ze wszystkie sa pod soba.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3.     <head>
  4.         <link rel="stylesheet" href="lewi.css" type="text/css" />
  5.     </head>
  6.     <div>
  7.         <div id="leftSide"></div>
  8.         <div id="imageOne"></div>
  9.         <div id="rightSide"></div>
  10.     </div>
  11.     <div style="clear: both;"></div>
  12.     <div id="pageContent"></div>
  13.     </body>
  14. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. body{
  2.     font-size:62%;
  3.     font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
  4.     background:#d1eafd;
  5.     color:#333;
  6.     text-align:left;
  7. }
  8. #leftSide{
  9.     background-image:url('images/back_left.jpg');
  10.     background-repeat:repeat-x;
  11.     width:100%;
  12.     height:190px;
  13.     float:left;
  14. }
  15. #imageOne{
  16.     background-image: url('images/centerTop.jpg');
  17.     width:403px;
  18.     height:190px;
  19.     margin-left:500px;
  20.     background-repeat:no-repeat;
  21.     float:left;
  22. }
  23. #rightSide{
  24.     background-image:url('images/back_right.jpg');
  25.     background-repeat:repeat-x;
  26.     width:100%;
  27.     height:190px;
  28.     float:left;
  29. }
[HTML] pobierz, plaintext


Z gory dzieki za pomoc!
seth-kk
27.06.2009, 11:01:48
na 100% czego? jesli pozostalej przestrzeni to musisz uzyc tabelek lub kombinowac z przyslanianiem elementow
latwiej bedzie pomoc jesli pokazesz co chcesz osiagnac
suchy1
27.06.2009, 12:29:38
Co chce osiagnac ? Na samym srodku (margin 0 auto) wyswietla obrazek. Po lewej i prawej stronie maja sie rozciagac linie (dopasowac do rozdzielczosci ekranu). Jednak te linie to dwa rozne obrazki, gdyz obrazek na srodku taki jest. Jak taki efekt uzyskac ?
Lion_87
27.06.2009, 14:09:57
Są pod sobą bo stosujesz do lewego i prawego 100% width.
Jedynie uda Ci się jak ogólną całość przyjmiesz za 100% ale nie wiem czy tak chcesz bo wtedy i środek będzie "płynny"

Kod
<style>
body{
font-size:62%;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
background:#d1eafd;
color:#333;
text-align:left;
padding:0px;
margin:0px;
}

#box{
width:100%;
margin:0px auto;
}

#leftSide{
width:30%;
background:#fff000;
height:190px;
float:left;
display:block;
}
#imageOne{
background:#000;
width:40%;
height:190px;
background-repeat:no-repeat;
float:left;
}
#rightSide{
width:30%;
background:#ff0000;
height:190px;
float:left;
display:block;
}

</style>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />  
  </head>
  <body>

<div id="box">
<div id="leftSide"></div>
<div id="imageOne"></div>
<div id="rightSide"></div>
</div>
<div style="clear: both;"></div>
<div id="pageContent"></div>

  </body>
  </html>
nitek
29.06.2009, 18:06:38
Jeśli dobrze zrozumiałem twoje zamiary, to środkowy obrazek możesz dać tak jak mówisz, a co do linii, to może być to jeden obrazek na 100% całej strony, wypozycjonowany absolutnie + zabawa z z-index tak, aby środkowy obraz był na wierzchu/przesłaniał linie..
suchy1
29.06.2009, 20:45:01
OK rozumiem, dzieki za pomoc!

Pozdrawiam
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.