CSS blok noviniek

zhulo · Príspevok od používateľa **zhulo** » 31 okt 2010, 0:01

Cawte, Potreboval by som cez CSS urobit nieco taketo:
http://img.zhulo.eu/images/813_novinky.png

- namiesto tych plusiek nejaky pekny znak, napr gulku.
- to novinka 1,2 ... budu odkazy
- ta tabulka chcem aby sa velkost menila, aby bola flexibilna. ked bude len jedna novinka, bude len mala, ked viacej, tak sa bude zvacsovat

Zatial mam v subore toto:

Kód: Vybrať všetko

<div class="novinky">
<div class="nadpis">Top Novinky</div>
<div class="odkazy">
<a href="#">Novinka jedna</a>
<a href="#">Novinka dva</a>
<a href="#">Novinka tri</a>
</div>
</div>

a v style.css toto:

Kód: Vybrať všetko

.novinky {
  width: 400px; 
  background-color: #00ff00;
	color: #000;
}

.nadpis { 
  margin: 0;
	padding: 0 0 10px 0;
	font-size: 2em;
	text-shadow: 0 1px 0 #fff; 
}

.odkazy { 
  margin-bottom: 10px;
  text-shadow: 0 1px 0 #fbfbfb;
}

len uz neviem ako dalej.

Vdaka
[/i]

Príspevok od používateľa **Grim** » 31 okt 2010, 0:10

guľky spravíš takto: http://www.jakpsatweb.cz/html/seznamy.html

zhulo · Príspevok od používateľa **zhulo** » 31 okt 2010, 0:15

Guľky sú to ľahši. To hej. Ďakujem
Ale ešte urobiť to všetko do nejakého takého rámčeka.

Príspevok od používateľa **Grim** » 31 okt 2010, 0:17

...rámček?...dal by som čierny div, napr. 100x100px a do neho by som dal daľší, žltý div 90x90px a vycentroval na stred...a možno by sa to dalo aj cez border, ja som to dnes tiež skúšal, ale border mi nespravilo...

zhulo · Príspevok od používateľa **zhulo** » 31 okt 2010, 0:18

Akoze nie oramovanie. Myslim cely ten blok aj s pozadim. Lebo mam tam nastavene background-color, no nefunguje to.

Príspevok od používateľa **Grim** » 31 okt 2010, 0:24

...a ešte zaoblenie rohov, ak by si chcel: https://developer.mozilla.org/en/css/-moz-border-radius ...ale iba pre Firefox...
...a po podrobnejšom preskúmaní kódu som zistil, že to máš zle...správne by si na stránke mal mať:

Kód: Vybrať všetko

<div class="novinky">
<span class="nadpis">Top Novinky</div><br>
<ul class="zoznam">
<li><a class="novinka" href="#">Novinka jedna</a><br></li>
<li><a class="novinka" href="#">Novinka dva</a><br></li>
<li><a class="novinka" href="#">Novinka tri</a><br></li></ul>
</div>

Kód: Vybrať všetko

.novinky {
  width: 400px; 
  background-color: #00ff00;
   color: #000000;
}

.nadpis { 
  margin: 0;
   padding: 0 0 10px 0;
   font-size: 2em;
   text-shadow: 0 1px 0 #fff; 
}

.novinka { 
  margin-bottom: 10px;
  text-shadow: 0 1px 0 #fbfbfb;
}

.zoznam {
type: disc;
}

...a keď sa s tým už babrem, tak ti k tomu dorobím aj tie guľky...hotovo...

zhulo · Príspevok od používateľa **zhulo** » 31 okt 2010, 0:29

Vdaka velka. To zaoblenie netreba. To len skicar tak dal

// aktualne to nemozem vyskusat, nejde pripojit na FTP, hosting nieco robi aktualne. Zajtra to skusim a napisem, ci je to dobre

Este raz dakujem

Grim napísal:...a ešte zaoblenie rohov, ak by si chcel: https://developer.mozilla.org/en/css/-moz-border-radius ...ale iba pre Firefox...

Border radius ide aj v Opere. Robili sme skin pre miestnosti na pokeci a dávali sme tam radius a funguje. (my sme ho ale dávali na text field)

zhulo · Príspevok od používateľa **zhulo** » 31 okt 2010, 1:51

No uz to ako tak ide. len zatial som natrafil na 2 chyby
1, Niesu tam tie bodky pred odkazmy
2, Velkost pisma odkazov sa nemeni, aj ked menim font-size

Príspevok od používateľa **Grim** » 31 okt 2010, 2:03

...tak skús tento kód:

...nezabudni, že veľkosť písma noviniek sa teraz bude meniť úplne dole v "ul"...

Kód: Vybrať všetko

<div class="novinky">
<span class="nadpis">Top Novinky</div><br>
<ul>
<li><a href="#">Novinka jedna</a><br></li>
<li><a href="#">Novinka dva</a><br></li>
<li><a href="#">Novinka tri</a><br></li></ul>
</div>

Kód: Vybrať všetko

.novinky {
  width: 400px; 
  background-color: #00ff00;
   color: #000000;
}

.nadpis { 
  margin: 0;
   padding: 0 0 10px 0;
   font-size: 2em;
   text-shadow: 0 1px 0 #fff; 
}

.novinka { 
  margin-bottom: 10px;
  text-shadow: 0 1px 0 #fbfbfb;
}

ul {
type: circle;
font-size: 20px;
}

zhulo

Vďaka. Vyriešil som to trošku ináč. Pomohol mi známy, čo sa vyzná.
Ďakujem za pomoc

CSS blok noviniek

CSS blok noviniek

Re: CSS blok noviniek

Re: CSS blok noviniek

Re: CSS blok noviniek

Re: CSS blok noviniek

Re: CSS blok noviniek

Re: CSS blok noviniek

Re: CSS blok noviniek

Re: CSS blok noviniek

Re: CSS blok noviniek

Re: CSS blok noviniek