PDA

View Full Version : how to do this!!!


samy
11-13-2009, 02:42 PM
hey I want this kind of layout

where "website" in the written in the background(not an image). And there are links in front of it, scattered on the page ....
http://i35.tinypic.com/11al990.gif

Thank You

samy
11-13-2009, 03:07 PM
well i hv done this guys....
now the problem is that i want the text "WEBSITE" exactly at the center of the screen....means that for every resolution it comes exactly at the center of the screen....
i tried this by giving "auto" value to the left & top margins but no use.

also as i define inline style to position each link, separately. I want to change the link color on hover it. How to do that in inline style?

Corrosive
11-13-2009, 04:22 PM
1. Try giving the left and right (rather than top) margins 'auto' and set a width on your div.

2. Don't use inline styles. Style the links in a separate stylesheet. Use classes if you have to repeat any styles.

samy
11-13-2009, 05:24 PM
but i want it to be at the center vertically also .....(top for that)???

not wrk even by giving both lft and rt. margins auto value....

gentleone
11-13-2009, 05:37 PM
This is a method to place a div or any element horizontally and vertically center.

#wrapper {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
}

#image_bg {
width: 300px;
height: 200px;
margin-left: -150px; /*** width / 2 ***/
position: absolute;
top: -100px; /*** height / 2 ***/
left: 50%;
}


<div id="wrapper">
<div id="image_bg">
<img src="background.jpg" alt=""/>
</div>
</div>

domedia
11-13-2009, 06:17 PM
50% from the top -100px is not dead center though.
It will put the top of the image dead center, and then move the image 100 pixels up.

The horizontal center is not right either, it only works if the image is 300 pixels wide.
The centering is the easy part thought, look at the center content' tutorial linked to from the homepage.

Found this one the web, but have not tried it:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

gentleone
11-13-2009, 06:36 PM
50% from the top -100px is not dead center though.
It will put the top of the image dead center, and then move the image 100 pixels up.

The horizontal center is not right either, it only works if the image is 300 pixels wide.

I've build a few mini sites with this method and whatever the resolution is the mini site was always in the middle. I took as an example a div with a 300px width and a 200 px height. For the margin-left you take the half of the width and then put it minus (300/2=150) so -150px.
For 'top' you take the half of the height and put this also minus (200/2=100) so -100px. It realy works like a charm and it is cross browser.

I have an example here:
http://www.gentlemedia.nl/clickquest/index.htm

Resize the window to see that it stays vertically and horizontally center.

domedia
11-13-2009, 09:30 PM
Resize the window to see that it stays vertically and horizontally center. Yes, that worked perfect!

Corrosive
11-14-2009, 09:44 AM
Good work. I really like this method :)