Jump to content



Photo

Vertical Line with CSS ?

css vertical line

  • Please log in to reply
19 replies to this topic

#1 yodat

yodat

    Neowinian

  • Joined: 23-July 02

Posted 13 May 2013 - 11:18

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

Attached Images

  • test.png



#2 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 13 May 2013 - 11:55

Can you use an image?

http://jsfiddle.net/CQfvH/

#3 andy_cris

andy_cris

    Neowinian

  • Joined: 09-May 13

Posted 13 May 2013 - 11:58

You are not very clear...but you could wrap the content in a div and give it a 1px red border and a height of 100%.

#4 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 13 May 2013 - 12:08

Here you go...

http://jsfiddle.net/WrjK2/

Adjust the numbers, because your description isn't clear.

#5 OP yodat

yodat

    Neowinian

  • Joined: 23-July 02

Posted 13 May 2013 - 12:23

Hmm thx guys - i can use an image however lunamonkey is exactly what i was looking for - also seems compatible with different browsers : )

oww spoke early - @lunamonkey - it seems css for red line is not working in IE10 !

maybe i can combine it with Uplift's solution...

#6 OP yodat

yodat

    Neowinian

  • Joined: 23-July 02

Posted 13 May 2013 - 12:38

@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...

#7 ashpowell

ashpowell

    Neowinian

  • Joined: 13-November 06
  • Location: UK
  • OS: Windows 8.1
  • Phone: Nexus 5

Posted 13 May 2013 - 12:52

Just a quick one on top of lunamonkeys, is this what you mean?

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

#8 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 13 May 2013 - 13:08

@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.

#9 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 13 May 2013 - 13:57

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.

#10 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 13 May 2013 - 16:06

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.

#11 ashpowell

ashpowell

    Neowinian

  • Joined: 13-November 06
  • Location: UK
  • OS: Windows 8.1
  • Phone: Nexus 5

Posted 13 May 2013 - 17:03

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/...5/<br /><br />Maybe I read wrong or something :/

#12 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 13 May 2013 - 19:04

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/...5/<br /><br />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:

#13 ashpowell

ashpowell

    Neowinian

  • Joined: 13-November 06
  • Location: UK
  • OS: Windows 8.1
  • Phone: Nexus 5

Posted 13 May 2013 - 19:51

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

#14 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 13 May 2013 - 20:37

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.

#15 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • Joined: 07-May 04
  • Location: England

Posted 13 May 2013 - 20:47

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.