I am a beginner to HTML and CSS. i have some knowledge of javascript, not jquery and also responsive design.
So I want to make a 3 column grid aligned to center and each with 33.33% width. Also a little space between each horizontally and some space on either side. but i can seem to align it to the center.
here is my html. I also want it to be Responsive. It should be reduced to two columns then to one and stuff like that. How could i achieve this?
Here is my HTML
<!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>
<link rel="stylesheet" href="Home.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="layout" align="center">
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.success {
display:inline-block;
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center
}
.success li:last-child {
float: none;
width: auto;
}
.layout {
width:75%;
}
You need to start again.
Basically your html structure needs to reflect your 3 column layout. Usually this is achieved with <div> tags.
so something like:
<div id="content">
<div id="contentleft">
your first column content is here
</div>
<div id="contentcenter">
the stuff for the middle goes here
</div>
<div id="contentright">
etc. etc. etc.<br>
...
</div>
</div>
then your .css can do something along the following lines:
#content {
width: 900px;
}
#contentLeft {
width:33%;
float:left;
}
#contentcenter {
width:33%;
padding:1%;
float:left;
}
#contentright {
width: 33%;
float:right;
}
Related
Hi well I basically want to move down my logo div which is inside my topBar div however when ever I use padding or margin it moves the whole top bar down or the logo just repeats its self (and yes I have tried background-repeat: no-repeat)
<!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>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div id="logo">
<p>chattrd</p>
</div>
</div>
</body>
</html>
body {
background: #F7F7F7;
font-family:Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.alert {
font-size: 10px;
color: #FFF;
background: #1f1f1f;
height: 14px;
padding-left: 10px;
font-family: Arial;
}
.topBar {
background: #0C3;
height: 40px;
}
#logo {
background-image:url(../images/logo.png);
height: 26px;
width: 121px;
overflow: hidden;
display: block;
text-indent:-999px;
}
The reason it is behaving this way is that you are using the image as a background. If you want to carry on with this approach, the easiest way to be able to move it vertically is to place another div before the #logo-div like so:
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div id="spaceDiv"></div>
<div id="logo"></div>
</div>
</body>
The height of the spaceDiv can be used to move the #logo-div using the following CSS:
#spaceDiv{
height:6px;
}
Hey guys I want my two #previews to float side by side. I have tried adding float:left but it doesn't work. At the moment they are just sitting on top of each other. All my code is below, thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
background: #F4F4F4;
font-family: 'Lobster', cursive;
}
#logo {
background: url(logo.png);
width: 300px;
height: 75px;
margin: 70px 200px;
}
#container {
width: 1300px;
}
h2 {
text-align: center;
font-size: 29px;
color: #444;
}
p {
text-align: center;
font-size: 22px;
color: #444;
}
.line {
background: url(line.png);
width: 972px;
height: 1px;
margin: 0 auto;
}
#previews {
border: 5px solid #FFF;
width: 300px;
margin: 50px 200px;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg" /></div>
<div id="previews"><img src="preview.jpg" /></div>
</div>
</body>
</html>
Float them both to the left and it will work. You'll also need to clear them then.
A few things:
a) DIVs are block-level. You would need to define them as display:inline; for float to work.
b) You should be using class instead of ID. An ID is supposed to appear once on a page only. Classes can appear as many times as you wish.
That's all:
<div id="previews">
<img src="preview.jpg" style="float:left;" />
<img src="preview.jpg" style="float:left;" />
</div>
You can also use this:
#previews img {
float:left;
}
<div id="previews">
<img src="preview.jpg" />
<img src="preview.jpg" />
</div>
<html lang="en"><head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>body {background: #F4F4F4;font-family: 'Lobster', cursive;}#logo {background: url(logo.png);width: 300px;height: 75px;margin: 70px 200px;}#container {width: 1300px;}h2 {text-align: center;font-size: 29px;color: #444;}p {text-align: center;font-size: 22px;color: #444;}.line {background: url(line.png);width: 972px;height: 1px;margin: 0 auto;}#previews {border: 5px solid #FFF;width: 300px;display:inline-block; vertical-align:top; margin:50px 100px;}</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg"></div>
<div id="previews"><img src="preview.jpg"></div>
</div>
</body></html>
You simply add display:inline-block; vertical-align:top; under the CSS for #previews. You will also need to reduce the amount of horizontal margin used for #previews because the width of the container is only 1300px.
How would I change this to make the middle div expand vertically to fill the white space?
<!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></title>
<style type="text/css">
body,td,th {
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header {
height: 150px;
border-bottom: 2px solid #ff8800;
position: relative;
background-color: #c97c3e;
}
#middle {
padding-right: 90px;
padding-left: 90px;
padding-top: 35px;
padding-bottom: 43px;
background-color: #0F9;
}
#footer {
border-top: 2px solid #ff8800;
background-color: #ffd376;
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Header
</div>
<div id="middle">
Middle
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
You can't get the actual div to expand to fill a gap without Javascript, but you can easily make it appear to do so. Move your rule background-color:#0F9; from #middle to #container. This will give you the behaviour you require (it will fill the gap when there is minimal content, and when there is lots of content it will expand down, pushing the footer with it).
If however you want the Javascript solution, the following code will work. Simply put this in your HTML head section:
<script type="text/javascript">
window.onload = function() {
var mid = document.getElementById('middle');
var foot = document.getElementById('footer');
mid.style.height = ((foot.offsetTop+foot.clientHeight)-(mid.offsetTop+mid.clientHeight))+'px';
};
</script>
This is my backup answer:
<!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></title>
<style type="text/css">
body,td,th {
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
#container {
height: 100%;
}
#container #header {
height: 50px;
background-color:#0F6;
}
#container #middle {
background-color: #66F;
}
#container #footer {
height: 20px;
background-color: #FF3;
}
</style>
</head>
<body>
<!-- Apology note to perfectionists: I'm sorry for using tables, but see this:
http://stackoverflow.com/questions/1703455/three-row-table-less-css-layout-with-middle-row-that-fills-remaining-space
A layout done with this table would be impossible with CSS. -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="container">
<tr id="header">
<td>h</td>
</tr>
<tr id="middle">
<td>m</td>
</tr>
<tr id="footer">
<td>f</td>
</tr>
</table>
</body>
</html>
#footer {
clear: both;
}
That should to the trick. The footer should alway appear below the column with the most content.
Personally I always add a CSS clear class in my templates and use them as breaks
.clear {clear:both;}
Then:
<div id="container">
<div id="header">
Header
</div>
<div id="middle">
Middle
</div>
<br class="clear" />
<div id="footer">
Footer
</div>
</div>
Tables will cause you more problems than they solve.
I think what you are looking for is sometimes called a sticky footer.
This page explains how it is done. What you would do is put your header and expanding content inside the wrapper he mentions.
I hope this helps you get your layout.
I know this question gets asked a lot because I have looked at many "solutions" trying to get this to work for me. I can get it to work if I hack up the html but I want to use all CSS. All I want is a header with two columns below it, and I want these three items to fill the entire page/screen, and I want to do it with CSS and without frames or tables. The XAMPP user interface looks exactly how I want my page to look, but again, I do not want to use frames. I cannot get the two orangeish colored columns to extend to the bottom of the screen. I do have it so it looks like the right column extends to the bottom of the screen just by changing the body background color to the same color as the background color of the right column, but I would like both columns to extend to the bottom so I didn't have to do that. Here is what I have so far:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="masthead">
MY SITE</div>
<div id="left_col">
Employee Management<br />
Add New Employee<br />
Edit Existing Employee<br />
<br/>
Load Management<br />
Log New Load<br />
Edit Existing Load<br />
<br/>
Report Management<br />
Employee Report<br />
Load Report</div>
<div id="page_content">
<div id="page_content_heading">Welcome!</div>
Lots of words</div>
</div>
</body>
</html>
CSS
#masthead {
background-color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:xx-large;
font-weight:bold;
padding:30px;
text-align:center;
}
#container {
min-width: 600px;
min-height: 100%;
}
#left_col {
padding: 10px;
background-color: #339933;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
width: 210px;
}
#page_content {
background-color: #CCCCCC;
margin-left: 230px;
padding: 20px;
}
#page_content_heading {
font-family:Arial,Helvetica,sans-serif;
font-size:large;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
}
a {
color:#0000FF;
font-family:Arial,Helvetica,sans-serif;
font-size:medium;
font-weight:normal;
}
a:hover {
color:#FF0000;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
background-color: #CCCCCC;
}
Something like this should work
<div id="header" style="position:absolute; top:0px; left:0px; height:100px; width:100%; overflow:hidden; background-color:#00FF00">
</div>
<div id="leftnav" style="position:absolute;top:100px; left:0px; width:100px; bottom:0px; overflow:auto;background-color:#0000FF">
</div>
<div id="content" style="position:absolute;top:100px; left:100px; bottom:0px; right:0px; overflow:auto;background-color:#FF0000">
</div>
Well, this is your code altered to fit what you want:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
html, body {padding:0;margin:0;background-color:#CCCCCC;height:100%;}
#hd{position:absolute;top:0;left:0;width:100%;height:100px;background-color:green;z-index:1;}
#col{float:left;width:230px;height:100%;background-color:red;}
#bd{width:100%;height:100%;background:pink;}
.content{padding:100px 0 0 230px;}
</style>
</head>
<body>
<div id="hd">MY SITE</div>
<div id="col">
Employee Management<br />
Add New Employee<br />
Edit Existing Employee<br />
<br/>
Load Management<br />
Log New Load<br />
Edit Existing Load<br />
<br/>
Report Management<br />
Employee Report<br />
Load Report
</div>
<div id="bd">
<div class="content">
Lots of words
</div>
</div>
</body>
</html>
Please not that inside containers like the one on the body div may be required to allow proper format of your html elements!
Hope this helps... :)
I have an extremely simple page that isn't displaying properly in IE6. In this browser, the left nav pushes down a table that's in the content area. Can anyone help me get the table to stay at the top of its container where it should be, rather than getting pushed down by content in the left div?
Here's the html code for the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css" media="screen">
body
#nav
{
float: left;
width: 180px;
background-color: #999;
}
#content
{
margin-left: 210px;
background-color: #999;
}
</style>
</head>
<body>
<div id="nav">
<div>left content</div>
</div>
<div id="content">
<table style="width: 100%; background-color: #666666">
<tr><td>table</td>
</tr>
</table>
</div>
</body>
</html>
Here's a url so you can see what it looks like:
http://www.morganpackard.com/cssTest.html
Give your table a width of 99% instead.
Another solution is to make the table float left and have a width of 100%....
You could just make the content float left too:
#content
{
float:left;
...
}
don't forget to adjust the margin-left though
Other solution that doesn't quite work for other browsers though:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css" media="screen">
#nav
{
float: left;
width: 180px;
background-color: #999;
}
#content
{
float: right;
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<div>left content</div>
</div>
<div id="content">
<table style="width: 100%; background-color: #666666">
<tr><td>table</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Notice the container and the float:right;
If all else fails, go with a table layout *ducks and covers* from the CSS purists:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
#nav
{
width: 180px;
background-color: #999;
}
#content
{
background-color: #999;
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<td id="nav">
<div>left content</div></td>
<td id="content">
<table style="width: 100%; background-color: #666666">
<tr><td>table</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>