Viewing Draw a line using HTML
Draw a line using HTML
|
User: Christopher 11 years ago
|
|
|
This sort of continues from a post here. To avoid creating a png shape, I'd like to draw a 2px gray line with 2px of black on top. I've succeeded by adding the following to an html snippet, set at 3px high: <div style="height:0px;width:100%;border:2px inset;border-color:#4C4C4C"></div> The problem is that the inset border juts out from the right edge of my page, so I have to reduce the width of the snippet by 4px. There must be a better way! A page where you can see what I'm trying to emulate... just look at the lines. Last edit 11 years ago ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Jumbo T. 11 years ago
|
|
|
Here's the why : http://www.w3schools.com/css/css_boxmodel.asp http://www.w3.org/TR/CSS2/box.html https://developer.mozilla.org/en-US/docs/Web/CSS/box_model Here's the how : http://www.w3schools.com/cssref/css3_pr_box-sizing.asp Here's the result : <div style="box-sizing: border-box; height: 0px; border: 2px inset #4C4C4C;"></div> BTW, the link in the JavaScript is wrong. Should be : http://m.cleetche.com/bartering-with-destiny-prv |
|
|
User: Roddy 11 years ago
|
|
|
You can specify the border width for all four sides of the box. Using the short form for the border widths, the styles would be like this... <div style="width:100%;margin:0;padding:0;height:3px;background:#000;border-style:solid;border-color:#888;border-width:3px 0 0"></div> This gives a border which is 3px high on the top, zero on left/right and zero on the bottom. Using a div will create the visual break that you want but it doesn't make any sense to use one now that HTML5 uses the <hr> element to do this and let the SE spiders know what it means. Nowadays you should be using the HTML5 section element if you want the best possible results for SEO. Even if you haven't yet graduated to HTML5, using the <hr> for your line will at least add some semantics to the layout and the code will be... <hr style="width:100%;margin:0;padding:0;height:3px;background:#000;border-style:solid;border-color:#888;border-width:3px 0 0"> ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Jumbo T. 11 years ago
|
|
|
Here's the most compact solution : <style> hr { border: 2px inset #4C4C4C; } </style> <hr /> <hr /> <hr /> <hr /> Put the style in a head code box and each hr in a HTML Snippet. It saves a lot of bytes and dramatically decreases download time. The mobile users will like it. |
|
|
User: Christopher 11 years ago
|
|
|
Thank you both for your help. I was actually very close to figuring this out on my own. However, now I'm having a problem with the lines being drawn at least 10px beneath my html snippet dimensions. I don't know if this is an EW bug or not. But very frustrating. I'm going to start a new thread in the Bug section about this. Please help if you can.
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Roddy 11 years ago
|
|
|
See my reply in your topic in Bugs.
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 11 years ago
|
|
|
Brilliant. My mistake, as usual, for trying to simplify things. Cheers
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Christopher 11 years ago
|
|
|
My line border-width is not working in Firefox. I've tried a few variations but it's not working. Here's the code I've been using: <hr style="width:100%;margin:0;padding:0;height:2px;background:#333333;border-color:#000;border-width:2px 0 0"> If you go on my site, you'll see my grey lines with black border working perfectly in Safari and Chrome, but not Firefox. ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: James G. 11 years ago
|
|
| I just went to your site in firefox and the lines look fine to me, but I do not know how they are supposed to look. The thing I noticed in firefox was that the top menu is 2 lines always, and a bit of text was on top of each other. It was especially noticeable at the top left of Art Gallery page, three blocks of text in one place, the bottom of Home page ha stuff stacked too. | |
|
User: Christopher 11 years ago
|
|
|
Thanks Jim. If you look at my site on Safari, you'll see the difference in the way the lines are drawn. They're supposed to be 2px grey with 2px black border. Firefox just shows 2px black. Your other comment has me curious though. Can you empty your cache and relaunch the browser and let me know if the problem persists. I've increased the font size on my entire site and my hunch is that your browser is just showing what's been cached. From my end, I don't see what you see. Cheers!
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Christopher 11 years ago
|
|
|
Quote: Christopher - 21/01/2015 16:35:08 My line border-width is not working in Firefox. I've tried a few variations but it's not working. Couldn't get it to work. But I don't care anymore. Next... ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
| Post Reply |
| You must login or signup to post. |