Autor Zpráva
tester
Profil *
Už jsem to měl krásně vycentrované a pak jsem zas něco zmrvil a rozhodilo se to. Nemůžu přijít na to jak jsem to měl. Na třetím řádku tabulky se má první a poslední buďka roztáhnout na maximum (dalo by se to dát na jeden řádek?). Druhá buňka má mít šířku 450px. Je tam ještě třetí, ale ta už má šířku nastavenou automaticky díky jejímu obsahu. Budu vděčný za opravu

table#content_wrapper  tr+tr+tr td:first-child {
    width: 100%;
    background-color: black;
}

table#content_wrapper  tr+tr+tr td:first-child+td {
    width: 450px;
    background-color: green;
}

table#content_wrapper tr+tr+tr td:last-child {
    /* background-color: black; */
    width: 100%;
}
Keeehi
Profil
tester:
Tabulkovým layoutům odzvonilo už před mnoha a mnoha lety. Z toho co tu je nedokážu přesně určit o jaký layout ti jde, ale jsem si celkem jistý, že existuje moderní řešení, velmi pravděpodobně už i hotové, připravené k použití.
tester
Profil *
Pošli odkaz ať se podívám


html
<TABLE id=content_intro class=wrapper>
    <TR>
     <TH colspan=6>       
    <TR height=25 bgcolor="#f8e5b2"> 
     <TD colspan=6>
    <TR> 
     <TD>roztáhnout 100%
     <TD>obsah stránky, článek width=450px
     <TD>obsah stránky, menu vpravo width=150px
     <TD>roztáhnout 100%



Přejmenoval jsem atributy, takže znova

div#head {
    text-align:center;margin:0; padding:0;}

div#header, menu, small {
    display:block; margin: 0; padding:0; border: 0; text-align:left;
}

div#header {
    width: 100%;
    height: 64px;
    background-image: url(images/top_bg_7_hue_2.png); /* 1 - red, 3 - nice yellow, 6 */

}
#header p {
    width: 779px;
    margin:auto;
    height: 0px; 
    padding: 19px 0 0 15px; /* odsazení zezhora 15, zprava 22 */
    text-align:left;
}

div#header p span:first-child {padding-left:48px; padding:0; margin:0;
    display: block; float:left;
    width: 152px;
    height: 35px;
    background-image: url( images/logo_moxo_2.png);
    background-repeat: no-repeat;
}

div#header p span:first-child+span {padding-left:48px; padding:0; margin:0;
    display: block; float:left;
    width: 166px;
    height: 29px;
    margin-left: 7px;
    margin-top: 12px;
    background-image: url( images/mezi_lidmi.png);
    background-repeat: no-repeat;
}
Keeehi
Profil
tester:
Pokud jsem to správně pochopil, tak ti jde o centrovaný dvousloupcový layout s fixní šířkou.
Živá ukázka
tester
Profil *
Keeehi:
No jo, ale já chci aby byl spíš 4 sloupcový. Obsah má mít/měl fixní šířku, ty dva krajní se mají roztáhnout až na kraj mám to tak u hlavičky

Obrázek:
oi64.tinypic.com/ip1g7c.jpg
Keeehi
Profil
tester:
Ty krajní jsou jen pro pozadí ne? To se jako sloupec nepočítá. Pozadí nastavíš správnému rodiči. V mém případě by to byl tag body.
tester
Profil *
Co jsem ti to poslal, to byla hlavička. Tady je správný kód:

table.wrapper  tr+tr+tr td:first-child {
    width: 100%;
    background-color: black;
}

table.wrapper  tr+tr+tr td:first-child+td {
    width: 450px;
    background-color: green;
}

table.wrapper tr+tr+tr td:last-child {
    /* background-color: black; */
    width: 100%;
}

Ta černá má být v levém sloupci (1. a 4.). Zelená je sloupec (2.) Z tvého pohledu by to bylo tak: zelená 1. sloupec, černá jsou pruhy zleva a zprava jdoucí až na okraj stránky.

