Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> jaki stworzyc taki layout?
hmmm
post
Post #1





Grupa: Zarejestrowani
Postów: 247
Pomógł: 0
Dołączył: 4.01.2005

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

przyznam sie, ze 3 dzien probuje cos wymyslec ...
znam xhtml i css, tak w miare, ale nie mam zadnego dobrego pomyslu ...

chodzi mi o zrobienie czegos takiego >> zobacz
ale niestety nie udaje mi sie. probowalem nadawac position: absolute, potem float: left, ale nie udalo mi sie nadac dla 3 elementow w srodkowej czesci :/

ten rysunek to schemat ... wazne jest, zeby dla calosci moc nadac ramke po lewej i prawej stronie (border-left, border-right)

bardzo prosze o pomoc ...
Go to the top of the page
+Quote Post
bela
post
Post #2


Administrator PHPedia.pl


Grupa: Developerzy
Postów: 1 102
Pomógł: 2
Dołączył: 14.09.2003

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

Dzis mam dobry humor, i akurat zenda otwartego winksmiley.jpg

[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 xml:lang="pl" lang="pl" xmlns="http://www.w3.org/1999/xhtml">
  3. <head><title>Hmm</title>
  4. <link rel="stylesheet" type="text/css" href="style.css" />
  5. </head>
  6. <body>
  7.  
  8. <div id="container">
  9.     <div id="top">Top</div>
  10.  
  11.     <div id="srodek">
  12.         <div id="ml">Menu</div>
  13.         <div id="content">Tresc</div>
  14.         <div id="mr">Menu prawe</div>
  15.     </div>
  16.  
  17.     <div id="bottom">
  18.         <div id="dl">Stopka 1</div>
  19.         <div id="dr">Stopka 2</div>
  20.     </div>
  21. </div>
  22.  
  23. </body>
  24. </html>
[HTML] pobierz, plaintext


Kod
#container {}

#top {
    height: 200px;
}

#srodek {
    min-height: 300px;
}

#ml {
    float: left;
    width: 20%;
}

#mr {
    float: right;
    width: 20%;
}

#dr {
    float: right;
}


Szerokosc ustawilem sobie aby patrzec czy dziala tongue.gif


--------------------
Dowcipy i Kawały Wycieczki Wczasy - Wyszukiwarka EasyHoliday.pl
Go to the top of the page
+Quote Post
hmmm
post
Post #3





Grupa: Zarejestrowani
Postów: 247
Pomógł: 0
Dołączył: 4.01.2005

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

no niestety ... nie dziala :/

bo wyswietla mi tylko menu i tresc w jednej linii, a menu_prawe jest juz w nastepnej razem z lewa czescia bottoma, a druga czesc jest w nastepnej, a nie o to chodzi ...
Go to the top of the page
+Quote Post
sf
post
Post #4





Grupa: Zarejestrowani
Postów: 1 597
Pomógł: 30
Dołączył: 19.02.2003
Skąd: Tychy

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

http://css.maxdesign.com.au/floatutorial/tutorial0916.htm


--------------------
Zapraszam na mój php blog, tworzenie stron.
Go to the top of the page
+Quote Post
hmmm
post
Post #5





Grupa: Zarejestrowani
Postów: 247
Pomógł: 0
Dołączył: 4.01.2005

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

ooo ... dzieki wielkie :)

tego wlasnie bylo mi trzeba.
Go to the top of the page
+Quote Post
bela
post
Post #6


Administrator PHPedia.pl


Grupa: Developerzy
Postów: 1 102
Pomógł: 2
Dołączył: 14.09.2003

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

Tak z ciekawosci, co w moim kodzie jest zle dry.gif


--------------------
Dowcipy i Kawały Wycieczki Wczasy - Wyszukiwarka EasyHoliday.pl
Go to the top of the page
+Quote Post
Volume
post
Post #7





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 11.10.2004
Skąd: 3c

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

