Diskuze: Navigacia s logom v strede.
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Zobrazeno 8 zpráv z 8.
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
nerozumiem uz som skusal vlozenie obrazka aj upravit prispevok a aj tak to obrazok nezobrazi... rozumiem ze ma bez toho nechapete... skusim to nahrat dako inak
zatial som neriesil ten obrazok auta, len sa snazim spravit navigaciu a to logo v strede. Isiel som aj podla tutorialu a tam logo riesil cez div ale stym som tiez neuspel
to Peco: img som skusal uz aj mimo ul aj mimo nav no nepodarilo sa mi to dat do pozadovanej polohy.
skusil by som to asi takto :
<nav>
<ul>
<li class="aktiv"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
<img src="Image/logo.png" alt="AutoImport">
<ul>
<li><a href="service.html">Service</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<style>
ul, nav img {float:left;}
</style>Problém tu môže nastať s centrovaním, preto by som asi išiel cez 3 div. ale to treba vyskúšať, čo je výhodnejšie.
A keď už to píšeš v html 5 , tak nav sa nepíše do header, a section by som nahradil article, kludne bez class alebo id. v css potom štýloval to ako obsah
takto som to narýchlo skúsil. ako základ to funguje. zvyšok treba doriešiť.
<body>
<nav>
<ul>
<li class="aktiv"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
<header><img src="http://www.chachaland.sk/img/3otazka.jpg" alt="AutoImport"/></header>
<ul>
<li><a href="service.html">Service</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<header>
</header>
<article>
text webu
</article>
<footer>
paticka stranky
</footer>
</body>ktomu css
body {margin:0px;padding:0px;}//všetky všeobecné def.
nav, article, footer {width:100%;max-width:960px;margin:0 auto;clear:both;}
nav img {width:100%;float:left;}
nav ul li {float:left;width:20%;list-style:none;margin:0;padding:0;background: #000;text-align:center;}
nav ul li a{color:#FFF;line-height:2em;text-decoration:none;}
nav ul li:hover{background-color:blue;}
header {float:left;width:15%;margin:0;padding:0;}
article {clear:both;}Zobrazeno 8 zpráv z 8.