Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Połozenie DIV
suchy1
post
Post #1





Grupa: Zarejestrowani
Postów: 246
Pomógł: 8
Dołączył: 2.04.2006
Skąd: Gliwice

Ostrzeżenie: (0%)
-----


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.

  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>


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


Z gory dzieki za pomoc!
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
Lion_87
post
Post #2





Grupa: Zarejestrowani
Postów: 850
Pomógł: 120
Dołączył: 15.02.2007
Skąd: Łódź

Ostrzeżenie: (10%)
X----


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>


Ten post edytował Lion_87 27.06.2009, 14:13:20
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 16.10.2025 - 10:37