I am trying to make a page that can have lines to separate this sort of stuff! See the picture below!
Now the I tried many ways using empty div but still causes problems as it takes the whole page downwards. And I also thought of another way using hr tag and then use transform property to rotate it but still won't work!
Here is the link to the entire thing, few things aren't made,
the project that I am trying to make!
And here is the portion of code that I used before
<hr id="sidebar">
#sidebar {
transform = rotate(90deg);
}
Thanks any help is appreciated!
Yes you can achieve this design using :before.
Please review my code and get back to me if you have any question.
Hope it will help you. :)
Please try this css.
.slider:before {
content: '';
width: 1px;
min-height: 100vh;
background: #fff;
position: absolute;
left: 80px;
}
.slider {
position: relative;
}
One way to make this vertical line.
hr:before{
content: "";
width:2px;
height:100vh;
background-color: #fff;
position:absolute;
top:0;
bottom:0;
left:7%;
}
Related
I'm trying to make an "Our Process" section on a Wordpress site that looks like this: https://rfqedge.com/how-it-works/
How can I make a dotted line like that (preferably animated like on linked site, but unnecessary if it considerably complicates things)?
I'm a UI designer and don't know anything about programming, so please try to simplify things if possible.
This dotted line in center using css is
.step .text-frame .dashed-line .line {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 1;
background: url(images/border5.png) repeat-y;
}
I hope it's helps you
Thank you
You can apply CSS to create a dotted line where you want to create.
you can use the code and choose your color on the line as well as set where you want the line
under the body section
<body>
<hr></hr>
</body>
Under the style section
`<style>hr{border:none; border-top:2px dotted #f00; color:#fff; background-color:#fff; height:1px; width:100%; margin-top:50px;}</style>`
I'm having problems with where to place the right z-index css code.
My dropdown menu is not on top of all the content as you can see here: http://bit.ly/18j63r4
I've tried to add the z-index code everywhere but it just doesn't seem to work for me.
Hope you can help me out!
(I can't access all the css code as I'm using a ecommerce standard platform. The z index code needs to be placed somewhere in the .dropdown or .kolommen css code.
Thanks in advance)
Removing the existing z-index from
#filterContainer .nav {
}
Makes it work...
It's also worth nothing that z-index will only work on positioned elements
'#header_2_inner' for this element add property
{position: relative;
z-index: 9999;}
it will help you
or for
#filterContainer .nav {
font-size: 11px;
position: relative;
z-index: 999;
}
add z-index:2
#filterContainer .nav {
font-size: 11px;
position: relative;
z-index: 2;
}
You've got z-index:999 on your <div class="nav"> inside <div class="product" id="filterContainer">. Simply remove it and drop down menu will be shown on top of it.
Edit:
Since you can't access all of the code (maybe you can override it in you css ?) it is hard to help you. If you can, set z-index:1000 to #header-modules .h-left {
z-index: 1000;
}
I'm currently building my website and I've run into a problem. Here is the webpage.
I want to add 3px underlines to only the links, like this:
The line height of the text is 56pt, so the border-bottom is far too far away from the links. text-decoration: underline is too thin, and way too close.
They need to be about half this distance. As negative padding doesn't exist, how should I go about fixing it?
Now used to this code (This is demo)
Css
.HomeText p a {
color: red;
text-decoration: none;
position: relative;
display: inline-block;
vertical-align: top;
}
.HomeText p a:hover:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-3px;
border-bottom:solid 1px red;
}
Demo LInk
Try adding the following:
display: inline-block;
height: 1.2em;
Haven't tested extensively, but seems to close the gap nicely in modern browsers.
Answer 1: Accept that css has limitations and work round them.
Answer 2: The only way I can thing of doing this is a using a span displaying it is a block and adding a border and padding to the bottom - this process will open up a whole other can of worms though floats blocks inline text etc. So I would go back to answer 1.
did you try this?
a {
border bottom: 3px red;
}
I'm learning a bit of CSS from test and trial, and couldn't find a solution for this particular problem through web searches.
I help a person who's learning English, and she uses a lot of Google Translate on a small screen. I've been able to hide Google's toolbars and the annoying "Download Google Chrome" popup with the following (I'm using Stylish):
.jfk-butterBar.jfk-butterBar-info.jfk-butterBar-shown {
display:none!important;
}
#gb {
display:none!important;
}
#gt-appbar {
display:none!important;
}
The problem is: they are hidden, but the translated website is left on a frame with a space that varies from 70px to 160px on the top. The corresponding piece of code I'm talking about is here:
<div id="contentframe" style="top: 70px; left: 0px;">
And this is the best I could come up with after searching, but doesn't work:
#contentframe {
top: 0px;
}
Thank you!
You need to outweigh the specifity of the inline-style top: 70px; with the !important rule.
#contentframe {
top: 0 !important;
}
I have a page that displays correctly in Chrome, but not Firefox or IE. It seems that an element that has display:none is taking up space & forcing some text to the right.
http://flybysouth.com/faqs/
This is a WordPress site, and I am using a premium theme with my own customization. I have applied the following custom css in an attempt to remove the header-wrapper from the page. I know it's overkill; I must be chasing the wrong element...
#header-wrapper,
#leader,
#leader .margin,
#leader .margin h1 { display:none; margin: 0; padding: 0; width: 0; height: 0; }
Any ideas what is causing the space in front of "What makes it white?" Thanks!
It looks like you might have an uncleared float somewhere above the main content area, try adding clear:both; to #main-col:
#main-col {
clear: both;
margin-top: 20px;
}