I'm trying to overlay a transparent box that spans the width of the page at the navigation bar, and then one that spans the entire height of the page. I can get the horizontal bar in, but when I do I can't lower it from the top of the page without lowering all other content as well. Any help would be greatly appreciated.
<html>
<head>
<title>Welcome Home</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="topbar">
<div id="container">
<div id="header">
<div id="logo">
<img id="logo" src="images/WelcomeHomeLogo.png">
</div>
<ul class="toolbar">
<li id="left"> About Us </li>
<li id="left"> Volunteer </li>
<li id="left"> Donate </li>
<li id="left"> Contact Us </li>
<li id="left"> Blog </li>
<li id="right"> Events </li>
</ul>
</div>
</div>
</div>
CSS:
body{
background-image:url("../images/thewood.jpeg");
background-size: cover;
}
#container{
background-color:#ffffff;
width: 69%;
margin-left: auto;
margin-right: auto;
opacity:0.7234;
filter:alpha(opacity=60);
height: 950px;
}
#topbar{
filter:alpha(opacity=60);
opacity:0.7234;
width: 100%;
background-color:#ffffff;
height:150px;
}
li{
float: left;
list-style: none;
display: inline;
color: black;
font-size: 170%;
padding-right:48px;
margin-top: 105px;
}
#logo{
float:left;
margin-top:40px;
padding-right:20px;
padding-left:8px;
}
ul{
display: inline;
}
#right{
float: right;
padding-left:none;
}
a:link {text-decoration:none;color:black;}
a:visited {text-decoration:none;color:black;}
a:hover {text-decoration:none;color: black;}
a:active (text-decoration:none;color:black;}
There are more elegant ways, but this will get you where you need to be with minimal change to your current set-up.
Make #topbar a separate element (not a container for #container) like so:
<div id="topbar"></div>
<div id="container">
<div id="header">
and then adjuste the margins CSS for #topbar and #container accordingly
#container {
background-color:#ffffff;
width: 69%;
margin-left: auto;
margin-right: auto;
opacity:0.7234;
filter:alpha(opacity=60);
height: 980px;
margin-top: -180px; /*Push back to top of page (height of #topbar + 30px)*/
}
#topbar {
filter:alpha(opacity=60);
opacity:0.7234;
width: 100%;
background-color:#ffffff;
height:150px;
margin-top: 30px; /*Move it down*/
}
Related
The code below is panel.css and panel.html. I am trying to set the height of div.sidebar and div.content from its position to the bottom of the page. But setting their height to 100% doesn't actually set their height to the bottom of the page. Instead their height are short. How can I set their height to the bottom of the page?
panel.css
*{
margin:0;
padding: 0;
}
#header{
width: 100%;
height: 50px;
background: #120103;
margin: 0 auto;
}
#header div{
margin-left: 15px;
margin-top: 15px;
float: left;
}
#header div a{
font-size: 1.6em;
color: #fff;
}
#header div a span{
color: #ebebeb;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
}
.sidebar{
width: 250px;
height: 100%;
background: #171717;
float: left;
}
ul li{
list-style: none;
}
a {text-decoration: none;}
ul li a{
display: block;
padding:10px;
color: #ccc;
font-size: 0.8em;
}
.content{
background: lightblue;
width: auto;
height: 100%;
margin-left: 250px;
padding:15px;
}
div.box{
margin-top: 15px;
width: 200px;
height: 50px;
float: left;
margin-left:10px;
}
div.box div.box-top{
color:#fff;
background: #120103;
}
div.box div.box-panel{
color:#333;
background:#fff;
border: 1px solid rgb(44, 47, 40);
}
<!DOCTYPE html>
<html>
<head>
<title>Panel</title>
</head>
<link rel="stylesheet" type="text/css" src ="panel.css">
<body>
<div id="header">
<div>
<a>
This is <span>header</span>
</a>
</div>
</div>
<div class="container">
<div class="sidebar">
<ul>
<li>Sidebar 1</li>
<li>Sidebar 2</li>
<li>Sidebar 3</li>
<li>Sidebar 4</li>
</ul>
</div>
<div class="content">
<div class="box">
<div class="box-top">What's new?</div>
<div class="box-panel">
Lalalalala!
</div>
</div>
<div class="box">
<div class="box-top">What's new?</div>
<div class="box-panel">
Lorem Ipsum what some want some super some greate some!
</div>
</div>
<div class="box">
<div class="box-top">What's new?</div>
<div class="box-panel">
Lalalalala!
</div>
</div>
</div>
</div>
</body>
</html>
It's always a good habit to set the height of html and body to 100% to make sure any child elements are sized properly. The same goes for all parent elements. 100% sizes to the parent, and if the parent's height is zero, the contents will still show because it's overflowing, but 100% of zero is still zero. ;)
Personally, I'm a fan of using html, body { min-height: 100vh; } so the page is never smaller than the window.
If you know the element's vertical position, you can use calc to help you size an element from its current position down to the bottom of the parent. Say for example, your element starts at 250px, and your page is 2000px tall.
CSS
.page { height: 2000px; }
.topElement { height: 250px; }
.bottomElement { height: calc(100% - 250px) }
HTML
<body class="page">
<div class="topElement"></div>
<div class="bottomElement"></div>
</div>
That, or you could use css grid to lay out your pages, which is really handy, but may provide some compatibility concerns.
.page {
display: grid;
grid-template-rows: 250px auto;
}
Add 100% height on html and body
html, body {
height: 100%;
}
*{
margin:0;
padding: 0;
}
html, body {
height: 100%;
}
#header{
width: 100%;
height: 50px;
background: #120103;
margin: 0 auto;
}
#header div{
margin-left: 15px;
margin-top: 15px;
float: left;
}
#header div a{
font-size: 1.6em;
color: #fff;
}
#header div a span{
color: #ebebeb;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
}
.sidebar{
width: 250px;
height: 100%;
background: #171717;
float: left;
}
ul li{
list-style: none;
}
a {text-decoration: none;}
ul li a{
display: block;
padding:10px;
color: #ccc;
font-size: 0.8em;
}
.content{
background: lightblue;
width: auto;
height: 100%;
margin-left: 250px;
}
div.box{
margin-top: 15px;
width: 200px;
height: 50px;
float: left;
margin-left:10px;
}
div.box div.box-top{
color:#fff;
background: #120103;
}
div.box div.box-panel{
color:#333;
background:#fff;
border: 1px solid rgb(44, 47, 40);
}
<!DOCTYPE html>
<html>
<head>
<title>Panel</title>
</head>
<link rel="stylesheet" type="text/css" src ="panel.css">
<body>
<div id="header">
<div>
<a>
This is <span>header</span>
</a>
</div>
</div>
<div class="container">
<div class="sidebar">
<ul>
<li>Sidebar 1</li>
<li>Sidebar 2</li>
<li>Sidebar 3</li>
<li>Sidebar 4</li>
</ul>
</div>
<div class="content">
<div class="box">
<div class="box-top">What's new?</div>
<div class="box-panel">
Lalalalala!
</div>
</div>
<div class="box">
<div class="box-top">What's new?</div>
<div class="box-panel">
Lorem Ipsum what some want some super some greate some!
</div>
</div>
<div class="box">
<div class="box-top">What's new?</div>
<div class="box-panel">
Lalalalala!
</div>
</div>
</div>
</div>
</body>
</html>
When I try to minimize this page/resize it to a size smaller than my screen, espicially when it is minimized in a vertical manner (where the height of the page is longer than the width) the footer becomes blank/white and the background-image becomes shorter.
Take a look here.
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<script src="https://use.fontawesome.com/4c228f39e6.js"></script>
<title>Magna Golf</title>
</head>
<body>
<nav class = "top-navigator">
<div class ="float-left">Magna Golf</div>
<div class ="float-right">
<ul>
<li class ="navi-links">Contact Us</li>
<li class ="navi-links"> Members Login</li>
<li class ="navi-links">About Us</li>
<li class ="navi-links">Guests</li>
<li class ="navi-links">Adena Meadows</li>
</ul>
</div>
</nav>
<div class = "center-container">
<div class ="logo"><img src ="horse.png" alt="Magna Golf Logo>" width="130px"</img>
</div>
<div class ="footer">
<div class="footer-text">Check Us out on Social Media
</div>
<div class="footer-social">
<ul>
<li class="social-links"><a class = "social" href="#" target="_blank">Facebook</a></li>
<li class="social-links"><a class = "social" href="#" target="_blank">Twitter</a></li>
<li class="social-links"><a class = "social" href="#" target="_blank">Instagram</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS---
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
}
a{
color:gold;
text-decoration: none;
}
a:hover{
color:white;
}
.top-navigator{
width:100%;
height:50px;
background-color:rgba(0,0,0,0.4);
backgroud-color:grey;
}
.float-left{
color:gold;
font-family:Cinzel, serif;
letter-spacing: 0.1em;
word-spacing: 0.0em;
width:160px;
font-size:20px;
position:relative;
top:25%;
margin-left:4%;
}
.float-right{
font-family:Cinzel, serif;
text-transform:lowercase;
font-size:12px;
width:530px;
position:relative;
margin-left:58%;
bottom:20%;
}
.navi-links{
display:inline;
margin-left:25px;
}
.center-container{
width:100%;
height:calc(100vh - 50px);
background-image:url("http://magnagolf.com/images/slideshow/bgd3.jpg"); background-size:100%;
background-repeat: no-repeat;
}
.logo{
width:75px;
position:relative;
margin:0 auto;
top:12px;
}
.footer{
width:100%;
position:absolute;
height:20px;
bottom:0; /*to get footer to sick to bottom*/
/*
background-color:rgba(0,0,0,0.4);
*/
}
.footer-text{
width:300px;
height:20px;
text-align:center;
font-family:Cinzel, serif;
font-size:14px;
color:white;
position:relative;
margin-Left:1%;
}
.footer-social{
font-family:Cinzel, serif;
font-size:13px;
width:260px;
position:relative;
bottom:23px;
margin-left:78%;
}
.social-links{
display:inline;
color:white;
margin-left:15px;
}
.social{
color:white;
}
The background image is a url so take sometime to post the code in your editor to see what I mean.
Cheers friends,
Because .center-container's background isn't covering the whole div when the viewport is narrow. Your footer doesn't become blank... it's just positioned over a white background when .center-container's background image doesn't cover the bottom of that element, so the white text/links in the footer on top of a white background means you can't see the contents of the footer.
Changing the background to background-size: cover will ensure the background is applied to the whole div regardless of the shape of .center-container when you resize the window.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {}
a {
color: gold;
text-decoration: none;
}
a:hover {
color: white;
}
.top-navigator {
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, 0.4);
backgroud-color: grey;
}
.float-left {
color: gold;
font-family: Cinzel, serif;
letter-spacing: 0.1em;
word-spacing: 0.0em;
width: 160px;
font-size: 20px;
position: relative;
top: 25%;
margin-left: 4%;
}
.float-right {
font-family: Cinzel, serif;
text-transform: lowercase;
font-size: 12px;
width: 530px;
position: relative;
margin-left: 58%;
bottom: 20%;
}
.navi-links {
display: inline;
margin-left: 25px;
}
.center-container {
width: 100%;
height: calc(100vh - 50px);
background-image: url("http://magnagolf.com/images/slideshow/bgd3.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.logo {
width: 75px;
position: relative;
margin: 0 auto;
top: 12px;
}
.footer {
width: 100%;
position: absolute;
height: 20px;
bottom: 0;
/*to get footer to sick to bottom*/
/*
background-color:rgba(0,0,0,0.4);
*/
}
.footer-text {
width: 300px;
height: 20px;
text-align: center;
font-family: Cinzel, serif;
font-size: 14px;
color: white;
position: relative;
margin-Left: 1%;
}
.footer-social {
font-family: Cinzel, serif;
font-size: 13px;
width: 260px;
position: relative;
bottom: 23px;
margin-left: 78%;
}
.social-links {
display: inline;
color: white;
margin-left: 15px;
}
.social {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<script src="https://use.fontawesome.com/4c228f39e6.js"></script>
<title>Magna Golf</title>
</head>
<body>
<nav class="top-navigator">
<div class="float-left">Magna Golf</div>
<div class="float-right">
<ul>
<li class="navi-links">Contact Us</li>
<li class="navi-links"> Members Login</li>
<li class="navi-links">About Us</li>
<li class="navi-links">Guests</li>
<li class="navi-links">Adena Meadows</li>
</ul>
</div>
</nav>
<div class="center-container">
<div class="logo"><img src="horse.png" alt="Magna Golf Logo>" width="130px" </img>
</div>
<div class="footer">
<div class="footer-text">Check Us out on Social Media
</div>
<div class="footer-social">
<ul>
<li class="social-links"><a class="social" href="#" target="_blank">Facebook</a></li>
<li class="social-links"><a class="social" href="#" target="_blank">Twitter</a></li>
<li class="social-links"><a class="social" href="#" target="_blank">Instagram</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Your Problem
The background image is a landscape image. Resizing the page will resize the image, but only within it's proportions (it is constrained).
When you resize to an area where the image will not cover some of the page, the footer (with white text) will appear on top of the page background (which is white), and thus the text will seem to "disappear".
Solutions
One way to solve this is to add the background-size:cover style to .container_center, to turn off the constraints on image resizing, and just make it fill the visible area. Note that in some situations, this will crop the image, and for people with really big monitors, it may appear stretched.
However, you could (and should) also make a mobile site view using media queries, and simply change the overall look of your site at that point - some of your links disappear at smaller screen widths...
Before 1 min I started in developing a website.
At first I started in making the position of the header fixed then I made the wrapper div that called "all" but this div didn't appear please give me a solution.
body {
margin: 0px;
padding: 0px;
font-size: 1.5em;
font-family: Haettenschweiler;
}
#header {
height: 60px;
background: #363333;
position: fixed;
width: 100%;
}
.header {
margin-left: auto;
margin-right: auto;
width: 70%;
}
#logo {
float: left;
font-size: 40px;
color: white;
}
#menu {
float: right;
margin-right: 200px;
}
.menu{
list-style-type:none;
}
.menu li{
float:right;
font-size:24px;
display:block;
min-width:125px;
text-align:center;
margin-left:5px;
}
.menu li a{
min-width:125px;
display:block;
color:white;
text-decoration:none;
}
#all {
margin-left: auto;
margin-right: auto;
overflow: hidden;
font-family: Gloucester MT;
}
#left{
float:left;
background:yellow;
width:13%;
}
#right{
float:right;
background:yellow;
width:13%;
}
#center{
margin-left:auto;
margin-right:auto;
background:red;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div class="header">
<div id="logo">1111</div>
<div id="menu">
<ul class="menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
<div id="all">
<div id="left">sadf</div>
<div id="right">sasadf</div>
<div id="center">sadf</div>
</div>
</body>
</html>
Display your .all div with position: relative; and set a top value equals to the height of the header.
This is because if you do not set position: relative; it is being displayed taking as reference the parent(the webpage) so it is the reason why your .all div is displayed in the top-left corner of your webpage.
The header is displayed above of your .all div because it is fixed, and fixed elements goes out of the normal flow.
body {
margin: 0px;
padding: 0px;
font-size: 1.5em;
font-family: Haettenschweiler;
}
#header {
height: 60px;
background: #363333;
position: fixed;
width: 100%;
}
.header {
margin-left: auto;
margin-right: auto;
width: 70%;
}
#logo {
float: left;
font-size: 40px;
color: white;
}
#menu {
float: right;
margin-right: 200px;
}
.menu{
list-style-type:none;
}
.menu li{
float:right;
font-size:24px;
display:block;
min-width:125px;
text-align:center;
margin-left:5px;
}
.menu li a{
min-width:125px;
display:block;
color:white;
text-decoration:none;
}
#all {
position: relative;
top: 60px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
font-family: Gloucester MT;
}
#left{
float:left;
background:yellow;
width:13%;
}
#right{
float:right;
background:yellow;
width:13%;
}
#center{
margin-left:auto;
margin-right:auto;
background:red;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div class="header">
<div id="logo">1111</div>
<div id="menu">
<ul class="menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
<div id="all">
<div id="left">sadf</div>
<div id="right">sasadf</div>
<div id="center">sadf</div>
</div>
</body>
</html>
The #all div is sitting behind the #header div.
It's concealed by the height of this div because when you set an element's position to absolute or fixed you're taking it out of the flow of the document.
Declaring a padding-top rule, equal to, or great than the height of #header will push #all down far enough into view.
Example:
#all {
padding-top: 60px;
}
In-browser Developing & Troubleshooting Tip
If you inspect these elements through your browser's developer tool you can see how they stack in relation to each other. For example, chrome will highlight the element on your screen when you hover over the mark-up of said element in the developer tool console/IDE.
Because your #header div has position:fixed it will not affect the positioning of other elements (i.e #all div). So the divs get rendered on top of each others. Try removing position:fixed from header if there's no need for it. Otherwise you have to manually move the #all div downwards a bit.
I made this : jsfiddle Demo
I have the line :
<div id="footer">
<h1><a class="link" href="http://www.centerwow.com">mysite</a></h1>
</div>
How can I center the link mysite in the div footer on the center. width and height it Should be under about(menu).
I try to put position absolute and relative and somehow I destroyed something else.
thanks for any help.
my code:
body {
background: #CC3366 url(images/temp.png) center 130px no-repeat ;
overflow:hidden;
font-family: Arial;
font-size: 30px;
line-height: 32px;
}
#container {
width: 1000px;
overflow: hidden;
position: relative;
height: 450px;
margin: 0 auto;
}
#all_pages {
position: absolute;
left: 0;
top: 0;
width: 3000px;
}
.page {
width: 1000px;
height: 400px;
float: left;
text-align: center;
margin-top: 50px;
}
.page img {
margin-top: 50px;
}
#menu {
background: #000;
}
#menu ul {
list-style: none;
width: 457px;
height: 35px;
margin:auto;
}
#menu ul li {
float: left;
color: #888;
width: 150px;
line-height: 35px;
text-align: center;
cursor: pointer;
}
.active {
color: #fff !important;
}
h1 a {
color: #000000;
text-decoration: none;
}
#footer a{
position:absolute;
bottom:80px;
margin: 0 auto;
}
#footer{
position:relative;
background: #CC3366;
width:100%;
height:1000px;
}
<h1><a class="link" style="position:absolute; left:30px; top:30px;" href="http://www.centerwow.com">portfolio</a></h1>
<div id="container">
<div id="all_pages">
<div class="page">
<h1>Home Page</h1>
<img src="images/home.png" width="300">
</div> <!-- page1 -->
<div class="page">
<h1>About Us Page</h1>
<img src="images/about.png" width="300">
</div> <!-- page2 -->
<div class="page">
<h1>Contact Us Page</h1>
<img src="images/contact.png" width="300">
</div> <!-- page2 -->
</div> <!-- #all_pages -->
</div> <!-- #container -->
<div id="menu">
<ul>
<li id="1" class="link CC3366 active">Home</li>
<li id="2" class="link 33FF66">About</li>
<li id="3" class="link FFFF33">Contact Us</li>
</ul>
</div> <!-- #menu -->
<div id="footer">
<h1><a class="link" href="http://www.centerwow.com">mysite</a></h1>
</div>
Is something like this Fiddle what you're looking for?
Try this:
position :relative
top:50% ;
Left:50%;
works or not?
Can anyone plese explain to me why my image in the footer css doesn't appear as the background? I have both a small unordered list that serves as a navigational menu and the footers main content floated to the left and right respectively, I feel like they are obstructing, however I figured their default value would be transparent.... Any hints please? I am new to this.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>title</title>
<style type="text/css" media="screen, print, projection">
body{
background: #DAA520;
}
#wrap {
width:1000px;
margin:0 auto;
background: white;
}
#alldivs{
}
#header{
background: blue;
height: 150px;
}
#nav{
background: yellow;
padding: 0px;
margin: 0px;
background:white repeat-x;
width:100%;
float:left;
border: 1px solid #42432d;
border-width:1px 0;
}
#nav li{
display: inline;
padding: 0px;
margin: 0px;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#FFFFF0;
float:center;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:blue;
}
#main{
background: white;
float: left;
width: 780px;
padding: 10px;
}
#sidebar{
background: gray;
float: right;
padding: 10px;
width: 180px;
}
#footer{
width: 1000px;
height: 150px;
clear: both;
background-image:url(linktopicture.jpg);
}
#footernav li{
display: inline;
}
#footernav a:link,
#footernav a:visited {
color:gray;
text-decoration:none;
text-transform:uppercase;
padding-left: 15px;
}
#footer ul{
float: left;
width: 500px;
margin: 0px;
padding-top: 35px;
padding-bottom: 3px
text-align: left;
}
#footercontent {
width: 490px:
float: right;
text-align: right;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<br>
<div id="alldivs">
<div id ="wrap">
<div id="header"><img src="linktopicture" alt="text"/> </div>
<ul id="nav">
<li id="home">HOME</li>
<li id="services">SERVICES</li>
<li id="contact">CONTACT</li>
</ul>
<div id="main"><p>
main content
</p></div>
<div id="sidebar">sidebar space</div>
<div id="footer">
<ul id="footernav">
<li id="footernavhome">HOME</li>
<li id="footernavservices">SERVICES</li>
<li id="footernavcontact">CONTACT</li>
</ul>
<div id="footercontent">
<p>
blahh
</br>
blahhh
</p>
</div>
</div>
</div>
</div>
</body>
</html>
You need to contain and clear your floats in the footer, which will allow the background to appear.
Here's an overly-simplified example from your original markup:
<div id="footer">
<ul id="footernav">
...
</ul>
<div id="footercontent">
...
</div>
<!-- Here's the Magic -->
<br style="clear: both; display: block;" />
</div>
There are many ways to clear floated elements, but arguably the most common and easiest to implement is the clearfix approach — or the updated and highly-recommended micro clearfix method.
An example of using a "clearfix" would become:
<div id="footer" class="clearfix">
<ul id="footernav">
...
</ul>
<div id="footercontent">
...
</div>
</div>
if you do not want a full break, add:
<span class="cleaAll"></span>
To your html where RJB said, add:
.clearAll {
display:block;
height:1px;
}
To your css,
Hope it helps.