This question already has answers here:
Width 100% with white borders around it. WHy?
(2 answers)
Closed 5 years ago.
I faced an issue today when I created the navigation bar I found a space between the screen and the navigation bar,
here's what I'm talking about
I want the navigation bar with full width, no space at all, I tried using width width: 100% but it didn't work.
Here's the code :
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #141414;
height: 80px;
border-radius: 5px;
}
li {
float: right;
display:inline;
list-style-type:none;
}
li a {
font-family: Julius Sans One, Arial;
font-size: 19px;
display: block;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
}
.logoimg {
height: auto;
margin-left: 150px;
margin-top: 5px;
}
.left {
float: left;
}
<div>
<ul>
<li class="left"><img class="logoimg" src="/images/logo.png"></li>
<li><a>Test 1</a></li>
<li><a>Test 2</a></li>
</ul>
</div>
From the look of it, your navigation bar is full-width. The additional whitespace you are seeing is actually coming from <body>, which adds a margin of 8px by default. You can override this to ensure that your content is flush against the edge of the page:
body {
margin: 0; /* Added */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #141414;
height: 80px;
border-radius: 5px;
}
li {
float: right;
display:inline;
list-style-type:none;
}
li a {
font-family: Julius Sans One, Arial;
font-size: 19px;
display: block;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
}
.logoimg {
height: auto;
margin-left: 150px;
margin-top: 5px;
}
.left {
float: left;
}
<div>
<ul>
<li class="left"><img class="logoimg" src="/images/logo.png"></li>
<li><a>Test 1</a></li>
<li><a>Test 2</a></li>
</ul>
</div>
It's important to note that the <body> tag is always present, even when not explicitly written. This can be seen in the snippets here -- note that the original snippet appears to be offset from the edge and the line, whereas this does not, and all I added was an override for body margin.
Hope this helps! :)
What you are experiencing is the default window/page Padding/Margin. You can set this default value to 0 in order to have your full width/height of the page:
body{
margin: 0;
padding: 0;
}
This should correct your problem.
Related
This question already has answers here:
How can I align one item right with flexbox?
(5 answers)
Closed 1 year ago.
I have made a navbar, and it is supposed to replace the links with a menu icon on the right when the webpage gets below 630px wide. The problem is, my icon doesn't stay right, it stays as far left as it can go, leaving space for the margins of the hidden links (the elements themselves are gone - I set them to display: none; - but the margins are still there). I am working with the w3 schools article about responsive navbars, but only using it for the appearing icon part.
I have tried to change he display of the icon to flex, and all sorts of justification and alignment, but nothing will work. When it is set to flex it's width goes to 0 and I cant make it get wider again.
I am trying to give only the relevant code, but there is a fair amount of stuff I didn't include so feel free to ask me for more or to specify something.
.navContainer {
position: sticky;
top: 0;
margin: 0;
background-color: #ffffff;
display: flex;
justify-content: left;
align-content: flex-start;
padding-left: 10px;
padding-top: 20px;
padding-bottom: 10px;
}
.navContainer li {
list-style: none;
margin-right: 40px;
}
.navContainer a {
text-decoration: none;
color: black;
font-family: Montserrat-Regular;
font-size: 20pt;
margin: 10px;
}
.navContainer .icon {
display: none;
margin: 0;
}
.navContainer .iconImg {
max-height: 40px;
max-width: 40px;
}
#media (max-width: 630px) {
.navContainer a:not(.logoContainer, .name) {
display: none;
}
.navContainer li.icon {
float: right;
display: block;
}
}
<ul class="navContainer">
<li class="logoContainer"><img href="TriTech-Home.html" class="logo" src="https://via.placeholder.com/80"></img>
</li>
<li>TriTech</li>
<li><a class="link1" href="#">xDesk</a></li>
<li><a class="link2" href="#">Saturn Bikes</a></li>
<li href="javascript:void(0);" class="icon" onclick="myFunction()">
<img class="iconImg" src="Menu-Bars.ico">
</li>
</ul>
Don't float things. That's an outdated method, especially with flexbox. Use auto left margin on the last item.
.navContainer {
position: sticky;
top: 0;
margin: 0;
background-color: #ffffff;
display: flex;
justify-content: left;
align-content: flex-start;
padding-left: 10px;
padding-top: 20px;
padding-bottom: 10px;
}
.navContainer li {
list-style: none;
margin-right: 40px;
}
.navContainer a {
text-decoration: none;
color: black;
font-family: Montserrat-Regular;
font-size: 20pt;
margin: 10px;
}
.navContainer .icon {
display: none;
margin: 0;
}
.navContainer .iconImg {
max-height: 40px;
max-width: 40px;
}
#media (max-width: 2630px) { /* increased for demo */
.navContainer a:not(.logoContainer, .name) {
display: none;
}
.navContainer li.icon {
display: inline-block;
margin-left: auto; /* <-------------------- HERE */
}
}
<ul class="navContainer">
<li class="logoContainer"><img href="TriTech-Home.html" class="logo" src="https://via.placeholder.com/80" />
</li>
<li>TriTech</li>
<li><a class="link1" href="#">xDesk</a></li>
<li><a class="link2" href="#">Saturn Bikes</a></li>
<li href="javascript:void(0);" class="icon" onclick="myFunction()">
<img class="iconImg" src="https://via.placeholder.com/40">
</li>
</ul>
This should work
.nav-container .icon{
width: 100%;
text-align: end;
}
I'm trying to get my header with ul in the center. Another page suggested having overflow:hidden but when I shrink the window, a second scroll bar still appears.
Every time I try something, the li isn't in line with my logo.
Also tried to have the class 'container' margin: auto but nothing happens.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global styling */
.container {
width: 100%;
overflow: visible;
}
ul {
margin: 0;
padding: 0;
}
/*Header*/
header {
background: #100806;
color: #f2f2f2;
min-height: 75px;
border-bottom: #ffffff 3px solid;
text-align: center;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
display: inline-block;
padding: 0 30px 10px 0;
float: left;
}
header .center-logo img {
width: 100px;
padding-left: 30px;
padding-right: 30px;
}
header nav span {
float: left;
}
header nav span:first-child {
padding-right: 50px;
/* half the logo width */
padding-top: 20px;
}
header nav span:last-child {
padding-left: 50px;
padding-top: 20px;
/* half the logo width */
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #666666;
font-weight: bold;
}
<header>
<div class="container">
<nav>
<ul>
<span>
<li class="current"> Home</li>
<li> Photography</li>
</span>
<div class="center-logo">
<li><img src="https://placehold.it/100x50"></li>
</div>
<span>
<li> Biography</li>
<li> Contact Us</li>
</span>
</ul>
</nav>
</div>
</header>
The Issue
float rules declared on the list-items (li)
Consider removing the float rules declared on list-items, this will negate any attempt at horizontally center aligning your menu items using typical methods other than flex-box.
The Fix
text-align: center (on containing element)
display: inline-block (on nested elements to center)
Since there is text-align: center rule already declared on a containing parent element (header in this case), and the list-items have already been declared as inline-block items, the list-item elements will center after removing the float rules declared on them.
Further Concerns:
The only direct descendant elements of an unordered (ul) or ordered (ol) list should be list-items (li) - any element other than this would be considered invalid markup.
Code Snippet Demonstration: (view "Full Page")
Summary:
Markup cleaned/simplified
Invalid list elements removed (direct descendants)
Styles improved (omitting redundant rules, vertically centering
navigation)
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global styling */
.container {
width: 100%;
overflow: visible;
}
ul {
margin: 0;
padding: 0;
}
/*Header*/
header {
background: #100806;
color: #f2f2f2;
min-height: 75px;
border-bottom: #ffffff 3px solid;
text-align: center;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
display: inline-block;
padding: 0 30px 0 0; /* remove the bottom padding */
/* float removed */
vertical-align: middle; /* additional */
}
/* Additional */
li.logo {
padding-left: 50px;
padding-right: 50px;
}
header nav > ul { /* using the "child combinator" here (>) so that this rule doesn't apply to any dropdown or sub-menus */
padding: 10px 0 10px 0;
}
/*
header .center-logo img {
width: 100px;
padding-left: 30px;
padding-right: 30px;
}
header nav span {
float: left;
}
header nav span:first-child {
padding-right: 50px;
padding-top: 20px;
}
header nav span:last-child {
padding-left: 50px;
padding-top: 20px;
}
*/
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #666666;
font-weight: bold;
}
<header>
<nav>
<ul>
<li class="current"> Home</li>
<li> Photography</li>
<li class="logo"><img src="https://placehold.it/100x50"></li>
<li> Biography</li>
<li> Contact Us</li>
</ul>
</nav>
</header>
<!--
Change Log:
1) Invalid nested elements removed from list (span & div)
2) Superfluous ".container" containing element removed (as providing no tangible benefits)
-->
Practical Demonstrations for Further Reference:
Horizontal Alignment (Text Elements)
Horizontal Alignment (Arbitrary Elements)
You could use Flexbox.
header ul {
display:flex
}
header li {
flex: 1
}
Powerful tool flex.
See fiddle: https://jsfiddle.net/fo7v1253/1/
This question already has answers here:
How do nested vertical margin collapses work?
(3 answers)
Closed 6 years ago.
I'm trying to style the central big part called "jumpotron" which contains "letters" and "h1". When I try to push "letters" or "h1" lower in the central area vertically it moves the whole "jumpotron" together with the background image. Why does that happen? Why it doesn't respect the fact that "letters" is a child of "jumpotron" so it has to move it's margins inside of "jumpotron"? Also is there a better way to create a big image background for the "jumpotron" from the one I used?
Here's the code:
<body>
<header>
<div class="container">
<h2>Trunk Club</h2>
<nav>
<ul>
<li>How it Works</li>
<li>What to Expect</li>
<li>Stylists</li>
<li>Log In</li>
<li><a id="getstarted" href="#">Get Started</a></li>
</ul>
</nav>
</div>
</header>
<div id="jumpotron">
<div id="letters">
<h1>Premium Clothing,<br>
Great Advice,<br>
Zero Work</h1>
</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Source Sans Pro', sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
width: 100%;
min-width: 800px;
height: 60px;
background-color: #151e28;
text-transform: uppercase;
}
header h2 {
color: #FFFFFF;
float: left;
margin-top: 15px;
}
nav {
float: right;
margin-top: 5px
}
nav li {
float: left;
list-style: none;
color: #878b85;
margin-left: 20px;
font-size: 12px;
font-weight: bold;
}
nav ul li:nth-child(4) {
border-left: 1px solid #878b85;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: -5px;
}
nav ul li:nth-child(5) {
border: 1px solid #878b85;
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 7px;
margin-top: -5px;
}
#getstarted {
text-decoration: none;
color: #878b85;
}
#getstarted:visited {
color: #878b85;
}
#jumpotron {
width: 100%;
min-height: 670px;
background-image: url(images/Stylist_Product_Exp30-v3.jpg);
background-position: center;
background-size: 100% auto;
}
#letters {
margin-top: 500px;
}
#jumpotron h1 {
color: #FFFFFF;
text-align: center;
font-size: 55px;
}
You have to set the padding on #letters to 500, not the margin
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>
I have a very plain navigation menu using an unordered list laid out horizontally using display:inline;. The previews in my HTML editor show the page coming together just fine. However, when it's viewed in Chrome and IE, there's a strange padding on top of the nav menu and only on the top. Using the process of elimination, I know this is a problem with my CSS for the <li> tag but I'm not sure what the problem is.
So far I've tried display:inline-block, lowering the font size, setting the <ul> tag in the nav menu to display:inline, and a myriad other things. None seems to be helping. Any advice for where the CSS went wrong? Here is the HTML in question...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul>
<li>welcome</li>
<li>who we are</li>
<li>what we do</li>
<li>contact</li>
</ul>
</div>
<div id="content"> </div>
</div>
</body>
And here is the CSS...
body {
background-color: #000000;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: center;
}
#header {
background-color: #ffffff;
height: 100px;
}
#wrapper {
width: 960px;
text-align: left;
}
#navigation {
height: 45px;
background-color: #C0C0C0;
font-size: 1.3em;
text-align: right;
}
#navigation a {
color: #00132a;
text-decoration: none;
}
#navigation a:hover {
color: #483D8B;
}
#navigation ul {
padding-top: 10px;
}
#navigation ul li {
display: inline;
list-style-type: none;
padding: 0 30px 0 30px;
}
#navigation-symbol {
font-size: 1em;
}
#content {
background-color: #ffffff;
text-align: left;
font-size: 14px;
}
And for interactive fun there's a jsFiddle as well which shows the exact same phenomenon I'm seeing. Thanks ahead for the advice!
Simply set margin to zero
#navigation ul {
margin: 0;
padding-top: 10px;
}