tak mi sie ten temat spodobal, ze zrobilem swoja wersje i pomimo skonczonego problemu jeszcze ją tu zamieszcze:

index.html
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.  
  6. <link rel="stylesheet" type="text/css" href="styl.css" />
  7. <title>tytul</title>
  8.  
  9. </head>
  10. <body xml:lang="pl">
  11.  
  12. <div id="cal">
  13. 	<div id="gora">gora</div>
  14. 	<div id="ml">lewa czesc</div>
  15. 	<div id="srodek"><p>ms1</p><p>ms2</p><p>ms3</p></div>
  16. 	<div id="mr">prawa czesc</div>
  17. 	<div id="dol"><span id="dl">dl</span><span id="dr">dr</span></div>
  18. </div>
  19.  
  20. </body>
  21. </html>
[HTML] pobierz, plaintext


styl.css
Kod
Body {
    text-align: center;
    background-color: Blue;
}
div#cal {
    width: 700px;
    background-color: Gray;
    margin: 0 auto;
}
div#gora {
    background-color: Green;
    height: 100px;
}
div#ml {
    float: left;
    width: 150px;
    background-color: Aqua;
}
div#srodek {
    float: left;
    width: 400px;
    background-color: Lime;
}
div#mr {
    float: left;
    width: 150px;
    background-color: Red;
}
div#dol {
    background-color: Silver;
    clear: both;
    height: 20px;
}
div#srodek p {
    margin: 7px;
    padding: 1px;
    background-color: Yellow;
}
div#dol span {
    display: block;
    width: 350px;
    height: 20px;
    float: left;
}
span#dl {
    background-color: #FFE4C4;
}
span#dr {
    background-color: #DEB887;
}
Go to the top of the page
+Quote Post
hmmm
post
Post #8





Grupa: Zarejestrowani
Postów: 247
Pomógł: 0
Dołączył: 4.01.2005

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

no prawie @volume ;)

mi chodzilo o to, zeby kazdy z przedstawionych przeze mnie elementow byl div'em, bo dopiero w nich bede umieszczal cala reszta: <p>, inne <div>, <img>, itd.
Go to the top of the page
+Quote Post
Volume
post
Post #9





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 11.10.2004
Skąd: 3c

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

AHa w takim razie po prostu akapity i spany zastąp divami. Z kodu css usuń tam gdzie byly spany display: block; (bo div juz ma tą wlasnosc bloku wiec to jest zbedne) i tam gdzie akapity p usun marginn i padding albo sam ustal swoje dla divów.
Niektórzy jak już się wezmą za divy to jakby przestają dopuszczac do kodu inne tagi co jest jednak błędem.
Go to the top of the page
+Quote Post
xarr
post
Post #10





Grupa: Zarejestrowani
Postów: 105
Pomógł: 0
Dołączył: 5.12.2004

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

Volume oj oj.... prawde gadasz niestety, prawde smile.gif Najciekawsze jest niestety to ze w wiekszosci wypadkow jest to spowodowane brakiem wiedzy, bo jak <p> jest jeszcze w miare popularne, tak jakies <em>, jakies inne znaczniki listowe to juz jest zbedny gadget, ktorego uzycie da rade ominac.
Dobrze ze jednak powoli ludzie staraja sie divami tworzyc www, a nie na tabelkach. To juz duzy krok na przod. Oby tak dalej smile.gif
Go to the top of the page
+Quote Post
hmmm
post
Post #11





Grupa: Zarejestrowani
Postów: 247
Pomógł: 0
Dołączył: 4.01.2005

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

hehe :) co do mnie, to <div> i css zaczalem stosowac jak tylko o tym uslyszalem.

@bela_666 wynik kodu, ktory podales prezentuje sie w takich duzym uproszczeniu w ten sposob:
Kod
                 top
menu                                       tresc
                   stopka1                           menu prawe
                                                                 stopka2

jak widzisz, menu, tresc i menu prawe nie sa w jednej linii.
o to mi chodzilo :)
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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: 21.08.2025 - 12:33
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn