« 1 2 »
Autor Zpráva
Spajky
Profil
Mám tlačíka uzavřený v divech, ale zobrazují se pod sebou, jak udělat, aby byly vedle sebe?

<div class=back><a class="tl" href="http://www.spajky.ic.cz/index.html">úvod</a></div>
<div class=back><a class="tl" href="http://www.spajky.ic.cz/necoomne">o mně</a></div>
<div class=back><a class="tl" href="http://www.spajky.ic.cz/skola">škola</a></div>
<div class=back><a class="tl" href="http://www.spajky.ic.cz/knihy">knihy</a></div>
<div class=back><a class="tl" href="http://www.spajky.ic.cz/vtipy">vtipy</a></div>
<div class=back><a class="tl" href="http://www.spajky.ic.cz/obrazky">obrázky</a></div>
<div class=back><a class="tl" href="http://www.spajky.ic.cz/pribeh">příběh</a></div>
<div class=back><a class="tl" href="http://www.spajky.ic.cz/roboti">roboti</a></div>
<div class=back><a class="tl" href="http://www.spajky.ic.cz/odkazy">odkazy</a></div>
Suji
Profil
1. udelej to menu jako seznam a pak teprve zacni uvazovat nad tim, jak to dostat na radek vedle sebe!
Timy
Profil
Poohlédl bych se po CSS vlastnosti float
Spajky
Profil
Myslíš tím to ul a li? Přes float to funguje, ale to co má být pod tím se mi zabrazí vedle.
Suji
Profil
Spajky
Jj, presne to jsem myslel.
Spajky
Profil
Na to si musím najít návod...
Spajky
Profil
Tím se mi rozbila celá stránka:
<ul>
<li><div class=back><a class="tl" href="http://www.spajky.ic.cz/index.html">úvod</a></div></li>
<li><div class=back><a class="tl" href="http://www.spajky.ic.cz/necoomne">o mně</a></div></li>
<li><div class=back><a class="tl" href="http://www.spajky.ic.cz/skola">škola</a></div></li>
<li><div class=back><a class="tl" href="http://www.spajky.ic.cz/knihy">knihy</a></div></li>
<li><div class=back><a class="tl" href="http://www.spajky.ic.cz/vtipy">vtipy</a></div></li>
<li><div class=back><a class="tl" href="http://www.spajky.ic.cz/obrazky">obrázky</a></div></li>
<li><div class=back><a class="tl" href="http://www.spajky.ic.cz/pribeh">příběh</a></div></li>
<li><div class=back><a class="tl" href="http://www.spajky.ic.cz/roboti">roboti</a></div></li>
<li><div class=back><a class="tl" href="http://www.spajky.ic.cz/odkazy">odkazy</a></div></li>
</ul>
Urob
Profil *
nebo jednoduše místo divu použij span
Spajky
Profil
To pak zlobí... Z obrázku na pozadí span se i přes nastavenou velikost zobrazí jen kousek.
Urob
Profil *
span je úplně to samý co div, akorát za sebou neodřádkuje, tedy pokud umíš používat css a správně si to vše nastyluješ
Spajky
Profil
Já bych zatím radši zůstal u toho divu. Teď bych chtěl vědět co s tímhle: Přes float to funguje, ale to co má být pod tím se mi zobrazí vedle. a jak to udělat s ul, li.
Suji
Profil
Spajky
Nevim, jak presne chces aby ten odkaz vypadal, ale pri trose stesti by mohl stacit jen seznam a nastylovat odkaz. Obesel by ses tedy bez spanu i divu.

<ul>
<li><a class="tl" href="http://www.spajky.ic.cz/index.html">úvod</a></li>
...
...
<li><a class="tl" href="http://www.spajky.ic.cz/odkazy">odkazy</a></li>
</ul>
Spajky
Profil
Ale já potřebuji, aby se mi pod tím odkazem zobrazil obrázek v jeho velikosti a to dělám přes div. a pak mi nefunguje ani ul a li.
Bubák
Profil
CSS
.menu ul, .menu li {margin: 0; padding: 0;}
.menu a {float: left; width: 5em;}
/* uprav si a pridej dalsi vlastnosti */

HTML
<ul class="menu">
<li><a ...>Lorem</a></li>
<li><a ...>Ipsum</a></li>
</ul>

Nechápu, proč dáváš všemu class, nauč se, co je kontextová deklarace a jak funguje.
Spajky
Profil
HTML
<ul class=menu>
<div><li><a href="http://www.spajky.ic.cz/index.html">úvod</a></div></li>
<div><li><a href="http://www.spajky.ic.cz/necoomne">o mně</a></div></li>
<div><li><a href="http://www.spajky.ic.cz/skola">škola</a></div></li>
<div><li><a href="http://www.spajky.ic.cz/knihy">knihy</a></div></li>
<div><li><a href="http://www.spajky.ic.cz/vtipy">vtipy</a></div></li>
<div><li><a href="http://www.spajky.ic.cz/obrazky">obrázky</a></div></li>
<div><li><a href="http://www.spajky.ic.cz/pribeh">příběh</a></div></li>
<div><li><a href="http://www.spajky.ic.cz/roboti">roboti</a></div></li>
<div><li><a href="http://www.spajky.ic.cz/odkazy">odkazy</a></div></li>
</ul>


