• 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

    • YouTube adds AI summaries to search results and expands conversational AI testing by David Uzondu Today, YouTube announced it is adding two new AI features, and one is sort of like AI overviews for its search results. The platform is also expanding access to its conversational AI tool that can answer questions about the video you are currently watching. The primary update is a new AI-powered search results carousel. For now, this is exclusively for YouTube Premium members located in the United States. When you search for something like "best beaches in Hawaii," YouTube might generate a special carousel with short video clips and brief AI-written topic descriptions. It's interesting to see YouTube try this, especially since Google's own AI Overviews had some dangerous hallucination issues at launch, like that infamous suggestion to add non-toxic glue to pizza. The other update involves its conversational AI tool, which it introduced back in 2023. YouTube is now starting to test this with some non-Premium users in the US as well. If you are part of the test, you will see a new button labeled "Ask" positioned near the like and share buttons below a video. Tapping it lets you directly ask questions about the content. For instance, if you are watching a tutorial, you could ask for a summary or even for a quiz on the main points. It feels like every company is desperately shoving a chatbot into its products now. For creators, the AI-generated search carousel might turn into a serious problem. If people are getting everything they need from a summary without ever clicking through, there's not much reason to watch the actual video. That means fewer views, less watch time, and less money. Bad news if YouTube is your job. YouTube says the AI pulls from creator videos to make these summaries, but a quiet nod isn't the same as sending real traffic. And it's still unclear if any of that credit actually helps creators in a meaningful way.
    • Oh for crying out loud, more AI rubbish. It gets everywhere, well almost. i use Numbers on the Mac, which does what I need, at the moment I can turn any AI off, but maybe i should go back to LibreOffice.
    • Google Sheets gets exciting Gemini feature that is still missing in Excel by Usama Jawad We recently learned that Copilot in Microsoft Excel got a big upgrade in the form of context awareness, which is in addition to the formula generation capabilities that were made available earlier. However, no firm has really won the AI race yet, and Google has now edged ahead in at least one domain today, by adding Gemini text generation capabilities in Google Sheets. In a blog post, Google has announced that while you can already leverage Gemini in Sheets to generate charts and insights, you can now generate text using its new AI function too. This function can utilize a natural language prompt and an optional context window to summarize and generate text, categorize information, and perform sentiment analysis. The syntax for the AI function is fairly straightforward: AI("prompt",[optional range]) So you can invoke the Gemini function as follows: =AI("Perform sentiment analysis on the emails sent by the customers to the barbershop.", C2) Or: =AI("Create an email to the reviewer addressing specific items in their reviews.", A2:G2) It is very interesting to note that a similar capability is not offered by Copilot in Excel yet. In my testing, I did get Copilot to generate charts, formulas, and do some text formatting, it simply doesn't seem to have the ability to actually generate textual data directly in a workbook just yet. While an input range isn't mandatory, Google recommends using it for the best results. Just like any cell using a formula, you can refresh the AI cell, and get an indicator about its sync state. That said, a limitation that is present with regards to the AI function is that it only works for the first 200 selected cells in your range. Once that generation completes, you can select more cells and repeat the process, which is a slightly cumbersome experience. The rollout for this capability has begun across Business, Enterprise, Education, Education Premium, AI Pro, and Ultra plans, so it should be available to everyone sooner rather than later. In the meantime, you can view details about the AI function here.
    • Space Marine 2 gains a horde mode and DLSS 4 with new Siege update by Pulasthi Ariyasinghe Warhammer 40,000: Space Marine 2 just received its next major update. Dubbed the Siege update, it is finally bringing the long-promised horde mode for the third-person action game, as well as new tech for PC gamers. The Siege mode takes place on a fortified Imperial stronghold on Kadaku that is enduring endless attacks by Tyranids and Thousand Sons. There are three sections in total that players will defend in order before circling back to the original position, fighting away thousands of enemies in five waves before swapping locations. To give players a small break, there's a one-minute gap between each wave to resupply and purchase perks from the points they collect while in battle. Players can call in AI-controlled specialized soldiers, Space Marines, or even a Dreadnought to help out if the waves get a little too tough. To cap it all off, every fifth wave a boss encounter kicks off. There are 15 waves to go through in a single session, but parties can also kick off an endless mode at the end of these to see how far they can get. "Siege Mode expands on our PVE operations, emphasizing endless enemy waves that challenge even the strongest teams," says Focus Entertainment, describing the new mode. "When overwhelmed, players may call reinforcements for assistance. Engage in intense battles across three distinctive sectors, each requiring strategic adaptation. Side objectives emerge during combat, providing essential resources used to summon elite Space Marines or a formidable Dreadnought, drastically shifting battlefield dynamics. Over on PC, the studio has added two new options. One is RTAO (Ray-Traced Ambient Occlusion), though this is currently listed as an experimental feature. Next, Nvidia 5000 series graphics card owners can now enable DLSS 4 for better upscaling tech as well as multi-frame generation. The complete patch notes for Patch 8, which includes details on the balance changes, can be found here. The Warhammer 40,000: Space Marine 2 Siege update is now available on PC, Xbox Series X|S, and PlayStation 5.
  • Recent Achievements

    • Conversation Starter
      Kavin25 earned a badge
      Conversation Starter
    • One Month Later
      Leonard grant earned a badge
      One Month Later
    • Week One Done
      pcdoctorsnet earned a badge
      Week One Done
    • Rising Star
      Phillip0web went up a rank
      Rising Star
    • One Month Later
      Epaminombas earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      542
    2. 2
      ATLien_0
      207
    3. 3
      +FloatingFatMan
      176
    4. 4
      Michael Scrip
      148
    5. 5
      snowy owl
      118
  • Tell a friend

    Love Neowin? Tell a friend!