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;
}
Related
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;
}
What I'm trying to do is have a bootstrap like navbar where the actual navbar is around 960px in the center but have the background color span the entire width of the window.
However, when the window is less than 960px in width, and I scroll, the background doesn't go all the way to the end.
Is it possible to make this happen without having custom rules for max-width(960px)?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
#container {
width: 960px;
margin: 0 auto;
}
#nav {
height: 33px;
background-color: #cfcfcf;
}
</style>
</head>
<body>
<div id="nav">
<div id="container">
test
</div>
</div>
</body>
</html>
Thanks in advance!
Edit: Oops. Had an extra in there, though that wasn't the issue.
The height has to be in the inner div (#container).
try
#nav { background-color: #cfcfcf; }
#container {
height:33px;
width:960px;
margin: 0 auto;
}
see http://jsfiddle.net/wYGLj/
You need your nav div to span the entire page.
#nav { width:100%; }
will work in this case.
Your CSS is working as it should. So if you want it to extent the whole length of the screen, create a wrapper to handle that grey element. Like this.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
#wrapper {
width: 100%;
margin: 0;
padding: 0;
background-color: #cfcfcf;
}
#container {
width: 960px;
margin: 0 auto;
}
#nav {
height: 33px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div id="container">
test
</div>
</div>
</div>
</body>
</html>
I added
body {
min-width:960px;
}
which seemed to fix the problem.
I am making a css site and I want to look like that:
3 vertical divs. LEFT CENTER RIGHT. In the center div is the site content, and I want the left and right div to fill the space between the center and the browser borders.
Here is my code.
#container
{
width:100%;
background-color:#000;
}
.center
{
width:1000px;
height:400px;
background-color:#F90;
margin: 0px auto;
overflow: auto;
}
.spacer-left
{
width:100%;
height:400px;
background-color:#F90;
float:left;
}
.spacer-right
{ width:100%;
height:400px;
background-color:#F90;
}
And here is the 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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="spacer-left"></div>
<div class="center" style="background-color:#F30;"></div>
<div class="spacer-right"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
I've try with 2 divs and there was no problem. The left with float:left and width in pixels and right one with 100% width without float. It worked. But how to make it with 3 divs. Thanks in advance!
Thank you for the help Sebastian but I figured out other way.
This is how the code looks now and it works.
#container
{
width:1000px;
background-color:#000;
margin:0 auto;
}
.center
{
width:100%;
height:400px;
background-color:#F90;
margin: 0px auto;
overflow: auto;
}
.spacer
{
width:50%;
height:400px;
background-color:#F90;
float:left;
}
.head_warp
{
width:100%;
display:block;
height:400px;
margin:0 auto;
padding:0;
position:absolute;
top: 0;
left: 0;
text-align:center;
z-index:-9999;
}
and the 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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head_warp">
<div class="spacer"></div>
<div class="spacer" style="background-color:#F06"></div>
</div>
<div id="container">
<div class="center" style="background-color:#F30;"></div>
</div>
</body>
</html>
Thank you for the help one again. I will write here again if there is a problem with my solution.
Update: a different alternative to the answer below, using three divs and z-index.
http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/1/
if you are trying to make a site with the content in the center div, you can replicate that layout using simply:
<body>
<div class="center">center</div>
</body>
with the css:
html {height: 100%; }
.center { width:750px; margin: 30px auto; height: 100%; }
play with it here: http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/
from the class names .spacer_left and .spacer_right i'm assuming that those divs are empty spacers and not necessary.
this is a good resource for base css layouts: http://www.csseasy.com/
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... :)