• 0

Question

I need to make a simple web page using CSS however i couldn't find out some simple yet one eluding thing: a css vertical line which stretches through the page.

What i try to achive is to put a floating red vertical 1px line (which is 20 px left of the right margin) and put a floating simple logo just on top of it. The reason i need to do is that the placement of the logo should be resolution independent...

Should i use a contender div which is covering the whole page and put inside a div with low z-index ?

Can anyone give me a hint ?

Thx in advance

post-15612-0-83595800-1368443465.png

Link to comment
https://www.neowin.net/forum/topic/1151918-vertical-line-with-css/
Share on other sites

19 answers to this question

Recommended Posts

  • 0
  On 13/05/2013 at 12:38, yodat said:

@Uplift - is it possible to use a specific value (px) for the distance from the left side ? Like 20 px ?

If i use %, it changes with the browser size...

http://jsfiddle.net/CQfvH/1/

all i done here was added 20px whitespace after the red line and positioned it 100%, this way it will never move.

  • 0

I've hopefully fixed it for IE10, I've used a DEG instead of "right center" which might not have been valid syntax.

Although Uplifts works, I don't like the idea of an image for something like this, and it shouldn't need an extra element like the other one. :p

http://jsfiddle.net/WrjK2/6/

(Actually hold off for one minute....) Here you are...

http://jsfiddle.net/WrjK2/7/

and I still have the logo in the wrong place, but I'm sure that's trival to change. I couldn't tell what you wanted with this part.

  • 0
  On 13/05/2013 at 13:57, lunamonkey said:

Although Uplifts works, I don't like the idea of an image for something like this, and it shouldn't need an extra element like the other one. :p

It's an old method but it works, linear-gradient is not support in IE9 and below so you need to use a filter for that... at this point your creating problems rather than solving them, use the 10kb image and be done with it.

I get the whole 'it's 2013 we should be using css3 methods' .. but definitely no point in over coding for this when it can be solved in a matter of seconds using an image.

  • 0
  On 13/05/2013 at 17:03, ashpowell said:

I don't get it, theres no need to use images or css3 from what I assume he wanted, whats wrong with this?

http://jsfiddle.net/WrjK2/5/

Maybe I read wrong or something :/

I'd personally prefer not to make an extra element for purely aesthetic purposes. "Logo" has a meaning and deserves it's space in the markup. "Rightbar" doesn't mean anything.

Also, Uplift... 10KB for no reason is a real waste. 10KB could provide the whole page's markup and basic "reset" styles once gzipped. I doubt the image was really that large though... 10KB?

Bandwidth is more valuable than that for such a simple non-essential design feature. No one will miss it. Of course, you can provide the image as a fallback, but still include the CSS3 for the browsers that support it. Win-Win! :yes:

  • 0

If you'd rather not have the extra element (dont see why not, it wont even add a kb to your page, and class names don't have to mean anything :s), you could just apply the styles to the logo div, and set the logo as the background image in x position

  • 0
  On 13/05/2013 at 19:51, ashpowell said:

If you'd rather not have the extra element (dont see why not, it wont even add a kb to your page, and class names don't have to mean anything :s), you could just apply the styles to the logo div, and set the logo as the background image in x position

That might not work with the style of the logo DIV. It appears to have a left border of 3-4 pixels, so if you wanted to set the single pixel as the style of the logo DIV and set it to 100% height of the page, the second border wouldn't be able to only ~80px high. The two styles appear to need to be on two different elements. :s

I don't want to get into semantics of naming, superfluous elements and page weight arguments as that's a whole different issue. :D However, I think that at the moment, a combination of mine and uplift's solutions would work with the requirements in the opening post.

  • 0
  On 13/05/2013 at 16:06, Uplift said:

It's an old method but it works, linear-gradient is not support in IE9 and below so you need to use a filter for that... at this point your creating problems rather than solving them, use the 10kb image and be done with it.

I get the whole 'it's 2013 we should be using css3 methods' .. but definitely no point in over coding for this when it can be solved in a matter of seconds using an image.

