Author Topic: Help with CSS (webdesign) (Read 516 times)

Sheath · April 03, 2011, 11:03:22 PM

I have an image that is on my webpage. The CSS I am currently using is...

Quote

#image1
{
position:absolute; top:150px; right:20%; width:300px;
}

I'm using percentages for some of the positioning values as I'm aiming for a fluid web page that repositions itself relative to the window size. When you resize this page with the current code, the image moves to the right as you increase the width. That is fine, but if you decrease the window width the picture will continue to disappear off the left of the page. I want it so the image freezes about 100px from the left of the page, so you can only shrink the page so far before it just stops. How can I do this? I've been playing with margins and padding and other crap but eh I can't figure it out.

EDIT: I've added a wrapper but while its helped it still doesn't make the content move very well. The wrapper margin shrinks as the window gets smaller it seems, displacing the content. RAWR. God damn you liquid website.

Ad Bot · Advertisement

Plasmus · April 03, 2011, 11:05:57 PM

you shoot people with guns,
it's such an easy game, how could you be having trouble with it?

Sheath · April 03, 2011, 11:06:49 PM

Quote from: Plasmus on April 03, 2011, 11:05:57 PM

you shoot people with guns,
it's such an easy game, how could you be having trouble with it?

~~You totally posted that in the wrong topic br0.~~

Wait I just got it.

Funfact: I've never played it.

Sheath · April 03, 2011, 11:28:10 PM

Thats it then? Nobody has any knowledge of HTML and CSS, all I get is some nerdy joke?

Bleh.

Sheath · April 04, 2011, 01:33:46 AM

Okay so the wrapper partially worked but its still not functioning right.
HALP.

Rekuddo · April 04, 2011, 01:40:04 AM

What exactly are you trying to do? I can partially understand, whenever you resize the window it will stay in the same spot and not move? if so use your div in a table. Because I've had that same problem and I couldn't get it to work so I put it into a table with the div.

Sheath · April 04, 2011, 03:39:53 AM

Quote from: Rekuddo on April 04, 2011, 01:40:04 AM

What exactly are you trying to do? I can partially understand, whenever you resize the window it will stay in the same spot and not move? if so use your div in a table. Because I've had that same problem and I couldn't get it to work so I put it into a table with the div.

Thanks so much for a response. :U
I'll have a play with tables.

Basically I want the content to move to the "center" as the page is made bigger or smaller. It must stay in its position relative to other objects, but all the content together should move to the center of the page. No matter how wide the page gets.

This is called making a website "liquid" or "fluid" because it reforms.

EDIT: Aha I've found an old website I worked on and figured it out! I'll update here in a sec.

Sheath · April 04, 2011, 03:55:11 AM

Okay so basically I required a separate wrapper div to cover all the content. This is what was in my old website, not sure how much of the code here is crucial to making the content wrap well since I was learning most of what I know now but it allows the content to move centered to the page.

Quote

#wrapper
{
width: 800px;
min-width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
}

div
{
position: relative;
}