...

View Full Version : Help with fluid image and footer placement and image wrapping please!



xplizit
10-13-2008, 05:48 PM
Hope someone can offer some advice because I'm struggling here!

I'm "working" on this site: http://subcon-fusion.com/maroc_test2

Here are the links to the html and css so you can look at the code:

http://subcon-fusion.com/maroc_test2/index.html

http://subcon-fusion.com/maroc_test2/andreas07.css

(should I also paste the code into my post?)

Now for the problems...

1) I'd like the dune image at the bottom left of the page to always be at the bottom of the menu, regardless of the browser's resolution. (The menu is fixed btw but you can't tell on the main page because there isn't enough text to require scrolling but if you go to the "Circuits" page you can see that it is)
I've tried align="bottom" and align ="absbottom" but it doesn't work...
I've also tried applying the advice in this (http://codingforums.com/showthread.php?t=133506) thread but to no avail.

2) My footer's position is all wrong... I followed this (http://www.dave-woods.co.uk/index.php/css-fixed-footer/) tutorial but it's not working. I'd like it to always be at the bottom of the screen regardless of the browser's resolution. It looks ok on the "Circuits" page because there is enough text to push it down to the bottom but on the index it's far too high up.

3) Image wrapping... Is there a way to override the CSS rules for particular images on the page? I'd like to keep the CSS image rules as they are because the margins work well for the banner at the top of the page. However, the image embedded in the text doesn't display properly - the text is stuck to the right side of it. I added an hspace="20" but it only seems to make a difference in IE (7) but not in firefox or chrome and it adds 20px to the left and right of the image whereas I only want it to the right!


I hope I've been relatively clear and that someone will be able to help. As I'm sure you can tell, I barely know what I'm talking about :D

And I know the site itself looks rubbish atm, but it's only a start and I hope I can improve it once these problems are out of the way.

Thanks in advance!

twodayslate
10-13-2008, 06:51 PM
read about positions... (http://www.barelyfitz.com/screencast/html-training/css/positioning/) see also (http://www.w3schools.com/Css/pr_class_position.asp)

xplizit
10-25-2008, 04:09 PM
thanks for that, i managed to fix my image wrapping problem.

i'm still stuck with my first issue though. the dune picture is chopped off at the bottom with anything less than 1400x1050 resolution. anyone know how to make it so it's always fully visible?

twodayslate
10-25-2008, 06:15 PM
You have the position fixed.
set the dune image as a bg.

xplizit
10-25-2008, 06:20 PM
bg=background? how would i go about doing that?

and are you saying the position shouldn't be fixed?

sorry, i'm thick :o

twodayslate
10-25-2008, 08:37 PM
yes, bg=background

have the dune image be the bg image of #leftside; position bottom

xplizit
10-25-2008, 11:13 PM
ok i think that makes sense, i'll give it a go.
thanks again

xplizit
10-26-2008, 04:16 PM
i still don't get it :'(

this is my code for #leftside:


#leftside {position: fixed; width:220px; background:#feeab4 url(img/sidebarbg.gif) top right repeat-y; text-align:right; float:left;}

as you can see there's already a bg image (sidebarbg.gif) which is used to create the grey vertical line to the right of the camels. so where would i put the code for the dune image in there? do i just add another "url(img/....) position: bottom" at the end of the line? i tried but it didn't work so i'm guessing not...

twodayslate
10-27-2008, 01:29 AM
<div leftside>
<div camel style="background-imge:;"></div>
<ul>nav</ul>
<div end style="background-imge:;"></div>
</div>

There should be no <p> or <img /> tags in there at all.

xplizit
11-05-2008, 09:05 PM
sorry i'm still confused :(

i added
#endstyle {position: bottom;} to my css and then added

<div endstyle="background-imge:img/Image 2.png;"></div> to the html in between the #menu </div> and the #leftside </div> but that hasn't seemed to work as i can't see the image at all now.

twodayslate
11-05-2008, 10:00 PM
id="endstyle"

http://www.w3schools.com/css/

xplizit
11-05-2008, 10:55 PM
oops yea i forgot the "id" bit :\

so just

<div id="endstyle"></div>

in the html?


and then the background goes in the css?


#endstyle {position: bottom; background-imge:img/Image 2.png;}

?

i've tried that but it doesn't work either...

twodayslate
11-06-2008, 03:10 AM
oops yea i forgot the "id" bit :\

so just

<div id="endstyle"></div>

in the html?


and then the background goes in the css?


#endstyle {position: bottom; background-imge:img/Image 2.png;}

?

i've tried that but it doesn't work either...


background: url(./images/bg.png);

http://www.w3schools.com/css/css_background.asp
Google and w3 are your friends.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum