| Autor | Zpráva | ||
|---|---|---|---|
| Návštěvník Profil * |
#1 · Zasláno: 11. 2. 2014, 14:29:51
mám stránky centrované na střed, ale měl jsem problém v tom, že hlavička byla nastavená pevně na šířku 800px (používám text-align:left;), kdežto pata byla roztažená až ke kraji na maximum (používám text-align:center). Chci tedy udělat hlavičku tak, aby byla taky roztažená až ke kraji. Ale má to problém. Jakmile roztáhnu prvky tak aby byly až ke kraji, tak díly text-align left, odskočí prvky v hlavičce až ke kraji. Myslel jsem že bych to mohl spravit absolutním pozicováním na 2px zleva, ale to nepomáhá. Takže jak to vlastně udělat?
<DIV class=context>
<p id=header>
<IMG SRC=.../images/logo.png" >
<p id=mainmenu>TOTO JE HLAVNÍ MENU S BÍLÝM TEXTEM, NENÍ VIDĚT, SCHOVALO SE POD UŽIVATELSKÉ MENU
linky zde .... nejsou vidět na obrázku protože se mi schovali pod to modré uživatelské menu (mainmenu má absolutní pozicování takže bug)
</p>
Uživatelské menu ve stylu:
<ul id=menu>
<li><a ...><IMG SRC=".../images/messages.gif" > NADPIS SEKCE</a>
<ul>
<li><a ...>NADPIS PODMENU></a></li>
<li><a > NADPIS PODMENU</a></li>
</ul>
</li>
</ul>
<p>Notice: Máte jednu novou zprávu...</p>celé html je tu: http://paste.ofcode.org/KHSU6Ay88K3RW8Ki5mqwCm Obrázek nadpisu header, obě menu i zprávu potřebuju dát tak aby začínaly nejblíže u té červené čáry/šipky. |
||
| jefitto44 Profil |
#2 · Zasláno: 11. 2. 2014, 16:14:01
na centrovanie skús použiť margin: 0 auto;
A celú stránku, aj s headerom si vlož do hlavného divu, ten sa zvykne pomenovať wrapper <div id="wrapper"><header><content>....</footer></div> |
||
| Návštěvník Profil * |
#3 · Zasláno: 11. 2. 2014, 16:33:50 · Upravil/a: Návštěvník
jefitto44:
Já to umím vycentrovat. Ale nechci aby obrázek a menu skončilo úplně na středu, jakoby to mělo osu přesně ve středu obrazovky... Myslíš to vážně použít tady header, content a footer? To si myslel jen pro zjednodušení, doufám? No kdyby byly takové tagy to by bylo fajn Ale já používám ještě Operu Verze 9.64 a FF 12 jefitto44: No a když teda použiju html pět, tak jak mám nadepsat deklaraci? Takto? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 TRANSITIONAL//EN"> |
||
| Chamurappi Profil |
Reaguji na Návštěvníka:
„Myslíš to vážně použít tady header, content a footer?“ Nemyslí. Nebo možná myslí, ale ty raději na nesmysly nemysli. Nevím, jestli jsem správně pochopil, co chceš. Vnitřní část hlavičky dej do elementu, který klidně může mít text-align: left, ale samotný má nastavenou šířku 800px a je vycentrovaný uvnitř celé hlavičky…
„No a když teda použiju html pět“ Prohlížeče nerozlišují a nikdy nerozlišovaly verze HTML, je úplně jedno, co deklaruješ. Výměna <div>ů za jinak nazvané elementy ti nijak nepomůže, jen ti poškodí kompatibilitu. V žádné oficiální verzi HTML element <content> neexistuje.
|
||
| Návštěvník Profil * |
#5 · Zasláno: 11. 2. 2014, 16:52:45
Chamurappi:
No mě se právě úplně rozhodil design když jsem tam deklaroval 5.0. A to jsem se lekl že to už zas nedám do kupy, ale až jsem to opravil na 4.0 tak se to spravilo. |
||
| jefitto44 Profil |
#6 · Zasláno: 11. 2. 2014, 17:02:46 · Upravil/a: jefitto44
Html 5 sa deklaruje takto
<!DOCTYPE html> to je všetko... žiadne transitional, ani nič podobné u html 5 neexistuje. Veci ako <header> a <footer> skutočne v html5 existujú a snažim sa s nimi pracovať.content neexistuje, sory, nerozmýšlal som, čo píšem, myslel som <section> :D http://www.w3schools.com/html/html5_semantic_elements.asp Tu o tom nájdeš všetko. BTW, znaková zada sa deklaruje ako <meta charset="utf-8"> |
||
| Chamurappi Profil |
Reaguji na Návštěvníka:
<!doctype> ovlivňuje pouze vykreslovací režim. Je jedno, jestli používáš HTML 4, 5 nebo 80. Verze neřeš a jefitta44 si nevšímej.
Reaguji na jefitta44: Když už odpovídáš, mohl bys laskavě přestat vyrábět HTML problém a začít řešit CSS problém? To, co mu radíš, mu nijak nepomůže. Naopak… |
||
| jefitto44 Profil |
#8 · Zasláno: 11. 2. 2014, 17:10:24
Je to jedno, napriek tomu môžeš použiť <!DOCTYPE html> aj na predchádzajúce verze html-ka, trebárs aj na html1 (ak niečo také vôbec niekedy existovalo). V podstate je len dôležité, aby to tam bolo (minimálne kvôli validatoru). Nevidím dôvod, prečo by nemohol používať tágy <header><footer><nav><section>, ako normálny slušný človek. Či si myslíš, že keď ich nepoužívaš ty, tak ich nemôže používať nikto? :)
|
||
| Chamurappi Profil |
#9 · Zasláno: 11. 2. 2014, 17:16:41
Reaguji na jefitta44:
„trebárs aj na html1 (ak niečo také vôbec niekedy existovalo)“ Neexistovalo. „V podstate je len dôležité, aby to tam bolo“ Ne, není. V jeho případě je očividně důležité, aby zůstal v quirku, pokud nechce předělávat i ostatní věci, které má hotové. „Nevidím dôvod, prečo by nemohol používať tágy <header><footer><nav><section>, ako normálny slušný človek.“ Slušný člověk? To jako vážně? Ona se slušnost měří nějakou pseudosémantikou kódu? :-) Neměl by je používat pokud možno nikdo, protože jsou k ničemu. Sám si s jejich pomocí vyrábíš úplně zbytečné problémy, tak je laskavě nedoporučuj dál… a zejména u dotazu, který se HTML netýká, jsou podobné rady zbytečný plevel. |
||
| Návštěvník Profil * |
#10 · Zasláno: 11. 2. 2014, 18:02:41
Chamurappi:
chápu co myslíš, ale když to omezím na 800 px, tak pak nemohu roztáhnout ty péčka (pruhy: zpráva, mainmenu, menu) až ke kraji: 
žlutá čára rozsah 800 px, nyní ještě nevycentrováno, ale už se tam objevily ty pruhy. Myslím že by se to dalo řešit trikem zabalit ten tzv. "header" do dalšího "headeru" který bude mít stejnou výšku, šířku 100% a pozadí opakující se zleva doprava až ke krajům by byly pruhy. Jenže ta žlutá zpráva se nemusí zobrazit, tudíž není standardní součastí hlavičky a objeví se jen někdy. |
||
| Návštěvník Profil * |
#11 · Zasláno: 11. 2. 2014, 19:43:51
Tedy, když bych použil ty pruhy na pozadí rodičovského wraperu a ta zpráva tam nebude, tak by to vypadalo asi takhle:
Což je dost divný |
||
| Chamurappi Profil |
#12 · Zasláno: 11. 2. 2014, 20:16:46
Reaguji na Návštěvníka:
Každá věc, u které chceš, aby ti udělala pruh, musí zůstat bez nastavené šířky. Každá menší věc umístěná nějak uvnitř vzniklého pruhu musí … prostě být uvnitř toho pruhu. Tudíž dovnitř odstavců dáš třeba <span>y, které budou mít šířku (a display: block), nebo naopak kolem odstavců přidáš <div>y s pozadím a šířky dáš odstavcům.
|
||
| Návštěvník Profil * |
#13 · Zasláno: 11. 2. 2014, 21:40:28 · Upravil/a: Návštěvník
Vyhnul jsem se divům - nechci aby to bylo nepřehledné, už tam nějaké divy jsou. Tak jsem použil section -> přehledné pro mě. A nechci přestavovat tagy p, které už jsou nakonfigurované - to nechci aby se mi vše rozpadlo.
css - hlavní struktura je tady: http://paste.ofcode.org/34dSZcfi6syTFmsMFcazQZb poslední sekce menu (user menu) je zde: http://paste.ofcode.org/fWLSxUi5FuaY7iFDq3jWFc Co mi uniká? Nebo lépe, co konkrétně ještě musím změnit. Nevím jestli section je blokový prvek tak jsem to pro jistotu uvedl na začátku jako blokový. poznámka: našel jsem tam chybné komentáře //, tak to jsem si už opravil |
||
| Chamurappi Profil |
#14 · Zasláno: 11. 2. 2014, 21:51:40
Reaguji na Návštěvníka:
„Tak jsem použil section“ To je hrubá chyba. Nejen, že nefunguje ve všech prohlížečích, ale to, co vyznačuješ, ani není sekce obsahu… Použij normálně <div>y a přehlednost si zajisti jinak. Omlouvám se, že jsem jefitta44 nesmazal.
|
||
| Návštěvník Profil * |
#15 · Zasláno: 11. 2. 2014, 22:16:19
Chamurappi:
No a co kdybych to přejmenoval až to tady dodělám? Fakt, ty divy nemám moc rád. |
||
| Chamurappi Profil |
Reaguji na Návštěvníka:
Ono to není dodělané? Z příspěvku #13 jsem nepochopil, v čem je problém. Možná by se hodila živá ukázka místo fotek Firebugu a kousků kódu (hostovaných na webu, který nefunguje ve všech prohlížečích správně). |
||
| Návštěvník Profil * |
#17 · Zasláno: 11. 2. 2014, 22:44:57 · Upravil/a: Návštěvník
Chamurappi:
Ta poslední fotka, je jen z přiblížení. Ve skutečnosti celý obsah mám stále nalevo a vypadá to takto:  A jé je. Chyba syntaxe DIV.context, table#foot, { ... }Opraveno. Takže teď centruje, ale hlavička stále není dotažená až ke kraji http://oi60.tinypic.com/oridxt.jpg Není problém v té třídě context? <div class="context"> Má centrovat, ale když odstraním šířku, tak zase skočí doleva. Já jsem z toho celý jelen. |
||
| Chamurappi Profil |
#18 · Zasláno: 11. 2. 2014, 22:56:02
Reaguji na Návštěvníka:
Asi máš celou hlavičku v něčem, čemu nastavuješ šířku a centruješ to… tak tomu tu šířku zruš. Tohle hádání z obrázků se mi fakt moc nelíbí, takže tohle je poslední rada, kterou bez živé ukázky dostaneš. „oi60.tinypic.com/oridxt.jpg“ Na to jsem nekoukal, nedal jsi klikatelný odkaz. |
||
| Návštěvník Profil * |
#19 · Zasláno: 11. 2. 2014, 23:12:00
Ještě jsem našel chybu: nenastavil jsem těm tagům p šířku. Tak jsem to udělal a žádná změna se neprojevila. Stále stejné.
Právě že když zruším tu šířku v <div class="context"> tak to skočí celé doleva. A ještě navíc se ta hlavní část - obsah stránky - roztáhne až ke kraji. Což nechci. Tohle je hodně změnšené: 
|
||
| Chamurappi Profil |
#20 · Zasláno: 11. 2. 2014, 23:20:09
Reaguji na Návštěvníka:
Viz [#12]. Žádná extra velká věda v tom není. Elementy, které mají vytvářet pozadí, šířku mít nesmí, elementy uvnitř nich šířku mít mají a mají být centrované. Bez živé ukázky ti chybu nenajdu. |
||
| Návštěvník Profil * |
#21 · Zasláno: 11. 2. 2014, 23:29:17
Chamurappi:
http://jsfiddle.net/4j2PP/ Css uživatelského menu se mi tam ale nezobrazuje - ostatní prvky zdá se že jo. Hlavička (obrázek) tam není. |
||
| Chamurappi Profil |
#22 · Zasláno: 12. 2. 2014, 00:47:32
Reaguji na Návštěvníka:
PHP kód mě nezajímá, ten se vykonává na straně serveru, proč ho zveřejňuješ? Tenhle kód ti opravdu připadá přehledný? Proč nastavuješ pro DIV#head šířku?
Nepoužívej <section>.
|
||
| Návštěvník Profil * |
#23 · Zasláno: 12. 2. 2014, 12:30:20
Chamurappi:
Já ty section odstraním jen jak to odladím. V headeru jsem odstranil tu šířku jak píšeš. Dneska jsem k tomu přišel a jak rozbaluju DOM, tak mě to praštilo do oka hned na první pohled: head jsem měl uvnitř context, což není normální. A to si sice říkal, že contextu nemám nastavovat šířku, ale včera jsem to neviděl, že head musí být před context. Takže pruhy se konečně roztáhly: 
Ale zbývá ještě udělat to odsazení hlavičky, menu a zprávy tak aby se to zarovnalo z levým žlutým okrajem obsahu stránky. |
||
| Kcko Profil |
#24 · Zasláno: 12. 2. 2014, 12:31:12
Návštěvník:
Nastavíš stejnou šířku jako u toho žlutého obsahu a nastavíš margin: auto ;) |
||
| Návštěvník Profil * |
#25 · Zasláno: 12. 2. 2014, 12:46:37 · Upravil/a: Návštěvník
Kcko:
čemu mám nastavit margin auto? Tomu #head nebo #header? Zdá se že ani jedno nezabírá. P už šířku má. DIV#head {
margin: auto;
padding: 0;
text-align: center;
}
/**********************/
section#header {
background-image: url("images/top_bg7.jpg");
height: 58px;
margin: auto;
width: 100%;
}
section, section p {
border: 0 none;
display: block;
margin: 0;
padding: 0;
}
Zděděno oddiv#head
DIV#head {
text-align: center;
}
/********* P **********/
#header p {
height: 58px;
padding: 19px 0 0;
text-align: left;
width: 779px;
}
section, section p {
border: 0 none;
display: block;
margin: 0;
padding: 0;
}
p {
font-size: 13px;
margin: 5px 0;
padding: 5px 0;
}
style.css (řádek 140)
BODY, p, span, .head, form {
font-family: arial,tahoma,Verdana,sans-serif;
} |
||
| Kcko Profil |
Je to někde vidět?
Musíš to nastavit elementu, který má pevnou šířku, na width 100% to pochopitelně nefunguje. |
||
| Návštěvník Profil * |
#27 · Zasláno: 12. 2. 2014, 13:07:46 · Upravil/a: Návštěvník
Kcko:
Skvělé díky. Už chápu. Já myslel že ten margin:auto mám nastavit rodiči! Takže blokovému prvku s pevně nastavenou šířkou. Díky Vám oběma moc! Už to fachá. V Opeře a v FF to funguje, ale IE8 stejně zarovnává zleva. Chamurappi: Považovalo by se to za chybu pokud bych zaměnil section za menu v případě menu? Ještě uvažuju jestli by se dal nahradit section u obrázku něčím jiným než div. |
||
| anonymníí Profil * |
#28 · Zasláno: 12. 2. 2014, 14:34:14
Návštěvník:
div není nadávka, proč se ho bojíš jak čert kříže?
Jefitto používá moderní značky a je strašně cool. Kdyby pracoval na komerčních projektech, zjistil by, že coolovitost nerozhoduje. Podstatné je, komu (kolika procentům) se web zobrazí. A že je méně cool? No a, návštěvníka přeci kód nezajímá. |
||
| Chamurappi Profil |
#29 · Zasláno: 12. 2. 2014, 14:45:32
Reaguji na Návštěvníka:
Explorer 8 nepodporuje <section>.
Navíc jedeš v quirku, takže musíš centrovat nastavením text-align: center na rodiče. V příspěvku #4 jsem tě odkazoval na návod zevrubně popisující centrování — ušetřil bys sobě i ostatním spoustu písmenek, kdyby sis ho přečetl.
|
||
| Návštěvník Profil * |
#30 · Zasláno: 12. 2. 2014, 15:15:02 · Upravil/a: Návštěvník
Chamurappi:
Však jsem to ale nakonec udělal a IE8 stále zarovnává doleva. V hlavě už mám div. margin: auto jsem tam fal taky. IE8 nerozumím. V IE8 mám ještě další problém a to je nesprávná výška těch pruhů menu. Výška má být okolo 25 px i s okrajem. A je tam 41px výška ul. 
|
||
|
Téma pokračuje na další straně.
|
|||
0