Evo ja sam ti gledajuci sliku napravio kompletnu imitaciju slike pa da vidis kako sam ja rjesio tvoj problem.
Sliku sam pronasao preko google slika - pretrazivanje po slikama tako da uploudam sliku i on mi izbaci slicne/iste.
Boje sam nasao preko color pickera, fontove sam pogadjao napamet.
U prilogu je prva slika moja verzija a druga tvoja.
.container{
width: 530px;
height: auto;
margin: 100px auto;
border: 5px solid #33B4D1;
text-align:center;
}
Dakle napravio sam container sa zadanom sirinom, visinu nisam zadao nego sam pustio da bude visoka koliko treba, inace se to netreba pisati uopce height za taj efekt (to je standard) ali ja sam u ove svrhe napisao da je "auto". Marginama sam zadao da se poravnava u sredinu i 100px gore (i dolje) od dokumenta. Stavio sam border od 5px da okruzuje container te da se sav tekst ( to ukljucuje sliku!!!! ) poravnava centralno u containeru.
NAPOMENA:
Container moze biti i responzivan ako mu stavimo sirinu 100%!!
<div class="container">
<img src="http://s1.postimg.org/cv82h8jwr/Download_Computer_128.png">
</div>
Zatim sam tu klasu pozvao u htmlu i u nju sam umetnu sliku. Klasika.
Stilu slike sam pristupio na ovaj nacin tako da se taj stil odnosi samo na sliku unutar container klase a ne na sve ostale.
.container img{
position:relative;
top:-70px;
margin:0;
}
Ovdje je sva mudrost. Sliku sam pozicionirao relativno (u odnosu na njenu normalnu poziciju). Zatim sam zadao top na -70 px kako bi sliku pomaknuo -70 (ovisi o slici) piksela odnosno da preklopi border i da se dobi taj efekt preklapanja.
Posto se sav tekst (tako i slika) poravnavaju centralno u containeru nije potrebno namjestati niti left niti right svojstvo!!!!
NAPOMENA:
Isti efekt se moze postici i ako apsolutno pozicioniramo sliku unutar containera. Ali slika se onda pozicionira u odnosu na prvu klasu iznad nje (parent class) koja ima zadanu poziciju koja nije staticna. U nasem slucaju prva takva klasa je HTML!!! Sto znaci da se slika pozicionira u odnosu na HTML, pa je onda potrebno namjestati i Top svojstvo i Left svojstvo jer vise ne vrjedi centralno pozicioniranje za img klasu!!!!!!!! Takodjer responzivnost containera je dovedena u pitanje!
Tada sam postigao rjesenje problema koje si zadao. Sve ostalo je klasika uredjivanje u CSSu da to bude isto kao i tvoj primjer. Evo i cjelog koda :
<div class="container">
<img src="http://s1.postimg.org/cv82h8jwr/Download_Computer_128.png">
<h3>DOWNLOAD SECRET SEO TACTICS</h3>
<p>Do you know hot to rank on the first page on google? Well, I do. In these FREE report i will reveal all of my tactics which you can use to dominate the first page of google!</p>
<div class="btn">DOWNLOAD HERE</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
body{
font-family: 'Oswald', sans-serif;
}
.container{
width: 530px;
height: auto;
margin: 100px auto;
border: 5px solid #33B4D1;
text-align:center;
}
.container img{
position:relative;
top:-70px;
margin:0;
}
.container h3{
margin-top:-50px;
color:#333;
}
.container p{
font-family: 'Open Sans', sans-serif;
color:#333;
padding: 0 40px;
text-align:left;
}
.btn{
background:#14B397;
padding: 10px 20px;
color:#fff;
margin: 0 0 30px;
display: inline-block;
letter-spacing:2px;
}
Primjer sam radio na codepenu pa je ovdje i fizicki primjer pa mozes kopati po kodu i isprobavati:
http://codepen.io/riogrande/pen/KpPmzK
moje rjesenje
tvoj upit
