Diskuze: problém s background pri float:left

HTML a CSS HTML a CSS problém s background pri float:left American English version English version

Avatar
Peco
Člen
Avatar
Peco:

ahojte,

prosím poradte mi kde robím chybu:
Potrebujem mať šedé pozadie na 100% širky stránky a vnútri 3 stĺpce s rôznymi šírkami. problém mi robí float, keď ho dám preč tak sa to pozadie zafarbí správne (samozrejme ale nefunguju 3 stĺpce)
Za každú radu či nakopnutie správnym smerom ďakujem :)

html:

<section>
  <div class="in">
   <div class="box">a</div>
   <div class="box">b</div>
   <div class="box">c</div>
  </div>
</section>

css

section {background: #aaaaaa;width: 100%;}
section div.in{width: 100%;max-width: 1070px; margin: 0 auto;}
div.in div.box{float:left;width:36.1%;text-align: center;}
div.in div.box:first-child{width:37.3%;}
div.in div.box:last-child{width:26.6%;}

tu je to tiež : http://jsfiddle.net/A3y9b/

Odpovědět 11.1.2014 19:40
Každý deň vstávam, aby som sa niečo nové naučil.
Avatar
Odpovídá na Peco
David Procházka:

Nevím čím to je (asi v section 'není' žádný obsah), ale tohle již funguje:

section {width: 100%;}
section div.in{width: 100%;max-width: 1070px; margin: 0 auto;}
div.in div.box{background: #aaaaaa;float:left;width:36.1%;text-align: center;}
div.in div.box:first-child{width:37.3%;}
div.in div.box:last-child{width:26.6%;}
 
Nahoru Odpovědět 11.1.2014 19:52
Avatar
Peco
Člen
Avatar
Odpovídá na David Procházka
Peco:

Ale to presunutie background, neni to isté, pretože ak bude obrazovka širšia ako 1070px tak, nebude celá šírka obrazovky šedá :/
Možeš to vyskúsať tak, že do max-width daš napr. 50px.

Nahoru Odpovědět 11.1.2014 20:05
Každý deň vstávam, aby som sa niečo nové naučil.
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na Peco
Filip Pýrek:

Pokud jsem to pochopil správně a ty chceš aby se ti ty tři sloupce zbarvili šedě, tak dej

.in{display:inline-block}

Mě to tak funguje.
Pokud jsem to pochopil špatně, tak to ignoruj :D

Editováno 11.1.2014 20:12
Nahoru Odpovědět  +1 11.1.2014 20:11
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
Peco
Člen
Avatar
Odpovídá na Filip Pýrek
Peco:

Vďaka moc, len upresním, nie na .in ale na <section>

section {background: #aaaaaa;width: 100%;display:inline-block;}
Nahoru Odpovědět 11.1.2014 20:30
Každý deň vstávam, aby som sa niečo nové naučil.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Peco
Jiří Gracík:

Nějak jsem nepochopil, o co ti jde, ale můžeš trochu zefektivnit to css, například takto:

section {width: 100%;}
.in{width: 100%;max-width: 1070px; margin: 0 auto;}
.in-box{background: #aaaaaa;float:left;width:36.1%;text-align: center;}
.in-box:first-child{width:37.3%;}
.in-box:last-child{width:26.6%;}

pokud budeš mít delší css, tak tím, že budeš stylovat přímo elementy nebo třídy, výrazně snížíš zátěž při vykreslování stránky. A když trochu lépe popíšeš, co ti po nás chceš, tak ti možná i poradíme.

Editováno 11.1.2014 22:44
Nahoru Odpovědět 11.1.2014 22:42
Creating websites is awesome till you see the result in another browser ...
Avatar
Peco
Člen
Avatar
Odpovídá na Jiří Gracík
Peco:

Chcem dosiahnúť to, aby na akokoľvek širokom rozlíšení malo 100% širky šedé pozadie. V tom bol obsah webu široký 1070px(alebo 100% pri užších rozlíšeniach) ktorý má 3 stĺpce kde každý má inú(pomerovo definovanú) šírku.

K riešeniu ma nakopol Filip Pýrek. Stačilo totiž pre tag <section> dopísať štýl "display:inline-block".

Ktomu tvojmu zápisu, čo významovo znamená "-" v tom zápise? Sa priznám, že som sa stýmto spôsobom ešte nestretol.

CSS zápis pomocou viac prvkov ("div.in div.box..") som použil preto, lebo div.box je na stránke viackrát, má skoro rovnaké parametre, tak aby som to nemusel definovať zakaždým celé ale stačí rozdiely.(napr. iná šírka boxu).

Uznávam, že v tom príklade stačilo po správnosti uviesť iba .box

Nahoru Odpovědět 12.1.2014 10:37
Každý deň vstávam, aby som sa niečo nové naučil.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Peco
Jiří Gracík:

Pomlčky používáš na oddělování slov u třídy. Není ideální používat například třídu .box jak v (např) hlavičce, obsahu i patičce a všude mít jiné css vlastnosti, ale místo toho mít .header-box, .content-box, .footer-box, které si samozřejmě můžeš pojmenovat i jinak.
Ale když použiješ

div.in div .box

tak prohlížeš projde najde nejprve všechny elementy s třídou box, poté všechny elementy div, které obsahují třídu box, poté elementy s třídou in které obsahují div s třídou box a na závěr divy s třídou .in obsahující divy s třídou .box a až teď na ně aplikuje styl.
Kdežto v mém případě prohlížeč najde elementy .in-box a aplikuje styl. Vidíš ten podstatný rozdíl?

Editováno 12.1.2014 10:44
Nahoru Odpovědět 12.1.2014 10:43
Creating websites is awesome till you see the result in another browser ...
Avatar
Peco
Člen
Avatar
Odpovídá na Jiří Gracík
Peco:

S takýmto popisom som sa nestretol. Vďaka za vysvetlenie. Zase som o niečo múdrejší :) Prekopem to.

Tento "môj" spôsob zápisu som odkukal vo firme, kde to tak vo veľkom praktizovali a mne sa to zdalo byť výhodne, keďže stačilo upraviť 1x .box a zmenilo sa to všade. Zaťial čo header-box, content-box, footer-box treba upravovať samostatne.

Nahoru Odpovědět 12.1.2014 10:54
Každý deň vstávam, aby som sa niečo nové naučil.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Peco
Jiří Gracík:

No to jsem nezmínil, ale ty můžeš mít stále třídu box, která bude mít společné vlastnosti, kde se nastaví třeba společná barva pozadí a písma s rámečkem, a v těch ostatních nastavuješ rozměry, odsazení a tak dále. Pak budeš mít element se třídou box a další rozšiřující.

Nahoru Odpovědět 12.1.2014 11:05
Creating websites is awesome till you see the result in another browser ...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 11 zpráv z 11.