Create a background color with a color line through the middle

maryjane9110024
avatar
rank Regular

Regular


Posts: 42
Joined: 2007-12-27
Location: Phoenix, AZ

Posted: Tue, 2008-07-22 20:22

How do I / is it possible to have a footer div with a black background and a green (or any other color) 1px line "draw" horizontally accross the page?

OR

There is currently an image in place but there an approximate 4 or 5px gap between the end of the line and the browser. Is there a way to eliminate the gap?

Here's the CSS currently in place:

#footer {
	background:url(../images/footer-bg.jpg) repeat-x;
	margin-top:10px;
	z-index:6;
}
#footerPan {
	width:900px;
	z-index:7;
}

David Laakso
David Laakso's picture
rank Enthusiast

Enthusiast


Posts: 248
Joined: 2008-07-18
Location: US

Regarding your 1st question,

Posted: Tue, 2008-07-22 20:58

Regarding your 1st question, yes it is possible. Nest one division within another. Assign a border-bottom to the inner division. Please see:

http://www.chelseacreekstudio.com/ca/cssd/line.htm

This page will be permanently deleted both off and online on July 27, 2008.

maryjane9110024
maryjane9110024's picture
rank Regular

Regular


Posts: 42
Joined: 2007-12-27
Location: Phoenix, AZ

sweet deal!

Posted: Tue, 2008-07-22 21:11

Thank you. I'm going to add the code below so that others can view it after July 27th.

Thanks again!!

