4 replies [Last post]
Transition
Offline
newbie
Last seen: 18 years 15 weeks ago
Joined: 2004-04-29
Posts: 5
Points: 0

Hi my name's RJ, and i'm... i'm.. i'm addicted to tables.

Developing some content i'd like to able to adhere to the new XHTML standards. Purpose of doing this is so i can show / hide part of the 2 div container. Anyway back to the question...

If you look at the picture what i'm trying to accomplish is seemingly simple. Need to create a 1 row, 3 column box for the header (as seen by the red-outlined section in my attached GIF). Why am i making it 3 columns? I've got a small image to go in both the right and left columns, with the center being the text holder.

I've read enough CSS tutorials to make me dizzy - and like a recovering alcoholic i'm looking for some initial help to get me going on this...

Thanks,

- RJ

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 17 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

CSS / DIV Box Created (former recovering table addict)

Hi RJ

There are several ways you could achieve this. The most stable way would be to use floats.

As a simple example:

http://pub.c-o2.net/cssf/simpleFloat.htm

Feel free to use the code/css. As you can see, divs are used here, but you could use unordered lists etc. depending on the need. Divs are fine by the looks of your design though.

Smile

The next sentence is true. The previous sentence is false. Discuss...

Transition
Offline
newbie
Last seen: 18 years 15 weeks ago
Joined: 2004-04-29
Posts: 5
Points: 0

CSS / DIV Box Created (former recovering table addict)

Hi Co,

Thanks for the response. Your posted suggestion is close! I believe i need to structure my boxes differently though - here's what i'm picturing now...

The 'container' will be used in the following project (as seen in the left-hand frame)...

http://www.dionsys.com/html2/main.htm

Help?! :?

Transition
Offline
newbie
Last seen: 18 years 15 weeks ago
Joined: 2004-04-29
Posts: 5
Points: 0

CSS / DIV Box Created (former recovering table addict)

bump

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS / DIV Box Created (former recovering table addict)

Hi

IF all you want in those two left/right divs is images, you don't actually need floats.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>New document</title>
<link rel="stylesheet" href="****.css" type="text/css" media="screen" />
<style type="text/css" media="screen">@import url("****.css");</style>
<style type="text/css">
html,body{
  margin:20;
  padding:0;
  border:0;
}
body{
  font-family:verdana,arial,sans-serif;
  font-size:76%; /*** Note: see http://www.thenoodleincident.com/ style the rest of font sizes in ems ***/
}
div,p{margin:0}
.clear{ 
  clear:both; 
/*** these next attributes are designed to keep the div 
height to 0 pixels high, critical for Safari and Netscape 7 ***/ 
  height:1px; 
  overflow:hidden; 
  margin-bottom:-1px; 
} 
* html .clear{display:none} /*** stops IE browsers from displaying 
the clear div/br in the page, as these are for Moz/Opera and 
Safari only. If IE 5.x Win DID display these, the page is too high ***/
.header{
margin-left:50px;
margin-right:50px;
}
.header div div{
height:50px;
overflow:hidden;
}
.header div div{background:url(headerleft.gif) no-repeat top left}
.header div{background:url(headerright.gif) no-repeat top right}
.outerbox {
  overflow:hidden;
  width:100%;
  background:#EEEEEE;
  border:1px solid black;
}
</style>

</head>
<body>
 <div class="outerbox">
  <div class="header">
   <div>
    <div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
massa felis, posuere nec, interdum non, fermentum vel, pede. Nam
consectetuer massa vitae urna. Morbi sit amet justo. Morbi a tellus.
Nunc a velit. Nullam tellus. Nunc tincidunt tellus sit amet lacus.
Morbi nibh wisi, placerat vel, tempus nec, congue non, nulla. Aenean
dignissim arcu nec velit. In tortor.</p></div>
   </div>
  </div>
 </div>
</body>
</html>

Just insert your image names and make the margins of header suit the widths of those images and away you go, plus make sure the hieght is enough for the images.

Sorry about the junk at the start of the css, I always leave that there Laughing out loud

Trevor