CSS
.menu ul, .menu li {margin: 0; padding: 0;}
.menu a {float: center; width: 5em; color: black; font-face: Comic Sans MS; font-weight: bolder;}
.menu a:hover {color: orange; font-face: Comic Sans MS; font-weight: bolder;}
.menu div {float: left; text-align: center; background-image: url('http://www.spajky.ic.cz/tlacitka/0-1.jpg');background-repeat: no-repeat; width: 88px; height: 24px;}


Ted by mě akorát zajímalo, co s těma tečkama a jak ve Firefoxu vyřešit: Přes float to funguje, ale to co má být pod tím se mi zobrazí vedle.
Spajky
Profil
Nedá se použít něco jinýho, float je obtékání, takže mi stránka obtéká menu...?
Spajky
Profil
Už jsem se zbavil divu úplně, ale pořád jsou ve sloupci:

<ul class=menu>
<li><a href="http://www.spajky.ic.cz/index.html">úvod</a></li>
<li><a href="http://www.spajky.ic.cz/necoomne">o mně</a></li>
<li><a href="http://www.spajky.ic.cz/skola">škola</a></li>
<li><a href="http://www.spajky.ic.cz/knihy">knihy</a></li>
<li><a href="http://www.spajky.ic.cz/vtipy">vtipy</a></li>
<li><a href="http://www.spajky.ic.cz/obrazky">obrázky</a></li>
<li><a href="http://www.spajky.ic.cz/pribeh">příběh</a></li>
<li><a href="http://www.spajky.ic.cz/roboti">roboti</a></li>
<li><a href="http://www.spajky.ic.cz/odkazy">odkazy</a></li>
</ul>
Bubák
Profil
Koukám, že jsem ti do ukázky napsal pár chyb, taktně o nich pomlčím. Místo třídy jsem použil id, předpokládám, že menu budeš mít jedno, obsah taky bude jeden.

<style>
ul#menu, #menu li {
margin: 0;
padding: 0;
}
#menu li {
float: left;
}
#menu a {
color: black;
font-family: "Comic Sans MS", sans-serif;
font-weight: bolder;
text-align: center;
width: 88px;
height: 24px;
background: #eee url('http://www.spajky.ic.cz/tlacitka/0-1.jpg') no-repeat;
}
#menu a:hover {
color: orange;
}
#obsah {
clear: both;
}
</style>

<ul id="menu">
<li><a href="http://www.spajky.ic.cz/index.html">úvod</a></li>
<li><a href="http://www.spajky.ic.cz/necoomne">o mně</a></li>
<li><a href="http://www.spajky.ic.cz/skola">škola</a></li>
<li><a href="http://www.spajky.ic.cz/knihy">knihy</a></li>
<li><a href="http://www.spajky.ic.cz/vtipy">vtipy</a></li>
<li><a href="http://www.spajky.ic.cz/obrazky">obrázky</a></li>
<li><a href="http://www.spajky.ic.cz/pribeh">příběh</a></li>
<li><a href="http://www.spajky.ic.cz/roboti">roboti</a></li>
<li><a href="http://www.spajky.ic.cz/odkazy">odkazy</a></li>
</ul>
<div id="obsah">
<p>Konec obtékání - CSS vlastnoct clear, hodnota both. Podobnou možností je tzv. "čistič"</p>
</div>
Spajky
Profil
Jak nastavit, velikost obrázku pod odkazem? #menu a {width: 88px; height: 24px;} to nenastaví a nic to nedělá.
Dá se to celý nějak zarovnat na střed?
Bubák
Profil
Velikost pozadí se nedá nastavit. Vlastnosti pozadí - [url=http://www.jakpsatweb.cz/css/background.html
]www.jakpsatweb.cz/css/background.html
[/url]

Vycentrování: obalíš divem, dáš mu text-align: center (pro IE), tomu, co je centruješ, dáš šířku (9*88px) a pravý i levý margin: auto. Takže menší úpravy HTML a CSS.

V předešlé verzi jsem zapoměl dát tagu "a" display: block, ve FF to asi blblo.

<style>
#menu {
text-align: center;
}
#menu ul {
margin: 0 auto;
padding: 0;
width: 792px;
}
#menu li {
margin: 0;
padding: 0;
float: left;
list-style: none
}
#menu a {
color: black;
font-family: "Comic Sans MS", sans-serif;
font-weight: bolder;
text-align: center;
display: block;
width: 88px;
height: 24px;
background: #eee url('http://www.spajky.ic.cz/tlacitka/0-1.jpg') no-repeat;
}
#menu a:hover {
color: orange;
}
#obsah {
clear: both;

}
</style>

