I have a menu in an unordered list - I need to make each <li> the height of it's parent. I know this is pretty basic, I am not sure what I am doing wrong.
<div class="menu">
<ul>
<li class="current_page_item">
Home
</li>
<li class="page_item page-item-2">
Sample Page
</li>
</ul>
</div>
And I have the following CSS:
.main-navigation ul {
float: left;
list-style: outside none none;
margin: 0;
padding-left: 16px;
padding-right: 16px;
}
I don't have any CSS rules for the div that contains it.
The above is contained in a tag and I don't have any height set for it.
It is the height of an image contained within it.
The actual website is: http://notthedroidyouarelookingfor.com/
I need to make each <li> the height of it's parent so I can set a top border when the link is active.
The height of a block element defaults to the height of the block's
content. So, given something like this:
<div id="outer">
<div id="inner">
<p>Where is pancakes house?</p>
</div>
</div>
#inner will grow to be tall enough to contain the paragraph and
#outer will grow to be tall enough to contain #inner.
When you specify the height or width as a percentage, that's a
percentage with respect to the element's parent. In the case of width,
all block elements are, unless specified otherwise, as wide as their
parent all the way back up to <html>; so, the width of a block
element is independent of its content and saying width: 50% yields a
well defined number of pixels.
However, the height of a block element depends on its content
unless you specify a specific height. So there is feedback between the
parent and child where height is concerned and saying height: 50%
doesn't yield a well defined value unless you break the feedback loop
by giving the parent element a specific height.
The credits of the above are for #muistooshort: https://stackoverflow.com/a/5658062/4966662
I guess you want set the height of each li to vertical align the menu, if I'm right, here you have a workaround using flexbox:
body{
margin: 0;
}
.main-navigation {
background-color: #fff;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
margin-bottom: 4px;
}
#middleNavigation {
margin-left: auto;
margin-right: auto;
width: 960px;
display: flex;
}
.main-navigation a {
font-size: 1.4rem;
font-size: 14px;
font-weight: normal;
margin-left: 1em;
text-decoration: none;
padding: 0 0.8em;
word-spacing: 4px;
font-family: Arial;
color: #000;
border-top: 4px solid transparent;
display: flex;
align-items: center;
}
.main-navigation a:hover {
border-top-color: #000;
}
<nav role="navigation" class="site-navigation main-navigation">
<div id="middleNavigation">
<img src="http://notthedroidyouarelookingfor.com/wp-content/themes/striker/images/NTDYALF-Logo.png" alt="" id="NTDYALFLogo">
<span>Home</span>
<span>Sample Page</span>
</div>
</nav>
<p>Hover the links to see the border</p>
Here a working JSFiddle to play with
You need to set height manually or through script, I believe this cannot achieved in css.
Also the parent 'div.menu' is not the height of logo image because the ul is float:left. You actually need to apply float:left to div.main just in case to make sure you dont face any issues further on that.
Related
I'm working on a pretty simple website right now that will serve as a sort of dictionary for some of my HTML and CSS work. I have a div for CSS terms on the page. When I shrink the browser, everything else on the page shrinks but this div moves to the far right and becomes less wide. The height stays the same but the width of the div becomes thin. The words in the div flow out and this causes there to be a scrollbar.
At the moment, my HTML looks like this:
.terms {
list-style-position: inside;
background-color: powderblue;
box-shadow: 10px 10px 15px dimgray;
padding: 20px;
margin-left: 370px;
margin-right: 370px;
}
<div class="terms">
<h2> CSS PROPERTIES: </h2>
<ul>
<li> <span class="def"> text-align </span> - left, center, right </li>
</ul>
</div>
The other elements on my page are paragraphs and they all resize. I have 2 other divs on the page for side comments but those resize with the browser too. In case it helps, this is the CSS for the div that actually resizes correctly:
.notes{
text-align: center;
padding: 20px;
font-weight: bold;
border: 10px dotted navy;
display: inline-block;
}
Does anyone have any idea why this particular div might not resize with the browser?
Issue is you have added following styles in your div:
.terms {
list-style-position: inside;
background-color: powderblue;
box-shadow: 10px 10px 15px dimgray;
padding: 20px;
/*Removing the margins from left and right
margin-left: 370px;
margin-right: 370px;*/
}
Removing theses styles will solve your problem
You can also try with max-width
.terms {
list-style-position: inside;
background-color: powderblue;
box-shadow: 10px 10px 15px dimgrey;
padding: 20px;
max-width: 1160px;
margin: 0 auto;
}
.notes {
text-align: center;
padding: 20px;
font-weight: bold;
border: 10px dotted navy;
display: inline-block;
}
<div class="terms">
<h2> CSS PROPERTIES: </h2>
<ul>
<li> <span class="def"> text-align </span> - left, center, right </li>
</ul>
</div>
Try using % or vh instead of px in your css.
A div with auto resize when changing window width\height
May not exactly match your issue but I think it is relevant to yours.I hope this helps.
You can see remove margin left and right ,and add ul tags.
I was checking how Github display the below menu:
If you notice, each menu item is given an equal width. In CSS, we should give it any percentage value, what's the reason behind that? notice that the parent div is not given display: table property.
div {
border: 1px solid #000;
border-radius: 4px;
}
div ul {
padding: 0;
margin: 0;
}
div ul li {
display: table-cell;
width: 1%;
text-align: center;
border-right: 1px solid #000;
padding: 10px 0;
}
div ul li:last-child {
border-right: 0;
}
<div>
<ul>
<li>Commits
</li>
<li>Branch
</li>
<li>Contribution
</li>
<li>anything
</li>
</ul>
</div>
What's the reason behind the percentage width?
This has to do with how automatic table layout works. In particular:
A percentage value for a column width is relative to the table width. If the table has 'width: auto', a percentage represents a constraint on the column's width, which a UA should try to satisfy. (Obviously, this is not always possible: if the column's width is '110%', the constraint cannot be satisfied.)
In your case, you're setting a minuscule percentage width on every table-cell element. But the browser needs to ensure that the table-cells fill up the width of the table (which itself is as wide as its containing block), so it has to expand the cells to occupy as much space within the table as possible.
The reason why this results in approximately equal-width cells is because the percentage value is equal for all of them. If, for example, you set a slightly larger width for one of the cells, you'll see that it grows wider and the other cells become narrower to accommodate:
div {
border: 1px solid #000;
border-radius: 4px;
}
div ul {
padding: 0;
margin: 0;
}
div ul li {
display: table-cell;
width: 1%;
text-align: center;
border-right: 1px solid #000;
padding: 10px 0;
}
div ul li:first-child {
width: 3%;
}
div ul li:last-child {
border-right: 0;
}
<div>
<ul>
<li>Commits
</li>
<li>Branch
</li>
<li>Contribution
</li>
<li>anything
</li>
</ul>
</div>
However, note that there is a slight difference because some cells have longer content than others, and the length of this content is accounted for when calculating the cell widths.
The reason why a value as small as 1% is used is so that you can continue to add cells and the browser will still try to distribute the available width as evenly as possible. You're essentially telling the cells that they don't need to be a certain width at minimum so you can add away (although technically, 1% is still something).
The fact that no elements are assigned display: table is inconsequential, because an anonymous table wrapper will be generated around the table-cells so that they can render correctly. This anonymous table wrapper functions exactly the same as an unstyled element with display: table, which means the table width is auto for the purposes of calculating percentage cell widths.
This is something called the 1% width table hack.
This is because the table-cell inherits it's width from the parent div, allowing you to specify a related percentage of the cell width.
Here is a working demo on CodePen that you can play with and examine further.
http://codepen.io/ld0rman/pen/FCiLh
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
CSS:
ul {
list-style-type: none;
margin: 100px auto;
width: 80%;
}
li {
display: table-cell;
width: 1%;
text-align: center;
}
a {
display: block;
border: 1px solid black;
padding: 25px;
text-decoration: none;
color: white;
text-transform: uppercase;
font-weight: bold;
background: grey;
&:hover {
text-decoration: none;
color: yellow;
background: darken(grey, 10%);
}
}
As you can see, it is coded similarly to your github example. Any more questions, ask away!
I have the following HTML:
<div class="columns">
<ul class="controls-buttons">
<li><a data-href="/xx" id="btn-1" Topic 50.5">1</a></li>
...
<li><a data-href="/yy" id="btn-2" Topic 50.5">2</a></li>
</ul>
</div>
CSS:
ul.controls-buttons {
float: right;
}
li {
height: 1.8em !important;
margin-left: 0.7em !important;
padding: 0.333em 0.29em !important;
}
ul.controls-buttons li {
display: block;
float: left;
margin: -1px 0 -1px 0.5em;
line-height: 1.333em;
padding: 0.333em 0.25em;
}
There are approximately 100 buttons and they flow outside the boundaries of the enclosing <div class="columns"
Is there a way that I can make the <ul> occupy space so the <div> expands to enclose it ?
Add <div class="columns" style="overflow: hidden;"> then it will occupy the same space as the float inside of it.
i think overflow:hidden; in your div.column will solve your probem
for more knowledge :: SOURCE
overflow: hidden; This value indicates that the content is clipped and that no scrolling
user interface should be provided to view the content outside the
clipping region.
If you didn't, you should float the div.
If you float something in the inner of a div but not the div itself, this can cause problems with overlapping. In your case that the list is higher than the div
This CSS works:
ul.controls-buttons {
float: right;
}
li {
height: 1.8em !important;
margin-left: 0.7em !important;
padding: 0.333em 0.29em !important;
}
ul.controls-buttons li {
display: block;
float: left;
margin: -1px 0 -1px 0.5em;
line-height: 1.333em;
padding: 0.333em 0.25em;
width:100%
}
I have the following mark up:
<ul data-role="listview" data-inset="true" class="stuff site-content lists">
<li>
<div class="nearby"> 20 </div>
<h1> name</h1>
</li>
</ul>
css is:
.nearby{width: 85px;
height: auto;
float: left;
margin-right: 10px;
font-size: 26px;
text-align: center;
padding: 15px 0;
border: 2px #c1c1c1 solid;
background: #fafafa;
}
li{padding: .7em 15px;
display: block;
}
Unfortunately, the div doesn't sit nicely in the middle as it is too tall. Anyway, the li item could also increase in height so that its padding is dependent on the div rather than the h1?
You will have to add the following for it to work:
li{overflow:hidden;}
When setting the parent of a floated element to overflow:hidden; you force it to wrap the entire floated content. This is a very useful technique and it is used alot.
set float:left for ul and li both i always have this problem try it
I have following problem:
I have div containing other elements and I try to make its width dependent from the content. I also restrict maximum width of this div. I use min-width and max-width in CSS, but it seems that min-width is not working. The width of div is always the max-width value, no matter what the content is.
Example:
I'd like to have the white div (that is main div, I was talking about) strictly around the form that is in it, without empty spaces on the left and right side. I gave the form style max-width:500px to show that even if content is small, the main div stays the same.
HTML
<div class="gInnerBox sInnerBoxMain">
<form style="max-width:500px; margin-left: auto; margin-right: auto">
<div id='content'>
<!-- CONTENT -->
</div>
</form>
</div>
CSS
.gInnerBox{
position: relative;
background-color: #fff;
opacity: 0.9;
padding: 10px 10px 10px 10px;
box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
-moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
-webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
border: 1px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.sInnerBoxMain{
max-width: 1000px;
min-width: 500px;
margin-left: auto;
margin-right: auto;
top: 50px;
}
(source: wstaw.org)
By default, a block-level element will expand to fill as much width as possible. So its width is basically "100%" (sort of) and you're saying a maximum of 1000px, so it's expanding to the maximum of 1000px. The minimum width is still being achieved (it's at least 500px). Try setting display: inline-block on the element and see if that helps you out any. This should make it only expand as far as its content while still paying attention to the minimum and maximum widths. You may have to add a breaker <br /> after to make the rest of your content adapts to it being inline.