I'm trying to do a tab header, its a list of the titles, sometimes the titles are too long and has "-" in between. So to save space I add br to breakline.
1/The problem is the distance up & down between the "-" symbols is too big, is there any way I can fix that?
is this a correct way to do it by set br tag or should I set max-width for each li for the breakline?
This is my codepen
<div>
<ul>
<li>Real Estate, <br> Building House</li>
<li>Distribution <br>–<br> Manufacturing</li>
<li>Media <br>–<br> Broadway theater</li>
<li>Singer <br>–<br> dancer</li>
<li>Real Estate</li>
<li>Construction</li>
</ul>
div {width: 80%; margin: 0 auto;}
ul {
list-style: none;
/* display: table; */
width: 100%;
padding: 0;
margin: 0;
}
ul li {
position: relative;
font-size: 1.4rem;
/* display: table-cell; */
color: blue;
text-align: center;
display: inline-block;
margin-right: 20px;
}
Hope this helps you:
ul li {
font-size: 1.4rem;
color: red;
max-width: 120px;
padding: 10px;
vertical-align: middle;
text-align: center;
/* padding: 0 5px; */
display: inline-block;
margin-right: 14px;
}
Updated codepen
Related
I tried to make a responsive header for my website, it's all ok, but i can not set the margins of the links to 0. You cand see in the image: https://imgur.com/s5EzL6n
What i want to achieve is to make all that grey background 100% width.
I followed this youtube video: https://www.youtube.com/watch?v=lYw-FE60Dws
I probably set some things wrong, i am sure, but i am a beginner.
HTML:
<header>
<div class="container">
<div id="branding">
<img src="logo.png">
<a class="toggle">Meniu</a>
</div>
<nav>
<ul class="active">
<li class="current">Acasă</li>
<li>Despre</li>
<li>Servicii</li>
<li>Proiecte</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
CSS:
/* responsive header*/
.toggle{
display: none;
position: absolute;
right: 10px;
top: 26px;
padding: 5px;
cursor: pointer;
text-decoration: none;
}
#media (max-width: 940px){
.toggle{
display: block;
}
header .toggle{
padding: 0 0;
font-size: 18px;
}
header ul li{
display: block;
width: 100%;
background-color: grey;
}
header ul.active{
display: block;
}
header ul li a{
display: block;
text-align: center;
}
header nav{
margin: 0;
width: 100%;
}
header ul li{
width: 100%;
}
}
/*normal page*/
header a{
color: #fcfcfc;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding-right: 25px;
}
header li{
float: left;
display: inline;
padding: 0 20px 0px 20px;
}
header #branding{
float: left;
height: 90px;
margin-left: 35px;
}
header a{
color: #fcfcfc;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding-right: 25px;
}
there is a default padding for ul, you have to remove it when you don't need it. Just add 0px to the ul and you will have a 100% div
Try to use css box models to solve such cases
https://www.youtube.com/watch?v=xF0dhepbzD8
Two of the link buttons in my nav have long-ish names, and they're text-wrapping and becoming two lines tall even though (as far as I can tell) there's nothing stopping them or the nav from growing wider. Have I just missed something?
The code is quite long, so you'll probably be happier viewing the codepen than reading it here. It's so long because I'm afraid something I've overlooked in my global styling or my media query changes is to blame for this bug.
EDIT: This one was an easy answer. I misunderstood selector precedence. I thought media queries took precedence over everything (except inline). So I didn't realize the nav a rule in my media query was not overwriting the nav > section > a in my base CSS. A good lesson about always respecting CSS selector precedence.
HTML
<section>
<nav>
<a id="NSFW_deactivateFilter" onClick="worksafeOff()" href="#">Worksafe Mode: On</a>
<h2 onClick="showMenu()">Category Filters</h2>
<div></div>
<section id="nav_Orientation">
<a id="Horizontals" href="#">Horizontals</a>
<a id="Verticals" href="#">Verticals</a>
</section>
<div></div>
<section id="nav_Category">
<a id="Biltmore" href="#">Biltmore</a>
<a id="Commercial" href="#">Commercial / Product</a>
<a id="Fashion" href="#">Fashion & Glamour</a>
<a id="Invocation" href="#">Invocation</a>
<a id="NewOrleans" href="#">New Orleans</a>
</section>
</nav>
</section>
CSS
/** GLOBAL **/
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
color: inherit;
font-size: 16px;
font-style: inherit;
font-weight: 400;
line-height: 1em;
margin: 0 auto;
padding: 0;
position: relative;
text-align: center;
text-decoration: none;
z-index: 1;
}
a {
text-decoration: underline;
}
body {
background-color: #444;
color: #ccc;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-style: normal;
}
body > section {
background-color: #333;
width: 100%;
max-width: 1440px;
}
/** NAV **/
nav {
align-items: center;
background-color: #222;
display: flex;
flex-flow: column nowrap;
margin-bottom: 10px;
width: 95%;
max-width: 480px;
}
nav a, nav > h2 {
border: 1px solid #666;
margin: 0 0 5px 0;
padding: 5px;
}
nav a {
text-decoration: none;
}
nav > a, nav > h2 {
width: 100%;
}
nav > a {
background-color: #666;
}
nav > div {
display: none;
}
nav > section {
align-items: center;
display: none;
flex-flow: row wrap;
justify-content: space-between;
margin: 0;
width: 95%;
}
nav > section.nav {
display: flex;
}
nav > section > a {
display: inline-block;
width: 48%;
}
/** MEDIA QUERIES **/
#media (min-width: 1000px) {
nav {
display: inline-flex;
flex-flow: row nowrap;
width: auto;
max-width: none;
}
nav a {
margin: 0 5px;
width: auto;
}
nav > h2 {
display: none;
}
nav > div {
background-color: #666;
display: block;
height: 20px;
margin: 0 5px;
width:1px;
}
nav > section {
display: flex;
flex-flow: row nowrap;
width: auto;
}
}
Remove width: 48%; rule from nav > section > a.
See codepen.
i am trying to make a responsive navigation bar with these 4 elements. however, if i drag the browserwindow to a certrain point it starts placing one of the 4 below the rest. but i dont know what i'm doing wrong.
The HTML:
<div id="nav">
<ul>
<li class="blue">Home</li>
<li class="blue">Trailer</li>
<li class="red">Gallery</li>
<li clas="red">Contact Us</li>
</ul>
</div>
The CSS:
#nav {
width: 100%;
background-color:transparant;
}
#nav ul {
width: 85%;
max-width: 1200px;
padding: 0;
margin: 0 auto;
list-style: none;
text-align: center;
}
#nav ul li {
display: inline-table;
width: 24%;
padding: 4px;
background-color:#242424;
border-radius: 5px;
}
#nav ul li a {
color:white;
text-decoration: none;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
display: inline-block;
border-radius: 5px;
}
You are maybe having problems with your padding.
For that, add the box-sizing property in your lis and the padding will be included in the width of the element, like:
#nav ul li {
display: inline-table;
width: 24%;
padding: 4px;
background-color:#242424;
border-radius: 5px;
box-sizing: border-box;
}
Fiddle: http://jsfiddle.net/begyu5v3/
Info: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
And there's those undesirable white spaces between your lis. In this link, there are some ways to avoid this problem, like font-size:
#nav ul {
font-size: 0;
}
#nav ul li {
font-size: 16px;
}
Give it a try and let me know if it helps!
I'm working on solving a CSS display issue and I'm stumped on how to solve this besides simply expanding the width of the parent div.
Here's the layout:
<div>
<ul>
<li>
Test
</li>
<li>
Test Longer 23 Item
</li>
<li>
Test 2
</li>
</ul>
</div>
And the relevant CSS:
a {
text-decoration: none;
display: inline-block;
padding: 0 10px;
box-sizing: border-box;
}
a:hover {
font-weight: bold;
text-decoration: underline;
}
li + li {
border-width: 0;
}
li {
height: 28px;
line-height: 28px;
padding: 0 5px;
width: 100%;
}
ul {
padding: 14px 0;
list-style: outside none none;
}
div {
position: absolute;
right: 0;
top: 72px;
width: 150px;
}
This all works fine, except when hovering over the second link (Test Longer 23 Item), which results in the bolded, underlined text wrapping to a second line which overlaps with the anchor tag below it. I could easily fix this by expanding the width of the div so that it doesn't wrap, but I'm hoping there's a more dynamic solution available to "push" the subsequent li elements down when hovering.
Is this possible in pure CSS?
JS Bin
You can fix it by adding display: inline-block; to li.
Working Code Snippet:
a {
text-decoration: none;
display: inline-block;
padding: 0 10px;
box-sizing: border-box;
}
a:hover {
font-weight: bold;
text-decoration: underline;
}
li + li {
border-width: 0;
}
li {
display: inline-block; /* <-- this! */
height: 28px;
line-height: 28px;
padding: 0 5px;
width: 100%;
}
ul {
padding: 14px 0;
list-style: outside none none;
}
div {
position: absolute;
right: 0;
top: 72px;
width: 150px;
}
<div>
<ul>
<li>
Test
</li>
<li>
Test Longer 23 Item
</li>
<li>
Test 2
</li>
</ul>
</div>
Use min-height for the li instead of strict height value that will make them overlap:
li {
min-height: 28px;
line-height: 28px;
padding: 0 5px;
width: 100%;
}
Or, if you don't want it to split into 2 lines, just add the proper white-space value:
a {
text-decoration: none;
display: inline-block;
padding: 0 10px;
box-sizing: border-box;
white-space: nowrap;
}
In my project here, I am not able to vertically center align the floated undo/redo elements on the top bar.
I tried vertical-align: middle also played with the line-height but I did not get the desired effect.
What am I missing?
jsFiddle
One solution is to use display: table and display: table-cell in place of the float and then use vertical-align: middle;
Have a fiddle!
#bar has display: table
h4 and #actions are treated as "table cells"
HTML
<div id="bar">
<h4>Tasks</h4>
<span id="actions">
<input type="image" id="undo" src="http://i.imgur.com/fyCSlvW.png" disabled />
<input type="image" id="redo" src="http://i.imgur.com/BshzaCg.png" disabled />
</span>
</div>
CSS
* {
margin: 0;
padding: 0;
}
body {
font-family:"Arial";
font-size: 62.5%;
}
#actions button {
background: none;
border: 0rem;
}
#actions button input {
outline: none;
}
#bar {
background-color: #4196C2;
display: table;
width: 100%;
}
h4 {
text-decoration: none;
display: table-cell;
vertical-align: middle;
margin-top: 2rem;
/* = 20px */
color: white;
padding: 20px;
font-size: 1.8rem;
}
#actions {
display: table-cell;
vertical-align: middle;
text-align: right;
}
You have not styled the span which contains the two buttons.
Add the following:
#actions {
display: block;
margin: 0 0 0 0;
padding: 15px 0 0 0
}
Here you go: http://jsfiddle.net/csTS7/151/
Add in the div a margin-top and do it with percent for example
#bar
{
margin-top: 5%;
}
Here's the JsFiddle
h4{
text-decoration: none;
display: inline-block;
/* margin-top: 2rem; = 20px */
color: white;
margin-left: 1.5rem;
font-size: 1.8rem;
line-height: 15px;
}
I have given the element bar a minimum height and removed margin top for h4 and added line-height