SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounding the Corner but need some more help on my page....

    OK, I think I am rounding the corner on my website but I have a few, (well maybe more than a few) final questions. I have posted my working copy of my index page here:

    http://www.evolutionmsport.com/june-07-2004/index.php

    All the colors and pictures still need to be cleaned up, but this should give you a general idea of what I am working with.

    With this in mind I have a few general CSS questions and a few specific to my particular page.

    First, the general ones.

    1. On the page all the orange lines are <hr> tags. Is this the best way to do this or should I make a div with some borders set to accomplish the same thing? Also, do <hr> tags need to be closed with </hr>. Finally, in the left column I set a style to have the <hr> tag at 95% and set a color. I didn’t set any alignment because I thought the <hr> tag defaulted to center alignment. I would like it center aligned, but it doesn’t seem to want to do it. Is it because of the containing div or do I need to explicitly set something?

    2. I have a “clear” div set up in my css file that is basically clear:both. I have that set up as an ID, but I call it more than once in the page, so should I define it as a class?

    3. On the page I use various heading styles <h3>, <h4>….Do those styles always have a carriage return built in, or can you disable it if you want an inline heading. Or do I just create my own style?

    Next the specific ones.

    1. Every place you see a picture and text, except for the car has a dive defined by the “pictext” class.

    .pictext{
    float:left;
    position:relative;
    }

    Basically all I want to do in these divs is have a picture either right or left justified in the div, with text wrapping around the picture. Currently I just have an image plopped in and then some text. Should I try to place the image in its own div?

    2. On the div in the upper right (where the car is) I have two problems. First, if you widen the window enough, the car picture will drop down and rest on the div housing the “quick link menu” and the divs bottom border rides up the page. Is this because I should contain the picture in its own div?

    3. On the quick link div, I was trying to change the top and bottom padding/margins to make the height a little less, but what I have seems to be the minimum. Could the Form element I am using be causing the problem, or should I just explicitly define the height?

    4. On the featured products section I have a right border defined to separate it from the News/Events tab, but the border is off by 1px. I think this is because I have a 1 px offset on my right column, but I think I need that. Could I put A border on the <h*> tag just to separate the headings?

    5.Finally, in the News/Events section I have a style defined for the <li>:
    li {
    font-size: 11px;
    color: #333333;
    list-style: circle none outside;
    text-align: left;
    padding:3px 5px 3px 5px;
    }
    But it doesn’t seem to be putting the circles in for the bullets. Am I doing something wrong?

    I know I have like seven million questions, but any help would be appreciated.

    Thanks…Mike

  2. #2
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EvM-Mike
    5.Finally, in the News/Events section I have a style defined for the <li>:
    li {
    font-size: 11px;
    color: #333333;
    list-style: circle none outside;
    text-align: left;
    padding:3px 5px 3px 5px;
    }
    But it doesn’t seem to be putting the circles in for the bullets. Am I doing something wrong?
    In IE 5.5 it puts the bullets in as circles, but if the list item goes beyond one line, the second line of text is not indented.


    mike

  3. #3
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I think I have a few of my issues solved; however I am still having trouble with the bottom border riding up on the div with the car picture. I think I need to contain the picture differently.

    Also, the bullet decoration still is not showing on the News/Events bullets.

    Finally, the Right border of the featured products section still has a sliver of the background of the column next to it. This happens in IE 6.0.

    Any ideas on how to fix any of these?

    Thanks....Mike

  4. #4
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EvM-Mike

    Also, the bullet decoration still is not showing on the News/Events bullets.

    Thanks....Mike
    Ok I figured out my bullet problem. I never added the <ul>....</ul> tag....

    Now I am just down to my border problems.

    Thanks....Mike

  5. #5
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, i think i fixed my border problems, althought it may be a slight kluge. I added a border to the <h3> orange class, and removed it from the center div. Its not perfect, because if you look close it doesn't line up perfectly.

    For the border between the car div and the links, i just added the border to the top of the link div.

    I would like the car to be right next to the text in the upper right div, so I guess i need to have a container div, then float one righ and one left? Is that right?

    Anyone have any better ideas, then my "kluges"?

    Thanks....Mike

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Mike,

    Haven't had time to look at all your problems but the border on the featured items can be cleared with this code:
    Code:
    #center { 
    width:100%;
    float:left;
    position: relative; 
    margin: 0 -8px 0 1px; 
    }
    .pictext{
    float:left;
    position:relative;
    width:99%;
    }
    I took away the white border on #center and gave the pictext a width.

    Paul

  7. #7
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Mike,

    I took away the white border on #center and gave the pictext a width.

    Paul
    Paul thanks.....At first I didn't understand what you were doing....I added everything in and it works like a charm.

    I found an interesting thing as well. I am using <hr> tags. I had them between divs, but netscape doesn't like it. So I put the <hr> tags insid the divs and all is well.

    Again, thanks for the help.

    Mike
    Last edited by EvM-Mike; Jun 9, 2004 at 06:30. Reason: At first I didn't think the fix worked, but it does....


Bookmarks

Posting Permissions

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