Pomoc! Pozicioniranje slika

Pozdrav svima.

Pokušavam napravi site koristeći HTML i CSS i imam cijeli dizajn u PS-u izrezan za web. Otprilike na sredini sajta mi je slika sa clickable buttonom koja je nakon rezanja u PSu otišla u 5 dijelova (1 lijevo, iznad buttona, button, ispod buttona i desno) i sad ne uspjevam u CSSu sastavit tu sliku da mi download button bude točno u sredini, jer kako god pokušam, stavim lijevi dio, gornji i desni normalno, a onda mi button i ostatak slike budu ispod ta 3 djela, nikako da ih uklopim kako treba u sliku.

Jel moguće to napravit preko CSSa ili da ponovno režem, pa napravim dio iznad buttona, lijevo od buttona, button, desno i dio ispod buttona? Te, kako nakon toga ubacit tekst koji mi php skripta generira na točno određena mjesta na toj slici?

Unaprijed hvala.

Najbolje ti je okaniti se slika. Zašto ti treba slika za običan button?

A ako je već i neki specijalni, pa izreži njega posebno i stavi ga kao background nekom elementu, i onda taj element lako pozicioniraš sa CSS-om kako te volja.

Imam ovako nešto

Znači, jedini button tu je “Download”, skripta generira tekst pod “File Name.exe” i detalje o fajlu iznad download buttona.

Naslov sam riješio sa margin:top i text-align, ovaj plavi dio ispod slike također margin:top i text-align da bude centrirano, pa mi je ostalo još pozadina za tekst i download button. Ukoliko u PS-u odrežem ovako:

sve uspijem centrirat kako treba (1 div tag za gornji dio, drugi tag background lijevo i desno od buttona i button, treci div background ispod buttona).

Jel postoji možda neki kod u CSSu kojim bi riješio taj vrh backgrounda i bijeli bg na sredini stranice, a da ne koristim te slike, pa da mi tekst ide na to?

Ako pričamo samo o ovom “prozoru” ispod FileName.exe, onda bih ja sve to bez ikakvih slika napravio, osim ovog ‘download’ dugmića.

Pozadina se definira sa background-color (CSS Background)

Ona plava traka bi bila jedan

, sa ovako nekim kodom kao što je tu Ultimate CSS Gradient Generator - ColorZilla.com, ako ti treba gradient.
Plus, border-radius (CSS3 border-radius property), za gornje kuteve, da bi bili obli.

Ova plava crta u sredini prozora se radi sa


tagom.
HTML hr tag

Hvala :slight_smile: riješio sam konačno :smiley: