Pomoc s rozdelenim webu – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Newman
~ Anonymní uživatel
9 příspěvků
25. 10. 2007   #1
-
0
-

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

Nahlásit jako SPAM
IP: 62.177.84.–
Reklama
Reklama
DeathHumanCZ0
Stálý člen
26. 10. 2007   #2
-
0
-

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ý.

Nahlásit jako SPAM
IP: 89.235.0.–
Vskutku...
DraXík0
Newbie
26. 10. 2007   #3
-
0
-

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 ;-)

Nahlásit jako SPAM
IP: 213.226.196.–
Newman
~ Anonymní uživatel
9 příspěvků
26. 10. 2007   #4
-
0
-

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.

Nahlásit jako SPAM
IP: 62.177.84.–
DeathHumanCZ0
Stálý člen
26. 10. 2007   #5
-
0
-

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

Nahlásit jako SPAM
IP: 89.235.0.–
Vskutku...
bukaj
~ Anonymní uživatel
370 příspěvků
26. 10. 2007   #6
-
0
-

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í).

Nahlásit jako SPAM
IP: 85.70.13.–
insider0
Věrný člen
26. 10. 2007   #7
-
0
-

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;
}


html:
<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>

Nahlásit jako SPAM
IP: 147.32.97.–
I don't want to see you go,[br] The sky is over[br] Even though we can't afford[br] The sky is over,[br] The sky is over us.[br][br] CIVILIZATION IS OVER
bukaj
~ Anonymní uživatel
370 příspěvků
26. 10. 2007   #8
-
0
-

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


Tabulka je přežitý postup, který byl moderní a užitečný leda tak před 5-ti lety. Tabulka má sloužit pro tabulková data, ne pro návrh stránky.

Jestli se budeš ptát, co je na tabulce tak špatného, pak je to hlavně pomalost načítání, resp. vykreslování - prohlížeč tabulku vykreslí, teprve až ji celou načte.

Nahlásit jako SPAM
IP: 85.70.13.–
DeathHumanCZ0
Stálý člen
26. 10. 2007   #9
-
0
-

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í.

Nahlásit jako SPAM
IP: 89.235.0.–
Vskutku...
bukaj
~ Anonymní uživatel
370 příspěvků
26. 10. 2007   #10
-
0
-

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í.


V tom případě píšeš pškně prasácký a nesémantický kód ;)

A formátování stránek (včetně formátování layoutu) pomocí CSS není žádná "super-mega-moderní" stylová záležitost-

Nahlásit jako SPAM
IP: 85.70.13.–
pawlik0
Grafoman
26. 10. 2007   #11
-
0
-

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..

Nahlásit jako SPAM
IP: 84.42.152.–
Sa Nata A Na. Howgh
Newman
~ Anonymní uživatel
9 příspěvků
26. 10. 2007   #12
-
0
-

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

Nahlásit jako SPAM
IP: 62.177.84.–
Manq0
Věrný člen
26. 10. 2007   #13
-
0
-

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

Nahlásit jako SPAM
IP: 85.71.63.–
(x)HTML & CSS kodér webových stránek → http://manq.name
insider0
Věrný člen
26. 10. 2007   #14
-
0
-

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;
}

Nahlásit jako SPAM
IP: 147.32.192.–
I don't want to see you go,[br] The sky is over[br] Even though we can't afford[br] The sky is over,[br] The sky is over us.[br][br] CIVILIZATION IS OVER
Newman
~ Anonymní uživatel
9 příspěvků
26. 10. 2007   #15
-
0
-

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.

Nahlásit jako SPAM
IP: 62.177.84.–
DeathHumanCZ0
Stálý člen
Nahlásit jako SPAM
IP: 89.235.0.–
Vskutku...
Newman
~ Anonymní uživatel
9 příspěvků
26. 10. 2007   #17
-
0
-

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

