Diskuze: problém s background pri float:left

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Peco

Člen

Peco:11.1.2014 19:40

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.

Člen

:11.1.2014 19:52

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

Peco

Člen

Peco:11.1.2014 20:05

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.

Filip Pýrek

Tvůrce

Filip Pýrek:11.1.2014 20:11

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

Editováno 11.1.2014 20:12

Nahoru Odpovědět

11.1.2014 20:11

„The best way to predict the future is to invent it.“ — Alan Kay

Člen

:11.1.2014 20:14

To mě nenapadlo

Nahoru Odpovědět

11.1.2014 20:14

Peco

Člen

Peco:11.1.2014 20:30

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.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:11.1.2014 22:42

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

Neaktivní uživatelský účet

Peco

Člen

Peco:12.1.2014 10:37

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.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:12.1.2014 10:43

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

Neaktivní uživatelský účet

Peco

Člen

Peco:12.1.2014 10:54

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.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:12.1.2014 11:05

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

Neaktivní uživatelský účet

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.

Nejčastěji vyhledáváné

Diskuze: problém s background pri float:left