Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Pokrojony layout z tabelek do divów :(
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
vieri_pl
23.01.2006, 16:05:31
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 !
mike
23.01.2006, 17:55:27
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.
mike
23.01.2006, 18:42:16
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ć)
vieri_pl
23.01.2006, 18:44:30
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!
synus
10.02.2006, 02:41:11
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.
Najki
30.05.2006, 11:05:58
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.
revyag
30.05.2006, 11:34:09
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
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.