To co máš jako obal by se muselo dát width 100%
#obal {
    margin: 0 auto;
    width: 100%;
}
každopádně to nejde až ke kraji. Můj kód jde ke kraji, ale problém je že černá se aplikuje na všechny místo jen na krajní.


Chci jen přijít na to proč při aplikování stylu

tabulka -> 3. řádek -> 1. buňka

dochází k aplikaci černé barvy na všechny buňky a jak to udělat aby označena byla jen první. Pak to samé udělat pro poslední buňku.


oprava: dochází k aplikaci černé barvy na všechny buňky které jsou první uvnitř řádku - tzn. aplikuje se to i na ty zanořené buňky. To je ten problém. Jak to zastavit aby to nepokračovalo hlouběji? Něco takového, ale neroztahují se ty krajní buňky černá není vidět.

table.wrapper  tr+tr+tr:first-child td:first-child {
    width: 100%;
    background-color: black;
}

table.wrapper  tr+tr+tr:first-child td:first-child+td {
    width: 450px;
    background-color: green;
}

table.wrapper tr+tr+tr:first-child td:last-child {
    background-color: black;
    width: 100%;
}
Keeehi
Profil
Takže něco takového? Živá ukázka

Jde toho udělat fakt spousta. Na tabulky zapomeň.
Tomáš123
Profil
tester:
dochází k aplikaci černé barvy na všechny buňky které jsou první uvnitř řádku
A čo by si čakal od tr+tr+tr:first-child? Ak treba vybrať n-tý prvok v poradí, ide ho zamerať cez najbližšieho suseda (+) a zresetovať to u nasledujúcich prvkov, odpočítať suseda od prvej položky alebo pseudotriedou :nth-child(). Ukážka.

tzn. aplikuje se to i na ty zanořené buňky
Neviem, či to myslíš tak ako je to napísané, ale s prvou časťou vety to nesúvisí. Ak chceš štýly aplikovať iba na bunku priamo vnorenú v n-tom riadku, použi v selektore symbol priameho potomka table tr:nth-child(3) > td.

Pseudotrieda :nth-child() má horšiu podporu ako selektor najbližšieho súrodenca, či pseudotrieda :first-child.

A samozrejme, podporujem Keeehiho. Tabuľkami sa v dnešnej dobe layout netvorí. Čo ide riešiť bez tabuľky, treba riešiť bez tabuľky. Ak je tabuľka nutná a nejedná sa o tabuľkové dáta, ktoré do nej chceš usporiadať, použi radšej display: table(-*).

URAVENÉ – do výpisu i ukážky pridaná aj jednoduchšia, rovnako dobre podporovaná, možnosť s využitím pseudotriedy :first-child.
tester
Profil *
Nejsem rozhodnutý. Tabulky mají zase tu výhodu že nemusíš uzavírat taky td a tr. Div musíš vždycky uzavřít. Tabulky nepotřebují floating a clearing, divy se bez něho neobejdou (pro realizaci tohoto konkrétního požadavku.). V mém případě jsou ve sloupci 1. a 2. dle uvažování Keechiho ještě další tabulky a v tom stylopisu co jsem psal původně to tedy zkopírovalo barvu i do té vnořené tabulky. Css se budu zabývat ještě později, teď řeším třídu v php na připojení css a javascriptů do hlavičky.
Keeehi
Profil
tester:
Tabulky mají zase tu výhodu že nemusíš uzavírat taky td a tr.
To není výhoda ale nepodstatný detail.

Div musíš vždycky uzavřít. Tabulky nepotřebují floating a clearing, divy se bez něho neobejdou (pro realizaci tohoto konkrétního požadavku.).
Dá se to realizovat i jinak. Přesto i kdyby float byl jedinou možností tak kde je problém? Kvůli čemu je to podle tebe nevýhoda?
tester
Profil *
Keeehi:
Je to sporné. Jsou tam pro i proti pro obojí. Ještě se rozhodnu.
Keeehi
Profil
tester:
Mohl bys prosím jmenovat objektivní pro?

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: