[HTML][CSS]dwa divy wewnątrz siebie i zmiana ich pozycji Opcje

[gagatek]

nie wiem dokładnie jak Wam to opisać, ale postaram się to zrobić. Mam taki mały problem który mnie męczy i nie moge sobie z nim dać rady.
Sprawa wgląda następująco:
1. mam diva środek w którym znajduje się baner:
baner jest zrobiony w taki sposób
-najpierw jest div z obramówką (takie 2 torciki z lewej i prawej strony)
- div - button u góry po prawej "learn more"
- div z obrazkiem właściwym.
O ile z "learn more" mi się udało żeby się pojawił tak jak chciałem, to mam problem z tą obramówka (torcikami) chciałbym aby były one minimalnie wyżej o jakieś 2-5px. Ale za chiny nie moge sobie z tym poradzić, albo przesuwa się cały obrazek, albo się rozjeżdża wszystko. Uczę się cssa dla tego zawracam wam tym głowę. Proszę o jakieś wskazówki, pomoc.. Poniżej umieszczam kod oraz link do str gdzei wrzuciłem stronke:
http://takatam.cba.pl

[HTML] pobierz, plaintext 
<div class="srodek">
 
    	<div class="obramowka">
        <div class="obrazek">
            <img src="images/images/obrazek.png"  />     
            <a href="#"/> <img src="images/images/wiecej.png" class="wiecej"/></a>      
        </div>
    </div>
</div>
 
 
 
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
 
.srodek {
	position: relative;
	height: 440px;
	width: 1200px;
}
 
.obrazek{
 
	height: 407px;
	width: 951px;
	margin: 230px auto;	
border: solid 3px white;
 
}
 
 
.obramowka{
 
	margin:  auto;
	width: 1056px;
	height: 443px;
	background-image:url(images/images/obramowka.png);
 
}
.wiecej	{
	height: 160px;
	width: 160px;
position: absolute; right: 109px; top: -10px;
}
 
[HTML] pobierz, plaintext 

Ten post edytował gagatek 3.04.2013, 18:05:04

[lobopol]

Nie zrozumiałem twojego problemu, pokaż co chciałbyś osiągnąć (narysuj) albo lepiej opisz.

[memory]

[PHP] pobierz, plaintext 
.obramowka {
margin: auto;
width: 1056px;
height: 435px;
background-image: url(images/images/obramowka.png);
background-position: 0px -8px;
}
[PHP] pobierz, plaintext 

Tak na szybko

Podziel sobie te obramowanie na dwie części dół i góra.
Nastepnię poczytaj o position:aboslute, z-index,top,left i ustaw odpowiednio

Ten post edytował memory 3.04.2013, 19:57:32

[lobopol]

hmm chyba zrozumiałem twój problem, w obecnym kodzie możesz to zrobić tak:

[CSS] pobierz, plaintext 
.obrazek img {
position: relative;
z-index: -1;
}
[CSS] pobierz, plaintext 

Ale to jest brzydkie rozwiązanie
Ładniejsze byłoby zrobienie takiego układu:

[HTML] pobierz, plaintext 
<div class="obrazek">
<img src=""/>
<div class="left"></div>
<div class="right"></div>
<div class="promo"></div>
</div>
[HTML] pobierz, plaintext 

gdzie left, right, promo miałyby jedno tło (sprite) złączonego z 3 obrazków, pozycje absolutną i odpowiednie z-indexy. .obrazek pozycja relatywna

[gagatek]

Nie zrozumiałem twojego problemu, pokaż co chciałbyś osiągnąć (narysuj) albo lepiej opisz.

chodzi o to żę chciałbym żeby ten div obwodka był troche wyżej, żeby wyszedł jakby za obrazek od góry: tu wrzucam obrazek przed i po:

takatam.cba.pl/przyklad.jpg
takatam.cba.pl/przyklad2.jpg

mam z tym problem bo albo mi się przesuwa całość albo w ogole się rozjeżdża, a że się uczę to nie do końca jeszcze to ogarniam;/ A jeśli już jesteśmy przy umieszczaniu divów w divach to w cssie powinno się zaczynać od opisywania najbardziej wewnętrznego diva czy zewnętrzego?

Ten post edytował gagatek 3.04.2013, 20:49:09

[lobopol]

to tak, po pierwsze:

[CSS] pobierz, plaintext 
.srodek {
wywal height
clear: both;
}
.obramowka {
padding-top: Xpx;
text-align: center;
background: url(link do foty) top center no-repeat;
//reszta do wywalenia z tego
}
.obrazek {
//wywal cały styl
}
.obramowka img {
border: solid 3px #fff;
}
 
[CSS] pobierz, plaintext 

i z html wywal diva o klasie obrazek (zostaw tylko zawartość) popraw również top dla tego więcej