» »

Pomoč pri postavitvi v CSS

Pomoč pri postavitvi v CSS

inbox ::

Imam problem s CSS, v katerem mi nikakor ne uspe pravilno postavilti slike ob besedilo. Prilagam kodo in sliko, kako zadeve stojijo.
 Postavitev

Postavitev



Koda:
<div id="nosa"><h1>Ženska noša</h1><p>besedilo....</p>
    <div id="sapol"><img src="slike/sapol.jpg" width="400" height="433" title="Šapol-nevestino pokrivalo" alt="Šapol-nevestino pokrivalo" /></div>
    <div id="zenska-nosa"><img src="slike/zenska_nosa.jpg" width="350" height="649" title="Ženska noša" alt="Ženska noša" /></div>
	</div>
    <div id="moska-nosa"><h1>Moška noša</h1><p>besedilo.... </p>
    </div>

CSS:
#nosa {
	font-family: 'Terminal Dosis Light', arial, serif; 
	font-size: 16px;
	text-align: justify;
	width: 420px;
	margin-left: 20px;
	margin-bottom: 20px;
	position: relative;
	height: 300px;
}
#zenska-nosa {
	position: relative;
	left: 20px;
	margin-top: 20px;
}
#moska-nosa{
	font-family: 'Terminal Dosis Light', arial, serif; 
	font-size: 16px;
	text-align: justify;
	width: 420px;
	height: 400px;
	margin-left: 20px;
	margin-bottom: 20px;
	position: relative;
	
}
#sapol {
	margin-left: 20px;;
	margin-right: auto;
	position: relative;
	margin-top: 20px;
}

Rad bi da je #sapol pod besedilom od #nosa, #zenska-nosa pa na desni strani od #nosa. Potem pa odspodaj pod tem zopet normalno #moska-nosa. Problem tiči v CSS, vendar ne vem kaj spremenit.
  • spremenil: inbox ()

b ::

#nosa zapri pred #zenska-nosa, ali pa zavij od h1 do #sapol v še en div. Nato bi to moralo bit to:

#nosa (ali pa novi div v katerem je od h1 do #sapol)) {
clear: left; /* Tole ga postavi v novo vrsto, če je že kaj v trenutni. Ni 100% potrebno za tvoj primer */
float: left;
}
#sapol {
clear: both; /* To bo postavilo #sapol v novo vrsto */
}
#zenska-nosa {
float: right; (ali left, če hočeš, da se naslanja na #nosa/novi div)
}
#moska-nosa {
clear: both; /* postavi v novo vrsto, sicer bi lahko bil pod #zenska-nosa, desno od #nosa */
}

Ni pa nujno, da bo #zenska-nosa na desni, ker je odvisno, koliko je prostora v parent elementu. #nosa je siroka 420px, slika 350, če je parent element ožji od tega (+ margini/padding), potem boš #zenska-nosa tezko spravil v isto vrsto :)

Sicer pa, kakšen CSS cheat sheet pa se igrat v Firebug-u. Tako sem se jaz naučil CSS-ja :)

Googlaj CSS positioning, pa ti tam vse razloži glede floatanja in positioninga (tistih position: relative PMSM ne rabiš).

inbox ::

Najlepša hvala, nisem opazil da nosa ni bila pravilno zaprta :| . Glede CSS me pa samo še to: kolikor vidim ne rabim potem za vsak div pisat position?

b ::

Po mojem ga ne rabiš nikjer. V tvojem primeru se da vse rešit s floatanjem.


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč
151934 (1662) kr?en
»

meni razporejen po celotni dolžini

Oddelek: Izdelava spletišč
72228 (2096) XzupanX
»

Wampserver in Firefox

Oddelek: Izdelava spletišč
61843 (1723) jonystar
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč
519810 (7609) nuuush
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč
62450 (2397) amaze646

Več podobnih tem