Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Pokrojony layout z tabelek do divów :(, Jak się za to zabrać !?
vieri_pl
post
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 (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) Znam troche podstaw, no ale to już bardziej złożony szablon musiałby być. Pomoże mi ktoś, to przerobić (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) (IMG:http://forum.php.pl/style_emoticons/default/sadsmiley02.gif) PLEASE !
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
mike
post
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

Posty w temacie
- vieri_pl   Pokrojony layout z tabelek do divów :(   23.01.2006, 16:05:31
- - mike_mech   index.htmlKod<?xml version="1.0" encod...   23.01.2006, 17:55:27
- - mike_mech   No przesadzasz. Chciałeś pomocy, ale widzę, że uży...   23.01.2006, 18:42:16
- - vieri_pl   Yeah! Poradziłem sobie ! Metodą prób i błę...   23.01.2006, 18:44:30
- - synus   przepraszam, ze sie podcinam pod temat... ale nie ...   10.02.2006, 02:41:11
- - Najki   Tak patrzę na to, bo sam właśnie uczę się przerabi...   30.05.2006, 11:05:58
- - revyag   Było już wiele razy o tym na forum. Są dwa sposoby...   30.05.2006, 11:34:09

« Następny starszy · HTML \ XHTML · 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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