| View previous topic :: View next topic |
| Author |
Message |
maXimus
Joined: 05 Dec 2005
Posts: 55
Location: Zagreb
|
 Posted: 24.01.2007 18:59 Post subject: [CSS] dno stranice |
  |
|
Ovako mi izgleda layout stranice
Neznam kako da napravim da mi se dodavanjem teksta plava pozadina produžuje. To bi bilo lagano kada se pri dnu stranice bočni bridovi nebi širili. |
|
|
| Back to top |
|
 |
mfloyd
Joined: 25 Jan 2006
Posts: 57
Location: Zagreb <-> Orahovica
|
| Posted: 24.01.2007 23:01 Post subject: |
|
|
Evo ideja, poigraj se malo, možda ti pomogne.
bg1.jpg uzmeš gornji dio slike od par pixela visine, a bg2.jpg od proširenja na niže
| Code: | <html>
<head>
<style type="text/css" media="screen">
#content {
position:relative;
width:400px;
height:600px;
background:url(bg1.jpg) repeat-y;
}
#bottom {
position:absolute;
bottom:0;
width:400px;
height:200px;
background:url(bg2.jpg) no-repeat bottom;
}
</style>
</head>
<body>
<div id="content">
<div id="bottom"></div>
</div>
</body>
</html> |
|
|
|
| Back to top |
|
|
maXimus
Joined: 05 Dec 2005
Posts: 55
Location: Zagreb
|
| Posted: 24.01.2007 23:16 Post subject: |
|
|
nije to baš to, tj. ako je bottom: 0 onda u ff mi sliku dna stavi skroz gore na vrh, u operi smjesti negdje na polovicu sredine
lako rješim ja da to vizualno izgleda, nego meni je problem ako pišem u div #bottom i tekst je duži nego visina te slike onda izlazi iz okvira
opera
ff
Last edited by maXimus on 24.01.2007 23:21; edited 1 time in total |
|
|
| Back to top |
|
|
mfloyd
Joined: 25 Jan 2006
Posts: 57
Location: Zagreb <-> Orahovica
|
| Posted: 24.01.2007 23:20 Post subject: |
|
|
Ovo bi moglo biti puno bolje.
bg-left uzmeš ljevi donji dio slike, bg-right desni donji dio slike, a bg-center donji srednji dio
| Code: | <html>
<head>
<style type="text/css" media="screen">
#left {
float:left;
width:200px;
background:url(bg-left.jpg) bottom right no-repeat;
}
#center {
float:left;
width:400px;
background:#74aad0 url(bg-center.jpg) bottom no-repeat;
}
#right {
float:left;
width:200px;
background:url(bg-right.jpg) bottom left no-repeat;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</body>
</html> |
Nadam se da ti je nešto od ovoga dalo ideju! |
|
|
| Back to top |
|
|
mfloyd
Joined: 25 Jan 2006
Posts: 57
Location: Zagreb <-> Orahovica
|
| Posted: 24.01.2007 23:32 Post subject: |
|
|
| Ako apsolutno pozicioniraš element (position:absolute), moraš parent elementu postavit position:relative, npr gore #bottom i #content. Možda te to zeza. |
|
|
| Back to top |
|
|
maXimus
Joined: 05 Dec 2005
Posts: 55
Location: Zagreb
|
| Posted: 24.01.2007 23:59 Post subject: |
|
|
| mfloyd wrote: | | Ako apsolutno pozicioniraš element (position:absolute), moraš parent elementu postavit position:relative, npr gore #bottom i #content. Možda te to zeza. |
uzeo sam tvoj prvi kod i rezultat su one slike, a tamo je parent element postavljen na relative
evo kako ja mislim da bi se moglo
| Code: | <div id="content">
<div id="bottom>
</div>
</div> |
dakle contetnt ima za pozadinu onaj linearan dio slike (dio gdje su bridovi normalni, gdje se ne šire), unutar njega je bottom element, čiji je okvir obilježen ovom crvenom bojom, unutar tog okvira na donju polovicu je smještena slika gdje se bridovi šire, gornja polovica je transparentna, i kad se upiše veća količina teksta u bottom element onda se on rastegne tako da jedan dio ide preko praznoga drugi preko slike
a kako je ispod bootom elementa contetnt element dobiva se to rastezanje
e sad ja neznam da li je to moguće ralizirat
sličan primjer je web.burza.hr stranica, onaj njihov žuti box, samo što je njima na vrhu jedna slika sa gradijentom, ispod toga čista boja i stvar radi |
|
|
| Back to top |
|
|
mfloyd
Joined: 25 Jan 2006
Posts: 57
Location: Zagreb <-> Orahovica
|
|
| Back to top |
|
|
maXimus
Joined: 05 Dec 2005
Posts: 55
Location: Zagreb
|
| Posted: 25.01.2007 12:26 Post subject: |
|
|
odlično, to je to
hvala puno  |
|
|
| Back to top |
|
|
|
Forum FAQ
Search
Memberlist
Forum ignore list
Register
Profile
Log in to check your private messages
Log in
