Autor Zpráva
martindeveloper
Profil
Dobrý den.

Předem chci podoknout že pracuji čistě jako programátor nikoliv designér, takže mě prosím neukamenujte.

index.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Pramat</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="masthead">
<p style="text-align:right; margin-right:400px; margin-top:5px; color:white;">
<?php
// nějaký PHP kód na datum a čas 
?>
</p>
</div>
<!-- 
<div id="top_nav">
</div> -->
<div id="container">
	<div id="left_col">
	<img src="images/kategorie.png" alt="kategorie" />
	<a href="#" class="menu_link">Odkaz</a>
	<hr />	
	<a href="#" class="menu_link">Odkaz</a>
	<hr />
	<a href="#" class="menu_link">Odkaz</a>
	<hr />
	<a href="#" class="menu_link">Odkaz</a>
	<hr />
	</div>
	<div id="page_content">
	<div style="margin-left:20px; margin-right:20px;">
	Lorem ipsum dolor sit amet ...
	</div>
	</div>
</div>
<div id="footer">
</div>

</body>

</html>



style.css :


  /* Pramat CSS layout
  */
body {
	margin: 0;
	padding: 0;
	background-image:url('images/bg.jpg');
	background-repeat:repeat-x;
	background-color: #c2c0b4;
}

#masthead {
	margin-top: 40px;
	height:162px;
	background-position:center;
	background-image:url('images/header.png');
	background-repeat:no-repeat;
}

#top_nav {
}

#container {
	min-width: 600px;
}

#left_col {
	margin-left:235px;
	background-image:url('images/menu.png');
	background-repeat:repeat-y;
	width: 228px;
	height:auto;
	float: left;
	text-align: center;
	display: block;
}

#page_content {
	margin-left: 200px;
	width:722px;
	background-image:url('images/content_bg.png.bak');
	background-repeat:repeat-y;
}

#footer {
	clear: both;
}

.menu_link {
	text-align:center;
	text-decoration:none;
	font-size:large;
	color: #c2c0b4;
}

hr {
	color: #c2c0b4;
}






Tohle je dost ořezaná verze toho co potřebuji.
No jak si můžete povšimnout div #left_col je odsazený od levé strany o 235px což na mém rozlišení je OK ale pochopitelně na jiných to bude rozhozený a to samé i ten <p style="text-align:right; margin-right:400px; margin-top:5px; color:white;">
Jak mám udělat aby se to připůsobilo velikosti rozlišení ?

Děkuju moc za rady, ještě dodávám, prosím nekamenovat dosud jsem programoval jen v PHP (OOP) či C# (ASP.NET) a s CSS mám jen minimální zkušenost.

Ještě jednou mnohokrát děkuju za pomoc.

EDIT: Nahrál jsem to zde http://studio.netdeveloper.cz/reference/Pramat/
V IE7 se obsah a styl webu zobrazí korektně Ale v Opeře ne a taky v jiných rozlišeních jsou stím problémy.
Miloš
Profil
Já bych to psal úplně jinak:

<obal>
   <hlavička>
   <navigace>
   <text>
</obal>

anebo takhle:

<obal>
   <hlavička>
   <vnitřní obal>
         <navigace>
         <text>
   </vnitřní obal>
</obal>

Pak můžeš dát navigaci s klidným svědomím float:left.

Prostuduj si třeba moje příklady:
— s jedním divem: http://kesolim.sweb.cz/layout/ anebo http://kesolim.sweb.cz/Xsaer/
— úplně bez divů (spíš hříčka, ale pro inspiraci): http://kesolim.sweb.cz/dvousloupcovy_layout_bez_divu/
Miloš
Profil
A ještě (pokud bys nechtěl menu obtékat, ale uvolnil bys mu celý sloupec) třeba http://kesolim.sweb.cz/TMP/2sloupcovy.html (3 divy) – pak je to bez floatu, ale s absolutně pozicovaným menu v relativně pozicovaném nadřazeném bloku.
martindeveloper
Profil
Vyřešeno, děkuju.
Miloš
Profil
Rádo se stalo.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: