Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Peco
Člen
Avatar
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.
Avatar

Člen
Avatar
Odpovídá na Peco
: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
Avatar
Peco
Člen
Avatar
Odpovídá na
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.
Avatar
Filip Pýrek
Tvůrce
Avatar
Odpovídá na Peco
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 :D

Editováno
Nahoru Odpovědět
11.1.2014 20:11
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar

Člen
Avatar
Odpovídá na Filip Pýrek
:11.1.2014 20:14

To mě nenapadlo :)

 
Nahoru Odpovědět
11.1.2014 20:14
Avatar
Peco
Člen
Avatar
Odpovídá na Filip Pýrek
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.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Peco
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
Nahoru Odpovědět
11.1.2014 22:42
Neaktivní uživatelský účet
Avatar
Peco
Člen
Avatar
Odpovídá na Neaktivní uživatel
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.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Peco
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
Nahoru Odpovědět
12.1.2014 10:43
Neaktivní uživatelský účet
Avatar
Peco
Člen
Avatar
Odpovídá na Neaktivní uživatel
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.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Peco
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.