Autor Zpráva
PitgenUK
Profil
Dobry den,

Pokousim se zarovnat nadpis h1 a navigacni menu, ktere mam udelano jako polozka seznamu - li vedle sebe, kde mam 3 polozky. Ma to vsak 3 chyby.

1, Vyska ramu kolem nadpisu h1 je sirsi nez text
2, Mam velkou mezeru mezi nadpisem h1 a mezi polozkama seznamu- nechci tam mit zadnou mezeru.
3, Z nejakeho duvodu mi nejdou ty polozky v seznamu zarovnat na stred aby byli pekne uprostred jako nadpis.

Muj kod :

.myheader h1 {
  font-family: Arial, Helvetica, sans-serif;
  text-align:center;
  font-size: 45px;
  margin-top: 100px;
  width:100%;
  border: 1px dotted red;
  background-color: green;
    
}
    
.navmenu li {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  word-spacing: 20px;
  list-style: none;
  display:inline;
  text-align: center;
  border: 1px dotted blue;
  background-color: silver;
    }

Prohlizim to pres chrome, v IE 10 je to jeste divnejisi.
Predem diky za pomoc.
margin
Profil *
Udělej obrázek, jak má dílo vypadat.
Dej odkaz na živou ukázku.
Nedávej font-size v px, ale třebas v em, některé prohlížeče nedokáží písmo deklarované v px zvětšit.
Vlastnosti písma se dědí, nemusíš deklarovat písmo pro každý element, stačí ho deklarovat třebas pro BODY.
Deklarovat jakýkoliv text-align pro elementy s display: inline postrádá smysl.
Jaký smysl má word-spacing: 20px; snad tím neděláš mezery mezi položkami menu?
PitgenUK
Profil
Diky za odpoved,

Omlouvam se ja s tim zacinam a snazim se vse delat jak ma byt.

Takze vystizne receno, nadpis h1 ma byt uprostred s tim ze zhora ma byt mezera 100px.

Pod nim bez jakekoliv mezery maji byt 4 polozky menu s mezerou mezi kazdou 20px a s tim aby to bylo pekne uprostred tzn v podstate ta druha je primo uprostred.
Ja tam dal display: inline nebot bez toho by se mi moje polozky v li ukazovali pod sebou.
Diky za radu ze se da deklarovat pismo i v em, apropo jaky je prepocet mezi em a px?
Snazim se naucit oddelit vzhled (css) a samotny html kod.

Toto je muje cast Html kodu :

<div id="top">

<header class="myheader">
  <h1 title="MyName"><a href="index.html" title="MyName">MyName</a></h1>
</header>

<nav class="mynavigation">
<ul class= "navmenu">
  <li> <a href="index.html" title="Work">Work</a> </li>
  <li> <a href="index.html" title="Info">Info</a> </li>
  <li> <a href="index.html" title="Uni">Uni</a> </li>
  <li> <a href="index.html" title="Contact">Contact</a> </li>
</ul>
</nav>

</div>
margin
Profil *
Má to vypadat takto?
kód + živá ukázka http://kod.djpw.cz/irp
samotná ukázka http://kod.djpw.cz/irp-
Záměrně jsem se v CSS vyhnul elementům, které některé starší prohlížeče neznají (header a nav). Koulal jsem na to jen v IE6 a v Opeře, ale mělo by to vypadat všude stejně.
PitgenUK
Profil
Diky moc, musim to vyzkouset,

Ja mezi tu dobu udelal dalsi kod, ale je pravda ze nevim jak to je s kontatibilitou.
Ty podkladove barvy jsem tam dal jen proto abych mel prehled co ten kod dela, jak se chova.
Dival jsem se na ten Vas kod. Jakym zpusobem muzu dat ten nadpis blize k tomu li a jak zmensit mezeru mezi tim samotnym ramem a textem?

Diky za trpelivost, apropo je ten muj novy kod kontatibilni a jake jsou tam hlavni chyby?

ukazka :
http://kod.djpw.cz/zrp
margin
Profil *
PitgenUK:
nevim jak to je s kontatibilitou
Zřejmě máš na mysli kompatibilitu.

Zbytečně stylizuješ pomocí elementů, které nejsou ve starších IE podporovány. Podporu jde sice přidat JavaScriptem, ale proč to dále komplikovat, když to jde jednoduše. Jí osobně bych ty HTML5 elementy vyhodil úplně, máš je tam jen proto, že jsi někde četl, že se to tak má dělat.

Nevíš, jak vycentrovat, tak jsi použil absolutní pozicování. Ale pozor, ani relativní pozicování není správná cesta. Na rozdíl od centrování je tvůj pokus závislý na šířce displeje, velikosti písma a délce textu.
Relativní pozicování trápí začátečníky

Proč vlastně odsazuješ nadpis shora o takový kus? Mám dojem, že se snažíš něco kompenzovat, třeba že tam máš absolutně pozicovanou hlavičku, ale to je pravděpodobně vytloukání klínu klínem.
PitgenUK
Profil
Super, takhle ma vypadat vysledek prvni etapy :http://kod.djpw.cz/esp

Jeste musim vytvorit logo a umistit ho doprostred a doplnit tam text. Skvele, ze to funguje v obou prohizecich jak Ie tak i Chrome. Jsem rad ze jsem se necemu priucil.

Diky moc.


Omlouvam se za moji cestinu, za tech par let v zahranici jsem ji trosicku pozapomel. Ty html elementy tam mam jen proto,ze je to soucast me zkousky, stejne jako pouziti css. Nesmim pouzit ani js ani php ani nic jineho.

Ted jeste najit zpusob jak vykreslit podkladovy obrazek(me logo) rychle.

Jsem rad, ze jsem se mohl necemu naucit.
margin
Profil *
Styl pro odkazy bych trochu zkulturnil, a taky předpokládám, že nechceš, aby odkazy na stránce mimo záhlaví vypadaly stejně, jako v záhlaví.
#top a {
    color:#2e2e2e;
    text-decoration: none;
}
#top a:hover,
#top a:active,
#top a:focus {
    color: #cc0000;
}
Deklarovat běžným elementům průsvitnou barvu je zbytečné, protože žádné pozadí nemají.
Odkazu, přesněji elementu a staší deklarovat vzhled a pak stačí jen deklarovat změny vhledu pro jednotlivé pseudotřídy.
PitgenUK
Profil
Tomu rikam pekny kod, diky moc. Zrovna zacinam upravovat me logo. To puvodni pred 8mi lety je malicke a tak ho chci prevezt do vektoru, zvetsit a pak nazpet. Chtel bych to nejak vymyslet, aby kolem toho pismene pak na strance obtekal text. Obrazek je vetsinou ctverec tak mam opet nad cim premyslet.

Kazdopadne diky moc za pomoc a ze jsem mel tu moznost se necemu priucit.
margin
Profil *
PitgenUK:
Chtel bych to nejak vymyslet, aby kolem toho pismene pak na strance obtekal text
Myslíš něco takového? http://jecas.cz/float#presne-obtekani
PitgenUK
Profil
Presne tohle. Musim vsak vymyslet jak ma ta stranka vypadat, nejak originalne jako treba obrazek pismene D a kolem i vevnitr bude obtekat text a cisla neco ve smyslu moje logo a kolem ty pismena a cisla ci casti kodu budou znamenat moji tridu - Computer Science. Neco jednoduse vypadajici ale pekne.

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: