How to put a border under OL Li's - html

I'm trying to figure out why the border extends out so much as well as doesn't put start at the number.
http://kansasoutlawwrestling.com/
mockup:
http://kansasoutlawwrestling.com/assets/images/wrestling2.jpg
<div id="sidebar_left">
<img src="assets/images/ad.png" alt="Spotlight Wrestler"/>
<div id="top5">
<ol>
<li>Joe Smith</li>
<li>John Michaels</li>
<li>Steve Hart</li>
<li>Bret Hogan</li>
<li>Undertaker</li>
</ol>
</div>
</div>
#sidebar_left{width:300px;float:left;}
#sidebar_left img {}
#top5 ol li {padding:11px 0 11px 0;border-bottom:solid 1px gray;}
#top5 ol li:last-child{border:none;}

Will the LI's be links? Try making the text a link or just a span and then put the border on that element. Add padding to the left/right so it doesn't cling to the edges of the text. f you want the lines to be all the same width, give the parent ul a width.
See my mockup: http://jsfiddle.net/2kJJE/1/

The border is going to be the size of the width of the li which is going to be the width of the ul, which as a block level element is going to be the inner width of its container (width - padding).
The numbers/bullets will be rendered depending on the list-style-position. If that property is set to outside then they will render outside the li. Usually that outside space is accounted for in the padding of the ol/'ul. If set to inside then they will render inside theli` however text will wrap as normal so your content for each item wont be indented from the number/bullet.

Related

Why a nested span inside a div does not follow line-height rule for that div?

I have a div with font size of 88 and line height of 88. The text inside the div has a height taller than 88. Why is this?
<div style="font-size:88px;line-height:88px;">I need <span sytle="color:red;">videos</span></div>
If you open up the element inspector and highlight the parent div, it is 88px tall. However if you highlight the text "I need" and the nested span, the height is 101px. This remains true even if you set the line-height on the span itself:
<div style="font-size:88px;line-height:88px;">
I need <span style="font-size:88px;line-height:88px;color:red;">videos</span>
</div>
See attached repl: https://repl.it/#teeej/ReliablePunctualRam
<span> is, by default, an inline element.
If you expect it to behave like an inline block element, you have to give it a display value of inline-block and it will have a height of exactly 88px:
div > span {
display: inline-block;
background-color: rgba(255,0,0,.1);
}
<div style="font-size:88px;line-height:88px;">
I need <span style="font-size:88px;line-height:88px;">videos</span>
</div>
For a better understanding of the implications of display property, I recommend the Candidate Recommendation. And here's the current (official) Recommendation.

Strange behavior of an input html element with display: block

I'm trying to make some html form with help of bootstrap. Some of my inputs must have no gap from left or right side. But bootstrap .col-XX-Y blocks have gutter via paddings from left and right. So my idea was to use negative margin for my input elements, and display: block. And here I'm stuck.
Please refer to this codepen example. I was faced with several strange things for me:
Why input with display: block doesn't fill all it's parent
container, like div does? It fills the container only with: width:100%; (comment width for red-bordered input in codepen example)
Why if I'm apply negative margin-left to compensate parent container's
left padding, my input shifts to the left, but keeps it's original width (like if left css property was used). Doesn't it have to behave
like a block element (e.g. div): shifts to the left and keep
filling of all width of it's parent, excluding right padding?
When I'm apply negative right margin for my input to compensate parent's right padding, then nothing happens (look my example, compare orange div
with red input). Why? What about of a behavior like block element?
If this is normal behavior, can you give me some link to html standard docs with explanations of that.
If you don't want the padding on a grid parent element to effect its children, surround all its children elements in a block element with a class of row.
Bootstrap input elements are meant to span the whole width of there parent elements even without display block style attribute.
<div class="col-md-12">
<div class="row"> <!--this is what you need -->
</div>
</div>
full example code
<div class="col-md-12">
<div class="row">
<input type="text" placeholder='I\'m some damned input' />
</div>
<div class="row">
<div>I am some div</div>
</div>
</div>
Form elements do not behave the same way as regular block level elements. When you display an <input> field as block it will not fill the full width.
For this reason you need to make give the element width: 100%. This is how Bootstrap styles form elements.
Like any other block element, giving it a width of 100% will allow it to fill the width of its container. When you apply a negative margin-left, the width will still be the same (100% = containers width) which will cause the gap to appear.
I would suggest wrapping the <input> field in a <div> and apply the negative margin to that instead:
.wrap {
margin: 0 -20px;
}
.wrap input {
width: 100%;
display: block;
}

float vs. inline-block changes margin and parent height

