I have 3 floated elements in my div #blue_team, .vs_img, #red_team and everytime I tried to press ctrl - it destroys my design how to fix this?
-------------------HTML CODE:-------------------
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Battle Game</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.8.1.js"></script>
</head>
<body>
<div id="container">
<div id="warriors">
<form id="blue_team">
<p>
<label class="team">Green Team</label>
</p>
<p>
<img src="resources/naruto.png" alt="">
<img src="resources/sasuke.png" alt="">
<img src="resources/sakura.png" alt="">
</p>
<p>
<label>Name:</label>
<input type="text" readonly="readonly">
<label>Type:</label>
<input type="text" readonly="readonly">
</p>
</form>
<img class="vs_img" src="resources/vs.png" alt="">
<form id="red_team">
<p>
<label class="team">Red Team</label>
</p>
<p>
<img src="resources/itachi.png" alt="">
<img src="resources/tobi.png" alt="">
<img src="resources/hidan.png" alt="">
</p>
<p>
<label>Name:</label>
<input type="text" readonly="readonly">
<label>Type:</label>
<input type="text" readonly="readonly">
</p>
</form>
<div class="clearfloats">
<p>
<input type="button" value="Start Battle">
</p>
</div>
</div>
</div>
</body>
</html>
-------------------CSS CODE:-------------------
div#container {
background-color:#151614;
width:800px;
margin:0 auto;
padding-top:8px;
padding-bottom:8px;
}
div#warriors {
border:1px solid #ff3534;
width:700px;
margin:0 auto;
padding:8px;
}
form {
border:1px solid #ff3534;
width:264px;
height:190px;
}
form#blue_team {
float:left;
margin-right:8px;
margin-bottom:8px;
}
.vs_img {
border:1px solid #ff3534;
width:150px;
height:190px;
float:left;
margin-right:8px;
}
form#red_team {
float:left;
margin-bottom:8px;
}
.clearfloats {
clear:both;
border:1px solid #ff3534;
}
.clearfloats p {
margin-bottom:8px;
}
p {
width:220px;
margin:0 auto;
margin-top:8px;
text-align:center;
}
label {
display:inline-block;
width:55px;
text-align:right;
color:#ff3534;
}
.team {
border:1px solid #ff3534;
width:150px;
padding:8px;
text-align:center;
}
input[type=text] {
width:110px;
margin-bottom:8px;
}
input[type=button] {
width:150px;
cursor:pointer;
}
Screenshot before pressing ctrl-:
After:
Related
My Divs are aligned perfectly. I am trying to add an image in the center div but as soon as I add the image the divs disappear and the image is not showing.
I am having the issue with adding the image, can someone please assist. Why is my image not showing whats wrong with my code?
<style>
.div_parent{
display:inline;
background-image: url('../images/image.jpg') top center no-repeat;"
}
.div_center {
width:300px;
float:left;
border-color:black;
border-style:solid;
border-width:3px;
height :700px
}
.div_right
{
background-color:#edeeef;
border-color:black;
border-style:solid;
border-width:3px;
width: 150px;
float:left;
height:100%
}
.div_left
{
background-color:#edeeef;
border-color:black;
border-style:solid;
border-width:3px;
width: 150px;
float:left;
height:100%
}
</style>
<div class="div_parent">
<div class="div_left">
<br /><br /><br /><br /><br /><br />
<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG>Welcome to the Reporting Portal! </STRONG> </font><br />
<br />
<FONT size="2" style="font-family:sans-serif; text-align: left;">
Reports on this site are available as view-only or as an Excel download. </font>
</div>
<div class="div_center">
</div>
<div class="div_right">
<br /><br /><br /><br /><br /><br />
<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG> We're Here to Help! </STRONG> </font><br /><br />
<FONT size="2" style="font-family:sans-serif; text-align:left;">
We're friendly and available to chat. Reach out to us anytime and we'll happily answer your questions.</br><br />
Supervisors should submit requests including specific fields and search criteria to us at Report Manager</a></font>
</div>
</div>
Have you tried something like this out?
.container {
width: 100%;
height: 50px;
display: inline-block;
}
.element__left,
.element__right,
.element__center {
height: 50px;
}
.element__left, .element__right {
width: 25%;
float: left;
background-color: grey;
}
.element__center {
width: 50%;
float: left;
background-color: green;
}
<div class="container">
<div class="element__left">
<div class="element__center">
<div class="element__right">
</div>
.divOuter{
display:inline;
text-align:center;
}
.divInner1{
border: 1px solid;
float:left;
width:150px;
height:150px;
margin-left:3px;
margin-right:3px;
}
.divInner2{
border: 1px solid;
float:left;
width:250px;
height:150px;
margin-left:3px;
margin-right:3px;
}
.divInner3{
border: 1px solid;
float:left;
width:150px;
height:150px;
margin-left:3px;
margin-right:3px;
}
<body>
<div class='divOuter'>
<div class='divInner1'>First DIV</div>
<div class='divInner2'>Second DIV</div>
<div class='divInner3'>Third DIV</div>
</div>
</body>
Lets try following way:
<!DOCTYPE html>
<html class="not-ie" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aligning 3 divs with different widthst</title>
<style type="text/css">
* { padding:0; margin:0;}
body { font-family:Arial, Helvetica, sans-serif; color:#fff; font- size:16px;}
.div_parent { position:relative; width:100%; height:300px; overflow:auto; line-height:300px; text-align:center;}
.div_left { position:absolute; left:0; top:0; height:100%; background-color:#900; width:150px;}
.div_middle { position:absolute; left:150px; right:150px; top:0; height:100%; overflow:auto; background-color:#00F;}
.div_right { position:absolute; right:0; top:0; height:100%; background-color:#900; width:150px;}
</style>
</head>
<body>
<div class="div_parent">
<div class="div_left">width: 100px;</div>
<div class="div_middle">width: screen - 200px;</div>
<div class="div_right">width: 100px;</div>
</div>
</body>
</html>
I was working on a project last three months and I stopped for something else, now Im back to continue and Im facing a problem.
Before I start explain my problem, I would invite you to run this snippet so that you will understand more my problem:
/***************Style.css**************/
/* Circular Content Carousel Style */
.ca-container{
position:relative;
margin:25px auto 20px auto;
width:1200px;
height:700px;
}
.ca-wrapper{
width: 1200px;
height:100%;
position:relative;
}
.ca-item{
position:relative;
float:left;
width:330px;
height:100%;
text-align:center;
}
.ca-item-main{
position:absolute;
right:80px;
bottom:5px;
background:#fff;
overflow:hidden;
width: 325px;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
width:25px;
height:38px;
background:transparent url(https://photos-2.dropbox.com/t/2/AADIMMteRhEB2NiHzX_Z0MquXnxppt4ivpdmarz52rDyOQ/12/226666032/png/32x32/1/_/1/2/arrows.png/EO2pmKoBGH0gAigC/aALpyYLbAaADO2-Ebio68A3s-L7ioYLKSv_9ocokcRY?size=1024x768&size_mode=3) no-repeat top left;
position:absolute;
top:50%;
margin-top:-19px;
left:-40px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
z-index:100;
}
.ca-nav span.ca-nav-next{
background-position:top right;
left:auto;
right:-40px;
}
.ca-nav span:hover{
opacity:1.0;
}
/**********Demo.cs*****************/
#import url('reset.css');
/* General Demo Style */
body{
background:#e4ebe9 url(../images/pattern.png) repeat top left;
color:#000;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:12px;
}
a{
color:#000;
text-decoration:none;
}
.clr{
clear:both;
}
h1, h5{
margin:15px;
font-size:44px;
color:#000;
font-family: 'Rochester', sans-serif;
text-shadow:1px 1px 1px #fff;
text-align:center;
}
h1 span, h5{
font-size:20px;
display:block;
color:#60817a;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Circular Content Carousel with jQuery" />
<meta name="keywords" content="jquery, conent slider, content carousel, circular, expanding, sliding, css3" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Coustard:900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<div class="ca-item ca-item-1">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
$('#ca-container').contentcarousel();
</script>
</body>
</html>
After running the snippet, you will see three blocs, the image in each bloc has a size of 380x650. I would like to display the entire image in the bloc but Im unable, Whenever I try, the size of the image which will be displayed is 375x650, instead of 380x650.
I have been playing around with the value but no amelioration.
Please let me know how to fix this problem.
Sorry for the english, Im not a native english speaker, Im trying my best
It's now with width: 380px; and looks ok.
/***************Style.css**************/
.ca-item-main .wrapper img {
width: 100%;
}
/* Circular Content Carousel Style */
.ca-container{
position:relative;
margin:25px auto 20px auto;
width:1200px;
height:700px;
}
.ca-wrapper{
width: 1200px;
height:100%;
position:relative;
}
.ca-item{
position:relative;
float:left;
width:380px;
height:100%;
text-align:center;
margin: 0 5px 0 5px;
}
.ca-item-main{
position:absolute;
right:80px;
bottom:5px;
background:#fff;
overflow:hidden;
width: 380px;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
width:25px;
height:38px;
background:transparent url(https://photos-2.dropbox.com/t/2/AADIMMteRhEB2NiHzX_Z0MquXnxppt4ivpdmarz52rDyOQ/12/226666032/png/32x32/1/_/1/2/arrows.png/EO2pmKoBGH0gAigC/aALpyYLbAaADO2-Ebio68A3s-L7ioYLKSv_9ocokcRY?size=1024x768&size_mode=3) no-repeat top left;
position:absolute;
top:50%;
margin-top:-19px;
left:-40px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
z-index:100;
}
.ca-nav span.ca-nav-next{
background-position:top right;
left:auto;
right:-40px;
}
.ca-nav span:hover{
opacity:1.0;
}
/**********Demo.cs*****************/
#import url('reset.css');
/* General Demo Style */
body{
background:#e4ebe9 url(../images/pattern.png) repeat top left;
color:#000;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:12px;
}
a{
color:#000;
text-decoration:none;
}
.clr{
clear:both;
}
h1, h5{
margin:15px;
font-size:44px;
color:#000;
font-family: 'Rochester', sans-serif;
text-shadow:1px 1px 1px #fff;
text-align:center;
}
h1 span, h5{
font-size:20px;
display:block;
color:#60817a;
}
<div class="container">
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<div class="ca-item ca-item-1">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://www.dropbox.com/static/images/lockbox.png" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://www.dropbox.com/static/images/lockbox.png" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://www.dropbox.com/static/images/lockbox.png" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Am working on making a copy of the BBC site and want to make two horizontal bars (part of the header) butt up against each other. Right now, there is a space between the two which I want to remove.
Here is the image I am getting:
Here is the HTML and CSS:
<!doctype html>
<html>
<head>
<title>BBC_Copy</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family: arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #770000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
padding:2px 80px 12px 20px;
font-size: 0.9em;
float:left;
border-right:1px solid #770000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style: none;
font-wieght:bold;
font-size:0.9em;
border-right:1px solid #770000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
float:left;
padding:5px 0 0 10px;
}
#searchdiv input {
height:25px;
border:none;
font-size:0.9em;
padding-left: 10px;
background-image: url("images/magnify.png");
background-repeat: no-repeat;
background-position:center right;
}
.break {
clear:both;
}
#newsbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbc_logo.png" />
</div>
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="break">
</div>
<div id="newsbar">
</div>
</div>
</body>
</html>
Your problem is in:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
The <p> tags are adding extra margin on top and bottom. I would recommend getting rid of the p tags... they don't add any semantic advantage.
Replace this:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
with this:
<div id="signindiv">
<img src="images/signin.png" />Sign In
</div>
Result: http://jsfiddle.net/ru7zzc1w/1/
I could be missing some coding, but here is what I mean:
Messed up one
Perfectly fine one
Basically, on the messed up web page, my links don't align like the other pages. My coding for the MESSED UP ONE is:
<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><img src="images/1st-link.jpg" onmouseover="this.src='images/1st-link-roll.jpg'" onmouseout="this.src='images/1st-link.jpg'" />
<img src="images/2nd-link.jpg" onmouseover="this.src='images/2nd-link-roll.jpg'" onmouseout="this.src='images/2nd-link.jpg'" />
<img src="images/3rd-link.jpg" onmouseover="this.src='images/3rd-link-roll.jpg'" onmouseout="this.src='images/3rd-link.jpg'" />
<img src="images/4th-link.jpg" onmouseover="this.src='images/4th-link-roll.jpg'" onmouseout="this.src='images/4th-link.jpg'" />
</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><form action="" method="post" id="form-radio">
<p>
<label>
<input type="radio" name="Website Feedback" value="radio" id="WebsiteFeedback_0" />
Yes</label>
<br />
<label>
<input type="radio" name="Website Feedback" value="radio" id="WebsiteFeedback_1" />
No</label>
<br />
</p>
</form></p><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
The coding for the PERFECTLY FINE page is:
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
<p><img src="images/1st-link.jpg" onmouseover="this.src='images/1st-link-roll.jpg'" onmouseout="this.src='images/1st-link.jpg'" />
<img src="images/2nd-link.jpg" onmouseover="this.src='images/2nd-link-roll.jpg'" onmouseout="this.src='images/2nd-link.jpg'" />
<img src="images/3rd-link.jpg" onmouseover="this.src='images/3rd-link-roll.jpg'" onmouseout="this.src='images/3rd-link.jpg'" />
<img src="images/4th-link.jpg" onmouseover="this.src='images/4th-link-roll.jpg'" onmouseout="this.src='images/4th-link.jpg'" />
</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>
And lastly, the CSS STYLE SHEET for BOTH pages is:
#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;
margin:0px;
padding:0px;
}
#rollover
{
display:block;
width:120px;
border:1px solid #000;
float:left;
margin-top:30px;
}
#firstlink
{
display:block;
width:120px;
border:1px solid #000;
float:left;
margin-top:30px;
margin-left:265px;
}
a img
{
border:none;
}
#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;
}
#form-radio
{
float:left;
}
Any help would be MUCH appreciated, Thanks
When logged out, my page wrapper which is the very light grey background, expands 100% of the page, but once you log in it gets smaller and resizes to the width of the member bar...
TO TEST USER ACCOUNT BELOW:
http://creatorsparadise.herobo.com/
USERNAME: TEST
PASSWORD: TEST123
HTML FOR LOGGED OUT...
<!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" type="text/css" href="style.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Creator's Paradise - Home</title>
<style type="text/css">
.auto-style1 {
text-decoration: none;
}
.auto-style2 {
border-width: 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" style="height: 75px">
<img src="images/logo.png" />
</div>
<div id="links1">
<ul id="topbar">
<li>home</li>
<li>forums</li>
<li>themes</li>
<li>codes</li>
<li>learn</li>
<li>more</li>
</ul>
</div>
<div id="member">
<center><div id="login">
<form action="" method="post">
<table cellpadding="2" cellspacing="2" style="height: 18px; width: 1000px;">
<tr>
<td colspan="2" style="height: 24px"><? if(!isset($_POST['login'])){?>
<? }else{ echo "".$final_report."";}?> </td>
<td width="80" style="height: 24px"><a class="userandpass">Username:</a></td>
<td width="180" style="height: 24px"><input type="text" name="username" size="25" maxlength="25"></td>
<td style="height: 24px"></td>
<td width="80" style="height: 24px"><a class="userandpass">Password:</a></td>
<td width="180" style="height: 24px"><input type="password" name="password" size="25" maxlength="25"></td>
<td style="height: 24px"> </td>
<td style="height: 24px"><input type="submit" name="login" value="Login" width="25px"/></td>
</tr>
<tr>
<td><br></td>
</tr>
</table>
</form>
</div>
</center>
</div>
</div>
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside">
</div>
<div id="rightside">
<a class="advertise">Partners</a>
<div class="clickable">
</div>
<div class="clickable1">
</div>
<div class="clickable2">
</div>
<div id="vertical_line_1">
</div>
</div>
</div>
</div>
<div id="barone">
</div>
</div>
<div id="footer">
<div id="infooter">
</div>
</div>
<div id="copyright">
<div id="incopyright">
<a class="copy">Copyright © 2013 CreatorsParadise.com</a>
</div>
</div>
</body>
</html>
HTML FOR LOGGED IN...
<!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" type="text/css" href="style.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Creator's Paradise - Home</title>
<style type="text/css">
.auto-style1 {
text-decoration: none;
}
.auto-style2 {
border-width: 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" style="height: 75px">
<img src="images/logo.png" />
</div>
<div id="links1">
<ul id="topbar">
<li>home</li>
<li>forums</li>
<li>themes</li>
<li>codes</li>
<li>learn</li>
<li>more</li>
</ul>
</div>
<div id="member">
<ul id="loggedin">
<li>Members Area</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside">
</div>
<div id="rightside">
<a class="advertise">Partners</a>
<div class="clickable">
</div>
<div class="clickable1">
</div>
<div class="clickable2">
</div>
<div id="vertical_line_1">
</div>
</div>
</div>
</div>
<div id="barone">
</div>
</div>
<div id="footer">
<div id="infooter">
</div>
</div>
<div id="copyright">
<div id="incopyright">
<a class="copy">Copyright © 2013 CreatorsParadise.com</a>
</div>
</div>
</body>
</html>
BOTH USE THE SAME CSS FILE...
body{
background:#333333;
width:100%;
margin: 0 auto;
}
#header{
width:1100px;
height:110px;
margin:0 auto;
margin-bottom:20px;
}
#member{
width:100%;
height:32px;
margin:0 auto;
margin-top:21px;
border-top:2px solid #999999;
border-right:2px solid #999999;
border-left:2px solid #999999;
background-color:#575757;
}
.userandpass{
color:white;
font-family: "Arial";
font-size:15px;
}
.yep{
color:white;
font-family: "Arial";
text-decoration: none;
}
a{
color:red;
font-family: "Arial";
text-decoration: none;
}
#loggedin{
float:right;
margin-right:30px;
margin-top:5px;
}
#loggedin li{
display:inline;
margin-right:20px;
}
#loggedin li a{
display:inline;
color:white;
font-family: "Arial";
font-size:17px;
}
#loggedin a:hover{
display:inline;
color:#6ad5f1;
font-family: "Arial";
font-size:17px;
}
#logo{
margin-left:30px;
margin-top:25px;
}
#topbar{
float:right;
margin-right:30px;
}
#topbar li{
display:inline;
margin-right:20px;
}
#topbar li a{
display:inline;
color:white;
font-family: "Berlin Sans FB Demi";
font-size:22px;
}
#topbar a:hover{
display:inline;
color:#6ad5f1;
font-family: "Berlin Sans FB Demi";
font-size:22px;
}
#links1{
width:700px;
height:60px;
float:right;
margin-top:-65px;
}
#wrapper{
width:100%;
height:800px;
background-color:#F8F8F8;
border-top:2px solid #999999;
margin: 0 auto;
border-bottom:1px solid #999999;
}
#barone{
width:100%;
height:20px;
background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top, rgb(214,214,214) 86%, rgb(201,201,201) 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(86%,rgb(214,214,214)), color-stop(96%,rgb(201,201,201))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* IE10+ */
background: linear-gradient(to bottom, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */
border-bottom:1px solid #999999;
margin: 0 auto;
}
#footer{
width:100%;
height:250px;
background-color:#575757;
border-top:5px solid #999999;
border-bottom:1px solid #999999;
margin: 0 auto;
}
#copyright{
background:#333333;
width:100%;
height:4px;
margin: 0 auto;
}
#incopyright{
width:1050px;
height:4px;
margin:0 auto;
margin-bottom:20px;
}
.copy{
text-align:center;
color:white;
font-family: "Berlin Sans FB Demi";
font-size:15px;
margin-left:385px;
}
#core{
width:1120px;
height: 780px;
margin:0 auto;
margin-top:15px;
margin-bottom:25px;
}
div.clickable {
position:relative;
margin-left:35px;
margin-top:65px;
}
div.clickable a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
div.clickable1 {
position:relative;
margin-left:35px;
margin-top:290px;
}
div.clickable1 a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable1 a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
div.clickable2 {
position:relative;
margin-left:35px;
margin-top:515px;
}
div.clickable2 a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable2 a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
#leftsend{
width:1080px;
height:760px;
margin:0 auto;
}
#rightside{
width:220px;
height:760px;
background:#EBEBEB;
float:right;
border: 1px solid #CFCFCF;
}
#vertical_line_1{
width:1px;
height:800px;
background:#B5B5B5;
float:right;
margin-right:240px;
margin-top:-530px;
}
.advertise{
font-family: Arial;
font-size: 18px;
font-weight: bolder;
color:#838383;
float:right;
margin-right:75px;
margin-top:20px;
text-decoration: underline;
}
#leftside{
width:815px;
height:770px;
float:left;
}
#premium{
margin-left:50px;
}
#login{
margin:0 auto;
margin-bottom:21px;
}
I DOUBT YOU WILL NEED THE PHP BUT HERE IT IS FOR LOGGED OUT
<? ob_start();session_start();include_once"config.php";
if(isset($_SESSION['username']) || isset($_SESSION['password'])){
header("Location: http://creatorsparadise.herobo.com/index_logged.php");
}else{
if(isset($_POST['login'])){
$username= trim($_POST['username']);
$password = trim($_POST['password']);
if($username == NULL OR $password == NULL){
$final_report.="<a class='yep'>Please fill out all fields or </a><a href='www.http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$check_user_data = mysql_query("SELECT * FROM `members` WHERE `username` = '$username'") or die(mysql_error());
if(mysql_num_rows($check_user_data) == 0){
$final_report.="<a class='yep'>This username does not exist. </a><a href='http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$get_user_data = mysql_fetch_array($check_user_data);
if($get_user_data['password'] != $password){
$final_report.="<a class='yep'>Your password is incorrect. </a><a href='http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$start_idsess = $_SESSION['username'] = "".$get_user_data['username']."";
$start_passsess = $_SESSION['password'] = "".$get_user_data['password']."";
$final_report.="<a class='yep'>Wait one moment...</a> <meta http-equiv='Refresh' content='2; URL=http://creatorsparadise.herobo.com/index_logged.php'/>";
}}}}}
?>
PHP FOR LOGGED IN
<? ob_start(); session_start();include_once"config.php";
if(!isset($_SESSION['username']) || !isset($_SESSION['password'])){
header("Location: http://http://creatorsparadise.herobo.com/");
}else{
$user_data = "".$_SESSION['username']."";
$fetch_users_data = mysql_fetch_object(mysql_query("SELECT * FROM `members` WHERE `username`='".$user_data."'"));
}
?>
The problem is that you don't close #header, so #wrapper becomes its child instead of a sibling.
Then, add </div> just before <div id="wrapper"> to close <div id="header">
As stated by Oriol, you need to insert a closing DIV for your #header.
Here is where you will need to close the #header:
<div id="member">
<ul id="loggedin">
................
</ul>
</div>
</div> /*--------Missing closing div--------*/
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside"></div>
<div id="rightside">