• 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

    • keep in mind some things like chrome look at this setting to disable some animations in browsers... its an accessibility thing
    • I always disable animations in Windows using sysdm.cpl and yes, it feels faster. I have also reduced animations in my android phone using dev options.
    • Neowin's servers (hosted in the UK).
    • MacOS isn't Linux, but Proton is modified WINE, and WINE runs on MacOS. They would just need to add something like Box86 or Rosetta support.
    • PicPick 7.4.0 by Razvan Serea PicPick is user friendly and full of features for creating your image, suitable for software developers, graphic designers and the home user. It is an all-in-one program that provides a full-featured screen capture tool, intuitive image editor, color picker, color palette, pixel ruler, protractor, crosshair and even whiteboard. It not only has everything that you need, but it loads fast, and sits quietly in the system tray until needed. This software is provided as freeware for personal use only. In this case, you are granted the right to use this program free of charge. Otherwise, you need to pay for a license for commercial use. PicPick key features: For All Windows (Fully support Windows 11, 10, 8.1, 8, 7, Vista and XP both 32-bit and 64-bit) Multi-language is supported. (MORE 28+) All functions are fully supported on a dual screen environment. No Registry, No access to System folder (you can copy these files to portable USB) Screen Capture Auto-scroll, dual monitors and sound effect are supported Various output to File, Printer, Office programs, External program Sharing to FTP, Web, E-mail, Facebook and Twitter are supported as well Full Screen Active Window Window Control Scrolling Window Region, Fixed Region FreeHand Repeat Last Capture Image Editor Intuitive User Interface Windows Ribbon style Standard drawing, shapes, arrows, lines, text, and etc. Blur, sharpen, hue, contrast, brightness, pixelate, rotate, flip, frame effect and etc. Color Picker and Color Palette various color code type (RGB, HTML, C++, Delphi) Photoshop style RGB/HSV conversion is supported. Pick and Save your favorite color! Screen Pixel Ruler Horizontal and vertical orientation various units (Pixels, Inches, Centimeters) DPI setting (72, 96, 120, 300) colorful gradient skins You don't have to install any other screen ruler softwares. Screen Magnifier Zoom 2x to 10x option Stay on top, smooth display, and sizeable window Screen Protractor Have you seen any screen protractor function in other software? Screen Crosshair For aligning objects in graphics or design applications For calculating relative coordinates on screen Some prefer to use this tool than a pixel-ruler. Whiteboard For giving a presentation or just drawing something on screen PicPick 7.4.0 changelog: Added support for saving in WebP file format Added horizontal scrolling in the Image Editor with Shift and mouse wheel Fixed control capture failing to detect specific windows Fixed focus loss during delayed active-window captures. Download: PicPick 7.4.0 | 74.9 MB (Free for personal use only) Download: Portable PicPick 7.4.0 | 73.3 MB View: PicPick Home page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • First Post
      Johnny Mrkvička earned a badge
      First Post
    • Week One Done
      viraltui earned a badge
      Week One Done
    • One Month Later
      serfegyed earned a badge
      One Month Later
    • Dedicated
      firey earned a badge
      Dedicated
    • Dedicated
      fettermanj earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      651
    2. 2
      Michael Scrip
      224
    3. 3
      ATLien_0
      222
    4. 4
      Xenon
      146
    5. 5
      +FloatingFatMan
      142
  • Tell a friend

    Love Neowin? Tell a friend!