| Autor | Zpráva | ||
|---|---|---|---|
| martindeveloper Profil |
#1 · Zasláno: 12. 11. 2008, 19:54:29 · Upravil/a: martindeveloper
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 |
#2 · Zasláno: 12. 11. 2008, 21:33:51 · Upravil/a: Miloš
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 |
#3 · Zasláno: 12. 11. 2008, 21:53:19
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 |
#4 · Zasláno: 12. 11. 2008, 22:10:29
Vyřešeno, děkuju.
|
||
| Miloš Profil |
#5 · Zasláno: 12. 11. 2008, 22:15:56
Rádo se stalo.
|
||
|
Časová prodleva: 15 let
|
|||
0