Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Pokrojony layout z tabelek do divów :(, Jak się za to zabrać !?
vieri_pl
post 23.01.2006, 16:05:31
Post #1





Grupa: Zarejestrowani
Postów: 406
Pomógł: 9
Dołączył: 24.07.2005
Skąd: Bydgoszcz

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

Pociąłem w Photoshopie szablon strony, oto jego kod:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>KPortal lay 2</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8852-2" />
  5. </head>
  6. <body bgcolor=#FFFFFF leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
  7. <!-- ImageReady Slices (KPortal_lay_2.psd) -->
  8. <table width=780 border=0 cellpadding=0 cellspacing=0>
  9. 	<tr>
  10. 		<td colspan=3>
  11. 			<img src="images/kportal_01.gif" width=780 height=103 alt="" /></td>
  12. 		<td>
  13. 			<img src="images/spacer.gif" width=1 height=103 alt="" /></td>
  14. 	</tr>
  15. 	<tr>
  16. 		<td rowspan=2>
  17. 			<img src="images/kportal_02.gif" width=158 height=167 alt="" /></td>
  18. 		<td>
  19. 			<img src="images/kportal_03.gif" width=438 height=33 alt="" /></td>
  20. 		<td>
  21. 			<img src="images/kportal_04.gif" width=184 height=33 alt="" /></td>
  22. 		<td>
  23. 			<img src="images/spacer.gif" width=1 height=33 alt="" /></td>
  24. 	</tr>
  25. 	<tr>
  26. 		<td rowspan=2>
  27. 			<img src="images/kportal_05.gif" width=438 height=437 alt="" /></td>
  28. 		<td rowspan=2>
  29. 			<img src="images/kportal_06.gif" width=184 height=437 alt="" /></td>
  30. 		<td>
  31. 			<img src="images/spacer.gif" width=1 height=134 alt="" /></td>
  32. 	</tr>
  33. 	<tr>
  34. 		<td rowspan=2>
  35. 			<img src="images/kportal_07.gif" width=158 height=330 alt="" /></td>
  36. 		<td>
  37. 			<img src="images/spacer.gif" width=1 height=303 alt="" /></td>
  38. 	</tr>
  39. 	<tr>
  40. 		<td colspan=2>
  41. 			<img src="images/kportal_08.gif" width=622 height=27 alt="" /></td>
  42. 		<td>
  43. 			<img src="images/spacer.gif" width=1 height=27 alt="" /></td>
  44. 	</tr>
  45. </table>
  46. <!-- End ImageReady Slices -->
  47. </body>
  48. </html>
[HTML] pobierz, plaintext


Wiem że tabelki, nie są już na czasie... ale nie wiem jak to przerobić na divy sad.gif Znam troche podstaw, no ale to już bardziej złożony szablon musiałby być. Pomoże mi ktoś, to przerobić questionmark.gif sadsmiley02.gif PLEASE !
Go to the top of the page
+Quote Post
mike
post 23.01.2006, 17:55:27
Post #2





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

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

index.html
Kod
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
  <head>
  <title></title>
  <meta name="author" content="Święty Mikołaj :-)" />
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="mainContainer">
    <div id="siteLogo"></div>
    <div id="leftColumn">
        <div id="leftColumnTop"></div>
        <div id="leftColumnBottom"></div>
    </div>
    <div id="middleColumn">
        <div id="contentHeader"></div>
        <div id="content">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>
    <div id="rightColumn">
        <div id="rightColumnTop"></div>
        <div id="rightColumnBottom"></div>
    </div>
    <div id="siteFooter"></div>
</div>

</body></html>

(dełem w [ code ] żeby wcięcia były widoczne)

style.css
Kod
body {
    text-align: center;
}

#mainContainer {
    margin: auto;
    width: 780px;
    text-align: left;
    overflow: auto;
}

#siteLogo {
    width: 780px;
    height: 103px;
    float: left;
    background: #f00;
}

#leftColumn {
    width: 158px;
    float: left;
    overflow: auto;
}

#leftColumn #leftColumnTop {
    width: 158px;
    height: 167px;
    float: left;
    background: #0f0;
}

#leftColumn #leftColumnBottom {
    width: 158px;
    height: 330px;
    float: left;
    background: #f00;
}

#rightColumn {
    width: 184px;
    float: right;
    overflow: auto;
}

