This is css for an unordered-list with the id "leftmenu"
#leftmenu ul li{
list-style:none;
padding:15px 0 8px 0;
border-bottom:1px dashed white;
float:left;
clear:both;
The problem is the border only goes as far as the text go. see:http://imgur.com/dhx2OKk
I want it to be like that border under "Links"
The problem is that your list-items should be displayed as regular block items. These would always scale to the full width of any container. For a <li> element that is actually the default behavior.
By setting float: left; to the <li> items, alter this behavior. The following code would achieve what you are after (also check the JS fiddle)
* {
margin: 0;
padding: 0;
}
h4 {
border-bottom: 1px solid black;
}
.menu {
width: 200px;
}
.menu>ul {
list-style-type: none;
}
.menu>ul>li {
margin-top:10px;
border-bottom: 1px dotted black;
}
http://jsfiddle.net/fhckxene/
edit: for fun play round with the jsfiddle, for example by adding float: left; or display: inline-block; to the <li> style.
Related
I am having a page which contains set of buttons at the footer(bottom). When I open the page for the first time I get the buttons as below:
Now, sometimes the first three buttons gets hidden and I get the page as :
I am not getting what could go wrong? Interestingly, when I inspect the button and change any property, the buttons get aligned immediately. Strange but true.
Code for li elements:
li
{
position: relative;
top: 7px;
left: 10px;
display: block;
float: left;
margin-right: 10px;
}
Now when I remove the position relative then it does not gets hidden but ya, it reaches the top of the page.
Something Like this
Update : I assume it is because of position:relative, can I change my code without position relative? Or with position:absolute?
Fiddle
Try this css:
.details .action-bottom {
height: 29px;
background: #739DDD;
border: 2px solid #01296E;
border-top: 1px solid #666;
margin: 0px 0 0 0;
}
.details .action-bottom ul {
list-style: none;
margin:0;
padding:0;
}
.details .action-bottom li {
display: inline-block !important;
float: left !important;
padding: 6px !important;
position: inherit;
}
Update Live
How do you fix the grey border line so that it comes right down to the bottom of the green highlight instead of cutting off halfway?
I have provided my code below at codepen.
Thanks in advance for your help :)
html
<div id="status_bar">
<div class="admin_status_box">
<ul>
View & Delete posts
View & Delete members
</ul>
</div>
</div>
css
#status_bar {
width: 700px;
height: 60px;
background: #efefef;
float: left;
}
.admin_status_box {
background: #efefef;
height: 60px;
border-right: 1px solid #d6d6d6;
}
.admin_status_box ul {
margin: 0px;
padding: 0;
}
.admin_status_box li {
text-decoration: none;
}
.admin_status_box a {
text-decoration: none;
padding: 0 30px 0 30px;
text-align: center;
height: 60px;
float: left;
line-height: 60px;
border-right: 1px solid #d6d6d6;
}
.admin_status_box a.active {
border-bottom: 10px solid #619e4c;
}
.admin_status_box a:hover {
background: #fff;
}
First, your HTML should be valid by actually using <li> tags. Next, you need to know, that borders meet at an angle and the corners are interpolated. A nice example is
div.test {
height: 200px;
width: 300px;
border-radius: 40px;
border-width: 20px 0 5px 0;
border-color: #000;
border-style: solid;
}
So, in order to fix your problem, you need to assign the borders to different elements. If you insert the <li> tags you have two elements to work with. See the demo for the following code.
.admin_status_box li {
border-right: 1px solid #d6d6d6;
}
.admin_status_box a.active {
border-bottom: 10px solid #619e4c;
}
You need li elements to be the first child of a ul element. If you put each a element inside of a li element, you can then set the border on the li element and the border have the desired result. After this is done, make sure you remove the 1px border from .admin_status_box
It may take a bit of CSS to get them positioned exactly how you would want them.
See this edited codepen
EDIT Typo
You will have to add a separate div to act as the bar. You can't tell the side border to shorten because that's the behavior it's set. Best bet is to use the div you have commented out as green_box.
I just corrected the html, displayed the li's inline-block and added the border bottom to the li's instead of the link. http://codepen.io/anon/pen/hvcBI
For a website project, we have a simple navigation bar where each link is outlined in gray, and hovering outlines it in black.
I got it working and my code is here: http://jsfiddle.net/BpjK8/ -- although I admit it's a little dirty and 'hacky' in a way. (You can see when hovering link A, the border of link B beside it is visible, making it somewhat distracting.)
My question is: can this be done in a better way without using display: table and display: table-cell? It would be nice if the answer involved display: inline or float: left but I can't get the border effect working properly.
Demo Fiddle
Of course! Add:
body{
text-align:center; /* centre the content */
}
Then set your ul to display:inline-block to allow it to be subject to the centering, and give your li:
float:left;
display:block;
So they display one after another correctly.
You may not want to centre your entire document however, so instead you may want to wrap the ul in a div with text-align:center; set.
Try this css:
ul {
margin: 50px auto;
list-style:none;
}
li {
display:block;
float:left;
border: 1px solid #CECECE;
border-right: 1px solid #fff;
padding: 2px;
}
li:last-child {
display:block;
float:left;
border: 1px solid #CECECE;
border-right: 1px solid #CECECE;
padding: 2px;
}
li:hover {
border: 2px solid #000;
position: relative;
z-index: 9999;
padding: 1px;
}
a {
position: relative;
text-decoration: none;
line-height: 40px;
padding: 20px;
color: #000;
}
I have a ul wrapped in a .box. I have set the bottom border for the .box. The ul items also have bottom border, I want the li border to place over the .box border so that the .box border is no more visible. I'm trying to do that by setting margin-bottom: -1px but doesn't work.
Please see attached image:
Here's what I'm trying:
HTML:
<div class="box">
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</div>
CSS:
.box{
border-bottom: 1px solid blue;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
background: green;
border: 1px solid red;
}
Demo:
http://jsfiddle.net/b9H2j/
Problem
You basically want the li to overflow its .box parent, but .box is set with overflow:hidden;.
Solution
A possible solution can be to first set the li with position:relative; and then make it overflow with bottom:-1px;. Then remove overflow:hidden; from the .box container and find an alternative way to overcome the clear bug.
For example:
.box {
display:table; /* overcome the clear bug */
width:100%;
border-bottom: 1px solid blue;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
position:relative;
bottom:-1px;
float: left;
background: green;
border: 1px solid red;
}
See jsFiddle demo
Have you considered changing your HTML structure? It seems somewhat to me "unnatural" to do what you're trying to achieve with your current HTMl. Anyhow, here's another solution. It requires you to set a height for your list items though.
You could do something like this:
HTML
<div class="box">
<ul>
<li class="left">Hello</li>
<li class="left">World</li>
<li class="add-bottom-border">something</li>
</ul>
</div>
CSS
.box{
display:table; /* overcome the clear bug */
width:100%;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
height:20px;
background: green;
border: 1px solid red;
}
.add-bottom-border {
overflow:auto;
border-bottom: 1px solid blue;
}
.left {
float:left;
}
JSfiddle
There's en explanation of the reasoning behind overflow:auto; here.
I have a bunch of different CSS edits for different tags within the same div and want to know if there is a way to group them under one div? This is what I have right now:
#nav{
margin: 8px auto 0px auto;
border: 1px solid black;
border-radius: 5px;
box-shadow: 3px 3px rgba(0,0,0,0,0.4);
}
#nav li{
display: inline;
padding: 10px;
}
#nav ul{
list-style-type: none;
padding: 0px;
margin: 10px 5px auto 5px;
height: 20px;
line-height: 10px
}
#nav a{
text-decoration: none;
}
I tried putting them within the braces of a single #nav, but it did not work.
If I interpret your question correctly, that shortcut is impossible in pure CSS. You may want to look into SASS or LESS, which are metalanguages of CSS, meaning that valid CSS is a subset of valid SASS/LESS. Both of these support constructs where
#nav{
thing: example;
.child { more: styles; }
.extra { style: great; }
}
which would be interpreted into CSS as
#nav {
thing: example; }
#nav .child { more: styles;}
#nav .extra { style: great;}