I am trying to make a "bar" that stretches over the top of my web page (like Facebook). Then I have some navigational links on the right. However if you resize the page and then use the horizontal scrollbar the red background is missing.
http://jsfiddle.net/ejJnL/embedded/result/
http://jsfiddle.net/ejJnL/
<div class="header-container">
<div class="header">
<ul class="main-navigation">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<div class="clear"></div>
</div>
</div>
CSS:
.header-container {
background-color: red;
height: 40px;
width: 100%;
}
.header {
height: 100%;
line-height: 40px;
margin: 0 auto;
width: 960px;
}
.header img {
vertical-align: middle;
}
.main-navigation {
float: right;
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation li {
float: left;
}
.main-navigation a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.header-container {
background-color: red;
height: 40px;
position: fixed:
left: 0;
right: 0;
}
Fix the position and declare it attached to the left and right edges of the viewport as shown above.
You don't need declarations of width: 100% or height: 100% as div are already block elements and will fill their containers.
You should declare body { margin:0} if you want the bar to extend to the page edges.
You should probably use max-width not width for your .header so the menu still shows in a small window.
You may also want to add an overflow: none to the .header-container
http://jsfiddle.net/SbpZG/
Fixed width on the .header-container and position: relative on the .main-navigation
Related
I am having trouble turning my normal navbar into a sticky one. When I don't set the position as fixed, the navbar looks and works fine. But when I make the position fixed, it glitches out and looks wonky, and I have examples of both down below. My HTML and CSS are here too:
body {
margin: 0px;
padding: 0px;
font-family: 'Arial', serif;
}
header {
position: fixed;
}
p {
line-height: 200px;
}
.navbaratta {
background-color: #E9B63C;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
margin-top: 0;
}
.navbaratta>li {
display: inline-block;
padding-right: 70px;
border-right: 1px solid #000;
margin-right: 70px;
}
.navbaratta>li>a {
text-decoration: none;
color: #1A1A1A;
font-weight: bold;
}
.navbaratta>li>a:hover {
color: #474747;
}
.Logo {
display: block;
margin-left: auto;
margin-right: auto;
}
.LogoDiv {
background-color: #1A1A1A;
width: 100%;
}
li.HOME {
border-left: 1px solid #000;
padding-left: 70px;
}
<header>
<div class="LogoDiv">
<img src="NavBarFinal.png" class="Logo">
</div>
<ul class="navbaratta">
<li class="HOME">HOME</li>
<li>BIOGRAPHY</li>
<li>CONTACT US</li>
<li>PHOTO GALLERY</li>
</ul>
</header>
with position fixed:
without position fixed:
The header is not taking the complete width. So, just update your header CSS.
header {
position: fixed;
width: 100%; // Added
}
You need to add positional properties when you fix a div or alternatively you give it a width. I usually prefer first approach. So use it as below will solve your problem.
Your problem caused by using element with relative positioning which is displayed as block so it takes width of parent element when it is relative. So you dont care its width since its parent is body. However when you change it to fixed positioning there is nothing in terms of reference so it wraps content thats all. By entering left:0 and right:0 you stretch it to whole screen. You also need to add a padding top to your body element. Otherwise some parts of your text will be displayed behind navbar. I hope it helps
header {
position: fixed;
left: 0;
right: 0;
}
I have the following elements. The image is fixed at 325X70px and is placed at the top left corner. I want the list items, evenly spaced, to fill the remainder of the width and be responsive to browser resize. I'm sure this is easy, but I can't seem to get it to work.
<div class="wrapper">
<div class="left">
<div class="image">Image Here</div>
</div>
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
<li>A</li>
</ul>
</div>
</div>`
CSS
* {
padding: 0px;
margin: 0px;
}
.wrapper {
position: relative;
}
.left {
float: left;
}
.image {
min-width: 325px;
max-width: 325px;
height: 70px;
background-color: red;
}
.menu {
width: 100%;
height: 70px;
background-color: black;
}
.menu ul {
position: absolute;
width: 100%;
height: 70px;
display: table;
}
.menu li {
color: #FFF;
width: 25%;
text-align: center;
vertical-align: middle;
display: table-cell;
list-style-type: none;
}
You may not need the .left class, you might be able to just do that styling on the image itself, but regardless, what needs to happen here is that .left and .menu need to be side by side. To do that...
.left,
.menu {
display: inline-block;
vertical-align: middle;}
We know the image is always 325px wide, so let's set the parent container to match...
.left {
width:325px;}
And then we want .menu to be the entire width of the screen, minus that image/container, so can we do this...
.menu {
width: calc(100% - 325px);}
You'll still have to turn your li horizontal...
li {
display: inline-block;
vertical-align:middle;}
After having had troubles trying to display three containers in a row with the middle one being centered on the page and the side ones being of a fixed width I came across the CSS Flexbox model, mentioned in a Stackoverflow question.
Using display: flex instead of float: left or displaying the containers as inline-box whilst messing with margin seems to be working quite well, with way fewer lines of code.
However, I ran into an issue with flexbox that I can't seem to solve on my own:
I want a container #menubar to hold three containers in a row: #logo, nav and #search.
<div id="menubar">
<div id="logo"></div>
<nav>
<ul>
<li>Articles</li>
<li>Images</li>
<li>About</li>
<li>Disclaimer</li>
</ul>
</nav>
<div id="search"></div>
</div>
The #logo-container as well as the #search-container are of a fixed size (width: 80px, height: 80px). One should be placed at the very left side of the #menubar-container and one should be placed at the very right.
The nav-container should be centered within the middle of the #menubar-container. Basically the positioning is working and I get the desired layout:
[#logo left] [nav centered] [#search right]
However, for some reason the #logo-container is being displayed at the specified dimension of 80px width * 80px height while the #search-container is being displayed at 79px width * 80px height, even through the CSS looks like:
header div#menubar div#logo {
width: 80px;
height: 80px;
background-color: orange;
}
header div#menubar div#search {
width: 80px;
height: 80px;
background-color: orange;
}
To confirm I made a screenshot and zoomed in with Photoshop, selecting the container to view its dimensions.
I can't figure out why the #search-container is missing one pixel in width.
Here is a JSFiddle with the HTML and CSS I am using.
Am I using flexbox correctly?
How do I fix it so both side-containers are 80x80 pixel in dimensions?
Am I using flexbox correctly?
Yes and no
Instead of width you should, ideally, be using the flexshorthand property combining, flex-grow, flex-shrink and flex-basis.
header div#menubar div#logo {
flex: 0 0 80px;
height: 80px;
background-color: orange;
}
Alternatively, you can ensure that the element doesn't shrink by using width AND the flex-shrink value of 0
* {
margin: 0;
padding: 0
}
body {
background-color: #dfe3e5;
}
header div#top {
height: 22px;
/*background-image: url('../img/colorbar.png');
background-position: top left;
background-repeat: repeat-x;*/
background-color: gray;
}
header div#menubar {
background-color: #1c2227;
display: flex;
justify-content: space-between;
}
header div#menubar div#logo {
flex: 0 0 80px;
height: 80px;
background-color: orange;
}
header div#menubar nav {
display: table;
text-align: center;
background-color: darkred;
}
header div#menubar nav ul li {
display: inline-block;
margin-left: -4px;
list-style-type: none;
line-height: 80px;
text-align: center;
}
header div#menubar nav ul li a {
outline: 0;
display: block;
text-transform: uppercase;
padding: 0px 20px;
font-size: 1.1em;
font-family: 'Raleway', "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #eee;
text-decoration: none;
}
header div#menubar nav ul li a:hover {
color: #000;
background-color: orange;
}
header div#menubar div#search {
flex: 0 0 80%;
height: 80px;
background-color: orange;
}
<header>
<div id="menubar">
<div id="logo"></div>
<nav>
<ul>
<li>Articles
</li>
<li>Images
</li>
<li>About
</li>
<li>Disclaimer
</li>
</ul>
</nav>
<div id="search"></div>
</div>
</header>
Then you get the right result
I have been struggling with some CSS Style. The problem is that i am not able to position the images properly. Due to some reason the image is not displaying in proper expected flow. And I also want to centralize the whole content. It is not properly centralize when you resize the the browser. You can easily notice all this issue once you copy past my code. Here is my code. Thanks
HTML
body {
font-family: 'Open sans',sans-serif;
}
#content p {
padding: 5px;
font-size: 0.8em;
}
#wrap {
max-width: 900px;
padding: 3%;
margin: 0 auto;
}
ul {
list-style-type: none;
padding: 0;
}
#contact a {
padding-left: 35px;
background-repeat: no-repeat;
background-size: 20px;
}
#content a {
width: 100%;
display: inline-block;
height: 100%;
}
#content li img {
width: 100%;
}
a {
text-decoration: none;
}
#content li {
float: left;
width: 25%;
margin: 3%;
box-sizing: border-box;
background-color: bisque;
}
footer {
clear: both;
text-align: center;
}
footer img {
width: 25px;
}
h1 {
font-weight: normal;
font-family: 'Change one', sans-serif;
color: #fff;
font-size: 2.4em;
padding: 0px;
margin: 0px;
display: inline-block;
}
h2 {
font-size: .9em;
font-weight: normal;
color: #fff;
margin: 10px 0;
}
#content ul {
padding: 0;
margin: 0;
}
<div id="wrap">
<div id="content">
<ul>
<li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg">
<p>Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-02.jpg"><img src="img/numbers-02.jpg">
<p>Experimentation with color and texture Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-06.jpg"><img src="img/numbers-06.jpg">
<p>Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-09.jpg"><img src="img/numbers-09.jpg">
<p>Experimentation with color and textureExperimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-12.jpg"><img src="img/numbers-12.jpg">
<p>Experimentation with color and texture</p></a>
</li>
</ul>
</div>
<footer>
<img src="img/twitter-wrap.png">
<img src="img/facebook-wrap.png">
<p>© 2014 Chimed.</p>
</footer>
</div>
The issue is that some of your text items in the <p> elements wrap to 3 lines, and some only wrap to 2 lines. This makes them taller than the others. When the next <li> wraps to the next line, it ends up being positioned to the right of the taller item.
Represented visually:
To fix this, you could try to make all your items the same height. That way they would wrap cleanly around each other.
Two "issues" are in your code, as I can see so far.
You're trying to center your content and doing it right with the #wrap. But the list elements inside the list have a width of 25% each, plus 3% margin to the sides, so 31% in total. So the closest you can get to 100% width of the surrounding element is 93%, leaving a gap on the right side, because of your float: left for the list elements. This should fix the problem:
ul {
width: 93%;
margin: 0 auto;
list-style-type: none;
padding: 0;
}
#content li {
display: inline-block;
vertical-align: top;
width: 25%;
margin: 3%;
box-sizing: border-box;
background-color: bisque;
}
I added a width and centering margin to the ul and you're li elements are now inline-block and aligned at their top line.
Here I have a nav bar set up with a centered logo. The only problem is that I can't get it to look quite right with spacing. The logo is set to 'position: absolute' 'left: 50%' and 'margin-left: -125px' so that is always in the center. Now I just need to get the text balanced around it in a more symmetrical way, but I can't seem to figure out how to do so.
Here's the HTML
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navright">HOME</li>
<li class="navright">MENU</li>
<li id="logo"><img src="Images/pantry logo.png" width="536" height="348"/></li>
<li class="navleft">CONTACT</li>
<li class="navleft">ABOUT</li>
</ul>
</div>
</div><!--end header-->
And the CSS.
.header {
width: 960px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
}
div ul li {
display: inline-block;
padding: 105px 70px 40px 0;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
list-style: none;
}
div ul li a {
list-style: none;
text-decoration: none;
color: #4f4d4b;
}
.nav ul li a:visited {
text-decoration: none;
color: #4f4d4b;
}
#logo a img {
width: 250px;
height: auto;
position: absolute;
left: 50%;
margin-left: -125px;
display: inline-block;
}
#logo {
height: 60px;
padding-top: 40px;
width: 250px;
}
You can go to the site here.
Here's what I would do, and this is just the way I would normally go about things.
I would take the padding of the li, then add the 105px padding to the top of the header (or nav). Next, add some arbitrary margin-right to each li element (say 48px), while of course setting li:last-child to margin: 0; Next take the padding-top and the height off the li#logo and change it to this:
#logo { width: 250px; position: relative; }
Finally, just use a transform to center the logo if you are going to use absolute positioning. This essentially does the same thing as the margin-left, but it is a little more flexible. So the image css should look like this:
#logo a img {
width: 250px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
I used this code and it worked perfectly for me. I can make you a fiddle or something also if you are having trouble still.