Autor Zpráva
Mapak
Profil *
#1 · Zasláno: 12. 1. 2005, 10:09:14
Odpovědět Citovat
Ahoj, mám problém s tvorbou layoutu v css. Chci vytvořit třísloupcový layout s proměnnou šířkou sloupců. Zadal jsem jim tedy relativní šířku v procentech. Když jim ale přiřadím rámeček, tak již celková šířka přesáhne 100% a bloky se zobrazí pod sebe. Když dám prostřednímu divu šířku např. 63,5% místo 64%, tak je to v pořádku, ale mezera mezi prostředním sloupcem (float: left) a pravým (float right) má mírně proměnnou šířku. Vyřešil jsem to pomocí vnoření těchto divů do třech nadřazených, které žádný rámeček nemají, le zajímalo by mě, jestli neexistuje jednodušší způsob.

adresa: mapak.wz.cz

PS: kdyby to šlo bez obtékaných prvků (float), byl bych ještě šťastnější:-)
Leo
Profil
#2 · Zasláno: 12. 1. 2005, 10:39:41
Odpovědět Citovat
Verte tomu, ze obtekane prvky jsou jeste zdaleka nejjednodussi cesta, jak delat CSS layout. Zadny zazracny prikaz "tohle vysazej do tri sloupcu nasledujicich sirek" neexistuje. Vase problemy nejspis souvisi jednak s tim, ze kazdy prohlizec si jinak vyklada pojem width (v CSS) - nektery to chape jako sirku obsahu a padding, margin a border k tomu pripoocitava (coz je mirne podle normy), jiny (IE) to chape jako sirku celkovou vcetne padding, margin a border. Druhy problem je v tom, ze procentualni sirka se musi prepocitat na pixely a tam muze dochazet k zaokrouhlovacim chybam. Leo
Mapak
Profil *
#3 · Zasláno: 12. 1. 2005, 10:56:31
Odpovědět Citovat
Díky!
S různou interpretací šířky by snad neměl být problém, protože mám doctype nastaven na HTML 4.01 strict a tak by měly všechny prohlížeče stránku zobrazovat ve standardním módu (width= šířka obsahu).
Leo
Profil
#4 · Zasláno: 12. 1. 2005, 11:20:36
Odpovědět Citovat
Vsechny ne :-) Zkuste si to treba v IE5 a 5.5, Leo
Honza Hučín
Profil
#5 · Zasláno: 12. 1. 2005, 14:01:08
Odpovědět Citovat
Návod na třísloupcový layout má Pixy na http://www.wellstyled.com.
Časová prodleva: 1 měsíc
Petrav
Profil *
#6 · Zasláno: 23. 2. 2005, 18:59:45
Odpovědět Citovat
zrovna taky bojuju s layoutem přes css - dva sloupce jsem nějak zvládla, ovšem ten třetí tam nemůžu dostat, na http://www.wellstyled.com jsem našla jenom návod na dva sloupce, poradíte mi někdo, kde mám hledat?

#menu { position: relative; float: left; width: 120px; top: 0; left: 0; border-right: 1px solid #cccccc; padding-left: 1pt; padding-right: 0; padding-top: 2pt; padding-bottom: 0; font-family: "Arial CE", "Verdana", "sans-serif"; font-size: 10pt; color: #cc66cc;
}
#text { position: relative; top: 0; margin: 0; padding: 1em; border: 0;
}
#pravy { position: relative; float: right; width: 130px; top: 0; border-left: 1px solid #cccccc; padding-left: 1pt; padding-top: 2pt;
}
...v čem je ta chyba, že mi prostředek odskočípod úroveň pravýho sloupce?
Acci
Profil
#7 · Zasláno: 23. 2. 2005, 19:03:02
Odpovědět Citovat
Tak se podiv třeba na http://www.thenoodleincident.com/tutorials/box_lesson/basic3.html , je to kód CSS, tak si ho uprav podle svých představ
krteczek
Profil
#8 · Zasláno: 24. 2. 2005, 21:11:23 · Upravil/a: krteczek
Odpovědět Citovat
dovolil jsem si uplácat třísloupcový layout pro Jak psát web, je to takový kanárek ale to je schválně.
Pár detajlů:
1) musíte oba divy představující pravý a levý sloupeček umístit před div s obsahem stránky, jinak vám to nebude fungovat
2) patička tam musí být a musí mít nastaveno clear:both aby se nalepila až na ten nejdelší sloupeček ( je jedno který to bude ) a neutíkala někam jinam
3) použité doctype je 4.01strict, bud ho dodržujte, nebo použijte jiné vámi preferované ale změnte je na začátku souboru
4) doporučuji použít externí css soubor, a do něj vložit styl, soubor se volá tímhle tagem:
<link rel="stylesheet" href="styl.css" >
v tom řípadě ale smažte vše od <style type="text/css"> včetně až po </style> včetně.je to označeno v kodu
5)a kod vkládám zde: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

	<head>

		<title>krteckuv pokus o třísloupcový css layout</title>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<link rel="stylesheet" href="styl.css" >

