Autor Zpráva
Spajky
Profil
#1 · Zasláno: 11. 11. 2006, 12:36:26 · Upravil/a: Spajky
Odpovědět Citovat
Mám stránku s napozicovanými objekty a potřebuji je vycentrovat, aby zůstaly tak, jak jsou a aby se dobře zobrazovaly ve všech rozlišeních.

Kód HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>menu</title>
<style type="text/css">
p {text-indent: 30px; margin: 0; text-align: left;}
a {color: blue; text-decoration: none; font-size: 16px;}
a:hover {text-decoration: underline;}
.wh {background-color: white; width: 650px; border-color: red; border-style: solid;}
h1 {color: red; text-align: center; margin: 1em 0;}
h3 {margin-top: 1.5em; margin-bottom: 0.2em;}
h4 {margin-top: 0 ; margin-bottom: 0.5em; border-bottom: 1px solid red;}
table {font-size: 16px; border: 0;}
body {text-align: center; background-image: url('http://www.spajky.ic.cz/css/malina.jpg'); background-repeat: repeat; background-attachment: fixed;}
* {font-family: Comic Sans MS, Arial, Sans Serif; text-align: center;}
.menu {position: static; left: 1px; background-color: white; text-align: left; width: 95px; border-color: red; border-style: solid;}
.menu ul {margin: 0 auto; padding: 0;}
.menu li {text-align: left; text-indent: 20px; list-style: none;}
.menu a {background: URL('http://www.spajky.ic.cz/css/oko.gif') white no-repeat; text-align: left; font-size: 16px; font-weight: bold; text-decoration: none; display: block; color: black; font-family: "Comic Sans MS", sans-serif;}
.menu a:hover {text-decoration: none; color: #FFA500;}
img {border: none;}
#menu, #text {position: absolute}
#text {top: 80px; left: 100px;}
#menu {top: 80px; left: 0px;}
</style>
</head>
<body>
<a href="http://www.spajky.ic.cz"><img src="http://www.spajky.ic.cz/spajky-main.gif" alt="main"></a><br>
<div id="menu"><table><tr><td class="menu">
<ul>
<li><a href="http://www.spajky.ic.cz">úvod</a></li>
<li><a href="http://www.spajky.ic.cz/necoomne">o mně</a></li>
<li><a href="http://www.spajky.ic.cz/skola">škola</a></li>
<li><a href="http://www.spajky.ic.cz/knihy">knihy</a></li>
<li><a href="http://www.spajky.ic.cz/vtipy">vtipy</a></li>
<li><a href="http://www.spajky.ic.cz/obrazky">obrázky</a></li>
<li><a href="http://www.spajky.ic.cz/pribeh">příběh</a></li>
<li><a href="http://www.spajky.ic.cz/roboti">roboti</a></li>
<li><a href="http://www.spajky.ic.cz/odkazy">odkazy</a></li>
</ul></table></div>
<div id="text">
<table><tr><td class=wh>
lllllllllllllllllllllllssss</p>
<p>lllllllllllllllllllll</p>
</table></div>
</div>
</body>
</html>
MZF
Profil
#2 · Zasláno: 11. 11. 2006, 13:07:35 · Upravil/a: MZF
Odpovědět Citovat
Centruje se pomocí {margin: 0 auto;}, ale v tvém případě to nepůjde. Používáš totiž absolutně pozicované prvky. Dvousloupcový layout s pevnou šířkou by ti mohl pomoct a navést tě na správnou cestu.
Bubák
Profil
#3 · Zasláno: 11. 11. 2006, 13:11:21
Odpovědět Citovat
MZF
Proč by to nešlo? Stačí použít zanořené pozice.
MZF
Profil
#4 · Zasláno: 11. 11. 2006, 13:16:49
Odpovědět Citovat
Bubák
Proč by to nešlo? Stačí použít zanořené pozice.
Ano, a pak je tu také otázka, proč dělat jednoduchý dvousloupcový layout pomocí absolutně pozicovaných prvků.
Spajky
Profil
#5 · Zasláno: 12. 11. 2006, 10:15:33
Odpovědět Citovat
Takže jsem to udělal špatně?
MZF
Profil
#6 · Zasláno: 12. 11. 2006, 10:30:09
Odpovědět Citovat
Spajky

Neřekl bych špatně, spíš ne úplně vhodně. Jednoduchý dvousloupcový layout je lepší dělat pomocí plovoucích prvků. Když jsem začínal, tak jsem také dělal layouty pomocí absolutně pozicovaných prvků. Časem jsem však přešel k plovoucím prvkům a určitě nelituji, odpadlo mi plno problémů.

Proto bych ti doporučil prostudovat plovoucí layouty na intervalu a snažit se stránky řešit s jejich pomocí.
Časová prodleva: 3 dny
Spajky
Profil
#7 · Zasláno: 15. 11. 2006, 14:01:57
Odpovědět Citovat
Budu se snažit. Zatím díky...
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0