<div id="menu">
<ul>
<li><a href="http://www.spajky.ic.cz/index.html">úvod</a></li>
<li><a href="http://www.spajky.ic.cz/necoomne">o mně</a></li>
<li><a href="http://www.spajky.ic.cz/skola">škola</a></li>
<li><a href="http://www.spajky.ic.cz/knihy">knihy</a></li>
<li><a href="http://www.spajky.ic.cz/vtipy">vtipy</a></li>
<li><a href="http://www.spajky.ic.cz/obrazky">obrázky</a></li>
<li><a href="http://www.spajky.ic.cz/pribeh">příběh</a></li>
<li><a href="http://www.spajky.ic.cz/roboti">roboti</a></li>
<li><a href="http://www.spajky.ic.cz/odkazy">odkazy</a></li>
</ul>
</div>
Bubák
Profil
Ještě ve FF "straší" odrážky, v předešlém kódu to taky opravím:
#menu li {
margin: 0;
padding: 0;
float: left;
list-style: none
}
Spajky
Profil
Ještě jsem moc nepochopil:
centruješ, dáš šířku (9*88px) a pravý i levý margin: auto
mám tam #menu {text-align: center; margin: 0 auto;}
Spajky
Profil
jj, s odrážkama jsem si již poradil sám...
Bubák
Profil
Zkusím to centrování napsat srozumitelněji:
Vycentrování: obalíš divem to, co chceš vycentrovat, v našem případě seznam <ul>
Divu dáš mu text-align: center (pro IE)
Tomu, co je centruješ, , v našem případě seznam <ul>, dáš šířku (9*88px=792px) a pravý i levý margin: auto. Zápis stran:
www.jakpsatweb.cz/css/zapis-stran.html

Takže menší úpravy HTML a CSS. Vyplývají z toho, že id má div, proto u seznamu id nepotřebuji.

#menu {text-align: center; margin: 0 auto;} / * spatne, ja nic takoveho nepsal */
margin: 0 auto má být pro seznam, takže to, cos napsal, ti bude fungovat jen v IE díky text-align.
Spajky
Profil
Ahá... já jsem měl menu místo u div v ul. Díky za pomoc a za snahu!

Tady je CSS, snad mám všechno správně a není tam nic navíc:
#menu {text-align: center; margin: 0 auto;}
#menu ul {margin: 0 auto; padding: 0; width: 792px;}
#menu li {list-style: none; margin: 0; padding: 0; float: left;}
#menu a {display: block; width: 88px; height: 24px; color: black; font-family: "Comic Sans MS", sans-serif; text-align: center; background: url('http://www.spajky.ic.cz/tlacitka/0-1.jpg') no-repeat;}
#menu a:hover {color: orange;}
#obsah {clear: both;}


A HTML:
<div id="menu">
<ul>
<li><a href="http://www.spajky.ic.cz/index.html">úvod</a></li>
<li><a href="http://www.spajky.ic.cz/necoomne">o mně</a></li>
<li><a href="http://www.spajky.ic.cz/skola">škola</a></li>
<li><a href="http://www.spajky.ic.cz/knihy">knihy</a></li>
<li><a href="http://www.spajky.ic.cz/vtipy">vtipy</a></li>
<li><a href="http://www.spajky.ic.cz/obrazky">obrázky</a></li>
<li><a href="http://www.spajky.ic.cz/pribeh">příběh</a></li>
<li><a href="http://www.spajky.ic.cz/roboti">roboti</a></li>
<li><a href="http://www.spajky.ic.cz/odkazy">odkazy</a></li>
</ul></div>
<div id="obsah">
Spajky
Profil
Tady ještě jednou, trochu poopravené:
#menu {text-align: center;}
#menu ul {margin-left: auto; margin-right: auto; padding: 0; width: 792px;}
#menu li {list-style: none; margin: 0; padding: 0; float: left;}
#menu a {display: block; width: 88px; height: 24px; color: black; font-family: "Comic Sans MS", sans-serif; text-align: center; background: url('http://www.spajky.ic.cz/tlacitka/0-1.jpg') no-repeat;}
#menu a:hover {color: orange;}
#obsah {clear: both;}
Bubák
Profil
Dodatek: všiml sis toho sám a upravil.
Hnedka první řádek CSS, máš tam navíc margin: 0 auto;
Sice to ničemu nevadí, ale je to úplně zbytečné, klidně to smaž. Vycentrování pro ne-IE prohlížeče máš na druhém řádku CSS.

Trochu OT poznámka. Kdybys to udělal o fous užší, vlezl by ses do šířky stránky při rozlišení 800×600.
Spajky
Profil
A co se stane, když to přesahuje?
Bubák
Profil
Spajky
Snad umíš zúžit okno.
A pokud děláš takové věci častěji, můžeš použít třeba bookmarklet 800x600. Já si několik dalších velikostí "vyrobil".
www.jakpsatweb.cz/javascript/bookmarklet.html
Spajky
Profil
To je rozlišení.
« 1 2 »
Toto téma je uzamčeno. Odpověď nelze zaslat.