CSS HR Line
- Started
- Last post
- 12 Responses
- Stugoo0
do you want it to scroll with the page?
- must_dash0
nope... fixed to the spot :)
- Stugoo0
well it depends how you want to do it.
I mean you could jsut addborder-top:1px solid #000;
margin-top: 100px;of you having trouble understanding the box model have a look here :
- must_dash0
thanks for knocking that up for me so quickly ;)
it is the 35 pixel gap on either side I'm struggling with, so am going to place within another div I think... as I've got to put a line in at the bottom of the page too
- bulletfactory0
margin: 100px 35px 0 35px;
- measurements start at "top" and move clockwise.bulletfactory
- bigtrickagain0
here:
style:
<style type="text/css" media="all">
body {
min-width: 105px; /* 2x LC width + RC width */
}
#container {
padding-left: 35px; /* LC width */
padding-right: 35px; /* RC width */
height: 1px;
margin-top: 100px;
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
background-color: black;
height: 1px;
}
#left {
width: 35px; /* LC width */
right: 35px; /* LC width */
margin-left: -100%;
}
#right {
width: 35px; /* RC width */
margin-right: -35px; /* RC width */
}/*** IE6 Fix ***/
* html #left {
left: 35px; /* RC width */
}
</style>html:
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div></div>
- adapted from http://www.alistapar…bigtrickagain
- works for me in firefox 3.6bigtrickagain
- must_dash0
jesus! thanks
- neferiu0
hr {
border: 0; border-top: 1px dotted #EEE;
}
- bulletfactory0
^^ *A word of caution about naming divs with positions.
It's often better to name them more descriptively with their contents, not their positions. such as .sidebar, or .primaryNav so that they still make sense no matter where they are in the document. I ran into this updating a site during a redesign. I switched a box named .right over to the left side of the page, and it became much more confusing. Had to go back and rename a bunch of styles.
I realize that's not what this post was asking, but...
- dmay0
1px line, fixed 100px from the top, with a 35 pixel gap on the left and right:
CSS:
.lineContainer {
width: 100%;
height: 1px;
right: 35px;
position: fixed;
overflow: hidden;
top: 100px;
}
.line {
width: 100%;
height: 1px;
background-color: #000;
position: absolute;
left: 70px;
}HTML:
<div class="lineContainer">
<div class="line"></div>
</div>
- FallowDeer0
what I use
CSS:
div.hr {background-color: #CCC; height: 1px;}HTML:
<div class="hr"><hr /></div>- then apply your margins to the div in the cssFallowDeer
- do you also use: hr { display:none;}bulletfactory
- you can if you want, but normally I just leave it outFallowDeer