[css] Obrazek oraz pozycja divów Opcje

[markuz]

Witam serdecznie !
Mam problem z css,html . Chcę zrobic tak aby divy ( .left-leaf oraz .right-leaf ) były na dole a nie na górze. Oraz aby cały div .image był wyśrodkowany. Problem z tym że po środku mamy obrazek ( <img></img> ) który przeszkadza w tym ustawieniu, bo nie znamy wielkości danego obrazka. Wszystko przedstawiam na poniższym screenie :



Oraz dołączam kod tych div-ów :

html :

[HTML] pobierz, plaintext 
	<div class='content'>
		<div class='image'>
			<div class='left-leaf'></div>
			<img src='uploads/bobmarley.png'/>
			<div class='right-leaf'></div>
		</div>
		<div class='description'>
 
		</div>
	</div>
[HTML] pobierz, plaintext 

css :

[HTML] pobierz, plaintext 
.content {
	width: 700px;
	margin: auto;
}
 
.content .image {
	margin: auto;
	overflow: hidden;
}
 
.content .image img {
	float: left;
	border: 10px solid #363636;
	border-bottom-width: 0px;
}
 
.content .image .left-leaf {
	float: left;
	width: 67px;
	height: 84px;
	background-image: url('images/small-leaf-left.png');
}
 
.content .image .right-leaf {
	float: left;
	width: 67px;
	height: 84px;
	background-image: url('images/small-leaf-right.png');
}
 
.content .description {
	margin-top: 1px;
	width: 700px;
	min-height: 81px;
	background-image: url('images/small-panel-bg.png');
	background-repeat: no-repeat;
	background-position: top;
}
[HTML] pobierz, plaintext 

Bardzo proszę o pomoc, ponieważ zależy mi na tym bardzo Możliwie jak najszybciej

[Damonsson]

[CSS] pobierz, plaintext 
.content {
	width: 700px;
	margin: auto;
	text-align: center;
}
 
.content .image {
	margin: auto;
	overflow: hidden;
	display: inline-block;
	background-image: url('images/small-leaf-left.png'), url('images/small-leaf-right.png');
              background-repeat: no-repeat, no-repeat;
              background-position: bottom left, bottom right;
}
 
.content .image img {
	float: left;
	border: 10px solid #363636;
	border-bottom-width: 0px;
}
 
.content .image .left-leaf {
	float: left;
	width: 67px;
	height: 84px;
}
 
.content .image .right-leaf {
	float: right;
	width: 67px;
	height: 84px;
}
 
.content .description {
	margin-top: 1px;
	width: 700px;
	min-height: 81px;
	background-image: url('images/small-panel-bg.png');
}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div class='content'>
		<div class='image'>
			<div class='left-leaf'></div>
			<img src='uploads/bobmarley.png'/>
			<div class='right-leaf'></div>
		</div>
		<div class='description'>
		</div>
	</div>
[HTML] pobierz, plaintext 

Tak na szybko, powinno być ok. Chociaż, te 2 DIVy są zbędne, ale nie chciało mi się myśleć.

Ten post edytował Damonsson 21.12.2010, 20:28:33

[markuz]

Pomogło jeśli chodzi o położenie liści i za to Ci dziękuję
Ale jeszcze został problem z wyśrodkowaniem tego.

Ps. dodałem w .content { text-align: center; } i dało rade
Tylko zrobiła się taka luka pod zdjęciem i nie wiem od czego.

Ten post edytował markuz 21.12.2010, 20:51:22

[Damonsson]

No przecież podałem Ci

[CSS] pobierz, plaintext 
.content {
	width: 700px;
	margin: auto;
	text-align: center;
}
[CSS] pobierz, plaintext 

więc nie wiem, co Ty tam dopisałeś, ale mniejsza


Hmmm...wystaw gdzieś to na żywo, bo w ciemno to Ci mogłem jedynie to podać, może border coś psuje, a może min-height. Nie chcę mi się tego kopiować i sprawdzać.

[markuz]

Już sobie poradziłem. Dzięki