<style type="text/css">
html,body {background:#fff; color:#000;margin:0;padding:0;}
body {font: 100% Georgia, serif;text-align:center;}
p {margin:0;}
#footer {background: #222; min-height: 200px; margin-top:500px; }
#footer div { border-bottom: 1px solid #d8ff72; min-height: 99px;}
.c1 {border:1px solid #000;}
* html #footer {height: 200px; } /*for IE6 */
* html #footer div { height: 99px;}  /*for IE6 */
</style>


</head>
<body>


<div id="footer">
<div><!-- --></div><!--/close #footer div -->
</div><!--/close #footer-->


</body>
</html>

David Laakso
David Laakso's picture
rank Enthusiast

Enthusiast


Posts: 248
Joined: 2008-07-18
Location: US

Note in the above CSS that

Posted: Tue, 2008-07-22 22:24

Note in the above CSS that this was not used nor is it needed:

.c1 {border:1px solid #000;}

maryjane9110024
maryjane9110024's picture
rank Regular

Regular


Posts: 42
Joined: 2007-12-27
Location: Phoenix, AZ

Next step...

Posted: Wed, 2008-07-23 16:07

How do I get the text on top of the line so that the line goes through it in the back?

David Laakso
David Laakso's picture
rank Enthusiast

Enthusiast


Posts: 248
Joined: 2008-07-18
Location: US

I give up: "What text on top

Posted: Thu, 2008-07-24 01:46

I give up: "What text on top of the line so that the line goes through it in the back?"

PS The "crystal ball" has the day off...

maryjane9110024
maryjane9110024's picture
rank Regular

Regular


Posts: 42
Joined: 2007-12-27
Location: Phoenix, AZ

ops

Posted: Mon, 2008-07-28 20:43

my bad... Blushing

its a navigation; home, contact, etc

David Laakso
David Laakso's picture
rank Enthusiast

Enthusiast


Posts: 248
Joined: 2008-07-18
Location: US

That's nice. I am not a mind

Posted: Mon, 2008-07-28 21:15

That's nice. I am not a mind reader.

Half the battle in getting an answer to a question, lies in the art of knowing how to ask a question:

FWIW, text with a horizontal line running through it means delete in some circles..

1/ In addition to the navigation links "home," and "contact," what other navigation links are there?

2/ Are the navigation links to be set as a horizontal list, or as a vertical list?

3/ Is the horizontal list, or vertical list, to be set left, right, or centered in the parent container?

4/ Is the horizontal or vertical list to be above or below the green line.

5/ Is the horizontal or vertical list to be on top the green line.

6/ Is the horizontal or vertical list to be behind the green line.

7/ And so on...

maryjane9110024
maryjane9110024's picture
rank Regular

Regular


Posts: 42
Joined: 2007-12-27
Location: Phoenix, AZ

ok

Posted: Mon, 2008-07-28 21:45

ok. It's a horizontal navigation (home, contact us, services, about) with the background black and a green line horizontally through it like a strike through text but it stops say 20 px from the nav then picks up again on the other side. is that more clear? should i do a picture?

isedeasy
isedeasy's picture
rank Enthusiast

Enthusiast


Posts: 63
Joined: 2008-02-09
Location: Bristol

Maybe this is more what you

Posted: Tue, 2008-07-29 00:50

Maybe this is more what you are after...

Footer Test

It does use a 1px by 1px image () but the mark-up is not at all bloated an semantically correct...

the lines can be removed between the links by adding negative margins to the links...

"If a man is trying to hang himself from the tree in my yard but the knot keeps slipping and allowing him to fall before it kills him do you expect someone to go out and teach him to tie a better knot?" - Triumph

David Laakso
David Laakso's picture
rank Enthusiast

Enthusiast


Posts: 248
Joined: 2008-07-18
Location: US

"A picture is worth a

Posted: Tue, 2008-07-29 02:24

"A picture is worth a thousand words."

I'm astounded by people who want to 'know' the universe when it's hard enough to find your way around Chinatown.

-- Woody Allen

David Laakso
David Laakso's picture
rank Enthusiast

Enthusiast


Posts: 248
Joined: 2008-07-18
Location: US

But don't let me or Woody

Posted: Tue, 2008-07-29 05:23

But don't let me or Woody fool you. We both know exactly what you want-- with or without your picture.

The likelihood of achieving your goal with CSS cross-browser is slim to none (at the moment). Holding a horizontal line midway through a horizontal list is a pipe dream. There are too many variables. User discretion to scale fonts, screen resolution, and dpi setting are among them. Granted it is a clever (cute) idea. Providing as previously mentioned that in some circles it will taken literally (as the horizontal menu has been deleted).

Nevertheless, and either way, it is possible to create such an illusion. The answer is, as it always is when trying to make the Web something other than what it is-- namely, do the whole footer, the text, the line through the text, and the colors as a photoshop image.

maryjane9110024
maryjane9110024's picture
rank Regular

Regular


Posts: 42
Joined: 2007-12-27
Location: Phoenix, AZ

isedeasy wrote:Maybe this is

Posted: Tue, 2008-07-29 14:18

isedeasy wrote:
Maybe this is more what you are after...

Footer Test

It does use a 1px by 1px image () but the mark-up is not at all bloated an semantically correct...

the lines can be removed between the links by adding negative margins to the links...

Yes that's it!

THANK YOU BOTH!!!!

maryjane9110024
maryjane9110024's picture
rank Regular

Regular


Posts: 42
Joined: 2007-12-27
Location: Phoenix, AZ

Code (future reference)

Posted: Tue, 2008-07-29 16:47

  <style type="text/css">
  <!--
   
    body {
    padding:0;
    margin:0;
    font-size:100%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
       
    #footer {
    font-size:80%;
    margin:500px 0 0 0;
    padding:40px 0;
    background:#000;
    }
    
    #footer ul {
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
    background:#000 url(images/footer_line.png) repeat-x center left;
    color:#FFF;
    text-align:center;
    }
    
    #footer ul li {
    display: inline;
    }
    
    #footer ul li a {
    text-decoration: none;
    background:#000;
    color:#5ac000;
    padding:.2em 1em;
    }
    
    #footer ul li a:hover {
    background:#5ac000;
    color:#000;
    }

  //-->
  </style>
  
  </head>
  <body>

    <div id="footer">
    
      <ul>
    
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
        <li><a href="">Link 5</a></li>
        <li><a href="">Link 6</a></li>
        
      </ul>
    
    </div>

  </body>
</html>