Autor Zpráva
Sirius
Profil
Pokud se vám to dá moc dlouhé na čtení, tak skočte na poslední dvě věty.
Mám web http://wowfansite.clanweb.cz/, který je dost nešikovně řešený. Používám tam design pomocí HTML, CSS inline zápisu, a ještě externí CSS. Vím, je to děs. V každém prohlížeči se to navíc zobrazí naprosto jinak. Proto bych chtěl udělat ten design pouze pomocí externího CSS souboru, ale vůbec nevím jak na to. Největší strašák je pro mě, že když jsem to jednou zkoušel, tak to také v každém prohlížeči vypadalo jinak (myslim ze kazdy ma jinak velky pixel?) a také když jsem chtěl něco přidat, tak jsem zase musel upravovat počet pixelů u každého prvku. Nechápu vůbec jak se mi to povedlo.. Ale mohl by jste mi prosím nekdo alespon nastínit jak se dá udělat kvalitní design pomocí CSS, nebo mi sem dát odkaz na nějaký dobrý návod (kromě jakpsatweb.cz, to jsem četl a moc jsem nepochopil).. Na kritiku jsem připraven...
Petr Tichý
Profil
wellstyled.com - tam si najdi dvou sloupcový layout. Máš tam přímo návod.

O designu to moc není, nakreslíš si design a potom je jen důležité, aby se dala prostřední část z toho designu opakovat. Čili aby mohl být třeba 1px vysoký vzorek. Jde samozřejmě nakodit vše, ale je to dost těžké občas.
Sirius
Profil
Díky, jdu se tam podívat, snad mi to pomůže..

EDIT: No nevím, moc se mi to nezdá... Je toho víc co potřebuji udělat... Udělat okolo obrázky (asi to půjde pomocí více sloupců) zrušit tabulku v menu... atd.. nejsem si jistý, ale zkusím to....
AlešD
Profil
http://ie-brouci.dero.name/
Petr Tichý
Profil
"myslim ze kazdy ma jinak velky pixel?"
To určitě nemá. IE obsahuje mnoho chyb. Proto se to liší.
Sirius
Profil
Potřebuji, ten web udělat, tak aby ten layout vypadal takto, takže ten clanek na wellstyled.com muj problem neresi.. proste potrebuji z te tabulky udelat toto:

EDIT: Vlastně ještě potřebuji do te casti s obsahem vlozit dalsi cast, ktera bude obalena v 4 px silnem ramecku s pozadim, ktere musi byt vzdy otoceno, tak aby sedelo. Neznáte nějakou stránku, kde je toto popsané, nebo nemůžete mi napsat kód?
AlešD
Profil
Zkus http://css.interval.cz/clanky/dvousloupcovy-layout-s-pevnou-sirkou/

Aby prosvítalo pozadí dej sloupcům nějaký margin,
Petr Tichý
Profil
Ten článek na wellstyled je akorát pro tebe. Divy můžeš samozřejmě různě nořit a nastavovat jim paddingy a marginy.
Sirius
Profil
Zkus http://css.interval.cz/clanky/dvousloupcovy-layout-s-pevnou-sirkou/

Aby prosvítalo pozadí dej sloupcům nějaký margin,

ASi jsem to nepopsal dobre.. Kazde to pozadí 1,2,3 je jiné, takže nejspíš budu potřebovat 5 sloupců :(
AlešD
Profil
Sirius:
je to sice prasárna, ale co ty sloupve řešit takhle:


<div id="obal1">
<div id="text1">
text......
</div>
</div>

stylopis:
#obal1 {
background-color:red;
width: 25%;
margin: 0;
padiing: 0;
}
#text1 {
background-color:white;
width:auto;
margin-right: 25%;
}
Sirius
Profil
Nechápu jak to myslíš
Sirius
Profil
Tak to dělám podle toho wellstyled a je to ok, akorát FF neumí narozdíl od MSIE zobrazit prázdný div. Jak se tohle dá vyřešit? Jediné co mě napadlo je vyříznout kus pozadí a dát ho tam...
Sirius
Profil
Hmm tak ted zas nejde to aby se rozsirovala delka tech sloupcu podle nejdelsiho
AlešD
Profil
hledej clear:both
Petr Tichý
Profil
Sirius
Musíš to nasimulovat pozadím pro rodičovský div. Kouknul si na ten wellstyled.com?!
Sirius
Profil
Asi sem troshku sprasil ten kód:


<div id="content">
<div id="left"></div>

<div id="menu"><div id="menu">
Menu
</div></div>
<div id="center"></div>
<div id="main"><div id="main-content">
</div></div>
<div id="right"></div>
<hr class="cleaner" />

</div>

-------------------------------------------------------

#content {
width: 90%;
margin:1em auto;
text-align:left;
max-width: 1024px;
}
#left {
float: left;
width: 25px;
margin:0; padding:0;
background-color: gray;
}
#menu {
float: left;
width: 130px;
margin:0; padding:0;
}
#menu-content {
margin:0; padding: 0.5em 1em;
font-size: 100%;
}
#center {
float: left;
width: 50px;
margin:0; padding:0;
background-color: gray;
}
#main {
margin:0px;
padding: 0px;
float: left;
width: 500 px;
text-align: left;
}
#main-content {
margin:0; padding: 0;
font-size: 100%;
}
#right {
width: 25px;
margin:0; padding:0;
background-color: gray;
}
hr.cleaner {
clear:both;
height:1px;
margin: -1px 0 0 0; padding:0;
border:none;
visibility: hidden;
}
Sirius
Profil
Děkuji vám! Už to konečně mám. Fígl byl nakonec v návodu na wellstyled.com. Děkuji za vaši trpělivost.
Petr Tichý
Profil
"Fígl byl nakonec v návodu na wellstyled.com"
Ha. Já jsem to vůbec neříkal :o)
Sirius
Profil
:) Akorát prosím ještě, nevíte jak to nakonec vycentruji? nějak se mi to nedaří :((

EDIT: Tedy přesněji, jede to v Opere i v FF, ale hadejte co zas dela problemy :) Kamarad od microsoftu...
Sirius
Profil
Proč v MSIE nejde margin: auto?
Petr Tichý
Profil
Protože si ho určitě shodil do quirku.

Přidej do stylu:

body {text-align: center;}
#content { text-align: left }
Sirius
Profil
To tam mám a nepomohlo...
Sirius
Profil
Tady to je: http://wowfansite.clanweb.cz/index2.html - FF naprosto korektni zobrazeni, ale MSIE nefunguje...
Sirius
Profil
Nevíte někdo? Už to vůbec nechápu, prolzl jsm všecny příspěvky tady na fóru, vyzkoušel všechny možnosti, ale pořád to nejde... Jediné co mě napadá je, že sem sprasil ten kód, ale toho si nějak nejsem vědom.. Poraďte prosím
Sirius
Profil
Vyřešeno - MSIE napodporuje max-width, nahrazeno normal width s podtrzitkovym hackem...
Toto téma je uzamčeno. Odpověď nelze zaslat.