I'm trying to make a menubar for my website with home, about, and contact links. They are aligned on the right side of the page. For some reason, when I reload the page, sometimes contact seems to return to the next line. I don't have to change anything for this to happen.
Here is the relevant css:
ul#menubar {
display: inline-block;
list-style-type: none;
font-family: "Cantarell";
float: right;
margin-right: 5%;
margin-top: 0;
margin-bottom: 0;
}
li.menubar_item {
display: inline-block;
padding-right: 5%;
}
li.menubar_item a {
color: #D2F2FE;
text-decoration: none;
}
div.menubar_div {
height: 150px;
padding-right: 5%;
}
And the HTML:
<ul id="menubar">
<li class="menubar_item">
<div class="menubar_div">Home</div>
</li>
<li class="menubar_item">
<div class="menubar_div">About</div>
</li>
<li class="menubar_item">
<div class="menubar_div">Contact</div>
</li>
</ul>
It's your padding-right: 5% that ruins it. Since you haven't set a width for the ul#menubar, it's automatically set to 100%. The problem is that the width expands with the padding, causing it to be a total of 115% (100 + 5x3).
You can add this to your ul#menubar:
width: 85%;
text-align: right;
Try adding this line in your CSS :
ul#menubar {
white-space:nowrap;
}
The property white-space:nowrap force the li elements to be side by side
Related
So im making a website for a school project and all was hunky dory until i tried to put a paragraph element in and it displays above the title text behind the background color
.container {
width: 80%;
margin: 0;
padding: 0;
}
#logotext {
float: left;
font-family: 'Doppio One';
margin-left: 25px;
}
nav {
float: right;
}
#nav {
list-style-type: none;
text-decoration: none;
margin-top: 35px;
}
ul li {
display: inline;
}
li a {
text-decoration: none;
color: white;
}
li a:hover {
color: #fc9516;
}
.darkwrap {
background-color: #414a4c;
position: fixed;
overflow: hidden;
}
.active {
color: #22cc25;
}
#clock {
position: absolute;
top: 0;
right: 0;
margin-top: 25px;
margin-right: 25px;
font-family: Rajdhani;
font-size: 30px;
}
<div class="container darkwrap">
<div id="logotext">
<h1>JF Web Design</h1>
</div>
<!-- Navigation Bar -->
<nav>
<ul id="nav">
<li> Page 1 </li>
<li> About </li>
<li> Page 3 </li>
</ul>
</nav>
</div>
</header>
<span id="clock"></span>
<p>
Hello
</p>
<footer></footer>
i usedchrome to highlight the faulty element so its clear whats happening here its literall positioned at the top behind the bg color
Console Highhlighted element
.darkwrap is position: fixed.
This takes it out of normal flow and locks its position relative to the viewport.
The rest of the content is laid out as normal as if the .darkwrap element didn't exist … so it ends up covered up by it.
You could use margins to compensate for the space covered up by .darkwrap when the viewport is scrolled to the top. I would simply avoid using position: fixed in the first place: The benefits of having the menu on screen all the time very rarely outweigh the drawback of using up all that vertical space all the time.
If you use float: left and float:right please remember to add clear:both to the next element on the website. Here is fixed code:
https://codepen.io/anon/pen/jKRqLz
I'm creating a website and have run into a minor but incredibly infuriating problem.
I'm creating a Navigation bar and the buttons of the navigation bar have a gap between the far left, and top of the screen. In other words, all buttons have a gap from the top and the leftmost button has a gap from the left of the screen.
The relevant parts of my Stylesheet are shown below.
body {
margin: 0px;
padding: 0px;
font-family: Arial;
}
.navbar_base {
width: 100%;
overflow: hidden;
background-color: rgb(0, 21, 144);
top: 0px;
color: white;
display: block;
}
.navbar_button {
float: left;
padding: 10px;
margin: 0px;
border-radius: 3px;
list-style-type: none;
}
.navbar_button:hover {
background-color: rgb(50, 64, 147);
}
I suspect it's because I have assigned the class to the list rather then the links, but I'm using MVC5 and adding classes to the Html.Actionlink() is cumbersome. I'd like to avoid this solution if possible.
Furthermore I've tried assigning margin: 0px and padding: 0px on ul like so:
ul .navbar_button {
margin: 0px;
padding: 0px;
}
to no avail
Also I am not interested in using Bootstrap at the moment because this is a sort of side project for a specific person and I would like to create something unique for him.
Here is the HTML portion of my code:
<div class= "navbar_base">
<ul>
<li class="navbar_button"> #Html.ActionLink("MainPage","MainPage") </li>
<li class="navbar_button"> #Html.ActionLink("About","AboutPage") </li>
</ul>
</div>
I've looked at the following questions as well, but the answers didn't help me.
Gap at top of page despite margin:0 and padding: 0
Why does this div have gaps at top and bottom
How do I get rid of the two gaps?
Note: I do realize I am still a beginner and MVC may be out of my scope but I have job to do soon and I reckoned the fastest way to learn about how to do MVC is to actually do MVC
<div class= "navbar_base">
<ul>
<li class="navbar_button"> #Html.ActionLink("MainPage","MainPage") </li>
<li class="navbar_button"> #Html.ActionLink("About","AboutPage") </li>
</ul>
By default ul has some margin left properties , you can remove it by
.navbar_base > ul{ margin-left:0px; }
You need to remove the margin and padding from the ul too (your attempt to do so removed it from the li)
body, ul {
margin: 0px;
padding: 0px;
font-family: Arial;
}
.navbar_base {
width: 100%;
overflow: hidden;
background-color: rgb(0, 21, 144);
top: 0px;
color: white;
display: block;
}
.navbar_button {
float: left;
padding: 10px;
margin: 0px;
border-radius: 3px;
list-style-type: none;
}
.navbar_button:hover {
background-color: rgb(50, 64, 147);
}
<div class="navbar_base">
<ul>
<li class="navbar_button"> #Html.ActionLink("MainPage","MainPage") </li>
<li class="navbar_button"> #Html.ActionLink("About","AboutPage") </li>
</ul>
</div>
I am trying to clone google's home page.I Started from the footer of the page and got stuck at the alignment of the links in the footer.
my html code:
<div class="footer">
<hr >
<footer >
Advertising
Business
About
Privacy
Terms
Settings
</footer>
</div>
my css code :
.footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
footer{
background-color: #F4F6F7;
height: 45px;
}
hr{
border-color: #CCD1D1;
margin-bottom: 0px;
}
.advertising, .business, .about, .privacy, .terms, .settings{
color: #909497;
font-size: 1.2em;
margin-top: 11px; //THIS LINE.
}
.advertising, .business, .about{
margin-left: 40px;
}
.privacy, .terms, .settings{
margin-right: 40px;
float: right;
}
can anyone tell me, why the line "margin-top : 11px" is not applied to the first 3 links in the footer(advertising,business,about). Screenshot of footer:
Although the above answer will work, a better solution is this:
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
footer {
background-color: #F4F6F7;
height: 45px;
}
hr {
border-color: #CCD1D1;
margin-bottom: 0px;
}
.align-left {
float: left;
}
.align-right {
float: right;
}
.footer-links {
list-style-type: none;
}
.footer-links li {
display: inline;
}
.footer-links li a {
color: #909497;
font-size: 1.2em;
margin: 11px 20px 0px;
}
<div class="footer">
<hr/>
<footer>
<ul class="footer-links align-left">
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
<ul class="footer-links align-right">
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
</ul>
</footer>
</div>
By putting the links into separate menus, it allows you to very quickly add and remove links in the future without messing around with CSS classes.
This fixes any margin errors you are having as well, as we're declaring that every anchor tag has a margin-top of 11px. You'll also notice instead of having 40px margin-left and margin-right, I've set each side to 20px which will give the same effect.
You can also use the .align-left and .align-right classes elsewhere in your HTML instead of declaring it in CSS for every class.
There's no need to give each link it's own class when they all have the same style. But if you wanted to highlight a particular link you'd naturally just add a .highlight class onto one of the anchor tags and specify the styling in CSS.
This method also gives full browser support. Flexbox is a little temperamental on IE as I write this.
Hope this helps!
You need to add float:left to your first three links, as you have applied float:right on the last three.
.advertising, .business, .about{
margin-left: 40px;
float:left;
}
I ran it through codepen,it worked when I applied the margin 11px to all elements using the footer as a selector
I also would recommend using flexbox, its alot easier to use, here is an example
`http://codepen.io/HTMLanto/pen/gmNedQ`
Cheers !
I have a list of 4 menu items sitting side by side using display:inline-block;. Each item is 120px, therefore I should be able to set the parent container to be 480px wide, however this sends the last item into the next row, why is this ??
Here is a jsfiddle :http://jsfiddle.net/htdgdhxn/
My html:
<section id="nav">
<div id="nav-wrapper">
<ul id="nav-list">
<li id="nav-home">Home
</li>
<li id="nav-clothes"><a class="category All">Clothes</a>
</li>
<li id="nav-about">About Us
</li>
<li id="nav-contact">Contact Us
</li>
</ul>
</div>
</section>
CSS:
* { margin: 0px; padding: 0px; }
#nav { background-color: #fff; }
#nav-wrapper { text-align: center; height: 74px; }
#nav-list { height: 100%; width: 480px; }
#nav-list li { display: inline-block; vertical-align: top; width: 120px; height: 100%; }
#nav-list li a { text-decoration: none; color: #000; font-size: 1.6em; display: block; height: 100%; line-height: 74px; }
#nav-list li a:hover { background-color: #F0ECE1; cursor: pointer; }
I have tested and this happens in Chrome, IE and Firefox.
Remove the whitespace between each <li>
<li></li> <...space here...> <li></li>
Inline block elements create a gap between li elements.
<ul id="nav-list">
<li id="nav-home">Home
</li><li id="nav-clothes"><a class="category All">Clothes</a>
</li><li id="nav-about">About Us
</li><li id="nav-contact">Contact Us
</li>
</ul>
See fiddle
The inline-block value is incredibly useful when wanting to control margin and padding on
"inline" elements without the need to block and float them.One problem that arrises
when you use inline-block is that whitespace in HTML becomes visual space on screen.
Gross.There are a few ways to remove that space; some of them are just as gross, one is
reasonably nicer.
Solution 0: No Space Between Elements:
The only 100% solution to this issue is to not put whitespace between those elements in the HTML source code:
<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>
Solution 1: font-size: 0 on Parent
The best white-space solution is to set a font-size of 0 on the parent to the inline block
elements.
.inline-block-list { /* ul or ol with this class */
font-size: 0;
}
.inline-block-list li {
font-size: 14px; /* put the font-size back */
}
Solution 2: HTML Comments
This solution is a bit gangsta but also works. Using HTML comments as spacers between the elements works just as placing no space between elements would:
<ul>
<li>Item content</li><!--
--><li>Item content</li><!--
--><li>Item content</li>
</ul>
It might help you.
Just increase the width of your container to 500px
#nav-list { height: 100%; width: 500px; }
or remove the white spaces between consecutive li tags
or
apply display:initial in #nav-list { height: 100%; width: 480px;}
i.e #nav-list { height: 100%; width: 480px; display: initial;}
Reason:-
1. The font size of the text in the li element might be causing the problem.
You can modify it by reducing the font-size.
#nav-list li a { text-decoration: none; color: #000; font-size: 1.2em; display: block; height: 100%;line-height: 74px; }
Instead of using this
#nav-list li { display: inline-block; }
You can do like this:-
#nav-list li { display: inline; font-weight:bold;}
Please let me know if this helps.
I have a list of urls in ul element and I want the list in one row. I've tried this way to place them in the center of the page but they are not exactly in the center.
This is the HTML code
<ul id="links">
<li class="inner-li"> about
</li>
<li class="inner-li"> projects
</li>
<li class="inner-li"> photoblog
</li>
<li class="inner-li"> music
</li>
</ul>
and this is the style that I've tried
.inner-li {
font-size: 1.25em;
float: left;
margin-left: 1em;
list-style-type: none;
}
#media screen and (min-width: 21em) {
#links {
width: 21em;
margin: 0 auto;
}
}
and you can see it in JsFiddle.
Add display:table and padding:0 to #links like:
#media screen and (min-width: 21em) {
#links {
display:table;
margin: 0 auto;
padding: 0;
}
}
Also add
#links > li:first-child{
margin:0;
}
cause first li element no need to has margin-left
fiddle
It's not centered because you've applied margin-left for the <li>'s.
.inner-li {
font-size: 1.25em;
float: left;
margin-left: 1em; /* this */
list-style-type: none;
}
Which will push the first <li> 1em away from the center.
You can achieve the same layout, centered by changing it to padding: 0 .5em instead.
Demo
add this code your css file :
you should definition your menu width and other necessary codes.
#links {
min-width: 100%;
}