Pomoc s rozdelenim webu – CSS – Fórum – Programujte.com

tak na tyhle adrese stcpk.tym.cz/web/index.html najdete stranku na ktery bych potreboval s necim poradit.
za prvi bych potreboval dostat tu modrou cast za tu bilou aby byli pod zlutou casti.
a za druhy v ie to je podsebou akorat neni modra cast za bilou a v mozile je to cely uplne rozhozeny.
takze bych byl rad za radu nebo kdyby me to nekdo rovnou predelal. Mockrat diky newman

Nechci plácat blbosti, ale nemůžeš mít 2x div na jednom řádku, to je jako mít 2 odstavce na jednom řádku.
A tohle bych řešil přes tabulku.

Tehle názor nemusí být pravdivý.

To DeathHumanCZ : Tak je neplácej, příspěvek Tehle názor nemusí být pravdivý. Nikomu nepomůže...
To Newman : Zkus prozkoumat CSS vlastnost float ;-)

Tabulkou to urcite resit nechci. Vlastnost float jsem zkousel a stale to nejde.bujto sem tu vlastnost pouzival spatne a nebo to proste tak nejde.
Cekam na dalsi rady.

To Newman : Proč to nechceš řešit tabulkou? podle mě je v tomto tabulka užitečná.

To Newman:
Podívej se třeba na http://wellstyled.com. Hledej 2 sloupcový layout (a to nejen na wellstyled.com, ale hlavně taky v Googlu - na internetu se nachází mnoho hotových a prověřených řešení).

styly:

body{

	width: 780px;

	margin: 0 auto; /* o tomhle si precti v dalsich prispevcich na foru */

}

#cervena{

	background-color: #FF0000;

	height: 50px;

}



#zluta{

	background-color: #FFFF00;

	height: 25px;

}

#bila{

	background-color: #FFFFFF;

	width: 650px;

	float: left;

}



#modra{

	background-color: #0000FF;

	width: 120px;

	float: left;

}

.stop{

	clear: both;

	display: block;

}

<div id="cervena">obsah cerveneho</div>

<div id="zluta">obsah zluteho</div>

<div id="bila">obsah bileho</div>

<div id="modra">obsah modreho</div>

<div class="stop">pokracovani stranky az po vykresleni float objektu</div>

DeathHumanCZ napsal: podle mě je v tomto tabulka užitečná.

To bukaj :
Já v poslední době tabulku používám hodně, skvěle se sní pracuje, a nemám sní žádné problémi, a i zastaralé věci jsou někdy lepší než věci super-mega-moderní.

Já v poslední době tabulku používám hodně, skvěle se sní pracuje, a nemám sní žádné problémi, a i zastaralé věci jsou někdy lepší než věci super-mega-moderní.

To DeathHumanCZ :
Pomocí CSS můžeš udělat web, co vočima ani nepoznáš, jestli je to CSS nebu tabulkový layout.
Otevřeš zdroják a uvidíš buď pár DIVů, nebo dvacetiřádkový <TABLE> <TR> <TD> df <TH rowspan=....
Můžu citovat, co sem četl tady někde na programujte.

Tagy se mají používat na to, k čemu byly určeny, a ne si je přizpůsobovat svým požadavkům...

nebo tak nějak..

insider: tak sem to udelal podle tebe a stale mi to nejde.
muzes se znova kouknout na stcpk.tym.cz/web/index.html je to tam aktualizovany jinak vypadat by to melo takhle jestli si to dobre pochopil.

http://img206.imageshack.us/img206/1163/webhl8.jpg

To DeathHumanCZ : Tabulky jsou na tabulková data. To layout není.

no opsal si to skoro dobre, ale tim, zes tam pridal par veci si to zase rozhodil

body    {

         width: 1000px;

          margin: 0 auto; /* o tomhle si precti v dalsich prispevcich na foru */

          background-color: #364A53;

         text-align: center;

        }



