Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

macOS HTML horizontal rule across the full width of the page.

N

Nutter

macrumors 6502
Original poster
Mar 31, 2005
432
0
London, England
I'm grapping with this, and wondering if someone who knows more about HTML and CSS can help me.

My best attempt looks like this:

Code: 
<div style="margin-left:-8px;margin-right:-8px"><hr style="color:Black;background-color:Black;border:0;width:100%;height:1px;" /></div>

The -8px modifier for the left and right margins is to counteract the 8px margin of the <body> element. This works nicely, except when the page content is larger than the browser window — in that case, the horizontal rule goes to the window's edge, but not the page's edge.

Attached is an illustration of the problem.

Can anyone help me out?
 

Attachments

  • Picture 1.png
    Picture 1.png
    58.3 KB · Views: 178
N

Nutter

macrumors 6502
Original poster
Mar 31, 2005
432
0
London, England
That doesn't seem to help. I don't want the rule to be centred, I want it to take up the entire width of the page, with no white space on either side.
 
robbieduncan

robbieduncan

Moderator emeritus
Jul 24, 2002
25,611
893
Harrogate
Can you paste (or link to) the entire source? I think

Code: 
<div style="position:absolute;left:0px;width:100%><hr /></div>

might work.

Edit: OK this works for me with an 8px margin on the body element:

Code: 
<div style="position:absolute;left:0px;right:0px"><hr /></div>
 
N

Nutter

macrumors 6502
Original poster
Mar 31, 2005
432
0
London, England
Hm, that doesn't seem to help either. The same problem - if the page is wider than the browser window, the horizontal rule is only as wide as the window itself.

Here's the full code:

Code: 
<html><body style="margin:8px;">This is some text.<div style="margin-left:-8px;margin-right:-8px"><hr style="color:Black;background-color:Black;border:0;width:100%;height:1px;" /></div>More text.<br /><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==" style="width:1000px;height:1000px;"></body></html>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom