jak udělat divy vedle sebe

1. udelej to menu jako seznam a pak teprve zacni uvazovat nad tim, jak to dostat na radek vedle sebe!

Poohlédl bych se po CSS vlastnosti float

Spajky
Jj, presne to jsem myslel.

nebo jednoduše místo divu použij span

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
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>

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.

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>

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>

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
}

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.

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
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