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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Web Design/Coding Help

    Hi everyone. This is my second post on codingforums, so please don't expect perfection.

    Background info: I have a basic knowledge of HTML and CSS. I have recently viewed web design and coding tutorials and want to finally put everything I know together and make a website for my computer class at school.

    As there seem to be many styles of designing websites, I would like to declare now how I have seen it be done. Basically, you design in photoshop (in my case GIMP), then cut it up into bite sized chunks so that you can link them separately. I am currently stuck at the beginning:

    I have a background image (bg.jpg), and a header image (header.png). I used css to add the background image: #container {background:url("bg.jpg") no-repeat;} . Please note that #container is my div for the whole body. I dont know why you should do that, but I saw it in a tutorial. Next, I had to insert my header: #header {position:absolute; top:57px; left:27px; padding:0px} . This positioned my header (almost) perfectly.

    All was going well until I realized that I needed my background image (essentially my website) to be centered, for the obvious reason that on a widescreen monitor it would look horrible on the right ( i designed it as 1024x768). But when I centered the background image, then the header with the absolute positioning was way off!

    the gist of my question is: 1. Do you recommend I use absolute positioning for my header, navigation, and other images (is there a different/better way)?
    2. If I still should use absolute positioning, how can I find what my top and left spacing should be (previously I just measured in GIMP how much space was to the left of the layer and above the layer) when my background image is centered, therefore moving it many pixels?
    3. Should I be absolute positioning the <div> or the <img>?

    Thank you for any help, it will be greatly appreciated

    --Andrew

  • #2
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    ajc1996,

    I don't know much; I'm still learning myself, but I had the same positioning problem as you just this week. I was able to position items exactly where I want them by using this:

    margin-top:100px;
    margin-left:50px;

    I'm using XHTML 1.0 Transitional for my doctype.

    I hope my two cents can help you some. There's experts here, though, and they have the answers.
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,679
    Thanks
    25
    Thanked 656 Times in 655 Posts
    Don't use absolute positioning. You'll find that if you use once, you'll have to use all the time.

    Since we're talking header and they are normally at the top and share the space with nothing else and your adding it to the container div -- use margins to position it.

  • #4
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Don't use absolute positioning. You'll find that if you use once, you'll have to use all the time.

    Since we're talking header and they are normally at the top and share the space with nothing else and your adding it to the container div -- use margins to position it.
    Agreed. If you want your content to be centred then you might want to specify a width for your container and centre it:
    Code:
    #container { position: relative; width: 960px; margin: 0 auto 0 auto;}
    Your background image can be set on the body
    Code:
    body {background:url("bg.jpg") no-repeat;}
    then you can just chuck your header in the container and it will be at the top.


  •  

    Posting Permissions

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