+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Pionowe linie i podzielenie strony. (/thread-pionowe-linie-i-podzielenie-strony)
Pionowe linie i podzielenie strony. - cayekw - 02-07-2008
Witam. Zrobiłem sobie taką stronkę:
Cytat:<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="Description" content="Strona o fantasy. Gry fantasy, książki, gry RPG i inne."
<meta name="Keywords" content="Fantasy, Książki fantasy, Wiedźmin, Fantasysite, Fantasy site, fantastyka, RPG, gry fantasy" />
<meta name="Author" content="Cezary Waszczuk- cayekw" />
<TITLE>Fantasysite. Wszystko o fantasy: gry, opowiadania, książki, recenzje, galeria.</TITLE>
<style>
body {
margin: 0;
padding: 0;
font-family: ae_Arial;
background: #383636;
}
</style>
</HEAD>
<body>
<center>
<table style="width: 800px;">
<tr>
<font color="009900">LOOOOOGGOOOOOO</font>
</tr>
<tr>
<td style="width: 300px; vertical-align:top;">
<img src="http://images23.fotosik.pl/239/51f0a8f47a392665.jpg" alt="Menu>
<img src="http://images34.fotosik.pl/306/36c6887cd216cbe3.jpg" alt="Artykuły"
<br>
<img src="http://images29.fotosik.pl/239/217437a2df3f6875.jpg" alt="galerie">
<br>
<img src="http://images26.fotosik.pl/240/e0811177d9705189.jpg" alt="gry">
<br>
<img src="http://images34.fotosik.pl/306/9235dd4fd3390596.jpg" alt="książki">
<br>
<img src="http://images28.fotosik.pl/240/19192b100f8dc231.jpg" alt="recenzje">
</td>
<td style="width: 500px; vertical-align:top;">
<font color="009900">tresc</font>
</td>
</tr>
</table>
</center>
</body>
</html>
I nie podoba mi się ona. Chciałbym podzielić sobie menu i treść pionową linią która bedzie widoczna i logo także oddzielić poziomą linią od treści i menu. Oprócz tego chciałbym by strona nie była cała jednokolorowa lecz by jej treść, menu znajdowały się na innym tle niż pusta część strony tak jak jest to tutaj: http://www.fantasy.dmkhost.net/ . Jakieś porady ?
RE: Pionowe linie i podzielenie strony. - Styku - 03-07-2008
Możesz to zrobić np. na tabelach, dzieląc całą stronę na dwie duże komórki i przypisując jednej z nich własność np. "border-right: 1px solid #000;".
Lepiej by było jednak jakbyś poczytał o DIVach, np. tu: http://www.kurshtml.boo.pl/css/wstep,szablon.html
RE: Pionowe linie i podzielenie strony. - Marcin - 03-07-2008
Kod PHP:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="Description" content="Strona o fantasy. Gry fantasy, książki, gry RPG i inne.">
<meta name="Keywords" content="Fantasy, Książki fantasy, Wiedźmin, Fantasysite,
Fantasy site, fantastyka, RPG, gry fantasy" />
<meta name="Author" content="Cezary Waszczuk- cayekw" />
<TITLE>Fantasysite. Wszystko o fantasy: gry, opowiadania, książki, recenzje, galeria.</TITLE>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, Verdana;
background: #383636;
font-size: 12px;
}
#container {
width: 800px;
}
h1#top {
border-bottom: 1px solid #00CC00;
padding-bottom: 10px;
margin-bottom: 10px;
font-size: 14px;
color: #009900;
}
#leftSide {
width: 200px;
vertical-align:top;
border-right: 1px solid #00CC00;
padding-right: 10px;
}
#content {
width: 580px;
vertical-align: top;
color: #009900;
padding-left: 9px;
}
</style>
</HEAD>
<body>
<center>
<table id="container" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center">
<h1 id="top">LOOOOOGGOOOOOO</h1>
</td>
</tr>
<tr>
<td id="leftSide">
<img src="http://images23.fotosik.pl/239/51f0a8f47a392665.jpg" alt="Menu">
<img src="http://images34.fotosik.pl/306/36c6887cd216cbe3.jpg" alt="Artykuły">
<img src="http://images29.fotosik.pl/239/217437a2df3f6875.jpg" alt="galerie">
<img src="http://images26.fotosik.pl/240/e0811177d9705189.jpg" alt="gry">
<img src="http://images34.fotosik.pl/306/9235dd4fd3390596.jpg" alt="książki">
<img src="http://images28.fotosik.pl/240/19192b100f8dc231.jpg" alt="recenzje">
</td>
<td id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tortor.
</td>
</tr>
</table>
</center>
</body>
</html>
Do wklejania kodów używaj tagu [php] a nie [code] i poczytaj chociaż trochę o CSSie. To na prawdę nie jest trudne
.