Skip navigation
BcSurvivor08
Currently Being Moderated

Container border??

Apr 30, 2012 2:52 PM

Ugh!  This is sooooo frustrating!  I want a border around the container of my webpage.  I code it in the css and it looks right in DV but in LV the border is only around the header.

 

Here is the css code I used:

 

.container {

width: 800px;

margin: 0 auto;

padding: 0;

color: #000;

border-color: #fe4110;

border-width: 2px;

border-style: ridge;

 

}

 

.header {

margin: 0 auto;

background: url("images/header1.gif");

width: 800px;

height: 119px;

 

}

 

Here is screen shot of design view:

 

dvborder.png

 

and here is screen shot of live view:

 

lvborder.png

 

Live view is how it displays in the browser too.

 

I want it to look like it does in design view.  Please help..... (why cant anything be simple )

 
Replies
  • Currently Being Moderated
    Apr 30, 2012 3:33 PM   in reply to BcSurvivor08

    Can we see the code?  I'm thinking something is awry.  You may want to run your page through the validator as well: http://validator.w3.org/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2012 11:15 PM   in reply to BcSurvivor08

    Does it help if you put

     

    overflow: hidden:

     

    On the container?

     

    I can't test it myself at the moment butvthatbmight be worth a go.  It looks like a float containment thing.

     

    Martin

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    May 1, 2012 1:04 AM   in reply to BcSurvivor08

    Line 35 and Line 45 of your services.html file, you have 2 usages of <div class="content"> Is there a reason you've done this? Can you just remove the Div open tag on Line 45 and see if it works?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    May 1, 2012 8:19 PM   in reply to BcSurvivor08

    You're welcome!

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2012 8:17 PM   in reply to BcSurvivor08

    The border is working in all corners but the bottom RHS is not visible because of a mismatch between the width of the container div and the footer div.

     

    .container {

    width: 949px;

     

    and

     

    #footer

    {

    float: left;

    width: 100%;

     

    Change the footer width to the container width less a 5px border on both sides (=949-5-5=939px)

     

    #footer

    {

    float: left;

    width: 939px;

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2012 1:04 AM   in reply to BcSurvivor08

    Take a look here:

     

    martcol.co.uk/test/soldiers.html

     

    It's not perfect by any means but I think it will get you closer to what you want than what you have.

     

    Achieving height in an element is best done with content.  The way your page was laid out before, wouldn't get it there.  An option to consider, and it wouldn't involve such a radical change to your page structure is to Google "Faux Columns."  This technique adds a background image with the colours of the columns, to a container element and it the repeats down the page.  That will give the impression of same height columns.

     

    The way i have done it is to put the content in the col1 container and float the content div right and the navigation ul is floated left.

     

    It's a bit quick and dirty because I am doing this between breakfast and going to work (I'm late already)!

     

    You can ignore it completely of course, but I hope it helps a bit.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2012 6:53 PM   in reply to BcSurvivor08

    Got a link showing us where you're stuck?

     

    How did you go with the working example provided by Martin?

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2012 10:46 PM   in reply to BcSurvivor08

    http://www.w3schools.com/cssref/pr_background-repeat.asp

     

    background-repeat:repeat-y;

     

    As John says, it would be easier to see a link but are you trying for the  faux column thing?  If so, the background image goes on the containing element not the element itself.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    May 9, 2012 10:47 AM   in reply to BcSurvivor08

    Faux columns are not too difficult.

     

    Here's a useful, short explanation: http://www.alistapart.com/articles/fauxcolumns/

     

    I think it is a technique that evolved partly, because of the difficulty achieving height in some elements in a web page.  The best way is to not set a height with CSS but to let the content achieve it for you.  I think that you are already starting to see a problem with setting the height in an element because every page is different and then you need to factor in browser variables.  What happens if the user increases or decreases the text size?

     

    The option I suggested was very rushed but I think that it was a bit like this:

     

    CSSHeight.jpg

    If the sidebar div has a background of red, and the content div had a different color background and the <ul> was transparent it would appear to have two equal height columns.  The reality is that teh content is giving one of the child elements height which is by default, giving its container height which has a different color background.  In addition to that the two child elements are floated and given a width which makes them sit side by side.  It was just an example put together quickly to make a point.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    May 9, 2012 12:55 PM   in reply to BcSurvivor08
    What I did do is use "min-height" and am assigning a new css for each page according to its height.

    That's not a solution.  Page height can vary quite a bit depending on browser settings.

     

    All you need to do is make your #outer div red and your #middle div white. 

    The #left-column & #footer will naturally assume #outer div's background-color.

    EXAMPLE: http://alt-web.com/TEMPLATES/C-Page.html

     

    Equal Height CSS Columns ~ See Option #2 and Option #5

    http://alt-web.com/Articles/Equal-Height-CSS-Columns.shtml

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points