This is my website layout but for some reason my div left-menu goes through the footer instead of pushing it down where it belongs. I have tried clear:both; and overflow auto but i cant get it to go down. What am I doing wrong here?
here is a jsfiddle: http://jsfiddle.net/Qd3Rr/1/
html:
<!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" xml:lang="en" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Perfect Fluid Width Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
</head>
<body>
<div id="inside">
<div id="header">
<table>
<form action="index.php" method="GET">
<tr><th>Zoek: </th><td><input type="text" name="searchword" value=""></td></tr>
<tr><th><input type="submit" value="submit"></td></tr>
</form>
</table>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>Nieuwe Advertentie</li>
<li>Advertenties</li>
<?php
session_start();
if(isset($_SESSION['username'])){
echo '<li>Logout</li>';
}else{
echo'<li>Register</li>';
echo'<li>Login</li>';
}?>
</ul>
</div>
<div id="mainpage">
<div id="left-menu">
<h2>Kleding</h2>
<a href=>Shirts</a><br>
<a href=>Broeken</a><br>
<a href=>Jassen</a><br>
<a href=>Mutsen</a><br>
<a href=>Sjaals</a><br>
<a href=>Wanten</a><br>
<a href=>Schoenen</a><br>
<a href=>Sportkleding</a><br>
<a href=>Sweaters</a><br>
<a href=>Vesten</a><br>
<a href=>T-shirts</a><br><br>
<a href=>overig</a><br><br>
<h2>Geslacht</h2>
<a href=>Jongens</a><br>
<a href=>Meisjes</a><br>
<a href=>Beide</a><br>
<h2>Maten</h2>
<a href=>50(0-1 mnd)</a><br>
<a href=>56(1-2 mnd)</a><br>
<a href=>62(2-4 mnd)</a><br>
<a href=>68(4-6 mnd)</a><br>
<a href=>74(6-9 mnd)</a><br>
<a href=>80(9-12 mnd)</a><br>
<a href=>86(1-1,5 jaar)</a><br>
<a href=>92</a><br>
<a href=>98</a><br>
<a href=>104</a><br>
<a href=>110</a><br>
<a href=>116</a><br>
<a href=>122</a><br>
<a href=>128</a><br>
<a href=>134</a><br>
<a href=>140</a><br>
<a href=>146</a><br>
<a href=>152</a><br>
<a href=>158</a><br>
<a href=>164</a><br>
<a href=>176</a><br>
</div>
<div id="main-content">
<form action="login.php" method="post">
<table>
<tr><th><td><input type="text" name="username"></td></tr></th>
<tr><th><td><input type="password" name="password"></td></tr></th>
<tr><th><td><input name="submit" type="submit" value="submit"></td></tr></th>
</table>
</form>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
css:
#inside{
margin:8%;
padding:10px;
background:white;
}
#header{
border:1px solid;
background:#6F4E37;
height:60px;
}
#navigation{
border:1px solid;
height:29px;
margin-top:2%;
margin-top:1%;
margin-bottom:1%;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
text-decoration: none;
border-right: 1px solid#ccc;
}
#navigation li a:hover {
background:#E42B2B;
}
#mainpage{
margin-top:1%;
margin-bottom:1%;
min-height:300px;
}
#left-menu{
float:left;
width:18%;
background:#6F4E37;
border:1px solid;
}
#left-menu h1{
float:left;
width:18%;
background:#6F4E37;
border:1px solid;
padding:10px;
}
#left-menu a{
padding: 15px;
text-decoration: none;
}
#main-content{
border:1px solid;
width:78%;
padding:5px;
margin-left:21.20%;
min-height:500px;
}
#footer{
border:1px solid;
margin-top:1%;
height:60px;
text-align:center;
}
You should use clear:both; at the end of <div id="mainpage">. Like in the DEMO (below the code).
<div id="mainpage">
<div id="left-menu">
...
</div>
<div id="main-content">
...
</div>
<div class="clear"></div>
</div>
Css:
.clear {clear:both;}
DEMO
Add:
<div style="clear: both;"></div>
just before the 'mainpage' closing div tag.
add display:inline-block to the div so it pushes the footer down
Related
When I include css/bootstrap.min.css it overwrites some elements of my site such as 'a' tags, my .nav bar and font used on site.
Load order:
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="custom.css">
<link rel = "stylesheet" href = "styl.css" type = "text/css" />
<link href="css/fontello.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oswald:400,600&display=swap&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
html :
<div class="wrppr">
<div class="header">
<div class="logo">
<img src="LOGO.png" style="vertical-align:middle;height: 250px; width: 250px; float: left">
<span style="vertical-align:middle;"></br>Voodoo Doll Ink Studio</span>
<div style="clear:both"></div>
</div>
</div>
<div class="nav">
<ul>
list here
</div>
<div class="image">
<img src="tatofront.jpg" style="opacity: 0.6"/>
</div>
<div id="opis">
<p></p>
</div>
<div style="clear:both"></div>
<div id="option2">
<a href="#">
<div id="ig">
<i class="icon-instagram"></i>
</div>
<div class="txt">Sprawdź naszego Instagrama!</div>
</a>
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<iframe src="https://snapwidget.com/embed/786091" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>
</div>
<div style="clear:both"></div>
<div id ="option3">
<div class="logobot">
<img src="duda.jpg" style="height: 300px; width: 300px;">
</div>
Tu opis o pierciengu i cennik
</div>
<div style="clear:both"></div>
<div id ="option4">
<div class="logobot">
<img src="duda.jpg" style="height: 300px; width: 300px; float:right;">
</div>
Tu opis o dreadach i dreadlockach
</div>
<div id="option5">
<div class="logobot">
<img src="LOGO.png" style="height: 300px; width: 300px;">
</div>
<div style="clear:both"></div>
<div class="footer">
VOODOO DOLL INK
</div>
</div>
Mostly everything is good though few things are overwritten:
a tag is unedited,
logo changes text alignement,
text in nav goes lower and its not centered
Elements which are overwritten by bootstrap.min.css in custom.css:
a {
color: white;
text-decoration: none;
display: block;
}
.logo
{
font-weight: bold;
vertical-align:middle;
width: 1000px;
font-size: 72px;
text-align: middle;
margin-left:auto;
margin-right:auto;
}
.nav
{
padding: 10px;
width:auto;
border-top: 1px solid rgb(38, 38, 38);
border-bottom: 1px solid rgb(38, 38, 38);
top: 0px;
z-index: 100;
height: 40px;
margin-left: auto;
margin-right: auto;
font-size: 20px;
text-align: center;
background-color:#0a0a0a;
}
Its my first time making responsive site || using bootstrap.
If your CSS files are in public/css, you should write:
<link rel="stylesheet" href="css/custom.css">
When you write the href, the start folder is public. Read more about it here.
Also, you are missing an e on the 3rd line:
<link rel="stylesheet" href="styl.css"> -> <link rel="stylesheet" href="style.css">
I can't get the .center class to apply to the following HTML. It gets applied to the ul element for some reason, but nothing else. Am I applying it wrong? Does it have something to do with IDs? I thought adding a class to a div would apply it to all elements within.
.center {
text-align: center;
}
ul {
list-style: none; /* getting rid of bullet pts */
padding: 0; /* practice to remove padding so we can set it later */
}
img {
display: inline;
width: 200px; /* we set in % or vh(view height) for responsive */
height: 100px; /* design - changes with page size (phones tablets etc) */
}
#footer {
width: 100%;
border-top: solid 2px black;
background-color: white;
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title' class='center'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset'>Reset</button>
<button id='hint'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center'>
<div>
<div class=''>
<img src='fa-logo#2x.png' alt="image">
</div>
<div class=''>
<h4>Project by Ravish Rawal</h4>
</div>
<div class=''>
<img src='grace_hopper_academy.png' alt="image">
</div>
</div>
</div>
</body>
</html>
I'm trying to learn responsive CSS but having difficulty with some basic css design. I've created a fixed navbar as you may be able to see in the code below. But the problem i'm facing is that i'm not able to properly align content below it. The content is getting overlapped by the navbar. Can you suggest an appropriate CSS fix and not a workaround like adding empty divs with fixed heights? Here is the code:
*{
box-sizing: border-box;
}
body{
margin:0px;
padding: 0px;
background-color: darkgrey;
}
.title-bar{
position:fixed;
margin-top:0px;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
.page-container{
padding: 0px;
}
.menu-options{
list-style-type:none;
}
.menu-options li{
display: inline;
padding: 10px;
}
.menu-options li:hover{
background-color: deepskyblue;
}
.menu-options li a{
color: black;
text-decoration:none;
}
.clear20{
height: 40px;
clear: both;
}
.clear10{
height: 20px;
clear: both;
}
.display-bar-1{
background-color: deepskyblue;
height: 200px;
padding:40px;
position: relative;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.caps {
text-transform: uppercase;
}
.register_button{
text-align:center;
padding-top:20px;
padding-bottom:10px;
width: 200px;
height: 70px;
border: solid 3px white;
font-style:bold;
font-size:14pt;
}
.register_button:hover{
background-color:navajowhite;
color: white;
cursor:pointer;
border-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="title-bar">
<table width="100%">
<tr>
<td><h1> Multirater Surveys </h1></td>
<td>
<ul class="menu-options">
<li> Home </li>
<li> How It Works </li>
<li> Features </li>
<li> Surveys </li>
<li> Plans and Pricings </li>
<li> Webinars </li>
<li> Blog </li>
</ul>
</td>
</tr>
</table>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
</div>
<input type="text" class="caps"/>
<script>
window.onload = function(){
document.getElementById("register").onclick = function(){
window.location = "https://www.google.com";
}
}
</script>
</body>
</html>
`responsive.html`
The appropriate way is to add padding-top in your div, the same padding as the height of your fixed header.
I made a few changes to your responsive.css file and it worked out for me.
Here are the changes that I made:
in title-bar class
.title-bar{
position:fixed;
top: 0;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
I changed margin-top:0px; to top: 0;
Why? To Set the top edge of the fixed positioned navbar to 0 below the top edge of its nearest positioned ancestor as told here
and in the display-bar-1
.display-bar-1{
background-color: deepskyblue;
height: 200px;
margin-top: 100px;
padding:40px;
position: relative;
}
I added margin-top: 100px;
Why? Your navbar had a height of 100px. So i gave a margin top of 100px to your display-bar-1 class.
Hope this resolves your issue.
Your navbar has a height of 100px. So you need to start with your divs 100px below.
Add to the first div after the navbar this:
style="top:100px;"
Then it should work. It would look like this:
<div class="display-bar-1" style="top:100px;">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
Other ways would be to create an own css class for the first div after the navbar. Then you could also work with
padding-top:100px;
or
margin-top:100px;
*{
box-sizing: border-box;
}
body{
margin:0px;
padding: 0px;
background-color: darkgrey;
}
.title-bar{
position:fixed;
margin-top:0px;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
.page-container{
padding: 0px;
}
.menu-options{
list-style-type:none;
}
.menu-options li{
display: inline;
padding: 10px;
}
.menu-options li:hover{
background-color: deepskyblue;
}
.menu-options li a{
color: black;
text-decoration:none;
}
.clear20{
height: 40px;
clear: both;
}
.clear10{
height: 20px;
clear: both;
}
.display-bar-1{
background-color: deepskyblue;
height: 200px;
padding:40px;
position: relative;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.caps {
text-transform: uppercase;
}
.register_button{
text-align:center;
padding-top:20px;
padding-bottom:10px;
width: 200px;
height: 70px;
border: solid 3px white;
font-style:bold;
font-size:14pt;
}
.register_button:hover{
background-color:navajowhite;
color: white;
cursor:pointer;
border-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="title-bar">
<table width="100%">
<tr>
<td><h1> Multirater Surveys </h1></td>
<td>
<ul class="menu-options">
<li> Home </li>
<li> How It Works </li>
<li> Features </li>
<li> Surveys </li>
<li> Plans and Pricings </li>
<li> Webinars </li>
<li> Blog </li>
</ul>
</td>
</tr>
</table>
</div>
<div class="display-bar-1" style="top:100px;">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
</div>
<input type="text" class="caps"/>
<script>
window.onload = function(){
document.getElementById("register").onclick = function(){
window.location = "https://www.google.com";
}
}
</script>
</body>
</html>
I'm having trouble linking my external file sheet to the separate html page. The .css file and html file are in the same folder also but when i run it the content is only appearing. Any help is appreciated. Thanks!
CSS Code
div
{
border-radius:5px;
}
#header
{
z-index:1;
width:97.%;
height:60px;
background-color:red;
margin-top:-20px;
margin-bottom:10px;
position:fixed;
}
#name
{
float:left;
margin-left:5px;
padding-top:5px;
font-size:16px;
font-family:Verdana, sans-serif;
color: #ffffff;
}
#email
{
float:left;
margin-left:5px;
padding-top:5px;
font-size:16px;
font-family:Verdana, sans-serif;
color: #ffffff;
}
#sidebar
{
left:90px;
top:160px;
position:fixed;
width:200px;
height:600px;
background-color:gray;
}
#content
{
left:290px;
top:160px;
position:fixed;
width:600px;
height:600px;
background-color:lightblue;
}
p
{
padding-left: 50px;
padding-top: 50px;
}
HTML Code
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>
<body>
<div id="page">
<div class="topNaviagationLink">Home</div>
<div class="topNaviagationLink">About</div>
<div class="topNaviagationLink">Portfolio</div>
<div class="topNaviagationLink">Services</div>
<div class="topNaviagationLink">Contact</div>
</div>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">Project</div>
<div id="headerSubtext">HTML Project</div>
</div>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">The Title of an Article</div>
<div class="contentText"><p>content </p><br />
<p>Content.</p><br />
<p>Other Content.</p></div>
</div>
</body>
</html>
That's what you need. See there please. I noticed lost div , check your code.
http://jsfiddle.net/vo9hLzqf/
If you feel problems with other styles like #email #name etc. check that in HTML you set right type
if your css is #email you should use <div id="email">%yourcode%</div>
and .email will be <div class="email">%yourcode%</div>
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>
<body>
<div id="page">
<div class="topNaviagationLink">Home</div>
<div class="topNaviagationLink">About</div>
<div class="topNaviagationLink">Portfolio</div>
<div class="topNaviagationLink">Services</div>
<div class="topNaviagationLink">Contact</div>
</div>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">Project</div>
<div id="headerSubtext">HTML Project</div>
</div>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">The Title of an Article</div>
<div class="contentText"><p>content </p><br />
<p>Content.</p><br />
<p>Other Content.</p></div>
</div>
</div>
My main problem here is that I have one .css stylesheet hooked up to 3 page because this really is just forming a template for the time being until I can decide how I want each page to look individually.
I preformed some div positioning on the website and I think it looks nice and centered on most of the pages...most. I have one page that is hooked up to the correct style sheet and will change anything I add to the style sheet, except where some divs won't shift on this one page. Here is a screenshot of a page that works:
Click here
And one that doesn't:
Click here
If you look closely, you are can see that my links are shifted more to the upper-right corner and so are my main content sections. The other two links that are used in this website look the same as the working page, by the way.
CODING (Warning, there may be a tad unnecessary code there, but the coding is exactly the same on all websites except for the img src attributes, so there is no reason that all page wouldn't look the same):
Page that works:
<!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>Teens For Antarctica Preservation</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img id="image" src="images/14_Seal2.jpg" /> <!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
This is the code for the website that doesn't work:
<!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>Who is TAP?</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img src="images/14_Teens.jpg" id="image"/><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
And here is my CSS stylesheet:
#charset "utf-8";
/* CSS Document */
.header
{
height: 150px;
width: 100%;
margin-left: 25px;
margin-right: 50px;
position:relative;
left:0px;
top:0px;
}
html
{
width: 1000px;
height: 650px;
background-color:#D7D7FF;
}
a#rollover:link, a#rollover:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
}
a#rollover:hover, a#rollover:active
{
background-color:#A7A7A7;
}
a#firstlink:link, a#firstlink:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
margin-left:265px;
}
a#firstlink:hover, a#firstlink:active
{
background-color:#A7A7A7;
}
#image
{
height:230px;
width:300px;
float:left;
border: 3px solid #B5B5B5;
margin-left:150px;
margin-top:10px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
}
#main
{
height:250px;
width:450px;
border:3px solid #B5B5B5;
margin-left:500px;
margin-top:15px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
padding-left:10px;
padding-top: 6px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:400;
background-color:#FFF;
}
#footer
{
height:100px;
bottom:0px;
text-align:center;
width:100%;
padding-top:100px;
padding-left:25px;
}
#pfoot
{
margin-left:50px;
}
Please provide any insite on how to fix this problem.
Working
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
Not working
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
On the not working version, you've missed out the closing div for 'header'
I see, your html code is not the same.
1st document
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
and the second document:
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
the second document is not correct, as you forgot to close the second div.