Very new to HTML and CSS
- I can't seem to get these navigation buttons to stack in a vertical column, for say a mobile layout. Thought display:block would do the trick but its not. I don't think my html is picking up any of my .btn attributes.
![Buttons won't stack vertically][1]
.nav {
display: block;
width: 100%;
height: 100%;
text-align: center;
list-style-type:none;
font-weight: bold;
font-size: 70%;
color: #FFFFFF;
background-color: #2b5429;
font-family: 'Lato', helvetica, sans-serif;
vertical-align: middle;
position: sticky;
line-height: 40px;
}
.btn {
display: inline-block;
width: 100%;
height: 100%;
padding: 0px;
background-color: #2b5429;
color: #ffffff;
font-family: 'Lato', helvetica, sans-serif;
vertical-align: middle;
position: sticky;
text-align: center;
line-height: 40px;
}
<nav class="btn nav">
<button>Home</button>
<button>Activities</button>
<button>About</button>
<button>Animal Facts</button>
</nav>
a is inline by default and if you want it to be block-level then define it:
.nav a{
display: block;
}
Try using html lists for your navigation.
ul {list-style: none; margin: 0; padding: 0;}
<ul>
<li>Home</li>
<li>Activities</li>
<li>About</li>
<li>Animal Facts</li>
</ul>
http://jsfiddle.net/wzrx9ea1/
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
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
I want to align the list items horizontally. But i'm not getting them in a line. If i remove the br tag inside the first li then its aligning perfectly. What am i missing? please help. jsfiddle code -> here
html:
<div id="info_new_cont">
<ul id="info_new_ul">
<li id="app_no_li">
<div>
<div id="app_no_title">Appn<br> No:</div>
<div id="app_no" class="info_new_bottom">42382464</div>
</div>
</li>
<li id="new_li">
<div>mcs</div>
<div id="new_case" class="info_new_bottom">New Case</div>
</li>
<li id="ifw_li">
<div>ld</div>
<div id="file_wrap" class="info_new_bottom">More Info</div>
</li>
</ul>
</div>
here is the style
#info_new_cont {
float: right;
display: inline-block;
width: 500px;
height: 100%;
margin: 0px;
}
#info_new_ul {
list-style: none;
margin: 0px;
width: 400px;
height: 140px;
}
#info_new_ul li {
display: inline-block;
padding: 5px;
color: #fff;
font-family: trebuchet ms;
font-size: 19px;
font-weight: lighter;
text-align: justify;
word-wrap:break-word;
}
.info_new_bottom {
margin-top:30px;
}
#app_no_li {
width: 120px;
height: 120px;
background-color: #00ddff;
}
#app_no_cont {
white-space: nowrap;
}
#app_no_title {
}
#app_no {
font-weight: bold;
}
#new_li {
width: 120px;
height: 120px;
background-color: #eee;
}
#ifw_li {
width: 120px;
height: 120px;
background-color: #eee;
}
Delete the display: inline-block; from de #info_new_ul li
and use a float:left for the <li>.
#info_new_ul li {
....
float:left;
}
Your JsFiddle but updated with the new code
You should use float:left for li tags.
#info_new_ul li {
float:left;
margin-left: 2px;
padding: 5px;
color: #fff;
font-family: trebuchet ms;
font-size: 19px;
font-weight: lighter;
text-align: justify;
word-wrap:break-word;
}
DEMO
I am trying to give the tags a width of 20% inside this ul, but I am unable. Any help would be grateful. I am able to set the width of the li items, but I am looking to set the width to the <a>.
<nav>
<ul class="navigation">
<li class="main_nav_li">Home</li>
<li class="main_nav_li">About</li>
<li class="main_nav_li">Services</li>
<li class="main_nav_li">Stylist</li>
<li class="main_nav_li">Contact</li>
</ul>
</nav>
<style>
nav{
width:98%;
border: 1px solid black;
overflow:hidden;
height:3em;
}
.nav{
list-style-type:none;
margin:0;
padding:0;
overflow: hidden;
}
li{
list-style-type: none;
float: left;
padding-top: 1em;
}
a{
width: 20%;
text-align: center;
line-height: 10%;
font-size: 1em ;
text-decoration:none;
padding-top: 0.5em;
font-family: 'Happy Monkey', cursive;
}
</style>
you can't set a width to an inline element.
Add display: inline-block; and it will work
a{
width: 20%;
text-align: center;
line-height: 10%;
font-size: 1em ;
text-decoration:none;
padding-top: 0.5em;
font-family: 'Happy Monkey', cursive;
display: inline-block;
}
They are inline elements by default. You must use:
display: inline-block;
Block-level elements allow you to set width, inline ones do not.
Here's a working example:
http://jsfiddle.net/rKwkH/1/
I had to apply the width and display:inline-block to the li:
li{
list-style-type: none;
float: left;
width: 20%;
display: inline-block;
}
Here is my relevant code for the #blogtitle element:
#blogtitle{
width: 125px;
height: 150px;
background: #883322;
font-family: Georgia;
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
padding-left: 25px;
margin: 10px;
}
#blogtitle a{
color: #ffffff;
text-decoration: none;
}
#blogtitle a:hover{
text-decoration: underline;
}
...
<div id="blogtitle">
fdsfdj
</div>
When I make a webpage with nothing but the div and a on it, it sticks to the corner, even though I have set margin: 10px.
What am I doing wrong?
change
display: table-cell;
to
display: block;
this will solve the problem.