Jak omezit šířku prostředního sloupce (stopnout zužování) – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Jak omezit šířku prostředního sloupce (stopnout zužování) – CSS – Fórum – Programujte.comJak omezit šířku prostředního sloupce (stopnout zužování) – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Petr Fojtík0
Věrný člen
21. 5. 2007   #1
-
0
-

Konečně jsem dal dohromady kostru klasického 3sloupcového rozložení s konstantní šířkou krajních a do 100% dopočítanou prostředního sloupce.
1. Potřebuju, aby se při zúžení sloupce na řekněme 200px zúžování zastavilo (aby obsah vodorovně scrolloval).
Rád bych aby kód fungoval ve FF i IE.
2. Ještě mi vadí v IE scrollbar vykreslený i když ho netřeba.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=RTF-8">
<title>Trojsloupcový layout</title>
<style type="text/css">
html, body
{ height: 100%; padding: 0; margin: 0;
}
#obal_stranky {
width: 100%;
background: #ccc;
min-height: 100%;
_height: 100%; /* IE */
position: relative;
}
#main {
padding: 0 0 3em 0;
overflow: hidden;
}
#reserve {
clear: both;
float: left;
}
#paticka {
position: absolute;
width: 100%;
height: 2.5em;
bottom: 0;
left: 0;
font-size: 120%;
}

#bAc {
padding: 0 0 0 222px;
margin: 0 0 0 -222px;
width: 100%;
float: left;
display:inline;
}
#obal_A {
margin: 0 222px
}
#obal_B {
margin: 0 0 0 -100%;
width: 222px;
float: left;
display:inline;
}
#obal_C {
margin: 0 0 0 -222px;
width: 222px;
float: right;
display:inline;
}
#A_stredni {color: white; padding: .5ex 0 0 .5ex ; background: black
}
#B_levy {color: blue; width: 100%; padding: .5ex 0 0 .5ex ;
}
#C_pravy {color: red; padding: .5ex 0 0 .5ex ;
}
</style>
</head>
<body>
<div id="obal_stranky">
<div id="main">
<div id="bAc">
<div id="obal_A">
<div id="A_stredni">
<center>A = střední</center>
BEGINUM dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi vitae mi luctus enim convallis ENDUS.
</div>
</div>
</div>
<div id="obal_B">
<div id="B_levy">
<center>B = levý</center>
BEGINUM dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congue. Sed eget turpis.
Donec tempor mauris in ligula. Suspendisse ac dolor.
Morbi vitae mi luctus enim convallis ENDUS.
</div>
</div>
<div id="obal_C">
<div id="C_pravy">
<center>C = pravý</center>
BEGINUM dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congue. Sed eget turpis.
Donec tempor mauris in ligula. Suspendisse ac dolor.
Morbi vitae mi luctus enim convallis ENDUS.
</div>
</div>
<div id="reserve">
</div>
<div id="paticka">
<hr /><center>Paticka: BEGINUM dolor sit amet ENDUS.</center>
</div>
</div>
</div>
</body>
</html>

Nahlásit jako SPAM
IP: ...–
Reklama
Reklama
Petr Fojtík0
Věrný člen
28. 5. 2007   #2
-
0
-

To hlavní jsem dal dokupy:

[Ad 1] Zjednodušení a omezení šířky prostř.sloupce

#obal_stranky {

min-width:666px; /* 666-222-222=222px je minimum pro sloupec A */
width: 100%;
background: #ccc;
min-height: 100%;
_height: 100%; /* IE */
position: relative;
}
#bAc {
width: 100%;
float: left;
}
#obal_A {
margin: 0 222px
}
#obal_B {
margin: 0 0 0 -100%;
width: 222px;
float: left;
}
#obal_C {
margin: 0 0 0 -222px;
width: 222px;
float: right;
}


[Ad 2]
V IE se zabrání zobrazení posuvníku: html, body {overflow: hidden; height: 100%; padding: 0; margin: 0 }

Zbyl poslední problém:
Když zúžím okno pod 666px takže se objeví vodorovný posuvník, tak se automaticky současně zobrazí i svislý posuvník
(což zbytečně ubere volný prostor pro obsah) - dalo by se tomu nějak zabránit?

Ještě mě štve v IE, že při roztahování okna na výšku se co chvíli patička "zasekne" místo aby se držela spodního okraje stránky
(přitom stačí udělat RELOAD stránky, a patička klesne dolů na své místo !?!)

