This is my first week of programming in CSS, HTML and PHP. I realized when beginning my site that when I scaled my site by window size that all the text would begin to overlap, cause issues and look terrible.
I was wondering if I could get a clear answer on what I am doing horribly wrong. I have tried methods such as media queries but I still don't understand it at all.
Here is my code:
/* Reset body padding and margins */
body {
margin: 0px;
padding: 0px;
}
/* Make Header Sticky */
#header_container {
background: black;
border: 1px solid #666;
height: 40px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header {
line-height: 5px;
margin: 10px;
auto: width:940px;
text-align: left;
}
#headertext {
font-family: "sans-serif";
size: 20px;
padding: 2px;
font-size: 120%;
text-decoration: none;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin: auto;
overflow: auto;
padding: 80px;
width: 100%;
height: auto;
}
#content {}
/* CSS FOR HOME PAGE CONTENTS */
#hometext {
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5em;
left: 4em;
color: #585858;
margin-right: 850px;
}
#hometext2 {
font-family: "arial";
padding: 10px;
font-size: 80%;
text-decoration: none;
position: absolute;
top: 7em;
left: 4.24em;
color: #585858;
margin-right: 1200px;
}
#hometext3 {
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5m;
left: 65em;
color: #585858;
margin-right: 0;
}
#hometext4 {
font-family: "arial";
padding: 18px;
font-size: 80%;
text-decoration: none;
position: absolute;
top: 10m;
left: 80em;
color: #585858;
margin-right: 0;
}
#home_container
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<title>replay.sc</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a:link {
color: grey;
}
a:visited {
color: grey;
}
a:hover {
color: white;
}
a:active {
color: grey;
}
text-decoration: none;
}
}
</style>
</head>
<body font="sans-serif" id="container">
<!--- BEGIN: STICKY HEADER -->
<div id="header_container">
<div id="header">
<p><a id="headertext" a href="replay.sc"> replay.sc </a>
<p>
</div>
</div>
<!-- END: STICKY HEADER -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
</div>
</div>
<!-- END: Sticky Footer -->
<div id="home_container">
<h1 id="hometext"> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p id="hometext2"> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
<h1 id="hometext3"> Upload a replay pack here to generate a page containing download links for every replay or for a .rar file of every replay. </h1>
<p id="hometext4"> Only basic information for each replay will be made to conserve server load. </p>
</div>
</body>
</html>
You're mixing relative and absolute measurements incorrectly. If you are beginners, I would recommend sticking to one model of measurements first and gradually learn how to use the others.
For example, the Stack Overflow is absolutely positioned; if you resize the browser window, nothing will resize. A relatively positioned webpage can adapt the content to the available window size. The JSFiddle site is relatively positioned; it always utilizes the entire window size.
Both model of measurements can produce a good websites, but to produce a successful website though, you have to be intimately familiar with both methods of positioning and how to mix them to produce various effects when used in the same page.
Many people consider absolute positioning to be easier to visualize for beginners; although it has its limitations if you want to create more advanced layouts that works well across widely different screen sizes.
If you want to start with absolute positioning, you first start by deciding a certain width for the overall page. Many people uses a fairly narrow number of pixels that have a large number of even divisibility like 960px or 800px. To make a simple absolutely positioned site, you need to:
Set position: absolute on most things.
Set any two of: top, bottom, or height.
Set any two of: left, right, or width.
Everything on the page should use the same measurement unit (e.g. px)
For example (edit on jsfiddle or full screen):
#hometext{
font-family: "arial";
font-size: 100%;
text-decoration: none;
color: #585858;
position: absolute;
top: 80px;
left: 60px;
width: 335px;
height: 60px;
line-height: 20px; /* this ensure that 3 lines of text sums up to 3*20px=60px */
}
The drawback of absolutely positioned website is apparent if you try to zoom the site or if your users use a different window size (they'll either have lots of wasted space or have to scroll horizontally. With pure absolute positioning, the website essentially becomes like a static image.
A more modern best practice is to use floated positioning to produce a responsive or elastic website. For this, you need to understand how to float elements and the various layout algorithms. To produce an elastic website you'll need:
use percent unit for most things
utilize the margins and paddings judiciously
utilize the various layout algoritms
For example (edit in jsfiddle or fullscreen). Understanding the various layout algorithm admittedly can be quite difficult, but you will eventually get it naturally if you keep using it for various different layouts.
Try my css .. use a container to hold everything when re size container will do the trick.. try to copy my codes it has a container css .. and it controls overlap see .
The containe most be relative to it wont overlap;; hope it help
see how #advertisement css id do the trick
<html>
<body>
<div id = "container">
<div id="advertisement">
<img src="Desert.jpg" width="200px" height="200px">
</div>
<div id="transparent">
<img src="black.jpg" width="200px" height="200px">
</div>
<div id="regularborder">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
</div>
</div>
</body>
</html>
<style>
#container{
position:relative;
}
#advertisement{
z-index:-1;
border-left: solid;
}
#transparent
{
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
left:0px;
top:0px;
}
#regularborder{
border-style:solid;
}
</style>
Try something like this in your CSS.
#wholepage { position:absolute; margin:0px; width:100%; }
if you want responsive then try like this
CSS
.header{background-color:#000;color:#fff;width:100%;min-height:40px;}
a{color:#fff;font-size:120%;line-height:2em;margin:10px;}
h1{ color: #585858; font-family: "arial";font-size: 100%;line-height: 20px;}
p{margin-top:1em;font-family: "arial";font-size:80%;color:#585858;}
.table{display:table;width:55%;margin:0 auto;}
.row{display:table-row;}
.cell{display:table-cell;padding:2em;width:50%;}
HTML
<div class="header">
replay.sc
</div>
<div class="table">
<div class="row">
<div class="cell">
<h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
</div>
<div class="cell">
<h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p> Only basic information for each replay will be made to conserve server load. </p>
</div>
</div>
</div>
Set content's margin,padding as you like
You can use vw and vh units:
font-size: 1vw /* = 1% of viewport width */
font-size: 1vh /* = 1% of viewport height */
font-size: 1vmin /* = 1vw or 1vh, whichever is smaller */
font-size: 1vmax /* = 1vw or 1vh, whichever is larger */
Reference:
Viewport Sized Typography
True responsiveness can only truly be achieved if you want the behavior of your content to be predictable. Thus you could apply media queries to your website for specific sizes of the screen. #media screen and {max-width:400px}{.....} this simply means at a maximum width of 400px, treat the content like this. So your contents behavior will be included in the {....}. That will leverage you the time to try multiple browsers apart from Internet Explorer and there's one solution for this:
IE8 - I think doesn't support media queries so you'll just have to add a JavaScript file called respond.js from their developer website.
Reference:
W3C media queries and their standards
Related
I'm creating a basic contact page for my website. I'm struggling to get it looking good in varying resolutions.
My laptop is 1368x766 and my monitor is 1920x1080.
The elements that set to absolute are moving around, the top image isn't moving...all other elements are moving... I'm so confused:
CSS:
body {
text-align: center;
background: url("http://i.imgur.com/JN0YSkP.png");
background-repeat: repeat;
background-position: center;
color: white;
font-family: 'Roboto', sans-serif;
padding-top: 20px;
padding-bottom: 0px;
}
p {
position: absolute;
top: 225px;
right: 410px;
font-size: 32px;
}
p2 {
position: absolute;
top: 420px;
right: 974px;
font-size: 28px;
}
p3 {
position: absolute;
top: 420px;
right: 570px;
font-size: 28px;
}
p4 {
position: absolute;
top: 420px;
right: 142px;
font-size: 28px;
}
.LI
{
display: inline-block;
position: absolute;
z-index : 2;
top: 510px;
right:1050px;
}
.CV
{
display: inline-block;
position: absolute;
z-index : 2;
top: 490px;
right: 620px;
}
.mail
{
display: inline-block;
position: absolute;
z-index : 2;
top: 510px;
right: 196px;
}
.Divider
{
position: absolute;
z-index: 1;
top: 380px;
right: 28px;
padding-bottom: 20px
}
html { -webkit-font-smoothing: antialiased; }
HTML:
<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<title>Benjamin Edwards | Web Designer | West Sussex</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Benjamin Edwards is a Web Designer and IT Project Manager from West Sussex. Say hello!">
<meta name="keywords" content="benjamin, edwards, IT, project, manager, photoshop, web, designer, worthing, west sussex">
<meta name="robots" content="INDEX,FOLLOW">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="http://i.imgur.com/6gBN3LF.png">
<p>Hi! I’m Benjamin, a Worthing based</br>Web Designer and IT Project Manager.</p>
<p2>Connect on LinkedIN:</p2>
<div class="LI">
<a href="https://www.linkedin.com/in/benjaminedwards86">
<img src="http://i.imgur.com/KEqGBV3.png">
</a>
</div>
<p3>Download my CV:</p3>
<div class="CV">
<a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
<img src="http://i.imgur.com/ce0Zzgi.png">
</a>
</div>
<p4>Send me an email:</p4>
<div class="mail">
<a href="mailto:benjamin.edwards86#gmail.com">
<img src="http://i.imgur.com/KQV7Eip.png">
</a>
</div>
<div class="Divider">
<img src="http://i.imgur.com/B4TiKRT.png">
</div>
</body>
JSFiddle
As exmaple how simple it can be for you, i created a jsfiddle:
JSFiddle
HTML
<img src="http://i.imgur.com/6gBN3LF.png">
<p>Hi! I’m Benjamin, a Worthing based</br>Web Designer and IT Project Manager.</p>
<ul>
<li><h1>Connect on LinkedIN:</h1>
<a href="https://www.linkedin.com/in/benjaminedwards86">
<img src="http://i.imgur.com/KEqGBV3.png">
</a>
</li>
<li><h1>Download my CV:</h1>
<a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
<img src="http://i.imgur.com/ce0Zzgi.png">
</a>
</li>
<li><h1>Send me an email:</h1>
<a href="mailto:benjamin.edwards86#gmail.com">
<img src="http://i.imgur.com/KQV7Eip.png">
</a>
</li>
</ul>
CSS
body {
text-align: center;
background: url("http://i.imgur.com/JN0YSkP.png");
background-repeat: repeat;
background-position: center;
color: white;
font-family: 'Roboto', sans-serif;
min-width: 900px;
}
img {
margin: auto 20px;
}
ul {
height: 275px;
width: 80%;
margin: 10% auto;
border: 3px solid #31C2A9;
min-width: 900px;
}
ul li {
float: left;
width: 33%;
border-right: 1px solid #31C2A9;
list-style-type: none;
height: 275px;
min-width: 275px;
}
ul li:last-child {
border-right: none;
}
You get rid of all the css selectors and simplify your code :-)
And there is no single position absolute ;-)
Its always wise to make a fiddle about the problem you are having.
Coming to the issue about elements moving around, Its because you have absolutely placed ALL the elements and hard coded the values. Like:
p {
position: absolute;
top: 225px;
right: 410px;
font-size: 32px;
}
Since at different browser sizes, the resolution changes and so does the placement of the divs, your elements are moving awry ( Since you have absolutely positioned them only to ONE browser dimension.
So what you should do:
First, you should make sure you understand when should a div be absolute and when should it be relative.
I'll give a thumb rule: If you want to position an element with respect to a div. Make it position absolute and its parent, position: relative.
You could make your website responsive using Bootstrap. But you could also give measurements in % and prevent distortions.
If I am to do one:
p3 {
position: absolute;
top: 20%;
right: 30%;
font-size: 1.1em;
}
If you dont exactly know whats happening, you should spend time studying %, em measurements etc.
If you can create a fiddle and show your code, We can help you fix it.
You can use CSS media queries for this.
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen).
With media queries, we'll take this to a new level. Rather than looking at what device it is, we will look at what capabilities the device has. More specifically, we will look at the following:
height and width of the device height and width of the browser
screen resolution orientation of the device (for mobile phones and
tablets; portrait or landscape)
CSS2 allows you to specify stylesheet for specific media type such as screen or print.
Now CSS3 makes it even more efficient by adding media queries.
You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices.
It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content.
Example:
The following CSS will apply if the viewing area is smaller than 600px.
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Multiple Media Queries:
You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
#media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width:
The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.
#media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
I'm trying to create my first website manually, and I have a few questions on how to do things. Please note I want to accomplish this in pure HTML5, no JS. All I have right now is a navigation header, which should stay fixed at the top of the page no matter how far one scrolls. However, in order to get an image to respect this header size, I've had to resort to using css in the following manner:
main {
position: absolute;
top: 60px;
z-index: -1;
}
Is there a a more elegant way to accomplish this? Additionally, is there a more relative way to accomplish spacing than using px? I know about rem for font, but is there anything similar for spacing? My reading indicates that retina screens honor a 2px conversion, but what about 4k screens?
Also, how do I center text vertically in the header spacing?
Lastly, how do I reference a locally installed font on a person's desktop, hopefully negating the need to download a font from the server?
css3
* { all: unset }
#font-face {
font-family: 'biolinum';
src: url('LinBiolinum_R.woff'),
local('Linux Biolinum O');
}
.logo {
float: left;
height: 50px;
padding: 5px;
}
.image {
height: auto;
width: 100%;
background: black;
}
header {
position: fixed;
height: 60px;
width: 100%;
background: white;
}
main {
position: absolute;
top: 60px;
z-index: -1;
}
nav {
list-style-type: none;
float: right;
font-family: 'biolinum';
font-size: 1.25rem;
color: #465053;
text-transform: uppercase;
}
p {
font-family: 'biolinum';
font-size: 1rem;
color: #465053;
text-align: justify;
}
title {
display: none;
}
html5
<title>Title</title>
<link rel='icon' href='images/logo.svg'>
<link rel='stylesheet' href='css/style.css'>
</head>
<body id='index' class='home'>
<header>
<a href='#'>
<img src='images/name.svg' class='logo'>
</a>
<nav>
<a href='index.html'>about</a>
<a href='#'>design</a>
<a href='#'>analysis</a>
<a href='#'>contact</a>
</nav>
</header>
<main>
<img src='images/temp.png' class='image'>
<img src='images/temp.png' class='image'>
<img src='images/temp.png' class='image'>
<img src='images/temp.png' class='image'>
</main>
</body>
</html>
I'm trying to create my first website manually, and I have a few questions on how to do things. Please note I want to accomplish this in pure HTML5, no JS. All I have right now is a navigation header, which should stay fixed at the top of the page no matter how far one scrolls. However, in order to get an image to respect this header size, I've had to resort to using css in the following manner:
Is there a a more elegant way to accomplish this?
Another way to do it is like this:
body
{
overflow: hidden;
}
header {
height: 20vh;
}
main {
height: 80vh;
overflow: scroll;
}
Whether you think that is more or less elegant is up to you.
Additionally, is there a more relative way to accomplish spacing than using px? I know about rem for font, but is there anything similar for spacing? My reading indicates that retina screens honor a 2px conversion, but what about 4k screens?
You can use "vh" as I did above, which is percentage of viewport height.
Also, how do I center text vertically in the header spacing?
nav {
text-align: center;
}
This will center the text within the nav.
Lastly, how do I reference a locally installed font on a person's desktop, hopefully negating the need to download a font from the server?
p {
font-family:"Times New Roman";
}
If it is installed on the users desktop you should be able to reference it like this.
I'll start by saying that I am very very new to web development as a whole and that this is my very first responsive site so please be gentle and bear this in mind, I am the definition of the word noob at this stage. Having searched for an answer for a while and having no luck I'm hoping that someone here could help me out.
I'm trying to make a homepage for this website. The design is simply a block down the left hand side of the page showing the logo at the top and then a series of links underneath, all of which is on the same background. To the right of this is one big image which fills the rest of the screen. I want the whole page to fill the browser window of whatever device it is viewed on so absolutely no scrolling is necessary, i.e. width and height both 100% of the viewport. The width of the page is giving me no grief at all, sweetly adjusting to different screen sizes as I want it, with the sidebar at 20% of the width and the main image at 80%.
The height is a different story however. I can't seem, in any combination of CSS I've tried so far, to be able to get the height to behave at 100% of the viewport. Either the sidebar is too short and the main image is too long or both are too long etc etc. The main image I want to keep the aspect ratio of and just have it overflow it's div as required to keep most of it displayed and the side bar I just want to fit to 100% of the page height. Here is my code at present:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#page
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}
#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}
#mainimg
{
width: 100%;
overflow: hidden;
}
.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00);
}
#font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}
</style>
</head>
<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
<div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
<div class="link" id="homelink">Home<!--Home link--></div>
<div class="link" id="aboutlink">About<!--About link--></div>
<div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
<div class="link" id="priceslink">Prices<!--Prices link--></div>
<div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
<div class="link" id="contactlink">Contact<!--Contact link--></div>
<div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>
Any help with this would be really appreciated and don't hesitate to point out any massively amateur mistakes. I'm willing to take any criticism and learn from it. Thanks
Here’s just a simplified code example of the HTML:
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
and here’s the CSS using vh:
div#welcome {
height: 100vh;
background: black;
}
div#projects {
height: 100vh;
background: yellow;
}
From Here: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
It works for me.
I have made you a basic set up to show how you would style this. The best way that I have found to set the height to 100%is with the use of jQuery/Javascript. You can find the height of the window and then input that into the css with the use of it.
The way this works is the var wH = $(window).height(); is finding the height and turning that into a number. Then when you use $('.sideBar').css({height: wH}); you are inputing the height into the css of sideBar.
jQuery
function windowH() {
var wH = $(window).height();
$('.sideBar, .mainImg').css({height: wH});
}
windowH();
This function I wrote is giving those two elements the height of the window. This will allow those two elements to be 100% of any browser's window.
I also recommend turning that nav into a ul which I included in the fiddle to show how that is possible.
JSFIDDLE (Remove 'show' at the end of the url to see code)
The next thing you will need to research is media queries to adjust the content to adapt better to mobile devices. Consider changing the sideBar to a horizontal nav when on mobile devices.
If you want a pure CSS only approach then you can do something like this,
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
By adding height&width to 100% in your html/body you can then use height: 100% on other elements to fill the entire page.
Refer to this JSFIDDLE to see how it works.
Helpful read about responsive web design
On Chrome, just adding display: flex on the body is enough.
On Firefox, you must add height: 100vh to get the desired result. And a margin: 0 will get rid of the annoying scroll bars.
<body style="display:flex; height: 100vh; margin: 0;">
<div style="background-color: red; flex:1;"></div>
<div style="background-color: green; flex:2;"></div>
<div style="background-color: blue; flex:1;"></div>
</body>
Sample code for exact Covering the page height.
HTML
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
Main content
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
max-width: 1020px;
margin: auto;
height: 100%;
background: #ddd;
padding:16px;
box-sizing:border-box
}
.header,.content{
background:#fff;
padding:16px
}
.content{
margin-top:16px;
min-height:calc(100% - 160px);
}
Example Link :
https://codepen.io/rahdirs/pen/jeRVod
I'm trying to create a clickable box that sizes and positions relative to how the browser sizes, but I get an extra box when I decrease the width of the browser and increase the length. I'm not sure what is going on and how to get rid of it.
Here are screen captures of what is going on:
- Browser at full size: http://i.imgur.com/mbyMOyw.png
- Browser stretched as described above: http://i.imgur.com/kuX1tdN.png
CSS:
img.banner {
width: 100%;
z-index: 0
}
#banner {
width: 100%;
margin-top: 0px;
margin-bottom: auto;
margin-left: 0px;
margin-right: auto;
position: relative
}
a.rollover {
display: block;
position: absolute;
top: 15%;
left: 15%;
width: 17%;
height: 8%;
background-color: black;
}
HTML:
<body>
<div id="banner">
<img src="image.png" class="banner"/>
<a href="banner1.png" class="rollover">
</div>
</body>
Also, any other suggestions to improve my CSS and HTML is appreciated, since I'm new to this.
Thanks.
Simple though it seems, by not closing the anchor tag the browser is generating two anchors - one inside the div, and one outside it. These layout on top of each other until the browser is resized: then their positions deviate a bit and they 'split'. Fix by closing the anchor:
<body>
<div id="banner">
<img src="image.png" class="banner"/>
<--added closing tag here
</div>
</body>
You can check out the fiddle here. Can't believe it took me so long!
I am trying to create a simple layout in which there would be:
HEADER
CONTENT (image here)
FOOTER
What I am trying to achieve is to have an image placed inside the content div that will resize larger and smaller based on the browser size of the viewer.
This part I can achieve, however I would like the footer to always remain at the bottom of the browser and have the image in the content div resize without ever creating overflow.
Here is an example of what I am trying to do:
http://www.modernart.net/view.html?id=1,3,9
I have tried replicating this code but cannot make it work.
Is there a way that anyone can suggest to do this?
I would be extemely helpful as I have had no luck making it work so far.
Thanks in advance,
Takashi
Using percentages with css could be a solution: http://jsfiddle.net/rgv2e/
You really should try to do things and learn by your mistakes. Nonetheless, here's the layout you're after:
See this Working Fiddle Example!
HTML
<div id="header">My Beautiful website!</div>
<div id="content">
<a href="#" title="">
<img src="http://i328.photobucket.com/albums/l330/slowwkidd3923/backflip.jpg" alt="ups...">
</a>
</div>
<div id="footer">
This is the footer text!
</div>
CSS
/* basics */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* header */
#header {
position: absolute;
z-index:1;
top: 10px;
left: 10px;
}
/* content */
#content {
position: absolute;
left: 0;
right: 0;
top: 10px;
bottom: 20px;
text-align: center;
}
#content img {
height: 96%;
}
/* footer */
#footer {
position:absolute;
bottom: 0;
left: 10px;
right: 10px;
text-align: left;
height: 20px;
line-height: 20px;
}
Links to help you learn CSS:
Cascading Style Sheets
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
MDN :: CSS - References, Tutorials and Demos