• 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 gave OEMs all kinds of stuff to put effort into that did nothing about bad drivers that crashed the system.
    • Yes, because Google's ad platform dominates the internet and most sites use Google's ad platform. Microsoft cares about their own ad platform. And they whitelist their ads. Edge is still on mv2 on desktop but they have officially announced they will stop supporting it. They haven't announced the date, but it is on their roadmap. Microsoft HAS the resources to keep it, but they have announced they will remove it unlike other chromium based browsers like Brave and Opera which have announced they will try to keep it. They postponing it in an attempt maybe to gain some market share from Chrome, but their end goal is the same, the deprecation of mv2. https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/developer-guide/manifest-v3#manifest-timeline-for-microsoft-edge-and-partner-center
    • I'll say this again:  This hasn't changed since Windows 10.  This customization issue is not unique to Windows 11.   Windows 10 was released about 10 years ago.  I didn't look at changing default fonts in Windows 8 or 7.  Most (sane) people would look for supportability -- you might have the desired customization in those OSs but not able to play games, apps, that one typically gets the OS for.  No one is going to trade off getting an ancient OS just so they can have larger fonts but not be able to play games or run apps.   There are many options that are not exposed in the default UI because they have a lot more potential harm than benefit.  Doesn't mean they don't exist.  Hence, registry changes. "What's the harm by leaving it in Settings?"  Imagine if you changed the default font to something unreadable.  How would you change it back if you can't read anything?  The settings UI allows one to change size and style, but not font, so you'd still be able to read it.  Changing the font itself to Wingdings might render an OS unusable. Now YOU might be savvy enough to make that change and/or undo it, but that's why it's not exposed in simplistic UI and instead is moved to registry changes. Your 3rd party app is most likely causing conflict with the registry as it wants to make its own changes.  It's not voodoo magic here, that's typically what these apps do.  I'd bet you a beer if I spin up a new VM for Windows 11 and try my links above with no Winaero Tweaker it'd work just fine.  Introduction of 3rd party apps is always suspect -- who knows what else it's doing.  
    • Yes, and the reason is the defaults is has. The masses have no interest to change settings etc. It feels cluttered by default. The default home/NTP feels cluttered with so much stuff from MSN. The sidebar has too many buttons with Microsoft services. The default search engine is Bing. Just compare Edge defaults with Chrome defaults. The masses open Edge or are "forced" to open it, they don't like what they see and close it and go back to Chrome.
    • PrivaZer 4.0.106 by Razvan Serea PrivaZer is a PC cleaner that helps you master your security and freedom at home and at work. PrivaZer permanently and irretrievably erases unwanted traces of your past activity on your computer and on your storage devices (USB keys, external drive, and so on) which prevents others from retrieving what you have done, watched, streamed, visited on internet, freeing up valuable hard disk space, and keeping your PC running secure. PrivaZer key features: Deep Cleaning: PrivaZer thoroughly cleans your PC by removing unnecessary files, traces of activity, and potential privacy risks. Advanced Scan Modes: With multiple scan modes, including Quick and Deep scans, PrivaZer ensures comprehensive cleaning tailored to your needs. Customizable Cleaning: PrivaZer allows you to customize cleaning settings, so you can choose exactly what to clean and what to keep. Privacy Protection: PrivaZer safeguards your privacy by securely erasing traces of your online and offline activities, including browsing history and temporary files. Secure File Deletion: PrivaZer securely deletes sensitive files beyond recovery, ensuring your confidential data remains private. Startup Manager: PrivaZer helps you control which programs launch at startup, improving boot times and overall system performance. Automatic Updates: PrivaZer regularly updates its cleaning algorithms to adapt to new threats and ensure effective protection. Scheduled Cleanups: PrivaZer offers the convenience of scheduling automated cleanups, so your PC stays optimized without manual intervention. Portable Version: PrivaZer offers a portable version, allowing you to carry it on a USB drive and clean any PC without installation. Detailed Reports: PrivaZer provides detailed reports after each cleanup, giving you insights into the space reclaimed and the areas cleaned. File Shredder: PrivaZer includes a file shredder feature to securely delete files, making data recovery impossible even with specialized tools. Context Menu Integration: PrivaZer integrates with the context menu, enabling quick and easy access to cleaning functions from any file or folder. Multi-Language Support: PrivaZer supports multiple languages, making it accessible to users worldwide. Automatic Traces Detection: PrivaZer automatically detects traces of activity on your PC, ensuring thorough cleaning without manual intervention. System Restore Point Creation: PrivaZer creates system restore points before cleaning, allowing you to revert changes if needed. Disk Health Analysis: PrivaZer analyzes disk health and alerts you to potential issues, helping you prevent data loss and maintain system stability. Browser Extensions Cleanup: PrivaZer cleans up browser extensions and add-ons, improving browser performance and security. File Association Management: PrivaZer helps you manage file associations, ensuring files open with the correct programs for optimal usability. Intuitive User Interface: PrivaZer features an intuitive user interface, making it easy for both novice and advanced users to optimize their PCs for better performance and privacy. PrivaZer 4.0.106 changelog: New cleanup : BAM (Background Activity Monitor) Improved cleanup : Clipboard Improved UI Download: PrivaZer 4.0.106 | Portable PrivaZer ~30.0 MB (Freeware, paid upgrade available) View: PrivaZer Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Dedicated
      Epaminombas earned a badge
      Dedicated
    • Veteran
      Yonah went up a rank
      Veteran
    • First Post
      viraltui earned a badge
      First Post
    • Reacting Well
      viraltui earned a badge
      Reacting Well
    • Week One Done
      LunaFerret earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      481
    2. 2
      +FloatingFatMan
      264
    3. 3
      snowy owl
      232
    4. 4
      ATLien_0
      231
    5. 5
      Edouard
      172
  • Tell a friend

    Love Neowin? Tell a friend!