How to expand container with text & links to have different colors?

[Kristal Y]

Hello,
I've been searching over lots of forums for this solution and I can't seem to make any of the solutions work for me. This is my first time I'm posting a question and I'm also far from a css expert , but really am trying to convert my main layouts over from tables. Basically I need my #outerpermiter div which has a vertically repeating background to have a minimum height but expand when needed. Maybe I'm having trouble because I'm using a template, I have a background repeating image or ??? You can see the test site here:

http://www.milwplumbing.net/test/index.html

My 2nd question is there a way to make links on the same page different colors. Currently I have the links color set under page preferences, and my css won't over ride that.

[JKing]

I am assuming you want the gold pipes on the sides to be displayed for the full length of the content area?

Not 100% sure here but I think your absolute positioning that you have set on both the #outerperimeter and #tophalf are affecting the normal flow of the page.

Regarding your second question, your css is applied in the order it is listed in. Also on page CSS overrides external CSS and inline styles override both.

This is the on page CSS you have.

<style type="text/css">
<!--
body {
    background-image: url();
    background-color: #880000;
}
.italic {
    font-size: 14px;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}
.link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFFFFF;
}
.heading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #8F0F11;
    font-weight: bold;
    font-style: italic;
}
.bodytext {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #000000;
}
-->
</style>
<link rel="stylesheet" type="text/css" href="pro_dropdown_2/pro_dropdown_2/pro_dropdown_2.css" />
 
<script src="file:///Macintosh HD/Users/kristalyoung/Desktop/pro_dropdown_2/pro_dropdown_2/stuHover.js" type="text/javascript"></script>
<style type="text/css">
<!--
a:link {
    color: #880000;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #880000;
}
a:hover {
    text-decoration: underline;
    color: #333333;
}
a:active {
    text-decoration: none;
}
.style1 {color: #000000}
-->
</style>
 

Anything else you have set for links in your style sheet is being overridden by this

[Kristal Y]

Thank you so much for your input. I got the links styles to work correctly. I don't know if it's the most efficient code, but at least the problem is fixed.

Any more thoughts on the getting the pipes to expand to the bottom of the content (your guess on my intent was correct) At least at first attempts, removing my absolute positioning for those two divs makes the layout all off centered. (That was my original intent of using the absolute positioning ... to have the divs centered... maybe you have a better way to do this than what I did?

[JKing]

Indeed I do.

Centering can be achieved through the use of margins

#yourdiv {margin:0 auto;}
 

This sets both the left and right margins to auto centering the div.

Do you want the pipes to stop before the footer?

[Kristal Y]

No, my original intent was for them to extend to the bottom of the page so it appears they are laying over the horizontal footer pipe.

[Kristal Y]

Hey, actually your new margin code to align my divs centered allowed me to figure out the rest of it, plus it's much simpler than the original method I found. However, now it doesn't seem to go up to the very top. Do you have a solution for that. I've updated the site now at the same address:

http://www.milwplumbing.net/test/index.html

Thanks again for all your help. I really appreciate it.

[JKing]

There is either a default margin or padding of about 10px on the body tag itself. You may want to consider using a css reset.

[Kristal Y]

I would agree and that makes sense. I'm sorry, I've never heard or resetting css before. I did some research and it seems to be controversial or at least I don't know how I would do it without messing everything else up. I tried putting padding and margins at 0 doesn't seem to help either so do you have more insight of what I need to do reset the css and then what else I need to do? Again, sorry if this is sort of basic.

[JKing]

From what I can see there is some padding or margin on the body tag.
This should fix it

body {margin:0;padding:0;}
 

[Kristal Y]

Perfect! Thank you so much for your help. I think I should be good now.