Div not appearing

7 replies [Last post]

Mon, 2010-02-08 13:56

ex_reven

Offline

Regular

Timezone: GMT+10

Joined: 2010-01-31

Posts: 16

Points: 27

After adding a heap of links to my page. A div with a row of three images within it has disappeared entirely and another one has been cut in half. I dont know what caused it, as the links were added to another two divs within the same container tag and they didnt have any issues.

The code needs to be cleaned up alot, sorry about that.
But I'd like to get this thing working before I go and do that.
So is there anything I should be looking for in particular?

If anyone can see something Im doing wrong Id be grateful for some advice/tips on how to do it better.

Heres 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=utf-8" />
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #222222;
}
-->
</style></head>
 
<body>
 
<div id="container">
 
  <div id="pagewidth">
 
    <div id="header">
      <div id="moon"></div>
      <div id="logo"></div>
      <div id="menu">
        <div id="home" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
        <div id="about" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
        <div id="services" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
        <div id="clients" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
        <div id="contact" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
 </div>
 
      <div id="moonshine"></div>
    <div id="body">
      <div id="row1">
        <div id="r1b1" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
      <div id="r1b2" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
<div id="r1b3" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
      </div>
 
      <div id="row2">
        <div id="r2b1" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
        <div id="r2b2" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
      </div>
 
      <div id="row3">
        <div id="r3b1" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
        <div id="r3b2" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
        <div id="r3b3" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
      </div>
 
    </div>
 
    <div id="footer"></div>
 
  </div>
</div>
</div>
</body>
</html>

And heres the CSS

@charset "utf-8";
/* CSS Document */
 
#container {
	width: 1024px;
	height: 768px;
	margin: auto;
	overflow: hidden;
}
#header {
	height: 169px;
	width: 1024;
	background-color: #000;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #333;
	border-right-color: #333;
	border-bottom-color: #333;
	border-left-color: #333;
}
#body {
	height: 452px;
	width: 1024px;
	overflow: visible;
}
#moon {
	background-image: url(images/moon.jpg);
	height: 146px;
	width: 241px;
	float: left;
	margin-left: 67px;
	margin-top: 19px;
}
#logo {
	background-image: url(images/logo.jpg);
	float: left;
	height: 84px;
	width: 376px;
	margin-top: 38px;
	margin-left: 35px;
}
#moonshine {
	background-image: url(images/moonshine.jpg);
	height: 44px;
	width: 1024px;
	float: left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #333;
	border-right-color: #333;
	border-bottom-color: #333;
	border-left-color: #333;
}
#menu {
	height: 43px;
	width: 376px;
	float: left;
	margin-left: 35px;
	overflow: hidden;
}
#home {
	background-image: url(images/home.jpg);
	float: left;
	height: 43px;
	width: 81px;
}
#about {
	background-image: url(images/about.jpg);
	float: left;
	height: 43px;
	width: 66px;
}
#services {
	background-image: url(images/services.jpg);
	float: left;
	height: 43px;
	width: 74px;
}
#clients {
	background-image: url(images/clients.jpg);
	height: 43px;
	width: 71px;
	float: left;
}
#contact {
	background-image: url(images/contact.jpg);
	float: left;
	height: 43px;
	width: 84px;
}
#row1 {
	height: 147px;
}
#r1b1 {
	background-image: url(images/r1b1.jpg);
	height: 147px;
	width: 411px;
	float: left;
}
#r1b2 {
	background-image: url(images/r1b2.jpg);
	height: 147px;
	width: 203px;
	float: left;
}
#r1b3 {
	background-image: url(images/r1b3.jpg);
	height: 147px;
	width: 410px;
	float: left;
}
#row2 {
	height: 144px;
	float: left;
	width: 1024px;
}
#r2b1 {
	background-image: url(images/r2b1.jpg);
	height: 144px;
	width: 614px;
	float: left;
}
#r2b2 {
	background-image: url(images/r2b2.jpg);
	height: 147px;
	width: 410px;
	float: left;
	overflow: hidden;
}
#row3 {
	height: 161px;
	width: 1024px;
	float: left;
}
#r3b1 {
	background-image: url(images/r3b1.jpg);
	height: 161px;
	width: 411px;
	float: left;
}
#r3b2 {
	background-image: url(images/r3b2.jpg);
	height: 161px;
	width: 203px;
	float: left;
}
#r3b3 {
	background-image: url(images/r3b3.jpg);
	height: 161px;
	width: 410px;
	float: left;
}
#footer {
	position: fixed;
	height: 100%;
	float: left;
	width: 1024px;
	background-color: #000;
	background-repeat: repeat;
}

Attachment	Size
weird.jpg	82.49 KB

Tags:

Beginners CSS Questions

Mon, 2010-02-08 14:01

ex_reven

Offline

Regular

Timezone: GMT+10

Joined: 2010-01-31

Posts: 16

Points: 27

PS - Im aware that all the

PS - Im aware that all the links point to one place (I havnt coded the other pages HTML yet).
Also aware that I need to move some of the repeated tags into nested divs above the affected divs, will do this tomorrow after I get out of the darkrooms!

Thanks,
Ex_Reven

Mon, 2010-02-08 14:29

CupidsToejam

Offline

Guru

Timezone: GMT-5

Joined: 2008-08-15

Posts: 2382

Points: 1268

can you maybe provide a link?

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Mon, 2010-02-08 20:26

ex_reven

Offline

Regular

Timezone: GMT+10

Joined: 2010-01-31

Posts: 16

Points: 27

Site Isnt live yet. Heres

Site Isnt live yet.
Heres what it looks like though.
Everything above the coloured squares are inside the header tag, except the grey horizontal bar, which is a div on its own below the header.

Mon, 2010-02-08 23:37

Deuce

Offline

Guru

Timezone: GMT-7

Joined: 2005-11-20

Posts: 3731

Points: 1038

<div id="r1b1"

<div id="r1b1" onclick="location.href='http://www.example.com.au/logodesign';" style="cursor:pointer;"></div>
Really? Why not just use an anchor tag?
Your code provides no semantic meaning.
Those should be list of images, not just a bunch of DIVs.
Put your logo in a header tag, not a div.
What's a id="moon"? Looks like that could just be a background...

As for why things are cutting off, please provide a live link.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Tue, 2010-02-09 07:37

ex_reven

Offline

Regular

Timezone: GMT+10

Joined: 2010-01-31

Posts: 16

Points: 27

I shall recode the entire

I shall recode the entire thing and get back to you.
Looks like Ive misunderstood the proper use of divs.

Ill have another go from scratch and repost by tomorrow.
Thanks guys.

Thu, 2010-02-11 00:08

ex_reven

Offline

Regular

Timezone: GMT+10

Joined: 2010-01-31

Posts: 16

Points: 27

Still working on it.

Tue, 2010-02-16 07:18

scept1c

Offline

Regular

Timezone: GMT+3

Joined: 2010-02-01

Posts: 12

Points: 12

give a link to the site when

give a link to the site when it's up pls.

http://www.cms-informer.com/ PHP Content management Systems Blog and News
Articles, Information, Documentation, Blogs

PS - Im aware that all the

can you maybe provide a link?

Site Isnt live yet. Heres

<div id="r1b1"

I shall recode the entire

Still working on it.

give a link to the site when

New forum topics

User login

Navigation