so I did searches on here beforehand, trying to find an answer to my question, but all the solutions I found gave me no results. Basically, I have an image in my div#wrapper that I'd like to display, but it won't unless I fill the area -after- the respective div with text.
I have overflow:auto; in my #wrapper since I have floats in the succeeding divs.
CSS file:
#media only screen and (min-width: 25em) {
html {
background: url(images/gridbg.jpg) repeat fixed center top;
}
}
#media only screen and (max-width:25em) {
html {
background-color:#0c0c1f;
}
}
img {
border:0px;
}
textarea:focus, input:focus{
outline: none;
}
#wrapper {
margin:0 auto;
width:60em;
overflow:auto;
background-image:url(images/cont-bg.png);
}
#content {
text-align:justify;
position:fixed;
width:59em;
height:100%;
overflow:auto;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.4em;
padding-right: 0.4em;
outline:none;
z-index:2;
margin-top:12em;
}
#homeNav {
position:fixed;
float:left;
margin-left:0.65em;
margin-top:0.65em;
z-index:3;
}
#primaryNav {
z-index:2;
float:right;
margin-left:28em;
margin-top:1em;
position:fixed;
}
#navGFX {
background-image:url(images/navGFX.png);
background-repeat:no-repeat;
width:60em;
height:8em;
float:left;
position:fixed;
z-index:1;
margin-top:3em;
}
HTML file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ag Design</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="scrollstyles.css"/>
<script type='text/javascript' src="js/flexcroll.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navGFX">
<div id="homeNav"><img src="images/buttons/btn_logo.png"></div>
<div id="primaryNav">
<img src="images/buttons/btn_home.png">
<img src="images/buttons/btn_link1.png">
<img src="images/buttons/btn_link2.png">
<img src="images/buttons/btn_link3.png">
<img src="images/buttons/btn_link4.png">
</div>
</div>
<div id="content" class="flexcroll">
This area is full of filler text
</div>
</div>
</body>
</html>
I haven't the foggiest clue what I'm doing wrong. Anyone have any ideas? :/
Just remove the CSS:
position: fixed;
from the #wrapper id and the background-image will appear
Related
I want my footer inner div wrappers to mov from right to underneath left and center when I use responsive media queries. However, when moving last element "Contact us" from right to left, it goes below but it does not center, and the previous div "follow us" is not position in the same line as "copyright".
Codepen here
HTML
<!doctype html>
<html>
<head>
<title>Agency</title>
<meta charset="utf-8">
<link href="footer.css" rel="stylesheet" merdia="handheld">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="footer">
<h1>Footer</h1>
<div class="copyright">
<h3>Copyright</h3>
</div>
<div class="social">
<h3>Follow us:</h3>
<p> Twitter, Facebook, Youtube</p>
</div>
<div id="contactfooter">
<h2> Contact </h2>
<p>Contact Form would go here</p>
</div>
</div>
</body>
CSS
/*footer.css*/
*{
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
}
body
{
background-color:#DCDCDC;
}
.wrapper{
max-width:1200px;
width:100%;
margin:auto;
}
.header{
width:100%;
background-color:green;
height:20vh;
}
.footer{
width:100%;
background-color:orange;
font-size:1em;
overflow:hidden;
padding-bottom:3%;
clear:both;
padding-top:5%;
border-top:3px solid #0099FF;
color:black;
}
.copyright{
width:25%;
background-color:red;
float:left;
margin-left:10%;
}
.copyright p{
font-size:0.938em;
line-height: 2em;
}
.social{
width:20%;
background-color:yellow;
float:left;
margin-left:8%;
}
#contactfooter{
width:20%;
background-color:blue;
float:right;
margin-right:10%;
display:block;
}
#contactfooter h2, #contactfooter{
font-size:1.250em;
text-align: center;
}
/*---------MEDIA QUERIES----------*/
#media (max-width:1020px){
.copyright{
margin-left:25%;
float:left;
}
.social{
float:right;
margin-right:25%;
}
#contactfooter{
float:left;
width:30%;
margin:auto; /*does not margin to the center of the footer wrapper.. why?*/
/*margin-right:0%;
margin-left:45%;*/
}
}
You do not need to change their margins for smaller screens, just fix their width.
I tried to create a cross at the center of the body with a red background, screenshot:
This is the html fragments:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
padding:0;
margin:0;
width:100%;
height:100%;
}
.mask{
width:100%;
height:100%;
}
.mask .row{
position:absolute;
left:50%;
width:40px;
margin-left:-20px;
top:50%;
}
.mask .col{
position:absolute;
top:50%;
height:40px;
margin-top:-20px;
left:50%;
}
</style>
</head>
<body>
<div class="mask">
<div class="row" style="height: 2px; margin-top: -1px; background: red;"></div>
<div class="col" style="width: 2px; margin-left: -1px; background: red;"></div>
</div>
</body>
</html>
And it worked as expected in IE7+,FF, chrome. Demo:http://jsfiddle.net/3f2RE/
However the div have an unexpected height in IE6, screenshot:
I do not know what's going on? Any way to fix it?
so overflow: hidden solver your problem, so its commenter's task to paste comment as answer. Or askers should do this, so other visiters will know that this question has a right answer.
I have searched the web, but I cannot find the answer. Hope someone help me
out.
In my page, the right column is push down under the left column because the
width problem. Is that any way I don't need to change the width for all
element? I means let the right column is overlap the div which class is
wrapper?
There is my html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: purple;
}
div.wrapper {
width: 80%;
border-style:solid;
border-color:black;
}
div.one {
width: 300px;
float: left;
height: 300px;
border-style:solid;
border-color: #0000ff;
}
div.two {
width: 1024px;
border-style:solid;
border-color:yellow ;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">The left column</div>
<div class="two">The right column</div>
</div>
?
</body>
there is the screen shot of my page:
Solution:
<!DOCTYPE HTML>
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color:purple;
}
div.wrapper {
width:80%;
float:left;
border-style:solid;
border-color:black;
}
div.one {
width:45%;
float:left;
height:300px;
border:1px solid blue;
}
div.two {
width:45%;
float:right;
border:1px solid yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">The left column</div>
<div class="two">The right column</div>
</div>
</body>
</html>
Result:
Try changing second div style to
div.two {
border-style:solid;
border-color:yellow ;
margin-left: 310px;
}
This is the second time I have encountered an unnecessary scrollbar, and the first time I fixed it by adding body{margin:0;}; however, I have no idea what is going on this time. Any ideas?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="Style-Sheets/style.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="Style-Sheets/ie.css" /><![endif]-->
<!--[if !IE 7]><link rel="stylesheet" type="text/css" href="Style-Sheets/!ie7.css" /><![endif]-->
<!--[if OPERA]><link rel="stylesheet" type="text/css" href="Style-Sheets/opera.css" /><![endif]-->
<link rel="icon" href="Favicons/favicon.jpg" />
<!--<base target="_blank" />-->
<title>Home</title>
</head>
<body>
<div id="wrap">
<div id="header">
<p class="title">Title</p>
<p class="nav-down"><span class="verticle-bar">|</span> <a class="navigation" href="index.html">Home</a> <span class="verticle-bar">|</span> <a class="navigation" href="about.html">About</a> <span class="verticle-bar">|</span> <a class="navigation" href="blah/index.html">blah</a> <span class="verticle-bar">|</span> <a class="navigation" href="blah2.html">blah2</a> <span class="verticle-bar">|</span></p>
</div>
<div id="body">
</div>
</div>
<div id="footer">
<div class="footer">
<span class="verticle-bar">|</span> 
<a class="footer-link" href="">About The Developer</a> 
<span class="verticle-bar">|</span>
</div>
</div>
</body>
</html>
CSS: (from style.css, which is (or should be) the only style sheet affecting the page)
html {
height:100%;
margin:0;
padding:0;
background-color:#FFFFFF;
text-align:center;
font-family:arial;
line-height:1.5;/*test*/
color:black;
}
body {
margin:0;
height:100%;
}
p {
margin:0;
padding:0;
}
#wrap {
min-height:100%;
}
#header {
z-index:2;
position:fixed;
top:0;
left:0;
right:0;
height:4.25em;
background-color:#6D8CE7;
font-family:gabriola;
line-height:1em;
letter-spacing:0.2em;
}
.title {
font-size:3em;
line-height:1.0em;
color:white;
}
#body {
margin-left:5em;
margin-right:5em;
padding-top:4.25em;
overflow:auto;
padding-bottom:4em; /* must be same height as footer */
}
#footer {
position:relative;
margin-top:-4em; /* negative value of footer height */
height:4em;
clear:both;
}
.footer {
position:absolute;
left:0;
right:0;
bottom:0;
}
.verticle-bar {
color:black;
font-family:gabriola;
}
a.navigation:link {
text-decoration:none;
color:black;
}
a.navigation:visited {
text-decoration:none;
color:black;
}
a.navigation:hover {
text-decoration:underline;
color:black;
}
a.navigation:active {
text-decoration:underline;
color:black;
}
.footer-link {
font-family:gabriola;
}
a.footer-link:link {
text-decoration:none;
color:#CC5500;
}
a.footer-link:visited {
text-decoration:none;
color:#CC5500;
}
a.footer-link:hover {
text-decoration:underline;
color:#CC5500;
}
a.footer-link:active {
text-decoration:underline;
color:#CC5500;
}
A quick fix is to add overflow: hidden to the CSS for your #footer.
Note: A scrollbar will still appear if your #body content flows out of the the viewport.
Fiddle
#footer {
overflow:hidden;
position:relative;
margin-top:-4em;
/* negative value of footer height */
height:4em;
clear:both;
}
use overflow:hidden property in html tag as
html
{
overflow: hidden;
}
It will remove unnecessary scroll bars.
By default, this property is auto in case of html tag.
Depending on the direction you want to hide scroll bar
Horizontally
html{
overflow-x: hidden;
}
Vertically
html{
overflow-y: hidden;
}
N.B:
overflow: hidden; => both horizontal and vertical so be careful and know what you actually want.
I am learning on how to work with CSS. Currently, I am trying to learn about CSS positioning. I use different background color for each div section, so I know which area of the page that gets affected when I make code changes.
I am working right now on my header page and stumbled into one thing that I do not understand. I have a logo and put it inside its own div. The problem that I can see, below the logo there is a whitespace (i use pink background color for the div) and I cannot get rid of it. So below is the code that I use and the screenshot of what the header looks like currently.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Print Repair Form</title>
<style type="text/css">
* {
margin:0;
padding:0;
font: 12px/1.5 Georgia, serif;
}
#page-wrap {
width: 800px;
margin: 0 auto;
}
#header {
background-color:#88d;
overflow: auto;
}
#logo {
float:left;
background-color: #ffccff;
}
#logo a img {
border:none;
}
#address-container {
display: table;
float: left;
width: 164px;
background-color: #FC730A;
height: 104px;
}
#address-content{
display:table-cell;
vertical-align: middle;
}
#repair-header {
background-color:#d4d4d4;
float:left;
width:380px;
}
#customer-info {
float: left;
width:220px;
background-color: #ffff99;
}
#wo-info {
background-color: #99ff99;
}
#content {
clear:both;
background-color:#33d;
}
</style>
</head>
<body>
<div id="page-wrap">
<div id="header">
<div id="logo">
<img src="/fms/images/windows8-cropped.jpg" />
</div> <!-- div logo -->
<div id="address-container">
<div id="address-content">
456 Some Addresses <br />
The City, XP 444411 <br />
1-800-000-0000 <br />
www.someaddress.com
</div>
</div>
<div id="repair-header">
<p>Repair Detail</p>
</div>
<div id="customer-info">
<p>12345678</p>
<p>Facility Name</p>
</div>
<div id="wo-info">
<p>WO: 12345789</p>
</div>
</div> <!-- div header -->
<div id="content">
<p>Content is here</p>
</div>
</div> <!-- div page-wrap -->
</body>
</html>
Add the property
line-height: 0;
to your logo div
#logo {
float:left;
background-color: #ffccff;
line-height: 0;
}
and modify your image css to:
#logo a img {
border:none;
vertical-align:bottom;
}