Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> 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.

[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!
Go to the top of the page
+Quote Post
seth-kk
post
Post #2





Grupa: Zarejestrowani
Postów: 444
Pomógł: 79
Dołączył: 26.05.2009

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

na 100% czego? jesli pozostalej przestrzeni to musisz uzyc tabelek lub kombinowac z przyslanianiem elementow
latwiej bedzie pomoc jesli pokazesz co chcesz osiagnac
Go to the top of the page
+Quote Post
suchy1
post
Post #3





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

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

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 ?
Go to the top of the page
+Quote Post
Lion_87
post
Post #4





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
nitek
post
Post #5





Grupa: Zarejestrowani
Postów: 209
Pomógł: 37
Dołączył: 27.02.2008
Skąd: Kwidzyn

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

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..
Go to the top of the page
+Quote Post
suchy1
post
Post #6





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

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

OK rozumiem, dzieki za pomoc!

Pozdrawiam
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.09.2025 - 13:37
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn