• 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

    • It's an improvement overall but I'm also of the idea that they should just give users more options and let them have the menu they like instead of just going with one outline and some minor options (though finally getting rid of recommended is great). I know people who don't want pins and would rather it all be just the list/grid of apps. Others just want pins, others want them side by side and not up on top of each other. Have more layout options and let people mix and match, problem solved.
    • Hi all, I've got a Pioneer VSX 815-k receiver. Love this thing, however, my cat did his business on top of it and kinda recked it... Only analog works (5.1 surround RCA inputs). Normally I'd use toslink from mobo to digital in on the receiver, but the result is a ton of loud white noise over the music. Analog works just fine, so I'm forced to use the 3.5mm jacks on the rear of the mobo to the RCA inputs on the receiver. The issue I face is that there is no DTS or anything fun.. Originally, I could play all my MP3s or watch YouTube etc, and the subwoofer would be booming as I like because of the mixing from the DAC. Now with the analog, none of that is happening  I'm wondering if there's some kind of software solution for Windows to get the subwoofer to play as it did when I had it hooked up through toslink, but for analog out instead. As of now, only audio files that were encoded specifically to produce sound to the sub, will work, but nothing else. As to which onboard sound solution my mobo has, this from the website's description: 121dB SNR AMP-UP Audio with ALC1220 & High-End ESS SABRE 9018 DAC with WIMA audio capacitors Sound BlasterX 720°, the top-of-the-line audio engine solution for 4K gaming and entertainment  yea it uses that wonky SBx 720 app to change the audio effects n stuff.. but doesn't help with my issue Eventually yea, I wanna buy a new one. They're about $80 on ebay after shipping, but that will have to wait.
    • Serious question here. Why is the start menu such a heated topic? I can't remember the last time that I used the start menu for anything at all other than it pops up when I hit the WIN key on my keyboard before I type for the program I want to run and then hit Enter or to restart my machine. I honestly wish it would just go away, and it just be replaced with the PowerToys Run menu. Am I missing something with the Start menu? I see people always talking about installing third party replacements and such, but I just wonder what some are actually using the Start menu for that I might be missing out on. Genuine question. Hopefully not offending anyone as I know everyone has their own way to work and access things in the OS.
    • These are the Apple Watch models that support watchOS 26 by Aditya Tiwari Apple has announced the latest operating system upgrade for its smartwatch lineup, called watchOS 26, not watchOS 12, as many expected a while ago. The Cupertino giant has unified the software experience across its platforms by introducing the "Liquid Glass" software design and renaming all the operating systems to version 26. That said, the next question is which Apple Watch models will support watchOS 26. Apple has shared the official list of devices: Apple Watch Ultra 2 Apple Watch Ultra Apple Watch Series 10 Apple Watch Series 9 Apple Watch Series 8 Apple Watch Series 7 Apple Watch Series 6 Apple Watch SE (2nd Generation) The upcoming Apple Watch update brings several new features to your wrist. Liquid Glass design gives a fresh look to the UI with updated Control Center and translucent buttons within apps. It's new Workout Buddy feature can use an Apple Intelligence-enabled iPhone nearby to provide personalized, spoken motivation during workouts. Building on the Double Tap feature, you can now flick your wrist to perform actions like muting incoming calls, silencing timers, and dismissing notifications when your hands are full. It is available on Apple Watch Ultra 2 and Apple Watch Series 9 (or later). watchOS 26 is currently available for testing through the Apple Developer Program. It will roll out to general users during the fall season, when Apple is expected to refresh the Ultra and SE models. Note that your Apple Watch must be paired with an iPhone 11 (or later) or iPhone SE (2nd generation or later) running iOS 26. While the list of Apple Watch models that support watchOS 26 remains the same, it won't work with iPhone Xs/Xs Max and iPhone Xr, which were previously supported on watchOS 11. You can check out the respective lists of supported devices for iOS 26, iPadOS 26, and macOS 26 Tahoe.
  • Recent Achievements

    • Explorer
      MusicLover2112 went up a rank
      Explorer
    • Dedicated
      MadMung0 earned a badge
      Dedicated
    • Rookie
      CHUNWEI went up a rank
      Rookie
    • Enthusiast
      the420kid went up a rank
      Enthusiast
    • Conversation Starter
      NeoToad777 earned a badge
      Conversation Starter
  • Popular Contributors

    1. 1
      +primortal
      501
    2. 2
      ATLien_0
      268
    3. 3
      +FloatingFatMan
      257
    4. 4
      Edouard
      201
    5. 5
      snowy owl
      170
  • Tell a friend

    Love Neowin? Tell a friend!