yeah it was something like that, not web optimised though, either way it's an insignificant number.

  • 0
  On 13/05/2013 at 20:37, lunamonkey said:

That might not work with the style of the logo DIV. It appears to have a left border of 3-4 pixels, so if you wanted to set the single pixel as the style of the logo DIV and set it to 100% height of the page, the second border wouldn't be able to only ~80px high. The two styles appear to need to be on two different elements. :s

I don't want to get into semantics of naming, superfluous elements and page weight arguments as that's a whole different issue. :D However, I think that at the moment, a combination of mine and uplift's solutions would work with the requirements in the opening post.

Wasn't being funny was just throwing ideas out there :)

  • 0
  On 13/05/2013 at 13:57, lunamonkey said:

I've hopefully fixed it for IE10, I've used a DEG instead of "right center" which might not have been valid syntax.

Although Uplifts works, I don't like the idea of an image for something like this, and it shouldn't need an extra element like the other one. :p

http://jsfiddle.net/WrjK2/6/

(Actually hold off for one minute....) Here you are...

http://jsfiddle.net/WrjK2/7/

and I still have the logo in the wrong place, but I'm sure that's trival to change. I couldn't tell what you wanted with this part.

  On 13/05/2013 at 17:03, ashpowell said:

I don't get it, theres no need to use images or css3 from what I assume he wanted, whats wrong with this?

http://jsfiddle.net/WrjK2/5/

Maybe I read wrong or something :/

Sorry guys, i've been away for work - so i can just check it out your comments.

First of all thank you very much - thx to you i saw that there are much simpler & cleaner solutions that i tried and thought...

- http://jsfiddle.net/WrjK2/5/ - in this solution with IE10 i see that there's an empty space on the top part... the red is not continous from top the bottom.

- http://jsfiddle.net/WrjK2/7/ - for this solution it works perfectly in IE10, Firefox 21 & Opera however the red line is completely missing in Chrome Release Version (26) & Nightly (28) ! Is it possible to fix it ?

  • 0
  On 16/05/2013 at 15:52, yodat said:

Sorry guys, i've been away for work - so i can just check it out your comments.

First of all thank you very much - thx to you i saw that there are much simpler & cleaner solutions that i tried and thought...

- http://jsfiddle.net/WrjK2/5/ - in this solution with IE10 i see that there's an empty space on the top part... the red is not continous from top the bottom.

- http://jsfiddle.net/WrjK2/7/ - for this solution it works perfectly in IE10, Firefox 21 & Opera however the red line is completely missing in Chrome Release Version (26) & Nightly (28) ! Is it possible to fix it ?

fixed first link: http://jsfiddle.net/WrjK2/12/

Also use a reset css!! otherwise stuff will always look different in different browsers...

Below css should be fine as reset css ;)


html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
[/CODE]

  • 0
  On 16/05/2013 at 15:52, yodat said:

Sorry guys, i've been away for work - so i can just check it out your comments.

First of all thank you very much - thx to you i saw that there are much simpler & cleaner solutions that i tried and thought...

- http://jsfiddle.net/WrjK2/5/ - in this solution with IE10 i see that there's an empty space on the top part... the red is not continous from top the bottom.

- http://jsfiddle.net/WrjK2/7/ - for this solution it works perfectly in IE10, Firefox 21 & Opera however the red line is completely missing in Chrome Release Version (26) & Nightly (28) ! Is it possible to fix it ?

here you go:

http://jsfiddle.net/WrjK2/13/

Should work in all browsers, all the same.. just needed to set margins and padding to 0.