#rightColumn #rightColumnTop {
    width: 184px;
    height: 33px;
    float: right;
    background: #0f0;
}

#rightColumn #rightColumnBottom {
    width: 184px;
    height: 437px;
    float: right;
    background: #f00;
}

#middleColumn {
    width: 438px;
    float: left;
    overflow: auto;
}

#middleColumn #contentHeader {
    width: 438px;
    height: 33px;
    float: left;
    background: #00f;
}

#middleColumn #content {
    width: 438px;
    height: 437px;
    float: left;
    background: #0ff;
}

#siteFooter {
    width: 622px;
    height: 27px;
    float: right;
    background: #ff0;
}


Nie ukrywam że można to zrobić jeszcze prościej, nie używając kontenerów #leftColumn, #rightColumn i #middleColumn, ale z doświadczenia wiem, że często one się przydają do różnych celów.
Go to the top of the page
+Quote Post
mike
post 23.01.2006, 18:42:16
Post #3





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

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

No przesadzasz.
Chciałeś pomocy, ale widzę, że używasz tego słowa jako synonimu go gotowiec.
Założe się, że nawet nie wczytałes się w to co Ci dałem.
A gdybyś to zrobił to byś wiedział, że to nic trudnego.

Echh, ...

1. Zmniejsz width dla elementów znajdujęcych się w #leftColumn;
2. Dorzuć do środka jeszcze jeden blok, powiedzmy #leftColumnVertical, niech bedzie jako ostatni w kontenerze #leftColumn;
3. Daj mu powiedzmy taki styl:
Kod
#leftColumnVertical {
    width: xx px; /* wymiary bloku, tyle ile odjąłeś z elementów obok */
    height: xx px;
    float: right;
}


(pisane z palca, w każdym bądź razie coś w tym stylu musisz zrobić)
Go to the top of the page
+Quote Post
vieri_pl
post 23.01.2006, 18:44:30
Post #4





Grupa: Zarejestrowani
Postów: 406
Pomógł: 9
Dołączył: 24.07.2005
Skąd: Bydgoszcz

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

Yeah! Poradziłem sobie ! Metodą prób i błędów wszystko jest piękne !

Wielkie dzieki mike - mech ! Bez Ciebie ten lay byłby nadal w tabelach tongue.gif

Pozdro!

Ten post edytował vieri_pl 23.01.2006, 18:59:36
Go to the top of the page
+Quote Post
synus
post 10.02.2006, 02:41:11
Post #5





Grupa: Zarejestrowani
Postów: 24
Pomógł: 0
Dołączył: 28.12.2005

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

przepraszam, ze sie podcinam pod temat... ale nie chce zakladac nowego... a moze autorowi przyda sie informacja ktora chcialbym uzyskac.

@mike_mech

tak jak autor, mam laya zrobionego w photoshopie moj layout jest z gory okreslony ( nie moze sie rozjezdzac ). grafika ma takie i takie wymiary, i chcialbym zrobic cos na zasadzie plywajacych ramek, tylko ze zgodne z xhtml'em transitional.

EDIT: Przeczytalem dokladniej kod tej strony ktora podales, i sprawdzilem jak dokladniej ona dziala .....

overflow: auto; smile.gif

Dzieki za pomoc.

Ten post edytował synus 10.02.2006, 02:51:51
Go to the top of the page
+Quote Post
Najki
post 30.05.2006, 11:05:58
Post #6





Grupa: Zarejestrowani
Postów: 190
Pomógł: 0
Dołączył: 12.02.2004
Skąd: Poznań

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

Tak patrzę na to, bo sam właśnie uczę się przerabiać tabele na div'y i dochodzę do wniosku, że w tym przykładzie, jeśli np. w części "content" znaleźć ma się więcej zawartości niż określona wysokość div'a "content" i chcemy to przedłużyć to boczne menu się nie przedłużają, bo mają również stałą wysokość, a to robi się nieciekawe.

Jak to obejść? Aby strona się rozciągała w dół, rzecz jasna.


--------------------
Portfolio
Go to the top of the page
+Quote Post
revyag
post 30.05.2006, 11:34:09
Post #7





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

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

Było już wiele razy o tym na forum.
Są dwa sposoby:
1. http://www.alistapart.com/articles/fauxcolumns/
2. http://www.positioniseverything.net/articl...out/equalheight


--------------------
-------------

------
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 Wersja Lo-Fi Aktualny czas: 12.06.2025 - 10:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn