• 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

    • No operating system works well with programs that modify its interface. There will always be bugs, whether it's MacOS or Linux. Windows too, you'll only suffer from bugs using this crap software.
    • KDE brings UI improvements, bug fixes and more to Plasma 6.4 as stable release draws near by David Uzondu With less than a month to the release of Plasma 6.4, the KDE dev team has shared what it has been working on in the latest issue of its weekly roundup. The update shows a heavy focus on user interface polish and a whole slew of bug fixes as the June 17 release date gets closer. The team has pushed a number of UI refinements for the upcoming version. On the System Settings page for Wi-Fi, the network list can now be fully navigated with a keyboard. KDE also disabled the ability to drag and drop displays on top of one another in the monitor settings. This was done because it could create unsupported arrangements that triggered a cascade of strange bugs throughout the system. Waking up a sleeping computer by pressing the power button no longer causes the bizarre logout screen to appear after you unlock it, which is a relief. Alignment issues in the settings page for the Digital Clock widget were also resolved. The list of bug fixes for 6.4 is extensive. The development team has fixed the most common crash affecting the System Monitor and squashed another one related to a divide-by-zero error. For users with multiple monitors, a long-awaited fix has landed that prevents windows from disappearing when the screen they are on gets disconnected. Even the humble Sticky Notes widget received attention; it will no longer freeze the Plasma shell if you place it on a very thick panel. Discover, the software center, also had a bug patched that caused it to crash if closed too quickly after launch. Here's the full list of improvements: Putting a Sticky Note widget on a very thick panel can no longer cause Plasma to freeze; now, you can use a thick panel with a sticky note on it as a notes sidebar. Fixed the most common System Monitor crash. Fixed another crash in System Monitor, this time a divide-by-zero. Fixed a case where xdg-desktop-portal-kde could crash after you choose a video source to start streaming. Fixed a bug that caused Discover to crash if you close it immediately after it launched. Fixed multiple subtle bugs with the screen chooser widget and OSD that caused it to do the wrong thing on rotated screens or when mirroring screens. Fixed a bug that caused the System Settings’ search field not to be focused properly when pressing Ctrl+F while any UI elements in a settings page already had focus. Fixed the root cause of multiple issues involving windows disappearing when you disconnect the screen they’re on. Clicking a button on a desktop widget that opens a menu no longer inappropriately makes the widget enter Widget Edit Mode. Files with a # or ? character in their name or full path are no longer unexpectedly missing from the history lists in Kicker/Kickoff/etc launchers. Fixed a bug that caused the screen chooser window to sometimes not appear as expected when OBS was launched. Fixed a bug that caused tiled windows on a multi-screen setup to lose their tiling settings when the system went to sleep and woke up again. The "Move window to [activity]" feature now works properly when invoked from the Task Manager widget. Fixed a bug in the Kicker Application Menu that caused keyboard navigation not to work if the popup opened with an item under the pointer. In the Overview effect’s grid view, dragging windows tiled on one virtual desktop over to a different virtual desktop now keeps them tiled as expected. The focus may be on the imminent 6.4 release, but work on what comes next never really stops. Looking ahead, development on Plasma 6.5 is already well underway. Just last week, the KDE team brought several performance improvements to Plasma 6.5.0. This week, the team fixed a nagging bug that sometimes caused the Networks widget to think a hotspot was still enabled after disconnecting from Wi-Fi. On the features side, the System Settings' Fonts page now prevents you from breaking your system entirely by setting fonts below 4pt. In addition to that, switching time spans in the Info Center’s energy page now features smooth graph animations. Performance-wise, kwriteconfig should also be faster, allowing changes you made to the keyboard layout using the tool to reflect immediately.
    • Display Driver Uninstaller (DDU) 18.1.1.4 by Razvan Serea Display Driver Uninstaller (DDU) is a utility for completely removing AMD/NVIDIA/INTEL graphics drivers and related packages from your system, attempting to eliminate all leftovers (including registry entries, folders and files, driver store). Though AMD/NVIDIA/INTEL drivers can usually be removed via the Windows Control Panel, this uninstaller tool was created for situations where standard uninstall fails, or when you need to fully remove NVIDIA or ATI graphics card drivers. After using this driver cleaner, your system will behave as though it’s the first time you’re installing a new driver—similar to a fresh Windows installation. As with all such tools, we recommend creating a restore point beforehand, allowing you to undo changes if issues arise. If you're having trouble installing an older or newer driver, try it—there are reports that it resolves such problems. Recommended usage: The tool can be used in Normal mode but for absolute stability when using DDU, Safemode is always the best. Make a backup or a system restore (but it should normally be pretty safe). It is best to exclude the DDU folder completely from any security software to avoid issues. You do NOT need to uninstall the driver prior using DDU. Requirements: .NET Framework 4.8 Compatible with Windows 7, 8, 8.1, 10, and 11 (32-bit or 64-bit) Note: Using on Insider Preview builds is at your own risk. Display Driver Uninstaller (DDU) 18.1.1.4 changelog: Intel: Added NPU presence detection before removing shared DLL files (these were previously left to prevent potential NPU-related issues). Intel: Added optional NPU removal Improved "Extension" driver removal process. Updated several translations. Download: Display Driver Uninstaller 18.1.1.4 | 1.7 MB (Freeware) Download: DDU Portable | 1.2 MB Links: Display Driver Uninstaller Home Page | Screenshot | Forum Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • That is what I also think to a point. How is 26 necessarily different than just another iteration like 18, 19, 20, etc? At first I think it would be better for Apple to use 2026, 2027, and then maybe truncate it to just 28, 29, and so on. Granted, I also think it makes more sense to use the year when it was released (2025 or 25), not 26/2026. Maybe Apple's thinking is as stated by Aditya that the bulk of a release being the current release is during the following year (2026, for example) after it is released (2025, for example). There are other examples of these sorts of things. In the NBA, the season has always started in the Fall and ends in the Spring. When the season ends is how the season is named. So, this is the 2025 NBA season and the Pacers and Thunder are playing to be the 2025 NBA Champions. The NFL starts in the Fall and the end of the season is always in the beginning of the next year as well. The Super Bowl was played on February 9, 2025, but that was the end of the 2024 NFL season. So, contrary to the NBA, the NFL names it season based on when it starts, not when it ends. Maybe that is because more of the NFL season is played at the end of the year (2024 in the most recent example) whereas most of the NBA season is played in the first half of the following year (2025 in the current example).
  • Recent Achievements

    • Week One Done
      abortretryfail earned a badge
      Week One Done
    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
    • One Year In
      Vladimir Migunov earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      snowy owl
      252
    3. 3
      +FloatingFatMan
      251
    4. 4
      ATLien_0
      228
    5. 5
      +Edouard
      191
  • Tell a friend

    Love Neowin? Tell a friend!