CSS web design help

Discussion in 'Programmer's Corner' started by electronis whiz, Mar 7, 2013.

  1. electronis whiz

    Thread Starter Well-Known Member

    Jul 29, 2010
    519
    27
    I am working on a website for a class, and the assignment for this chapter is working with positioning. I'm having issues getting it to do what I want.
    the first issue appeared a few chapters back when I added images. the border is not extending to fit the new images.
    I think relates to second issue image the image on the right is covering up text I would think this should just extend the border and show under the image.
    I also want to move the link table underneath the links on the left side. then have text in the center. I'm having trouble understanding the way the book explains the stuff like relative positioning, absolute, float. so this is making hard to figure out how to do what I want. the teacher doesn't understand what I'm trying to do and only help she gave was add a few divs around some sub elements.
    I'll attach my CSS, and web page. any tips appreciated on how I can do this, i'm not exactly sure what would be best to do what I want. whether float relative, absolute, or a combination.
    files are attacked as .txt files upload failed for html, css.
     
  2. tshuck

    Well-Known Member

    Oct 18, 2012
    3,531
    675
    I haven't had too much experience with HTML5 or CSS3 yet, but these seem like the typical layout problems...

    The border is not extending because you have the images as absolute.
    From the w3schools website:
    Since it is removed from the flow, the page is laid out like the images aren't there

    I usually say not to mix more than two positioning types, there are exceptions, of course.

    If all you are going for is a single layout with a single display, then you could easily ascribe a width to the div with the border and position everything relative to that.
     
  3. takao21203

    Distinguished Member

    Apr 28, 2012
    3,577
    463
    Have you tried HTML kit? Easier than uploading to the web each time.
     
  4. electronis whiz

    Thread Starter Well-Known Member

    Jul 29, 2010
    519
    27
    ok I'll look into it. originally even with no positioning I had issues with the border not wanting to extend. i'd prefer not to have more of a fluid lyout because currently I run 12801024 resolution the teacher wants the it to still work at a 1200X760 resolution minimum so probably limited on specifying static sizes for anything but images.
     
  5. tshuck

    Well-Known Member

    Oct 18, 2012
    3,531
    675
    ...as long as you keep it within the <div> and don't force the width of the <div> it should automatically resize...


    I'd suggest going through the examples on w3schools...
     
Loading...