Nahlásit jako SPAM
IP: 62.177.84.–
hrach
~ Redaktor
+1
Boss
26. 10. 2007   #18
-
0
-
Nahlásit jako SPAM
IP: 193.179.169.–
http://jan.skrasek.com@hrachcz – webdeveloper
Petroff0
Věrný člen
27. 10. 2007   #19
-
0
-

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)

Nahlásit jako SPAM
IP: 89.102.211.–
Petroff0
Věrný člen
27. 10. 2007   #20
-
0
-

<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í */
..........
}
Takhle by to fungovalo, nebýt FOXINY (lištičky). Ta roztáhne body na celou obrazovku - a to i přestože je absolutně pozicovaná.
Dělá to tak,že vloží do HTML:
document.writeln('<style type="text/css"> body{margin:0px;padding:0px;}.....</style>
Takže máme tyto možnosti:
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">
nebo
2) vykašlat se na lišky a vyrobit pseudobody [DIV id="main"] pro hlavní část stránky
html { text-align: center       /* vycentruje IE */

}
#main { width: 1000px;
margin: 0 auto; /* vycentrují ostatní */
}
<to Newman>

ale v ie je to jeste rozhozeny


Nauč se box-model http://www.jakpsatweb.cz/css/mody-prohlizecu.html
Celková šířka sloupce = width+levy padding+levy border+pravy padding+pravy border
( tj. 800=788+2x5+2x1 popř. 200=190+2x5 )
a z ní se určí správná hodnota width: 788px popř. 190px
Aby prohlížeč správně interpretoval šířky (i výšky) tímto způsobem ve všech prohlížečích stejně (opera,mozilla,ie6,ie7),
musí pracovat ve standardním režimu - toho docílíš výběrem správné DOCTYPE deklarace.
Jelikož musíš použít přechodný=transitional HTML, použij tuto deklaraci:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DODĚLAT:
Abys mél barevné pozadí obou sloupců až dolů vytvoř obrázek 1px vysoký a použij jako pozadí obalu [DIV id="pozadi"] obou sloupců.
Podrobnosti viz. metoda falešných sloupců (Dan Cederholm: Faux Columns http://www.alistapart.com/articles/fauxcolumns/ )
Díky této deklaraci #pozadi { overflow:auto; width: 100% } blok automaticky ukončí obtékání (není třeba za něj dávat STOP blok s clear).

Tady máš hotový kód (styly si vypreparuj do ext.souboru, ten vložený JStext vymaž)

Nahlásit jako SPAM
IP: 89.102.211.–
Petroff0
Věrný člen
27. 10. 2007   #21
-
0
-

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 .

Nahlásit jako SPAM
IP: 89.102.211.–
hrach
~ Redaktor
+1
Boss
27. 10. 2007   #22
-
0
-

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

Nahlásit jako SPAM
IP: 193.179.169.–
http://jan.skrasek.com@hrachcz – webdeveloper
Manq0
Věrný člen
27. 10. 2007   #23
-
0
-

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

Nahlásit jako SPAM
IP: 85.71.63.–
(x)HTML & CSS kodér webových stránek → http://manq.name
Petroff0
Věrný člen
28. 10. 2007   #24
-
0
-

<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">


Tak díky za podporu!

Nahlásit jako SPAM
IP: 89.102.211.–
Manq0
Věrný člen
29. 10. 2007   #25
-
0
-

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í.

Nahlásit jako SPAM
IP: 85.71.63.–
(x)HTML & CSS kodér webových stránek → http://manq.name
insider0
Věrný člen
30. 10. 2007   #26
-
0
-

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í */
..........
}


ja psal, ze se na to ma podivat dale ve foru, ze se to tady resilo pred par dny(a ja to do hlavy jeste nedostal) :)

Nahlásit jako SPAM
IP: 147.32.97.–
I don't want to see you go,[br] The sky is over[br] Even though we can't afford[br] The sky is over,[br] The sky is over us.[br][br] CIVILIZATION IS OVER
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 6 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý