• 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 love space RPGs, and this one will no doubt scratch that itch. Im still modding the crap out of Starfiled. Can't wait.
    • Nah, the problem is still Windows. If you install Linux on a gaming PC, you will get better performance in games.
    • You could just do it now yourself with all the tools out there or the right Powershell scripts. Nothing stops you from tinkering away at it like the Tiny11 dev(s) do. It's easier to remove and turn off stuff when you're targeting a specific device like a gaming handheld. All the work/office bits alone are probably 60-70% of the code anyway.
    • hah, not for long. Microsoft will add copilot, video recording, social media integration, Microsoft 365 outlook, cdrom support, printer drivers, xbox memory card manager for zune music players, dedicated film and tv app for several providers that don't actually support it, and windows media centre for backward compatibility for anyone still using a sling tv box.... then they'll decide that it also need the start menu so they can provide a nice place to show your recent blank space that takes up half the screen while showing you full screen ads asking you to setup your Microsoft account for xbox. Then the only good thing it actually did, they'll let the new intern show their coding skills and the ABXY buttons will be changed around to 1256 because its better for international support or something, but ... at the end of it all, this time next year because Microsoft loves supporting software and hardware, the Asus oem won't get any more updates for it's Ally and it'll be forgotten faster than the Xbox Samsung TVs
    • Grounded 2 out next month, bringing fans a new miniaturized survival adventure by Pulasthi Ariyasinghe Alongside Avowed and The Outer Worlds 2, Obsidian Entertainment will officially be releasing three games in 2025. The first-party Xbox studio surprise revealed Grounded 2 during the Xbox Games Showcase event today. The same four kids from the original survival game are returning for this new adventure, and this time, they are miniaturized in a park. Check out the trailer above. Grounded 2 is set two years after the events of the first game, and this time, it's Brookhollow Park that will become the playground for players. Obsidian is getting help from Eidos Montréal as well, saying that the collaboration is adding more depth, danger, and discovery to the experience. In addition to building on the first game's features, Grounded 2 is introducing Buggies as one of its biggest features. Essentially bug mounts, these will let you ride ally bugs and use them across various operations in the game, including combat and building. Mounts had been one of the biggest requests by fans in the first game, and Obsidian says it has delivered with plenty of deep integrations Just like the original, Grounded 2 will be an early access title at launch, aiming to build out the game, story, and features with the community. Here are the key features of the Early Access/Game Preview launch: Omni-Tool introduced: A major quality of life upgrade that combines the hammer, axe, shovel, and wrench into one all-purpose tool, saving precious backpack space and streamlining your survival experience.  Story: In Grounded 2, we won’t tell you the whole story at the launch of Game Preview, but there’ll be enough there for you to start uncovering mysteries, chasing clues, and sharing your wildest theories right away (yes, we’re watching).  Expanded world-building brands: Expect the return of in-world favorites like Punch-O and Minotaurs & Myrmidons, alongside new brands and scenery that don’t just look cool—they tell a story (if you know where to look)—all coming together to bring Brookhollow Park to life with that signature Grounded charm.  New and returning bugs: Face off against familiar foes and never-before-seen creepy crawlies like the graceful cockroach, which adds new challenges and combat dynamics, such as having the ability to block your attacks.  Larger world, richer biomes: More spaces to build, explore, and survive in— Brookhollow Park is nearly as big as the entire backyard from the first game, packed with new secrets around every corner, from snack bars and toppled ice cream carts to long-forgotten edges of the park.  Community driven evolution: We’re building with you, and every update will be more meaningful and shaped by player feedback, with a public roadmap to keep you in the loop that we will share when Game Preview launches on July 29.  Combat 2.0 – Whether you’re flying solo or in full squad mode, new combat mechanics like dodging and smarter enemy behavior make every fight more intense—and more satisfying to survive.  Grounded 2 is launching on July 29 across PC and Xbox Series X|S consoles in early access on July 29, 2025, with a $29.99 price tag. Xbox Game Pass subscribers will be gaining the title at launch for no extra cost as well.
  • Recent Achievements

    • Reacting Well
      BlakeBringer earned a badge
      Reacting Well
    • Reacting Well
      Lazy_Placeholder earned a badge
      Reacting Well
    • Dedicated
      Epaminombas earned a badge
      Dedicated
    • Veteran
      Yonah went up a rank
      Veteran
    • First Post
      viraltui earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      472
    2. 2
      +FloatingFatMan
      265
    3. 3
      ATLien_0
      234
    4. 4
      snowy owl
      224
    5. 5
      Edouard
      174
  • Tell a friend

    Love Neowin? Tell a friend!