Nahlásit jako SPAM
IP: ...–
Higher
~ Anonymní uživatel
1 příspěvek
28. 5. 2007   #3
-
0
-

To Petroff:no problemom pri tomto rieseni je nevalidita kodu pokial by si chcel mat kod validny musis sa vyhnut podtrzitkovemu hacku

Nahlásit jako SPAM
IP: ...–
Petr Fojtík0
Věrný člen
28. 5. 2007   #4
-
0
-

<To: Higher> Díky, _height vynechám
A ještě napravím hodnotu overflow, kterou jsem spletl. Teď už všechno funguje shodně jak v IE, tak v FF.
Uvedu kompletní kód, kdyby mi doň chtěl někdo vnést úpravu pro ten nešťastný V scrollbar ve FF ( IE se chová korektně)
nebo vysvětlení, proč se zasekává patička v IE ( ve FF je OK.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=RTF-8">
<title>Trojsloupcový layout</title>
<style type="text/css">
html, body
{ height: 100%; padding: 0; margin: 0; overflow: auto;
}
#obal_stranky {
min-width:666px; /* 666-222-222=222px je minimum pro sloupec A */
width: 100%;
background: #ccc;
min-height: 100%;
position: relative;
}
#main {
padding: 0 0 3em 0;
overflow: hidden;
}
#reserve {
clear: both;
float: left;
}
#paticka {
position: absolute;
width: 100%;
height: 2.5em;
bottom: 0;
left: 0;
font-size: 120%;
}

#bAc {
width: 100%;
float: left;
}
#obal_A {
margin: 0 222px
}
#obal_B {
margin: 0 0 0 -100%;
width: 222px;
float: left;
}
#obal_C {
margin: 0 0 0 -222px;
width: 222px;
float: right;
}

#A_stredni { padding: .5ex 0 0 .5ex ; color: white; background: black }
#B_levy { padding: .5ex 0 0 .5ex ; color: blue }
#C_pravy { padding: .5ex 0 0 .5ex ; color: red }

</style>
</head>
<body>
<div id="obal_stranky">
<div id="main">
<div id="bAc">
<div id="obal_A">
<div id="A_stredni">
<center>A = střední</center>
BEGINUM dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi vitae mi luctus enim convallis ENDUS.
</div>
</div>
</div>
<div id="obal_B">
<div id="B_levy">
<center>B = levý</center>
BEGINUM dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congue. Sed eget turpis.
Donec tempor mauris in ligula. Suspendisse ac dolor.
Morbi vitae mi luctus enim convallis ENDUS.
</div>
</div>
<div id="obal_C">
<div id="C_pravy">
<center>C = pravý</center>
BEGINUM dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congue. Sed eget turpis.
Donec tempor mauris in ligula. Suspendisse ac dolor.
Morbi vitae mi luctus enim convallis ENDUS.
</div>
</div>
<div id="reserve">
</div>
<div id="paticka">
<hr /><center>Paticka: BEGINUM dolor sit amet ENDUS.</center>
</div>
</div>
</div>
</body>
</html>

Nahlásit jako SPAM
IP: ...–
Lukáš Churý
~ Šéfredaktor
+8
Hero
28. 5. 2007   #5
-
0
-

pokud použiješ vlastnost _height v inline zápisu, tak výsledný kód html JE validní a výsledný CSS soubor také, pač je uložen v inline zápisu :)

Nahlásit jako SPAM
IP: ...–
Guitar Hero Master, Project führer & zdejší čaroděj.
Sleduj mě na twitteru – @lukaschury.
Květoš
~ Anonymní uživatel
31 příspěvků
28. 5. 2007   #6
-
0
-

To Petroff:Hm, ale v Opeře se objevují vlevo zdvojené posuvníky..?

Nahlásit jako SPAM
IP: ...–
Květoš
~ Anonymní uživatel
31 příspěvků
28. 5. 2007   #7
-
0
-

To Květoš:Opravuji , v Opeře jsou VPRAVO zdvojené posuvníky!

Nahlásit jako SPAM
IP: ...–
Petr Fojtík0
Věrný člen
29. 5. 2007   #8
-
0
-

Díky , Operu nemám a vím, že má své odlišnosti, jen jsem nevěděl jaké.
Holt už zase posuvníkový problém.(mám pocit že jde o zdvojení v prvcích HTML,BODY)

Nahlásit jako SPAM
IP: ...–
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, 5 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ý