Also as seahorsepip said, always include a css reset :)

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • I was going to say that search engines and such, have been scraping everyone's copyright, IP and data, since the beginning of the internet.
    • Microsoft is officially making the Xbox app on PC a universal launcher by Pulasthi Ariyasinghe It was earlier this year that an image mockup from Microsoft showed the Xbox app on PC with an interesting change: including support for other PC stores on the app, teasing that it may be becoming a universal launcher like GOG Galaxy or Playnite. Considering the company's new handheld initiative that will house a brand-new gaming-focused version of Windows, it was clear that this feature was on the way. And now, Xbox Insiders have access. Announced today as the 'aggregated gaming library' feature, it's poised to land this holiday on the ROG Xbox Ally and ROG Xbox Ally X to easily manage all their installed games from a single place. But before that, Xbox Insiders on PC can have a crack at it to see how it functions and provide feedback to Microsoft. In its current state, Microsoft says that the feature now supports Xbox, Game Pass, Battle.net, and "other leading PC storefronts," all handled via the Xbox PC app. The company did not detail what these other storefronts are, but Steam, Epic Games Store, Ubisoft Connect, and EA Play apps seem likely candidates. "Whether you’re on a Windows PC or a handheld device, your Xbox library, hundreds of Game Pass titles, and all your installed games from leading PC storefronts will now be at your fingertips," said the company. When a game from a supported store is installed on a PC, Insiders should now see it appear on the Xbox app in the My Library and Most Recent sections for easy access. "And this is just the beginning," adds Microsoft. "We’ll continue rolling out support for additional PC storefronts over time." Insiders can also disable this functionality and hide games from specific stores if needed from the Settings > Library & Extensions menu. Anyone interested in testing out the new 'aggregated gaming library' update can use the Xbox Insider app on PC to enroll in the ongoing Insider Previews.
    • Get this powerful mini PC with Core Ultra 9, 32GB RAM, and 1TB SSD for just $799 by Taras Buria The ASUS NUC 14 Pro+ is a powerful mini PC with capable hardware, and right now, you can get it on Amazon with a big discount. At just $799, this computer offers a Core Ultra 9 processor, 32GB of memory, and a 1TB SSD. The NUC 14 Pro+ features a low-profile aluminum chassis, which can be opened without removing rubber feet or undoing any screws. Its toolless design lets you access the storage without a screwdriver. The computer also has a rich set of ports. On the front side, you will find two USB 3.2 Gen 2 Type-C, one USB 3.2 Gen 2x2 Type-C, and a power button. Unlike the Mac mini, which has a frustrating power button placement, the power button in the NUC 14 Pro+ is located where it should be. The back of the NUC 14 Pro+ has a DC-in port, two Thunderbolt 4 ports, one 2.5G Ethernet port, one USB 3.2 Gen2 Type-A, one USB 2.0 Type-A, two HDMI 2.1, and a Kensington lock. Finally, there is a VESA mount, which lets you place the device on the back of your monitor for a cleaner desk. The computer is powered by Intel's 14th-gen Core Ultra 9 185H processor, 32GB of DDR5 memory, and a 1TB PCIe Gen4 NVMe SSD. Windows 11 Home is preinstalled, so you do not need to bring your own drive, memory, or Windows 11 license. ASUS NUC 14 Pro+ Core Ultra 9 185H, 32GB RAM, 1TB SSD - $799.99 | 27% off on Amazon US This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • This guy is just salty that Waymo is about to get buried by a company with cars that cost significantly less, charge significantly lower fares, and will soon dramatically outnumber their fleet. Waymo made the mistake of not reducing their vehicle cost quick enough and not overcoming their route limitations. Unless they start allowing their cars to use the freeways and have significantly wider geofencing, they're going to soon join the list of discontinued Google products. If Tesla wasn't the one to make them irrelevant, somebody else soon was. There's a long list of companies designing robotaxis right now.
    • LOL. Hard to believe people still fall for this. If you are having some sort of issue, I would work on fixing that instead turning off these settings.
  • Recent Achievements

    • Week One Done
      fredss earned a badge
      Week One Done
    • Dedicated
      fabioc earned a badge
      Dedicated
    • One Month Later
      GoForma earned a badge
      One Month Later
    • Week One Done
      GoForma earned a badge
      Week One Done
    • Week One Done
      ravenmanNE earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      651
    2. 2
      Michael Scrip
      226
    3. 3
      ATLien_0
      218
    4. 4
      +FloatingFatMan
      146
    5. 5
      Xenon
      137
  • Tell a friend

    Love Neowin? Tell a friend!