Div in Div (CSS)

Programovacie jazyky, rady, poradňa...
mattus
Light Expert
Light Expert
Používateľov profilový obrázok
Príspevky: 40
Registrovaný: 14 aug 2006, 11:21
Bydlisko: Bardejov
Kontaktovať používateľa:

Div in Div (CSS)

Príspevok od používateľa mattus »

Zdravim,

Chcem sa opýtať ako sa dá spraviť "<div> in <div>" :)

Mám jeden <div id="header"> (má šírku 1000px a výšku 400px) doňho potrebujem nasadiť <div id="menu"> ale tak aby to menu malo začiatok v 400x280

Skúšal som to takto, ale nejako divne mi to rozhadzuje, neviete mi poradiť ako na to ? (Celá stránka je centrovaná na stred, preto nemôžem použiť position: absolute; )

Kód: Vybrať všetko

#header {
	background: url(grafika/header.jpg); no-repeat; top;
	width: 1000px;
	min-height: 400px;
}

#menu {
	position: relative;
	top: 400px;
	left: 280px;
}
v prílohe posielam názornú ukážku.

Ďakujem za odpovede.
Prílohy
Div, problem
Div, problem
awtt
Medium Professional
Medium Professional
Používateľov profilový obrázok
Príspevky: 1234
Registrovaný: 01 nov 2006, 19:37
Bydlisko: San Francisco
Kontaktovať používateľa:

Príspevok od používateľa awtt »

do menu pridaj:

padding-top: 280px;
padding-left: 400px;
mattus
Light Expert
Light Expert
Používateľov profilový obrázok
Príspevky: 40
Registrovaný: 14 aug 2006, 11:21
Bydlisko: Bardejov
Kontaktovať používateľa:

Príspevok od používateľa mattus »

Ok, to by šlo, ale keď do toho "headeru" pridám viac elementov (pozri prílohu) tak mi to rozhadzuje a neriadi sa to tými pixelmi ktoré tam zadám.

Ako spravím niečo také ako je v prílohe ?

Skúšal som to takto, ale nejako mi to nefunguje, nemôžte ma nasmerovať ako na to ?

Kód: Vybrať všetko

#header {
	background-image: url(grafika/header.jpg);
	background-repeat: no-repeat;
	background-position: top;
	width: 1000px;
	min-height: 400px;
}

#logo {
	position: relative;
	padding-top: 120px;
	padding-left: 25px;
}

#menu {
	position: relative;
	padding-top: 280px;
	padding-left: 400px;
}

#cas {
	position: relative;
	padding-top: 20px;
	padding-left: 800px;
}

na stranke to volam takto :

Kód: Vybrať všetko

<div id="header">

  <div id="logo">
      {logo}
  </div>

  <div id="menu">
      {menu}
  </div>

  <div id="cas">
      {cas}
  </div>

</div>
Prílohy
div_problem.jpg
eMPiko
Addict
Addict
Používateľov profilový obrázok
Príspevky: 3085
Registrovaný: 11 jan 2007, 16:40

Príspevok od používateľa eMPiko »

Bolo by dobre, keby si nam uviedol aj ako daleko su jednotlive bloky od krajov elementu header.
mattus
Light Expert
Light Expert
Používateľov profilový obrázok
Príspevky: 40
Registrovaný: 14 aug 2006, 11:21
Bydlisko: Bardejov
Kontaktovať používateľa:

Príspevok od používateľa mattus »

logo :
od laveho okraja : 20
od horneho : 120

menu:
lavy okraj: 400
horny okraj: 280

cas:
lavy okraj: 800
horny okraj: 20

ale da sa to vycitaj aj z prilohy :)
awtt
Medium Professional
Medium Professional
Používateľov profilový obrázok
Príspevky: 1234
Registrovaný: 01 nov 2006, 19:37
Bydlisko: San Francisco
Kontaktovať používateľa:

Príspevok od používateľa awtt »

spravis to cez float

logo daj float: left a nejaku pevnu sirku napr 300px a podla toho padding pripadne margin

vytvor si pomocny pravy blok a daj mu pevnu sirku napr 500px a float: right

do tohto praveho vloz header s nejakou sirkou a daj mu padding a pod neho daj ten druhy header a tiez padding si nastav aby ti pasoval
pod ten pravy pomocny blok potom vloz nejaky pomocny div ktoremu daj len vlastnost clear: both aby si zrusil obtekanie...

(ten pomocny div mozes aj vynechat ak chces ale potom tym dvom musis nastavit float:right.. avsak takto je to podla mna prehladnejsie)
maros7777
Light Expert
Light Expert
Príspevky: 61
Registrovaný: 21 okt 2006, 16:37

Príspevok od používateľa maros7777 »

headeru daj position:relative a menu daj position:absolute. teraz ked nastavis top: 0, left: 0, tak sa ti menu hodi vlavo hore do headeru, takto si to lahko posunes kam potrebujes (v ramci headeru)

(nechce sa mi to skusat. je mozne, ze header ma mat position: absolute a menu position: relative. inak to urcite nebude. skus to prve najskor :) )
pheo
Light Star
Light Star
Používateľov profilový obrázok
Príspevky: 212
Registrovaný: 20 sep 2005, 16:53
Bydlisko: moje hniezdo
Kontaktovať používateľa:

Re: Div in Div (CSS)

Príspevok od používateľa pheo »

mattus napísal:

Kód: Vybrať všetko

#header {
	background: url(grafika/header.jpg); no-repeat; top;
	width: 1000px;
	min-height: 400px;
}

#menu {
	position: relative;
	top: 400px;
	left: 280px;
}
Skus toto :

Kód: Vybrať všetko

#header {
	background: url(grafika/header.jpg); no-repeat; top;
	width: 1000px;
	min-height: 400px;
        position: relative;
}

#header #menu {
	position:absolute;
	top: 400px;
	left: 280px;
}
Napísať odpoveď