<!-- pokud použijete externi css soubor tak vše od tohoto tagu až po ukončení smažte -->

		<style type="text/css">

		<!--

/*timhle se vycentruje obsah na stred v ie, margin je kvuli opery*/

body	{text-align : center	; margin:0}	



/* margin auto je kvuli opere a kvuli mozille, tim vystredujes stranku na prostredek.*/

/*sirka je 750 aby byla zobrazitelna na 800x600 cela sirka stranky bez posuvniku.*/

/* border je kvuli vykresleni ( abysme videli jak to vypada a barva pozadi je zluta. */

/*centrovany text je kvuli vycentrovani divu "dokument" v ie*/

.vse		{margin-left:auto;margin-right:auto;width:750px;border:1px solid black;background-color:yellow; text-align:center;}	



/*nastavime sirku a vysku hlavicky (750x80), vykreslime si border, a nastavime barvu pozadi na modrou*/

.hlavicka	{margin:0; width:750px; height:80px; border:1px solid black; background-color:blue;}



/*nastavime sirku dokumentu na 450px a barvu pozadi na cervenou. a  vycentrujeme na stred v opere a v mozille (margin auto)*/

.dokument	{margin-left:auto;margin-right:auto; width:450px;  border:1px solid black; background-color:red;}



/*nastavime  div levy na float left tim se nam nalepi na levou stranu, a dame mu širku 115px,zelenou barvu a border*/

.levy	{width:135px; float:left; border:1px solid black;background-color:green;}



/*nastavime pravy div na float right, dame svetle modrou barvu, cerny ramecek a sirku 135px*/

.pravy{width:135px; float:right; border:1px solid black;background-color:aqua}	



/* paticka má 750px, cerny ramecek a barvu stribrnou */

.paticka{width:750px; border:1px solid black; background-color:silver; clear:both}

-->	

		</style>

<!-- pokud použijete externí css soubor a budete mazat styly tak zde skončete -->

</head>

<body>

	<div class="vse">

		<div class="hlavicka">

			<h1>Krteczkův třísloupcový layout pro Jak psát web</h1>

		</div>

		<div class="levy">

			<p> něco co bude mít vlevo</p>

			<p> něco co bude mít vlevo</p>

			<p> něco co bude mít vlevo</p>

			<p> něco co bude mít vlevo</p>

		</div>

		<div class="pravy">

			<p>něco co bude v pravo</p>

			<p>něco co bude v pravo</p>

			<p>něco co bude v pravo</p>

			<p>něco co bude v pravo</p>

		</div>

		<div class="dokument">

			<p> Tady bude vlastní obsah stránky </p>

			<p> Tady bude vlastní obsah stránky </p>

			<p> Tady bude vlastní obsah stránky </p>			

			<p> Tady bude vlastní obsah stránky </p>

			<p> Tady bude vlastní obsah stránky </p>

		</div>





		<div class="paticka">

			<p>Tohle spáchal krteczek, dobře Vám tak! :-)</p>

		</div>

	</div>

</body>

</html>

ještě se sluší podotknout, že kod je podle standardu W3C 4.01strict validní, taktéž i css
krteczek
Honza Hučín
Profil
#9 · Zasláno: 24. 2. 2005, 22:12:11
Odpovědět Citovat
Petrav
Návodem na dva sloupce se dá dosáhnout libovolný počet sloupců. Uděláš si prostě nejdřív dva: třeba levý a zbytek, a pak v tom zbytku uděláš zase dva atd.
Časová prodleva: 13 let
Toto téma je uzamčeno. Odpověď nelze zaslat.