divs not showing up when I test it

hi,

The inside of the box is white with a 2px blue border, I have done the divs for #squaretop and #squarebottom but they don't seem to show up when I test it. I don't have a url yet so the pics are the best that I can do. Not quite sure how to insert an image into this new post as the images are on my hard drive, so you know what I am trying to ask

CSS
body { background-color: #ffffff;
font-family: "Century Gothic";
font-size: 62.5%;
color: #000000;
font-weight:normal;
}

#wrapper {
background-color:#ffffff;
height:auto;
width:750px;
margin-right:auto;
margin-left:auto;
}

#headerlogo {
height: 70px;
width: 760px;
}

#headerimage {
margin-left:8%;
width:368px;
height:261px;
padding:20px 0 0 0;
}

#headernavigation {
width:750px;
height:10px;
font-size:1.1em;
color:#96ADBF;
font-family:"Century Gothic";
margin-left:13%;
}

#maincontent {
background-color: #ffffff;
height: auto;
width: 100%;
margin-top:5px;
font-size:1.2em;
}

#squarecont {
width:750px;
height:auto;
}

#squaretop {
width:750px;
height:152px;
background:url(/images/squaretop.gif) no-repeat center top;
}

#squarebottom {
width:750px;
height:114px;
background:url(/images/squarebottom.gif) no repeat center bottom;
}

#squaretext {
font-family:"Century Gothic";
font-size:1.2em;
border-left:solid #cbd7e6 2px;
border-right:solid #cbd7e6 2px;
}

HTML

Expand|Select|Wrap|Line Numbers

 
<!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=iso-8859-1" />

<title>Photo Restoration Expert, Photo enhancement, Red eye repair</title>

<link href="sitefiles/photorestorationexpert.css" media="screen" type="text/css" rel="stylesheet" />
 
</head>
 
<body>
 
<div id="wrapper">

<div id="headerlogo">

<img src="images/photorestorationexpert logo.jpg" width="760" height="70" alt="photo restoration expert logo" /></div>
 
<div id="headernavigation">

<h1>Home &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Gallery &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Prices &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Contact</h1>

</div>
 
<div id="headerimage">

<img src="images/redeye before&after together.jpg" width="298" height="215" alt="red eye before and after" /></div>
 
<div id="maincontent"></div>

<div id="squarecont">

<div id="squaretop"></div>

<div id="squaretext">
 
<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut eros mi, aliquam sit amet, facilisis sit amet, scelerisque a, felis. Aenean elit tellus, varius at, pretium quis, fringilla sit amet, urna. Donec in nibh ut quam eleifend venenatis. In hac habitasse platea dictumst. Nulla facilisi. Nam ac sapien sed eros malesuada porttitor. Nunc eget lacus sed nibh cursus dictum. Pellentesque ipsum neque, tincidunt at, mattis a, pulvinar sit amet, ipsum. Aliquam sollicitudin lacus et ipsum ullamcorper cursus. Mauris elementum libero non nulla.

</p>
 
<p>

Phasellus suscipit, justo id commodo eleifend, arcu eros sagittis tortor, in vehicula eros enim id urna. Quisque sed turpis. Nam a sapien nec quam adipiscing pretium. Duis sollicitudin iaculis lectus. Nulla facilisi. Aliquam erat volutpat. Vivamus dui neque, egestas vel, tristique sed, posuere at, est. Sed magna ligula, fermentum ut, suscipit in, molestie quis, nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pulvinar. 

</p>
 
</div>

<div id="squarebottom"></div>
 
</div>
 
</div>
 
</body>

</html>

Jun 26 '07 #1

Subscribe Post Reply

1606

bettor

hi,

The inside of the box is white with a 2px blue border, I have done the divs for #squaretop and #squarebottom but they don't seem to show up when I test it. I don't have a url yet so the pics are the best that I can do. Not quite sure how to insert an image into this new post as the images are on my hard drive, so you know what I am trying to ask

CSS
body { background-color: #ffffff;
font-family: "Century Gothic";
font-size: 62.5%;
color: #000000;
font-weight:normal;
}

#wrapper {
background-color:#ffffff;
height:auto;
width:750px;
margin-right:auto;
margin-left:auto;
}

#headerlogo {
height: 70px;
width: 760px;
}

#headerimage {
margin-left:8%;
width:368px;
height:261px;
padding:20px 0 0 0;
}

#headernavigation {
width:750px;
height:10px;
font-size:1.1em;
color:#96ADBF;
font-family:"Century Gothic";
margin-left:13%;
}

#maincontent {
background-color: #ffffff;
height: auto;
width: 100%;
margin-top:5px;
font-size:1.2em;
}

#squarecont {
width:750px;
height:auto;
}

#squaretop {
width:750px;
height:152px;
background:url(/images/squaretop.gif) no-repeat center top;
}

