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
Related
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.
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
I'm trying to follow this answer to left align numbers and text in an ordered list for a navigation menu:
Left align both list numbers and text
Except I have a border around the ordered list and I'd like the list to fit within the border but still be aligned properly. My problem is if the li content is long, it will overflow/overlap into the li item below it. For instance, this is my fiddler version of it:
http://jsfiddle.net/jimmyzaas/36ftkLLq/5/
code:
.fixedwidth{
width: 200px;
background-color: #eee;
}
.dinosaurs {
list-style-position: inside;
margin: 0;
padding: 0;
border: 1px solid #ccc;
width: auto;
}
.dinosaurs li{
position: relative;
border-bottom: 1px solid #ccc;
padding: 3px;
}
.dinosaurs li a {
position: absolute;
left: 30px;
}
How can I have the li auto adjust height to a, without overlapping each other while using absolute positioning? Any suggestions? I can set a fixed height for the li but that would make all other li content unnecessarily high.
.dinosaurs li {
position: relative;
border-bottom: 1px solid #ccc;
padding: 3px;
overflow-x: hidden;
//overflow-x: auto;
}
You can use overflow-x: hidden; or overflow-x: auto;
auto will cause scroll bars to appear while hidden just hides the overflow.
I am just getting back into coding and I would like to know what is the best method for adding heigh to my btn.
Here is the code -
Padding method
.nav-main li a {
display: block;
padding: 70px 10px 70px 10px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
Line-height method
.nav-main li a {
display: block;
padding: 0 10px 0 10px;
line-height: 150px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
I like to use line-height because it positions the baseline correctly to make the text appear in the middle of the element (whereas with padding it may be off-centre one way or the other based on the font)
Of course, this relies on you using a pixel value for line-height (as you are doing in your question) - using a numeric value like 1.5 may produce different results depending on the font.
I personally use padding as it gives me more control across browsers, as line height can vary on which font you are using, along with what fonts are installed/not installed on the clients' browser.
.link {
text-decoration: none;
color: aqua;
border: 2px solid aqua;
margin: 30px auto;
display: block;
width: 160px;
height: 40px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.link::before {
content: attr(data-text);
position: absolute;
width: 100%;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 0.5s;
}
You will show the difference between the padding and line height
when you use pseudo element (before and aftere) =>
with line height the pseudo element take the same height of his parent
with padding the pseudo element do not take the height of his parent
I just need a little help with my CSS:
I As you can see in here http://jsfiddle.net/5crwu/ I have some space between span and ul elements, and I can't find how to lift ul up, closer to the span. I thought margin: 0; will do this, but looks like I'm missing something.
.app-technologies {
width: 200px;
padding-left: 10px;
border: 1px solid black;
}
.app-technologies span {
position: relative;
display: block;
left: 0;
font-size: 17px;
margin: 0;
border: 1px solid black;
}
.app-technologies ul{
list-style: circle;
padding-left: 18px;
margin-top: 0;
border: 1px solid black;
}
If you don't want to remove the <br>, you can give your and NEGATIVE margin. It would be margin:0px 0px -20px 0px;
The negative bottom margin on the span will pull it up.
I just removed the BR after the SPAN, and the "position: relative" from the span styledef. No more space-between.