| Autor | Zpráva | ||
|---|---|---|---|
| tester Profil * |
#1 · Zasláno: 15. 3. 2016, 00:02:18
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 |
#2 · Zasláno: 15. 3. 2016, 00:39:25
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 |
#4 · Zasláno: 15. 3. 2016, 10:41:28
tester:
Pokud jsem to správně pochopil, tak ti jde o centrovaný dvousloupcový layout s fixní šířkou. Živá ukázka |
||
| tester Profil * |
#5 · Zasláno: 15. 3. 2016, 11:28:33
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 |
#6 · Zasláno: 15. 3. 2016, 12:08:21
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%;
}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 |
#8 · Zasláno: 15. 3. 2016, 12:48:33
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 * |
#10 · Zasláno: 16. 3. 2016, 08:59:24
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 |
#11 · Zasláno: 16. 3. 2016, 09:15:29
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 * |
#12 · Zasláno: 16. 3. 2016, 12:29:51
Keeehi:
Je to sporné. Jsou tam pro i proti pro obojí. Ještě se rozhodnu. |
||
| Keeehi Profil |
#13 · Zasláno: 16. 3. 2016, 13:01:30
tester:
Mohl bys prosím jmenovat objektivní pro? |
||
|
Časová prodleva: 8 let
|
|||
0