Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with fluid image and footer placement and image wrapping please!

    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 thread but to no avail.

    2) My footer's position is all wrong... I followed this 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

    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!

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New Coder
    Join Date
    Feb 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    You have the position fixed.
    set the dune image as a bg.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #5
    New Coder
    Join Date
    Feb 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bg=background? how would i go about doing that?

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

    sorry, i'm thick

  • #6
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    yes, bg=background

    have the dune image be the bg image of #leftside; position bottom
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #7
    New Coder
    Join Date
    Feb 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok i think that makes sense, i'll give it a go.
    thanks again

  • #8
    New Coder
    Join Date
    Feb 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i still don't get it :'(

    this is my code for #leftside:

    Code:
    #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...

  • #9
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Code:
    <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.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #10
    New Coder
    Join Date
    Feb 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry i'm still confused

    i added
    Code:
    #endstyle {position: bottom;}
    to my css and then added
    Code:
    <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.

  • #11
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Code:
    id="endstyle"
    http://www.w3schools.com/css/
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #12
    New Coder
    Join Date
    Feb 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oops yea i forgot the "id" bit :\

    so just
    Code:
    <div id="endstyle"></div>
    in the html?


    and then the background goes in the css?

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

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

  • #13
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by xplizit View Post
    oops yea i forgot the "id" bit :\

    so just
    Code:
    <div id="endstyle"></div>
    in the html?


    and then the background goes in the css?

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

    i've tried that but it doesn't work either...
    Code:
    background: url(./images/bg.png);
    http://www.w3schools.com/css/css_background.asp
    Google and w3 are your friends.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •