NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Mezinárodní den IT společnosti je tady! Pouze nyní můžeš získat 90 % extra kreditů při nákupu od 1199 kreditů s promo kódem AJTACI90. Tak neváhej!

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.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
byzanth25
Člen
Avatar
byzanth25:18.12.2013 13:52

Ahojte,

trapim sa s CSS navigacie a loga. Dizajn som si nakreslil v prilozenom subore.
html vyzera teraz takto:

<body>
                        <header>
                        <nav>
                                <ul>
                                        <li class="aktiv"><a href="index.html">Home</a></li>
                                        <li><a href="about.html">About</a></li>
                                        <img id="logo" src="Image/logo.png" alt="AutoImport">
                                        <li><a href="service.html">Service</a></li>
                                        <li><a href="contact.html">Contact</a></li>
                                </ul>
                        </nav>
                        </header>
                        <h1>Welcome</h1>
                        <section class="obsah">

Neviem a nedari sa mi to dostat do podoby ako je v dizajne. Uz som skusal ul rozdelit na dva (lava a prava strana) a jednemu dat float left, druhemu right. Niekto niaka rada?

Editováno 18.12.2013 13:54
 
Odpovědět
18.12.2013 13:52
Avatar
done
Člen
Avatar
Odpovídá na byzanth25
done:18.12.2013 13:55

Nepochopil jsem z toho s čím potřebuješ pomoc ?

 
Nahoru Odpovědět
18.12.2013 13:55
Avatar
Peco
Člen
Avatar
Peco:18.12.2013 13:56

asi som slepý, ale nevidím priložený súbor ako to má vyzerať. Ale problém vidím v tom img ktorý je vložený v ul.

Kedže ale nevidno ako to má vyzerať tak len hádam.

Nahoru Odpovědět
18.12.2013 13:56
Každý deň vstávam, aby som sa niečo nové naučil.
Avatar
byzanth25
Člen
Avatar
byzanth25:18.12.2013 13:58

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

https://drive.google.com/…ZFVTcms/edit?…

Editováno 18.12.2013 14:00
 
Nahoru Odpovědět
18.12.2013 13:58
Avatar
byzanth25
Člen
Avatar
byzanth25:18.12.2013 14:05

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.

 
Nahoru Odpovědět
18.12.2013 14:05
Avatar
Peco
Člen
Avatar
Odpovídá na byzanth25
Peco:18.12.2013 14:10

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

Nahoru Odpovědět
-1
18.12.2013 14:10
Každý deň vstávam, aby som sa niečo nové naučil.
Avatar
Peco
Člen
Avatar
Odpovídá na byzanth25
Peco:18.12.2013 15:31

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;}
Nahoru Odpovědět
+1
18.12.2013 15:31
Každý deň vstávam, aby som sa niečo nové naučil.
Avatar
byzanth25
Člen
Avatar
byzanth25:18.12.2013 15:38

to hej to uz vyzera lepsie ++ ocenujem ochodotu dakujem

 
Nahoru Odpovědět
18.12.2013 15:38
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.