• 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

    • We went from a Latitude 7450 to Dell Pro 14 Plus PB14250
    • EA Sports UFC 5 is free-to-play on Xbox Series X|S this weekend by Pulasthi Ariyasinghe Every Thursday Microsoft brings in a fresh slate of games for Xbox gamers to try over the weekend as a part of its Free Play Days promotion. The latest refresh that arrived today only revealed a single title for the weekend, and that's EA Sports UFC 5. This is a special occasion as well. Unlike the standard events, this one does not require any tier of Game Pass to jump in. All Xbox Series X|S owners can play the game over the weekend, even if they do not have a Core subscription. As always, any progress made during the weekend also carries over automatically if you decide to purchase the game afterward. Coming in from EA Sports, UFC 5 is the latest entry in the long-running mixed martial arts fighting games. This installment landed in 2023 for the latest generation consoles. Built on DICE's Frostbite Engine for the first time, the title event received an M rating by the ESRB for its realistic injury system, as EA wanted to make a more authentic experience akin to the real-world sport. The damage system, dubbed the Real Impact System, involves depicting blood and sweat on fighters as well as facial injuries. Having injuries like bruised eyes or broken noses can even affect the performance of a fighter due to impaired vision or breathing difficulty. A doctor stoppage may even happen if the injuries become too severe. UFC 5 offers a single-player career mode to become the top-ranked fighter, online modes for competitive action, and special events tied to real-world fights. Here are the store links for the game: UFC 5 - $27.99 (Xbox Series X|S) UFC 5 Deluxe Edition - $31.99 (Xbox Series X|S) UFC 5 Ultimate Edition - $89.99 (Xbox Series X|S) This Free Play Days promotion will end on Sunday, June 29, at 11:59 pm PT. Following this, expect another round of games to enter the program next Thursday, July 3.
    • Windows 11 KB5060826 optional update brings better Setup, new data migration tool, more by Sayan Sen Alongside KB5060829 for Windows 11 24H2, Microsoft has also released its C-release non-security preview update for Windows 11 23H2 and 22H2 today. The new update is rolling out under KB5060826 (builds 22621.5549 and 22631.5549). KB5060826 brings an upgraded Setup which will now let admins choose whether to deploy critical updates during the OOBE (the initial out-of-box experience setup on Windows). Alongside that, it also adds the new PC migration experience on Windows Backup, as well as the default app changes related to the European Economic Area (EEA) region. The full changelog is given below: First up we have the changes and improvements for Gradual Rollout: [App defaults] New! We are rolling out some small changes in the European Economic Area (EEA) region for default browsers through the Set default button in Settings > Apps > Default apps: Additional file and link types will be set for the new default browser, if it registers them. The new default browser will be pinned to the Taskbar and Start menu unless you choose not to pin it by clearing the checkboxes. There is now a separate one-click button for browsers to change your .pdf default, if the browser registers for the .pdf file type. [PC Migration] New! The PC-to-PC migration experience in Windows is starting to roll out. You’ll begin to see the landing and the pairing page in the Windows Backup app, giving you a first look at what’s coming. In the full experience, you’ll be able to transfer files and settings from an old PC to a new one during setup. Support for this feature during PC setup will arrive in a future update. The rollout is being introduced in phases to support a smooth experience. [Windows Share] ​​​​​​​New! When you share links or web content using the Windows share window, you will see a visual preview for that content. Up next, we have Normal Rollout features: [Windows Setup] New! Admins can configure whether a new device gets critical updates during the out-of-box experience (OOBE). The update has a single known issue related to Noto fonts. You can view the support article here on Microsoft's official website. The update can be obtained by clicking on "Check for optional updates" inside Windows Update. You can also download it manually from Microsoft Update Catalog website.
    • American? Yer whole 120v limitation is madness.  You can still get low powered pcs , nice, that'll do the job 
    • People want a resizable taskbar, not tiny icons on a fat one. Microsoft, you've done it again.
  • Recent Achievements

    • One Month Later
      jfam earned a badge
      One Month Later
    • First Post
      TheRingmaster earned a badge
      First Post
    • Conversation Starter
      Kavin25 earned a badge
      Conversation Starter
    • One Month Later
      Leonard grant earned a badge
      One Month Later
    • Week One Done
      pcdoctorsnet earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      569
    2. 2
      ATLien_0
      186
    3. 3
      +FloatingFatMan
      176
    4. 4
      Michael Scrip
      144
    5. 5
      Xenon
      116
  • Tell a friend

    Love Neowin? Tell a friend!