I am unable to center the footer on the page. All content is centered on the page and set to 1280px, so it does not take up the entire width of the page. The issue is that everything on the page is centered except the footer. It is the correct width, but the footer is pushed hard left. Any ideas what I am missing?
This is what the footer looks like currently:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../Css/Style.css">
<link rel="icon" type="png" href="../Pictures/Icon.png">
<meta charset="utf-8"/>
<meta name="description" content="xxx">
<meta name="keywords" content="xxx">
<meta name="author" content="xxx">
<title>xxx</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>xxx</h1>
<h2>xxx</h2>
</div>
<div>
<hr/>
</div>
<div id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">Manage Income</li>
<li class="menuitem">Manage Bills</li>
<li class="menuitem">View Calendar</li>
</ul>
<a id="signout" href="SignOut.html">Signout</a>
</div>
<div class="pie"></div>
</div>
</body>
<footer>
<a id="contact" href="xxx.html">Contact Us</a>
</footer>
</html>
footer{
display: block;
width: 1280px;
height: 35px;
text-align: center;
bottom: 0px;
position: fixed;
float: none;
margin: auto;
background-color: #B6B6B4;
}
Your example code appears to align correctly for me.
Note that your width of 1280px means that the text will be centered at exactly 640px (half of 1280px), and this is likely outside of your viewport at smaller widths, meaning it will seem as though your text is not central.
To remedy this, use a percentage-based width instead, such as 100% to indicate that your footer should occupy the full width available:
footer {
display: block;
width: 100%;
height: 35px;
text-align: center;
bottom: 0px;
position: fixed;
float: none;
margin: auto;
background-color: #B6B6B4;
}
<footer>
Test
</footer>
As you can see in the above example, the text is visible even though the viewport is narrow.
Note that it's also possible that your footer's CSS is being overridden by a selector with higher specificity. You can use the F12 Debugger to ensure that your rules are being applied correctly.
Hope this helps! :)
Related
I'm having an issue, primarily on mobile devices (in my case, an iOS device) where a div is seemingly preventing scroll-chaining; this is problematic because it's the first place you would touch to scroll (as opposed to a smaller div above it). Similarly for scrolling back up. I couldn't find anything online stating that there was a parameter or property default to mobile webkit that would contain a div. It seems though maybe this is behavior on iOS webkit, as notably, a second swipe on the final image after the "bounce" of the scroll of the div returns to normal positioning in the div allows a scroll (sometimes seemingly inconsistently?)
I've managed to recreate the issue with a test with minimum code repeated from my project (view on mobile! overscroll works fine on desktop)
https://codepen.io/hennigarj/pen/ZEjYrpW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<style>
#container {
display: block;
width: 100%;
height: 100%;
padding-top: 4vh;
}
.flex-items {
width: 100%;
overflow: auto;
}
.flex-items:nth-child(1) {
display: block;
height: 10vh;
}
.flex-items:nth-child(2) {
display: block;
margin-top: 4vh;
margin-bottom: 4vh;
height: 64vh;
text-align: center;
}
.flex-items img {
max-width: 100%;
}
.flex-items:nth-child(3) {
display: block;
padding-bottom: 6vh;
}
</style>
</head>
<body>
<div id="container">
<div class="flex-items">
Div 1
</div>
<div class="flex-items">
<section id="highlights">
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
</section>
</div>
<div class="flex-items">
Div 3
</div>
</div>
</body>
</html>
Anyone have any ideas? I've tried all sorts of overflows and overscroll-behaviors on everything but nothing seems to fix this, and there is no value to specifically enable scroll-chaining through overscroll.
This is probably clear as day and I'm completely missing it.
Thank you :)
I've tried various different potential heights, overscroll-behaviors, overflows on divs (to no success). Ideally, hitting the end of the div would continue the scroll-chain past it, just as it does on desktop, but it contains. I've tried -webkit-overflow-scroling: auto as well.
I made a header. It contains only a logo and a website title. The logo is a link to the main page. My problem is that I can't seem to get the logo to be all the way to the left in the header and I want it to resize so it fits into the header (instead of: header gets bigger because of logo). I placed the logo and the website name/title in two different divs.
Setting the with or height to 100% was something that often came by. I have tried to use this, but it wouldn't work.
"object-fit" should also be an option, but my IDE doesn't recognize this property.
When I use "float: left;" for the logo, it goes all the way to the left, but it also goes out of the header (well, it looks like it does) and pushes my other divs beneath the header/page content to the right.
the HTML:
<div class="header">
<a href="index.html" class="logo">
<img src="image.png">
</a>
<div class="header-right">
<h1>Website title/name</h1>
</div>
</div>
the CSS:
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.logo{
display: block;
margin-left: auto;
max-width: 100%;
height: auto;
}
one way you can achieve this by having two images one for desktop version and other for mobile version. Using window.navigator you can identify whether you are in mobile or in desktop.
Sometimes resizing the logo may shrink and may not look good. Instead having two different logos (small one for mobile = small size) should serve your purpose.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.logo{
float: left;
display: block;
margin-left: auto;
width:250px;
height: 50px;
height: auto;
}
</style>
</head>
<body>
<div class="header">
<a href="index.html" class="logo">
<img width="200px" height="150px" src="https://groceriesandveggies.in/wp-content/uploads/2017/09/gv_small_logo.jpeg">
</a>
<div class="header-right">
<h1>Website title/name</h1>
</div>
</div>
</body>
</html>
Im trying to use a full screen image as my headers background but for some reason the image is not showing up and I cant figure out what im doing wrong. Can someone help? The image is in the same folder as the html and css files btw.
CSS
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header{
background-image:url(headerbackground.png);
width: 100%;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="header">
<ul class="col-4">
<li>SOBRE</li>
<li>TRABALHOS</li>
<li>CONTACTO</li>
</ul>
</div>
</header>
</body>
</html>
Since you've given your header div (#header) no explicit height and floated the only child it has, it collapses and acts like it has no content. Either give it a height or add overflow:auto to the CSS rules for it.
Agree with #j08691.
Working with html layout and css, it's always helpful, for me at least, to add following css:
border: 1px solid green; //or any color you like
so that we can see clearly how is the layout.
additional, in case you have issue with src image size, you may use
background-size: cover;
I'm a beginner programmer and I'm not sure why my <header> and <section> divs are overlapping one another. I thought that since they were block elements, <section> would start below <header>. Any thoughts? Is there something I need to add in my CSS?
<!DOCTYPE html>
<html>
<head>
<title>Greg's List</title>
<meta charset="utf-8" name="description" content="This is the challenge page for the CSS Layout Lesson in Thinkful. Here I'll be creating a search page for Greg's List">
<!-- reset -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min. css">
<!--styles-->
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header>
<nav class="container">
<h1 class="title">Greg's List</h1>
<ul class="links">
<li class="posts">Post</li>
<li class="account">Account</li>
</ul>
</nav><!--end of nav-->
</header><!--end of header-->
<section class="search">
<form>
<input class="search-bar">
<img src="images/magnifying-glass.png" class="search-pic">
</form>
</section><!--end of section-->
</body>
</html>
CSS
header {
width: 100%;
height: 60px;
background-color: Gainsboro;
position: fixed;
}
h1 {
font-family: Arial;
}
.title {
display: inline-block;
margin-top: 12px;
margin-left: 20px;
}
ul {
display: inline-block;
float: right;
}
li {
display: inline-block;
margin-right: 20px;
font-size: 25px;
}
Remove position: fixed from header css.
Remember, when you ask question:- Make sure you add the complete code as there is no div in your code
I popped your CSS and HTML into this JSFiddle but am not seeing any immediate issues.
That being said, I noticed that you have a float: right; on your <ul> but you don't clear it anywhere, and so this could cause elements to overlap. Assuming you've used floats elsewhere, you need to be sure to clear:both; at each level you float elements, like so:
CSS
.clear {
clear: both;
}
HTML
<nav class="container">
<h1 class="title">Greg's List</h1>
<ul class="links"> <!-- FLOATED ELEMENT -->
<li class="posts">Post</li>
<li class="account">Account</li>
</ul>
<div class="clear"></div> <!-- CLEAR FLOATS -->
</nav><!--end of nav-->
I don't think you've really included enough information (you mentioned overlapping div elements, but then posted HTML that didn't contain a single div), so I'm shooting in the dark here.
EDIT: Check out Nirjhar Vermani's answer to your question as well. You have a position: fixed; on your header, which I originally assumed was intentional, however this would cause your header to stay in a static position in the window and ignore the elements around it.
I'm having trouble positioning my vertical navigation bar to the left of my content Div. Here is what I have and what I want:
The problem, is that it's a fixed position so it's different for monitors that are not a similar size. So I'm guessing I'll need to have relative positioning but I'm not too sure on how to do it.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href= "styles/styling.css" />
</head>
<div class="container">
<ul class="nav">.....(Just nav bar stuff)
<div class="content">
<h1>abcd</h1>
<p>abcd</p>
</div>
CSS
.content {
background-color: #FFFFFF;
width: 650px;
padding: 20px;
margin: auto;
word-wrap: break-word
}
.container {
position: fixed;
top: 151px;
left: 420px;
}
Thanks!
Fixed position will help you keep your menu visible when you scroll down. Otherwise, you should not use it.
<div class="container">
<div class="one-third column">
<ul class="yourmenu">xxx</ul>
<div class="filler"></div>
</div>
<div class="two-thirds column">
Your page content here
</div>
</div>
<style>
.container {width:960px;margin:auto;}
.column {float:left;position:relative;}
.one-third {width:320px;}
.two-thirds {width:640px;}
.filler {width:100%;height:10px;}
.yourmenu {position:fixed;top:100px;} /* do not define left, because it will fix the screen and not the column div */
</style>
Use percent (%) instead of pixels (px).