So I have been trying to wrap my mind around this and cant figure it out why.
Note: Margin and padding is 0.
The 1st example is
<div> <!-- Gray Box -->
<div> <!-- Purple Box -->
</div>
</div>
I have two images - One is float, the other is inline-block.
The height of the div is shown by the gray color.
float: left;
display: inline-block;
The 2nd example is
<div>
<ul>
<a href = "#">
<li>
<img src = "...">
</li>
</a>
</ul>
</div>
Again, left and inline-block do different things
float: left;
display: inline-block;
Bottom Line
Any suggestions beside the question is welcome.
I don't know why margin / padding is changing and why div size matters by float and display. Thanks
There are 2 problems here.
1) Like someone mentioned in the comments, inline block takes space into account, meaning on the parent div you should have:
font-size:0;
2) Floating takes the element out of the document flow, meaning the parent will expand only past the last non floated child element. To fix this you should put a clearfix class in your css and add it to the parent of the floated element(s).
.clearfix::after{
content:'';
display:block;
clear:both;
}
So once you've done this your first example should look like this:
<div class="clearfix"> <!-- Gray Box -->
<div style="float:left"> <!-- Purple Box -->
</div>
</div>
Now the gray box should expand past the purple box;
As a matter of consistency i don't think you should mix inline-block with floating. One, it won't work on the same element and 2, they are designed for different things.

Why is there a gap between image and navigation bar

Hi I'm having some trouble removing a small gap between an image and my navigation bar. I've honestly tried just about everything i can think of. Setting inline-blocks on my ul and li level, and using text-align: left don't seem to be moving the hyperlinks to the left-most side of the div, and from there I'm not to sure what should be done. There is a padding, but it shouldn't be causing that much of a gap.
Here is the html code:
<div id = "header">
<img src ="img.png"/>
<div id ="nav_bar">
<ul class="nav">
<li class= "nav">Home</li>
<li class= "nav">Our Products</li>
<li class= "nav">Categories</li>
<li class= "nav">About Us</li>
<li class= "nav">Contact Us</li>
</ul>
</div>
</div>
Here's a jfiddle describing what I'm talking about.
http://jsfiddle.net/37VZb/1/
To clarify the gap I'm talking about is between the right of the image and the left most nav bar element.
That's because of a space character between inline(-block) elements. This could be fixed by commenting that space out this way:
<img src ="http://www.leapcms.com/images/100pixels1.gif"/><!--
--><div id ="nav_bar"> ...
JSFiddle Demo.
Similar topic on SO:
How to remove the space between inline-block elements?
And a good reference:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Update
The remaining space belongs to the user agent applied style on the <ul> element.
Web browsers usually apply some padding on the list elements. To remove that set padding: 0; as follows:
ul.nav { padding : 0; }
Here is the Updated Fiddle.
is this what you mean? You can target the nav class on your ul and adjust the default margins that are being assigned
ul.nav{
margin: 10px 0;
}
JSFIDDLE
Your gap is a white space like you find in between words since both element are set as inline boxes. In your CSS you set as well somme padding to ul and a , they both are there.
http://jsfiddle.net/37VZb/8/
.nav_bar, .nav{
padding:0;
display:inline-block;
}
To get rid of it:
1) do not indent your code and get closing and opening brackets of element touch each other
2) add a CSScomment in between to swallow that white-space
3) set font-size to 0 (0.01px for IE) to parent of these inline-boxes and reset it ot back to 1rem (and or px/pt) for img (alt) and nav_bar
negative margin or negative letter-spacing are not to be used, it is not reliable and not meant to care about this

Simple HTML / CSS box model confusion

Using this really simple html / css (http://jsfiddle.net/XXzTj/)
<div style="background-color:red;">
<div style="margin:12px; background:blue;">hello</div>
</div>
The margin is spaced 12px all round correctly, but I was expecting the red background of the parent element to be shown in the top and bottom 12px spaces, instead its just 'blank space'.
Am I going mad or have I done something wrong?
try this --
<div style="background-color:red;height:auto;overflow:hidden;">
<div style="margin:12px; background:blue;">hello</div>
</div>
http://jsfiddle.net/XXzTj/1/
The child div is forcing the parent div to be rendered offset from its surroundings because you are using the margin property. Since the parent div has no content the browser has no reason to apply styling above or below the child div.
In order to honour the margin properties of the child div, however, which does have content, the parent div is rendered with its background either side of the content.
To have the browser render it in the way I imagine you expect, you would need to apply the padding style. Again, that's because the parent div has no content. Padding forces its styles to be rendered within the area because padding essentially acts like space that content would fill up.
It's collapsing margins in action. Either use padding for parent element instead of margin for child one, or create new context by setting position: relative, overflow: auto/scroll/hidden, or add generated content (:before and :after pseudoelements) with display: block to parent element to prevent margin collapsing.
Not too sure why that isnt working to be honest but this does work:
<div style="background-color:red; padding:12px;">
<div style="background:blue;">hello</div>
</div>
​