I have a navigation menu splited by the logo:
<div id="header">
<div id="header-container">
<div class="left-nav">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Awards</li>
</ul>
</div>
<div class="logo">
<h1>Magdi Designs</h1>
</div>
<div class="right-nav">
<ul>
<li>Testimonials</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
CSS
#header {
height: 60px;
margin-top: 30px;
}
#header-container {
width: 80%;
margin: auto;
position: relative;
}
#header li {
display: inline;
line-height: 60px;
}
#header .left-nav {
position: absolute;
top: 0;
left: 0;
}
#header h1 {
background: url(logo.png) no-repeat;
width: 284px;
height: 30px;
margin-top: 15px;
text-align: center;
margin: auto;
}
#header .right-nav {
position: absolute;
top: 0;
right: 0;
}
The <h1> logo tag doesn't seem to apply the margin top.
Sorry if I'm putting too much irrelevant code, but I'm not sure what's causing the problem.
I've also tried padding but still doesn't work.
jsFiddle Demo
Secondary question:
Is this a good way to do the split menu?
Try:
#header h1 {
margin: 15px auto 0;
}
instead of:
#header h1 {
margin-top: 15px;
margin: auto;
}
You're setting margin: auto after margin-top: 15px which is removing the desired margin. The margin: auto isn't needed anyway.
Related
I have a header with an image and navigation links.
For some reason the menu items are not vertically centered.
.header {
position: relative;
margin-top: 70px;
background: red;
height: 40px;
}
.logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 150px;
}
.nav {
list-style: none;
float: right;
}
.nav li {
display: inline-block;
}
<div class="header">
<img src="http://placehold.it/200" class="logo" />
<ul class="nav">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
Live code: https://jsfiddle.net/f2u97o3m/
I tried to add vertical-align: middle to <ul> and <li> items, But it didn't work.
Why it's not centered and how to center it vertically?
.header {
position: relative;
margin-top: 70px;
background: red;
height: 40px;
}
.logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 150px;
}
.nav {
list-style: none;
float: right;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
line-height: 40px;
}
<div class="header">
<img src="http://placehold.it/200" class="logo" />
<ul class="nav">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
You need to add 'margin: 0; padding: 0;' to '.nav' and to specify 'line-height: 40px' to th e'li'. I suppose you'll put inside, be sure you add that to them.
Here is a solution to centering your ul it vertically. Instead of height: 40px; which doesn't account for the height of children, using padding: 10px 0; adds padding above and below the children. Also, instead of float: right; this solution uses text-align: right.
.header {
position: relative;
margin-top: 70px;
background: red;
/* height: 40px; */
padding: 10px 0;
}
.logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 150px;
}
.nav {
list-style: none;
/* float: right; */
text-align: right;
}
.nav li {
display: inline-block;
}
<div class="header">
<img src="http://placehold.it/200" class="logo" />
<ul class="nav">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
One solution would be to convert your element to a flex container.
Your code would look like this:
.nav {
display: flex;
align-items: center;
height: 100%;
float: right;
}
To create a gap between your list items, you could just add some left and right margin:
.nav li {
margin: 0 0.5em;
}
One thing I noticed, too, is that you don't have any margin/padding resets.
At the top of your CSS, put:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
This helps reduce some of the unexpected complications that might arise from an element's default margin and padding.
You can use flexbox for alignment.
https://www.w3schools.com/css/css3_flexbox.asp
If you want to align then at the center and vertically then type like this
.nav {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
If you want it to align horizontally then you can replace the flex-direction with row like
flex-direction:row;
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 2 years ago.
Trying to make the footer in my html css website stick down but nothing works. I've tried changing the position to absolute and fixed and setting bottom: 0 and doing everything but nothing works. Also, is there a better way to make my logo aligned in the middle? Heres my css:
.footer{
background-color: #d62929;
clear: both;
width: 100%vw;
display:block;
overflow: hidden;
padding-top:10px;
padding-bottom: 10px;
min-height: 100%vw;
}
.contact{
margin-left: 30px;
margin: 0 auto;
display:block;
float: left;
padding-right: 50px;
}
.info{
margin-left: 30px;
margin: 0 auto;
padding-left: 30px;
display:block;
float: left;
padding-right: 50px;
}
.account{
margin-left: 30px;
margin: 0 auto;
padding-left: 30px;
display:block;
float: left;
padding-right: 50px;
}
a{
text-decoration:none;
color: black;
font-family: times new roman;
font-size: 18px;
text-align: center;
}
ul{
list-style: none;
text-align: left;
}
.logo_footer{
float: left;
padding: 40px 0;
margin-left: 20px;
margin-right: 40px;
}
h1{
color: white;
font-size: 24;
}
li{
padding: 5px;
}
Heres my html for the footer:
<div>
<footer class="footer">
<img src="{{url_for('static', filename='Logo.png')}}" style="height:108px;width:100px;" class="logo_footer" alt="logo"></a>
<div class="contact">
<h1>Contact us</h1>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Telegram</li>
</ul>
</div>
<div class="info">
<h1>Information</h1>
<ul>
<li>About Us</li>
<li> Contact Us</li>
<li>Return Policy</li>
<li>Delivery</li>
</ul>
</div>
<div class="account">
<h1>Account</h1>
<ul>
<li>Log in</li>
<li> Register</li>
<li> My cart</li>
</ul>
</div>
</footer>
</div>
You can make position:fixed; instead of position:absolute; This will make it fixed to the bottom. if there are any other div or something that's causing an overlay issue, use z-index:5;
I used postion:relative on wrapper div and postion: sticky on footer.
.sectionWrapper {
position: relative;
}
.header {
height: 10vh;
width: 100%;
background: red;
}
.body {
height: 100vh;
width: 100%;
background: blue;
border: 1px solid black;
}
.footer {
height: 20vh;
width: 100%;
background-color: green;
position: sticky;
bottom: 0%;
}
<div class="sectionWrapper">
<section class="header">Header</section>
<section class="body">Body 1</section>
<section class="body">Body 2</section>
<section class="body">Body 3</section>
<section class="footer">footer</section>
</div>
There are multiple ways for that.
Min-height:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
position: relative;
min-height: 100%;
Margin-top, here you do need to specify footer height:
* {
margin: 0;
padding: 0;
}
html,
body,
.footer {
height: 100%;
}
.footer__content {
box-sizing: border-box;
This the best, because the height of the footer doesn't matter:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
display: table;
height: 100%;
This way is a bit different from others because it uses CSS calc() function, and you need to know exact footer height:
* {
margin: 0;
padding: 0;
}
.footer__content {
min-height: calc(100vh - 80px);
}
This is the most correct way, however it works only in modern browsers, as in the 3rd example, the height doesn't matter:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
display: flex;
flex-direction: column;
In my project, I am using this to solve same task, it's the easiest solution that I found in Internet:
body {
position: relative;
min-height: 100vh;
}
.footer {
position: absolute;
bottom: 0px;
}
Here is important to use min-height property in body and not the height one, because actual height of your page can be more that user's screen size.
This solution makes your footer to snap not to screen bottom, but to page bottom.
I'm having an issue with keeping an image at the bottom of my sidebar. When I'm able to center it, it wants to join the higher-up links and won't come down, and when I force it to the bottom, I can't get it to center without dangerous margin hacks.
.sidebar {
height: 100vh;
max-width: 25%;
float: left;
font-family: 'Pontano Sans', sans-serif;
position: fixed;
}
.sidebar li:nth-of-type(1) {
padding-top: 10%;
}
.sidebar li {
color: #8B2500;
margin-top: 40px;
list-style: none;
text-align: center;
margin-left: -35px;
font-size: 20px;
}
#add {
display: block;
margin: 0 auto;
bottom: 0;
position: absolute;
width: 80px;
height: 80px;
}
The html :
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<img id="add" src="images/phoner.png"></img>
</nav>
The image in question is the #add. Position: absolute; brings it to the bottom as desired, but floats it left, and position: relative; brings it center as desired, but pulls it from the bottom. Any input appreciated, thanks.
You are nearly there, the trick in positiong element at the center, when you are using position: absolute is by adding a left,top,right,bottom a 50% and substract the half of the size of the element you want to center.
In your case you just need to
CSS
#add {
display: block; // remove
margin: 0 auto; // remove
bottom: 0;
left: 50%; //added
margin-left: -40px; //added
position: absolute;
width: 80px;
height: 80px;
}
see my sample fiddle
try this it should work
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<div class="clear"></div>
<img id="add" src="images/phoner.png"></img>
</nav>
.sidebar {
height: 100vh;
max-width: 25%;
float: left;
font-family: 'Pontano Sans', sans-serif;
position: fixed;
}
.sidebar li:nth-of-type(1) {
padding-top: 10%;
}
.sidebar li {
color: #8B2500;
margin-top: 40px;
list-style: none;
text-align: center;
margin-left: -35px;
font-size: 20px;
}
#add {
bottom: 0;
display: block;
margin: 0 auto;
bottom: 0;
position: absolute;
width: 80px;
height: 80px;
}
.clear{
clear: both;
}
.COOLelement{
position:fixed;
margin:0 auto;
bottom:0;
width: 100px;
height: 10px;
}
Can you add a container element? That would prevent you from needing explicit sizing or margins.
.sidebar {
height: 80vh;
max-width: 25%;
position: fixed;
background: pink;
min-width: 300px;
min-height: 150px;
}
.stuck-centered {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
#add {
display: block;
margin: 0 auto;
}
body {
padding: 30px;
}
<nav class="sidebar">
<ul>
<li>About</li>
</ul>
<div class="stuck-centered">
<img id="add" src="http://placehold.it/80x80"></img>
</div>
</nav>
Full demo
the html menu that i have inserted into the page through SSI is stretching to the left beyond the hard coded width of the page and i can't figure out why...
if you look at my code, the #menu id is the problem as it is floating properly (float:right;) but the width it seem is being overridden by something....and i can't find out what is overriding it.....i've checked all the properties that would affect #menu but nothing has an effect on it...
here is the webpage where it is clear: http://unifiedforunifat.com/redesign/homepage.html
here is the css for the homepage where the menu is insert:
body{
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin: 0;
padding: 0;
padding-top: 10px;
}
html{
height: 100%;
}
#wrapper{
width: 900px;
min-height: 100%;
height: auto;
margin: 0 auto -4em;
}
#header{
position: relative;
top: 0;
left: 0;
margin-bottom: 1px;
}
here is the corresponding html:
<body>
<div id="wrapper">
<div id="header">
<!--#include virtual="/menus/menu.html" -->
</div>
here is the css for the menu page:
#menu-wrapper{
position: relative;
width: 900px;
margin: 0 auto;
height: 140px;
}
#logo{
background:url('http://www.unifiedforuganda.com/resources/u4ulogo.jpg') no-repeat;
height: 108px;
width: 200px;
position: relative;
top: 3px;
background-position: 0 0;
float: left;
}
#logo span{
position: absolute;
top:0; left:0; bottom:0; right:0;
background:url('file:///Volumes/Despotos/Users/nojohnny101/Documents/Dropbox/Unified%20for%20UNIFAT/website/resources/u4ulogo.jpg') no-repeat;
background-position: -200px 0;
}
#logo:hover span{
opacity: 1;
}
.social{
position: relative;
margin: 50px 0 0 0;
width: 136px;
float: right;
overflow: hidden;
display: block;
}
#menu{
position: relative;
top: 0;
right: 0;
list-style: none;
display: block;
overflow: hidden;
width: 100%;
margin-top: 0;
padding-top: 4px;
border-top: 1px solid black;
float: right;
}
then here is the html for the menu page:
<div id="menu-wrapper">
<div class="menu-header">
<span></span>
</div>
<div class="social">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<ul id="menu">
<li class="active">DONATE</li>
<li class="active">ABOUT US</li>
<li class="active">MEDIA</li>
<li class="active">US MOVEMENT</li>
<li class="active">UGANDA PROGRAMS</li>
</ul>
</div>
any help would be truly appreciated!
so i found the answer...what i ended up doing was put the overflow: hidden; property on the #menu-wrapper id....i don't know if i totally understand why this helped to hide the extra width to the left of the page even though a hard width was specified (900px) and the border is actually applied to the #menu id not the #menu-wrapper id.....
but problem....thanks #MrLister
I'm building the framework for a responsive site that has a fixed header and 25px padding on both right & left sides of the page. I'm not encountering any issue with the padding or width on the content, but the fixed header runs off the right side of the browser when the display is too small. I'd like the header to obey the same rules and design as the rest of the page, and always show a 25px padding unless the display is narrower than my min-width.
Any help would be appreciated. This seems rather simple, but I'm pulling my hair out.
CSS:
#main {
padding: 0 0px 0 25px;
min-width: 725px;
max-width: 1000px;
margin: 0 auto;
}
#page {
padding: 0 25px 0 25px;
display: block;
margin: 0 auto;
max-width: 1000px;
min-width: 725px;
position: relative;
}
ul#header-nav {
margin: 33px 0px 0 0px;
list-style:none;
width:500px;
font-family: "ss-bol", Helvetica, Arial, sans-serif;
overflow: hidden;
}
ul#header-nav li a {
text-decoration:none;
padding-left: 30px;
color:#000000;
float:left;
text-align: right;
display:inline;
}
#container {
padding-top: 100px;
left: 0;
height: 100%;
}
#header-main {
width: 100%;
margin: 0 -25px 0 0px;
}
#header-frame {
z-index: 10;
background-color: #c9dcb1;
float: right;
}
#header-box {
width: 100%;
max-width: 1000px;
min-width: 725px;
padding-left: -25px;
height: 100px;
background-color: #ffffff;
margin:0px;
position: fixed;
background-color: #c9dcb1;
z-index: 11;
}
#content {
padding-top: 100px;
width: 100%;
background-color: #75efe8;
}
HTML:
<body>
<!-- BeginHeader -->
<div id="page" class="clearfix heed">
<div id="header-main">
<div id="header-box">
<div id="header-frame">
<ul id="header-nav">
<li>NEW</li>
<li>SHOP</li>
<li>WINE</li>
<li>BLOG</li>
<li>LOOKBOOK</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
<div id="content">
TEST CONTENT TEXT
</div>
</div>
</body>
padding, margin and border are added to the with of an element. So, when your display is to small, by telling max-width: 1000px, you imply 1050px because of the padding.
The easy solution is to replace width: 100% by this left and right set as 0, and center your inner content.
<div id="header-box">
<div class="inner">header</div>
</div>
#header-box {
max-width: 1000px;
min-width: 725px;
position: fixed;
left: 0;
right: 0;
top: 0;
}
#header-box .inner {
max-width: 1000px;
margin: 0 auto;
}
Simon, I took the basics of your approach and expanded upon it to get what I needed.
Here's the final CSS:
#header-wrapper {
padding: 0;
margin: 0;
}
#header {
position: fixed;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 9;
background-color: #ffffff;
}
#header .inner {
margin: 0 auto;
padding: 0 25px 0 25px;
max-width: 1000px;
height: 100px;
z-index: 10;
background-color: #ffffff;
}
ul#header-nav {
margin: 58px -20px 0 0px;
list-style: none;
width: 500px;
font-family: "ss-bol", Helvetica, Arial, sans-serif;
font-size: 14px;
overflow: hidden;
}
ul#header-nav li a {
text-decoration: none;
padding-left: 30px;
color: #000000;
float: left;
text-align: right;
display: inline;
}
And the HTML:
<div id="header-wrapper">
<div id="header">
<div class="inner">
<div class="right">
<ul id="header-nav">
<li>NEW</li>
<li>SHOP</li>
<li>WINE</li>
<li>BLOG</li>
<li>LOOKBOOK</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
Thanks again!