My li items are taking up the full width of their text and creating a second line in the instead of breaking downward into the li itself. I've tried the following but it's not really providing that responsive sizing I'm looking to add.
.sub-nav li > a {
width: min-content;
line-height: 1.1em;
}
https://www.harpercollege.edu/academics/index.php
change CSS rule .sub-nav ul to this:
.sub-nav ul {
display: flex;
margin-top: 0;
padding-left: 70px;
margin-bottom: 10px;
height: min-content;
flex-wrap: nowrap;
}
You may want to reduce font size, and use condensed font https://fonts.google.com/?query=condensed
Related
I am trying to have equal spacing between four different li elements, but I end up with this:
HTML:
<ul><li>Inbox</li></li><li>Drafts</li></li><li>Sent</li></li><li>Trash</li></ul>
CSS:
ul li {
width: 25%;
display: inline-block;
text-align: center;
}
I have tested the CSS and it is working as it should. I think the problem is that the li's don't all have the same amount of letters, so you end up with some weird visual effects. My reason for believing this:
(Equal spacing)
My approach with this issue is to center the li on the ul since the ul will naturally be the same width than the parent.
ul {
/* Use flex boxes to align li items */
display: flex;
justify-content: space-around;
/* Remove default padding from major browsers */
padding: 0;
/* Hide the default decorations for li items */
list-style: none;
}
ul > li {
/* Display the elements in one line */
display: inline-block;
}
Check out this JSFiddle to see it working.
Try this
ul {
width:100%;
margin-left: 0;
margin-bottom: 0
}
li {
list-style-type: none;
display: inline-block;
margin-right: 20px;
}
I have following CSS code:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
display: block;
width: 100%;
height: 100%;
}
nav li :hover {
background-color: var(--main-color);
color: white;
}
Which makes elements in my navbar look like this:
But there's actually 4 items, not 6. I'll add some padding in <li>:
But when I hover over the first item, I have this ugly white space from both sides of it. Margin does exactly the same thing. Let's remove margin/padding and set <li> width manually to 120px:
First two items are now formatted somehow acceptably, but items a and b take visually far too much space than necessary. What I aim for would be something like this (made in image editor):
In other words, I'd like my <li> elements to have their width adjusted to their content with extra padding, while child <a> elements still take up 100% of <li> space. Any ideas?
Edit
I've updated updated the JSFiddle that you've posted.
You need to change your a element to not have display:block (should be inline instead). Also, you don't need to specify width and height of 100%. Just make your padding: 15px for the a, and you'll have equal, well-spaced hover padding.
I adapted your code above and put it into a codepen, see here:
http://codepen.io/himmel/pen/BNJZoL
Here is how I changed your CSS:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
padding-left: 15px; ** add padding to both sides
padding-right: 15px;
display: inline;
}
nav li :hover {
background-color: brown;
color: white;
}
Try using table layout
body {margin:0}
nav ul {
padding:0;
margin:0;
width: 100%;
display: table;
}
nav li {
display: table-cell;
text-align: center;
}
nav li a {
background: #fafafa;
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px;/*or whatever*/
}
nav li :hover {
background-color: brown;
color: white;
}
<nav>
<ul>
<li>Item</li>
<li>Very long item</li>
<li>a</li>
<li>b</li>
</ul>
</nav>
As an example take the following unordered list and it's container:
<div class="table-like">
<ul>
<li><span>Table-cells</span></li>
<li><span>play nice</span></li>
<li><span>automatically</span></li>
<li><span>with auto-height/width/stretching and of course, vertical alignment..</span></li>
</ul>
<ul class="row2">
<li><span>but</span></li>
<li><span>do</span></li>
<li><span>they</span></li>
<li><span>stack up (vertically)?</span></li>
</ul>
</div>
With the following CSS:
.table-like {
display: table;
font-variant: small-caps;
width: 100%;
}
.table-like ul {
display: table-row;
}
.table-like ul li {
background-color: #DDD;
border: 1px solid #FFF;
display: table-cell;
overflow: hidden;
padding: .5em 1em;
vertical-align: middle;
width: 25%;
}
.table-like ul li span {
display: block;
max-height: 2.1em;
}
Is there no way to force a row to stack vertically while retaining the benefits of the display:table-cell property (auto-height, vertical alignment, etc.)?
The following CSS might be close to what you need:
.table-like {
font-variant: small-caps;
width: 100%;
}
.table-like ul {
}
.table-like ul li {
background-color: #DDD;
border: 1px solid #FFF;
display: table;
width: 25%;
}
.table-like ul li span {
padding: 0.5em 1.0em;
vertical-align: middle;
display: table-cell;
height: 2.1em;
}
If you want the cells to stack vertically, you need to have one table-cell per row,
that is how tables work.
What I would do is apply display: table to the li elements, which will force them
to be block level and hence start on a separate line.
You can then apply display: table-cell to the li span elements to take advantage
of the vertical-align properties and so on.
Note that if you want a max-height within the table-cell, you will need to add an
inner wrapper element within the <span> elements and apply a fixed or max-height
to an inline-block display type.
Also, for a table-cell, the height value is taken to be a minimum value (min-height
will not do anything).
Note that if you have long non-breaking text lines, the table width will expand to
accommodate the text, see 4th cell of first ul element. You may need a min-width
value on the table li elements depending on your design.
See demo at: http://jsfiddle.net/audetwebdesign/4tZhd/ and image below:
In my main horizontal navigation, I have a container called #main-nav, and buttons in the form of anchor tags within. The anchor tag size won't match up with the #main-nav container, and I can't figure out why.
oh, also, the dropdown menus sit higher on the baseline of the menu than they should a few pixels, I'm not sure if this is related.
I currently have the highlight color and dropdowns the same as the menu bar to disguise the problem, but this isn't optimal. (A code inspector clearly shows the problem)
My site is http://www.darkmatter-designs.com/
Any help would be greatly appreciated, I've run out of ideas.
Use max-width and margin 0 auto to center your ul in nav
#main-nav ul {
/* display: inline-block; */
position: relative;
max-width: 960px;
margin: 0 auto;
}
CSS Centering:
If you just want the anchors to be "centered":
#main-nav ul {
position: relative;
/* display: inline-block; */
max-width: 960px;
margin: 0 auto;
text-align: center;
}
#main-nav ul li {
/* float: left; */
display: inline-block;
}
To fixe the dropdown you can add padding-top to #main-nav ul ul
#main-nav ul ul {
background: #1E344A;
position: absolute;
top: 100%;
z-index: 1;
padding-top: 3px;/*was added*/
}
and since you are using position absolute to ul ul make sure you add position:relative to the parent element like this:
#main-nav ul li {
float: left;
position: relative;/*was added*/
}
I have a list. Each item in the list contains an icon span and text span like so:
<ul id="features">
<li>
<span class="icon"></span>
<span class="text">blah blah blahlrceoahuoa steohuasnoet huntaoheu saoetnhu saoetuhsaoe tuhsaoetnhu saoehtuasoetnhu saou</span>
</li>
</ul>
Using the following CSS
#features { list-style-type: none; }
#features li { overflow: auto;}
#features li span { float: left; }
#features .icon { background: #000; height: 55px; width: 55px; display: inline-block;}
#features .text { margin-left: 24px; display: inline-block; }
I believe this code should produce text which floats next to the icon, and automatically adjusts its width accordingly. However this isn't the case see jsfiddle.
Why isn't the text floating next to the icon?
width: auto will instruct the text span to assume as much width as it requires, based on its content. This is what causes the entire span to wrap when that space is not available.
Ah, trying to make fixed and fluid width live together in harmony... an old problem.
Here's an updated fiddle with the solution: http://jsfiddle.net/dwZaN/11/
#features { list-style-type: none; margin-top: 24px; margin-right: 24px; }
#features li { margin-bottom: 24px; overflow: auto; width: 100%; }
#features li span { }
#features .icon { background: #000; height: 55px; width: 55px; float: left; }
#features .text { padding-left: 75px; display: block; }
Basically...
Float your fixed-width icon
Don't float your fluid-width element, but give it padding-left with enough room to account for your icon and some buffer room (this automatically gives it 100% and subtracts whatever padding-left you specify)
Both elements should be block-level. You don't actually need to specify anything for the icon, but your text span needs to be display: block (or you can just switch to DIV's which are already block-level)
Also, since you specify a right margin in your parent UL, adding width: 100% makes it expand beyond the browser window and creates a horizontal scrollbar. Simply remove it.
You should be using a CSS background in the inner element and floating the LI. You do not need a separate element for the icon.
#features li { float left }
#features li span {
display:block;
background-image: url(...);
background-repeat:no-repeat;
height:25px;
padding-left:30px;
}
See my tutorial: I love lists.
If you want to use a font instead of an image, you can use position:relative, on your LI and add:
li:before {
content: "\25A0"; <--- this is a UTF-8 square
left: -1em;
position: absolute;
top: 0.1em;
}
(adjust your spacing values accordingly)