CSS HR Line
- Started
- Last post
- 12 Responses
- must_dash
Ok, this is probably dead easy... but I'm trying to be good and not reverting to tables which would sort it in a second...
I'm basically want a 1 pixel black horizontal line, that is fixed 100px from the top of the screen, with a 35 pixel gap on the left and right...
What is the simplest way to achieve that?
- 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
- 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
- neferiu0
hr {
border: 0; border-top: 1px dotted #EEE;
}