#squarebottom {
width:750px;
height:114px;
background:url(/images/squarebottom.gif) no repeat center bottom;
}

#squaretext {
font-family:"Century Gothic";
font-size:1.2em;
border-left:solid #cbd7e6 2px;
border-right:solid #cbd7e6 2px;
}

HTML

Expand|Select|Wrap|Line Numbers

<!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=iso-8859-1" />

<title>Photo Restoration Expert, Photo enhancement, Red eye repair</title>

<link href="sitefiles/photorestorationexpert.css" media="screen" type="text/css" rel="stylesheet" />

</head>

<body>

<div id="wrapper">

<div id="headerlogo">

<img src="images/photorestorationexpert logo.jpg" width="760" height="70" alt="photo restoration expert logo" /></div>

<div id="headernavigation">

<h1>Home              

Gallery              

Prices              

Contact</h1>

</div>

<div id="headerimage">

<img src="images/redeye before&after together.jpg" width="298" height="215" alt="red eye before and after" /></div>

<div id="maincontent"></div>

<div id="squarecont">

<div id="squaretop"></div>

<div id="squaretext">

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut eros mi, aliquam sit amet, facilisis sit amet, scelerisque a, felis. Aenean elit tellus, varius at, pretium quis, fringilla sit amet, urna. Donec in nibh ut quam eleifend venenatis. In hac habitasse platea dictumst. Nulla facilisi. Nam ac sapien sed eros malesuada porttitor. Nunc eget lacus sed nibh cursus dictum. Pellentesque ipsum neque, tincidunt at, mattis a, pulvinar sit amet, ipsum. Aliquam sollicitudin lacus et ipsum ullamcorper cursus. Mauris elementum libero non nulla.

</p>

<p>

Phasellus suscipit, justo id commodo eleifend, arcu eros sagittis tortor, in vehicula eros enim id urna. Quisque sed turpis. Nam a sapien nec quam adipiscing pretium. Duis sollicitudin iaculis lectus. Nulla facilisi. Aliquam erat volutpat. Vivamus dui neque, egestas vel, tristique sed, posuere at, est. Sed magna ligula, fermentum ut, suscipit in, molestie quis, nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pulvinar.

</p>

</div>

<div id="squarebottom"></div>

</div>

</div>

</body>

</html>

Hi,
First I don't really understand what you are asking. How would you like to see your top and bottom ids when they are empty and there is no info in them. their margin is auto and if there is nothing in them they just don't show anything.
<div id="squaretop">put some info here to see this div working and the same for squarebottom</div> Let me know if this helps

Jun 27 '07 #2

Similar topics

hiding divs

by: WindAndWaves | last post by:

Hi Gurus I have a page, which looks a bit like this: .... <body> <div ID=id1>................</DIV> <div ID=gsd>................</DIV> <div ID=ewd>................</DIV> <div...

Javascript

Set the height of a floating divs equal (height = maximum height of divs)

by: veerleverbr | last post by:

Hi, I have the following html: <div id="content"> <div id="leftpart">...</div> <div id="rightpart">...</div> </div> leftpart en rightpart are in the css set to float left. The content of...

HTML / CSS

Showing and Hiding DIVs in FireFox

by: gregmercer | last post by:

I have the following html sample, where I'd like to have a show and hide two divs, one replacing the other. Following these two divs is a third div (the bluediv) which I would like to have placed...

Javascript

floating divs

by: meltedown | last post by:

I would like the floating divs to float and then the header to come after them , on the left. That's what I thought clearing the floats was for, but in this example, the header is to the right of...

HTML / CSS

Nested DIVs and partial transparency

by: Ben Wall | last post by:

I have a page with six or seven absolutely positioned DIV blocks ... they all contain form elements .. text boxes, buttons, etc. and they all reside within a containing "master" DIV. What I need to...

Javascript

How do i center align divs

by: roula | last post by:

I HATE DIVS AND DIFFERENT BROWSERS!!! i spent the whole day and night searching for a way to center align stupid divs, the problem is that the code is so sensitive, i lost my mind trying to make them...

HTML / CSS

Layered DIVs & Background Images

by: rigiditymodulus | last post by:

Hi - So, I had this working perfectly, then had a small crash (the transmitter for my wireless mouse occassionally freaks out my MacBook Pro) and when I rebooted and opened up my file the two...

HTML / CSS

IE not showing divs properly centered

by: warp | last post by:

With some help from a friend I made a layout for this website: http://jwstolk.xs4all.nl/roelof/ (don't mind all the unfinished junk, the home page is of concern) In FF 3 it shows just fine,...

HTML / CSS

Auto expanding divs inside tab conatiner

by: dmj07 | last post by:

What I would like to achieve is to have two divs on either side of my tab container, one on the left and one on the right both touching the far sides. Then information will need to go inbetween the...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice