I'm trying to have a responsive page here. Its working fine for the background image, but I have no idea how to do it for the other div elements. I'm actually a beginner at this. So please explain to me how i should structure my elements. Thank you so much.
here is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>PAGE</title>
</head>
<div id="wrapper">
<div id="content">
CONTENT. CONTENT. CONTENT. CONTENT.
CONTENT. CONTENT. CONTENT. CONTENT.
CONTENT. CONTENT. CONTENT. CONTENT.
CONTENT. CONTENT. CONTENT. CONTENT.
CONTENT. CONTENT. CONTENT. CONTENT.
</div>
<div id="push">
</div>
</div>
<div id="footer">
© Copyright 20XX
</div>
</body>
</html>
And my CSS:
html
{
background-image: url(wildbull-crop.jpg);
background-repeat:no-repeat;
background-position: center top;
background-color:rgb(194,190,189);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
width:100%;
}
body
{
height:100%;
overflow:hidden;
}
#content
{
width:33%;
border:solid thin black;
background-color:white;
opacity:0.7;
}
#footer
{
position:absolute;
left:0;
bottom:0;
width:100%;
height:100px;
background-color:orange;
}
#wrapper
{
min-height:100%;
width:100%;
border:solid thin white;
height:100%;
margin-bottom:100px;
}
Research CSS3 media queries by screen size. Here is a good example to get you started:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Related
I created a web page image fills the screen 100%.
but, Problems occurred.
I want to fill up the picture on a Web page, as shown below:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#section
{
margin-top:240px;
margin-left:140px;
padding:10px;
text-align:center;
}
#top-slogan
{
width:100%;
height:953px;
background: url('background.png') center;
}
#top-header
{
z-index:100;
position:absolute;
width:100%;
height:133px;
}
</style>
</head>
<body>
<div id="top-slogan" class="wrapper">
<div id="top-header" class="section">
</div>
</div>
</body>
</html>
The results came out, there are some problems.
Without being tightly filled, the image is repeated.
I want a solution.
I want delete "This part":
You can add this style
#top-slogan{
background-repeat: no-repeat;
background-size : cover;
background position : center center;
}
You can add no-repeat. Then it won't repeat.
" background-repeat: no-repeat;"
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#section
{
margin-top:240px;
margin-left:140px;
padding:10px;
text-align:center;
}
#top-slogan
{
width:100%;
height:953px;
background: url('backgroung.png') center;
repeat:no-repeat;
}
#top-header
{
z-index:100;
position:absolute;
width:100%;
height:133px;
}
</style>
</head>
<body>
<div id="top-slogan" class="wrapper">
<div id="top-header" class="section">
</div>
</div>
</body>
</html>
You can scale this image by setting it's width and height .
#top-slogan
{
width:100%;
height:953px;
background: url('backgroung.png') center;
background-size: 100% 100%;
repeat:no-repeat;
}
Try this One
#top-slogan
{
width:100%;
height:953px;
background: url('background.png') no-repeat center;
background-size :cover;
}
When I place fixed background image in div at top of screen that has width:100% and height:100% it gets covered up by the content that is supposed to be beneath it like this:
But when I use a pixel value for the height like 100px this occurs:
I want to be able to use width:100% and height:100% to be able to get a fullscreen fixed background image that doesn't get covered up.
HTML:
<div class="background">
<div class="hero">
<div class="arrow_down">
<a><i class="fa fa-angle-down"></i></a>
</div>
</div>
</div>
CSS:
.background {
position:relative;
top:0;
overflow:hidden;
height:100%;
width:100%;
}
.background .hero {
background-image: url('../images/background.jpg');
background-repeat:no-repeat;
background-size:100% auto;
background-attachment:fixed;
background-position:center top;
width:100%;
height:100px;
}
You should try using height: 100vh;, which is a tried and true method to solve this. I would test it on your website, but you didn't include it, so I'll post an example:
body{margin:0px;}
.background {
position:relative;
top:0;
overflow:hidden;
height:100%;
width:100%;
}
.hero {
margin:0px;
padding:0px;
background-image: url('http://www.funnycatpix.com/_pics/Arghhhh532.jpg');
background-repeat:no-repeat;
background-size:100% auto;
background-attachment:fixed;
background-position:center top;
width:100%;
height:100vh;
}
<div class="hero"></div>
<div class="background">
<div class="arrow_down">
<a><i class="fa fa-angle-down"></i></a>
</div>
</div>
In a nutshell, i want a right div float to extend vertically 100%
but it only works when i don't include <doctype> on my html
in today's standard, do i really have to add <doctype>?
This is the result in Internet Explorer:
this is just simple html
<html>
<head>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#left {
background:yellow;
float:left;
width:70%;
min-height:100%;
}
#right {
background:pink;
float:right;
width:30%;
min-height:100%;
}
</style>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
in today's standard, do i really have to add <doctype>?
You don't have to do anything, but the absence of the DOCTYPE is essentially asserting that you conform (in the loosest sense of the term) to an unknown/inconsistent "quirks" standard.
I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height.
ensure that height is set on the HTML and BODY elements.
ensure that height is set on any parent containers.
Working example: http://jsfiddle.net/7xxFj/
<div id="one">
First column
</div>
<div id="two">
second column
</div>
HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }
As #BoltClock pointed out in the comments, you probably want a layout that can extend beyond 100%. This requires a little more effort (but still works well within the standard).
This article shows several methods for accomplishing layouts with equal column heights. More methods here.
If you are thinking of considering IE (any version for that matter, lets not digress to this topic), then you are better of specifying the DOCTYPE. I have seen many pages which do not do this properly through IE into the famous Quirks mode.
Use this Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
I want to put an HTML element in the middle of the page, horizontally and vertically, but I'm having a hard time making it align even horizontally. I want to center the div "content". Here is my css:
#background
{
position:absolute;
width:100%;
height:100%;
margin:0px;
padding:0px;
left:0px;
right:0px;
z-index:1;
text-align: center;
}
#content
{
margin-left: auto;
margin-right: auto;
width: 200px;
z-index: 2;
position: absolute;
}
And here is my HTML:
<html>
<head>
<link REL="STYLESHEET" TYPE="text/css" HREF="style/myStyle.css">
</head>
<body style="padding:0px; margin:0px; overflow:hidden;">
<div id="background"><img src="images/backgroundimage.png" width="100%" height="100%">
</div>
<div id="content">
<p>Here is some content</p>
</div>
</body>
</html>
Since the div has to be positioned as absolute, doing this:
margin: 0 auto;
Won't work. I'm not sure what to do. Also, I want it in the center of the page vertically. Help is appreciated, thanks.
Edit: I need the background to be in a separate div so that it's re-sizable, and the content doesn't show if the position is relative.
<html>
<body>
<div id="background">
<div id="content">
<p>Here is some content</p>
</div>
</div>
</body>
</html>
A better structure for put contents on the middle,without use JQuery:
#background{
background: url(images/backgroundimage.png) top no-repeat;
width:100%;
height:100%;
position:relative;
}
#content{
position:absolute;
top:50%;
left:50%;
width :200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
}
If you are using the div id background for a background image you can style the div using css, more info at the w3schools site.
Ideally i would use a background image for the body tag rather than creating a new div with an image.
For centring content try and play around from my example.
Matt
Try to make the padding a higher number, padding is how many pixels in between the side of the screen and the text/table/picture/object. So padding should be like, say 20-40. Also, try deleting position absolute; it makes the text/table/picture/object always on the left instead of the middle.
We have a iamge banner on our web page that is a gradient that is repeated on the x-axis. The problem is, if our content on our web page (which is dynamically created based on data in our database) spans a width greater than the window width, then our banner no longer spans the entire width of the document when scrolled. Anyone know how to fix this?
A simple example is posted below. The blue is our "banner" the "red" is our content.
<html>
<head>
<style>
*{
padding:0;
margin:0 auto;
}
#header{
height:80px;
background-color:blue;
width:100%;
}
#content{
width:1500px;
background-color:red;
}
</style>
</head>
<div id="header"></div>
<div id="content"><h1>TEST</h1></div>
</html>
Try putting the header inside the content div. Like this:
...
</head>
<div id="content">
<div id="header"></div>
<h1>TEST</h1>
</div>
</html>
Even better, add a wrapper:
<html>
<head>
<style>
*{
padding:0;
margin:0 auto;
}
#wrapper {
width:1500px;
}
#header{
height:80px;
background-color:blue;
width:100%;
}
#content{
width:100%;
background-color:red;
}
</style>
</head>
<div id="wrapper">
<div id="header"></div>
<div id="content"><h1>TEST</h1></div>
</div>
</html>
Setting a min-width on your #header that equals the #content width would do it:
#header{
height:80px;
background-color:blue;
width:100%;
min-width: 1500px;
}
put a
<div id="wrapper"> header & content </div>
around everything... make wrapper position:relative, so 100% header is the width of the wrapper, which will be whatever content is.