#hlavicka  {

          

            width: 1000px;

	          height: 100px;

	          background-color: red;

	   }



#menu   {

         

         width: 1000px;

         height: 25px;

         font-family: Verdana;

         font-size: 10px;

         color: #FFF;

         font-weight: bold;

         padding-top: 6px;

         background-color: yellow;

        }

	   

#page   { 

         

         width: 790px; /* s paddingem to da dohromady 800*/

         font-family: Verdana;

         font-size: 11px;

         color: #000;

         border: 1px solid #FFF;

         background-color: white;

         padding: 5px;

         float: left;

               

        }



#reklama   { 

         /*margin-left: 800px; zadny margin! */

         width: 190px; /* opet s paddingem to da 200 */

         font-family: Verdana;

         font-size: 11px;

         color: #000;

         background-color: blue;

         padding: 5px;

         text-align: center;

         float: left;

        }

        

.stop{

      clear: both;

      display: block;

}

insider: Mockrat diky uz to jede ale v ie je to jeste rozhozeny tak kdyby si mi jeste poradil jak to srovnat v ie a uz te nebudu otravovat. A jeste jednou diky.

http://programujte.com/index.php?akce=clanek&cl=2007010701-css-hacky

Diky ze jsi mi poradil tohle ale ja nevim jak to upravit takze nemuzu ten tvuj odkaz pouzit.

nasel jsem zajmavy web... mrknete..
http://blog.html.it/layoutgala/

Tahle gala přehlídka css sloupcobití je dost známá (vážně ji vidíš poprvé?)
Když už je zmínka o layoutech, rád bych znal váš názor na (ne)ošetření návrhu při zúžení okna přes limit:
1.Mají sloupce využít prostor a vklouznout pod sebe? Nebo má stránka vodorovně odskrolovat?
2. A co udělat s IE6 ? (stačí si z GALY zkusit zúžit pár liquid=pohyblivých layoutů...nepřehlédnutelný jev, kdy 1.sloupec "odcestuje" doprava a zůstává po něm prázdné místo)

<to Insider>
s tím margin auto a text-align jsi to trošku popletl:

html { text-align: center       /* vycentruje IE */

}

body { width: 1000px;

       margin: 0 auto;          /* vycentrují ostatní */

       ..........

}

html { text-align: center       /* vycentruje IE */

}

#main { width: 1000px;

       margin: 0 auto;          /* vycentrují ostatní */

}

ale v ie je to jeste rozhozeny

Usnadníš si práci, když budeš do divů dávat testovací text ( nastavení výšky sloupců, viditelný padding)
Přikládám samostatný script (upravil jsem ho aby tlačítka byla viditelná na jakémkoli pozadí),
jak se používá vyčteš ze zdrojáku stcpk.tym.cz_index.html .

To Petroff : znam plno jiných.. :)

To Petroff : Co to plácáš? Tyto tvé orgie jsou zde úplně zbytečné. Margin:0 auto ve FF funguje normálně.

<toMang> asisis nevšim, že se zde pojednává kód 1 konkrétní stránky . . .

Oznamuješ nám že funguje pravidlo které jsem ve dvou návrzích použil ?

1a) za lištičku vložit <style type="text/css"> body {margin: 0 auto}</style>
1b) přímo do body vložit: <body style="margin: 0 auto">

To Petroff : Alespoň se nauč číst. Jsem Manq, ne Mang. Také ti nekomolím nick.


html { text-align: center /* vycentruje IE */
}
body { width: 1000px;
margin: 0 auto; /* vycentrují ostatní */
..........
}


normálně ve FF funguje.



Tvé orgie znám už z JPW. Jsou naprosto zbytečné, až otravující.

Petroff napsal:

s tím margin auto a text-align jsi to trošku popletl:

html { text-align: center       /* vycentruje IE */
}
body { width: 1000px;
       margin: 0 auto;          /* vycentrují ostatní */
       ..........
}