Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Cell Padding/Spacing with DIV's 4

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
Hello folks,

I'm converting over my site to XHTML & CSS, i've converted one page that had a table structure
i've managed to nearly duplicate it with DIV's

only as you can see i'm having dificulty in getting the spacing between the div's right. Can some one help as to am i correctly using the div's to replace my table and how do i set the spacing, i have tried to put a spacer div inbetween setting its height to 1px but that doesn't seem to work, I get a much bigger gap.

Here is the code

Code: 
<div align="center"><img src="images/hlp-lenders.jpg" title="HLP Lender Partners" border="0" alt="HLP Lender Partners" /></div>
<div align="center">
    <div align="center" style="width:610px;">
        <div align="left" class="titlecell" onmouseover="window.status='Please choose a menu option'">&nbsp;HLP Lender Partners</div>
        <div style="width:300px; height:80px; padding:2px; float:left">
            <div class="table" style="padding:2px;">    
                <img src="images/dtl.gif" onmouseover="window.status='Direct Lender Panel'" onmouseout="window.status='Please choose a menu option'" title="Direct Lenders" style="cursor:pointer" border="0" alt="" onclick="window.open('/M2K-HLP2/directtolender.asp','DTL',
'scrollbars=yes,width=420,height=545,fullscreen=no');" />
            </div>
            <div style="height:1px;"></div>
            <div class="table" style="padding:2px;">
                <a href="#" onmouseover="window.status='Direct to Lender Procuration Fees'" onmouseout="window.status='Please choose a menu option'" onclick="document.lenders.FA.value='COM'; document.lenders.PROV.value='DTL'; document.lenders.submit();">Direct to Lender<br /><img alt="" src="images/10quid.jpg" title="Lender Procuration Fees" style="cursor:pointer" border="0" /><br />Procuration Fees</a>
            </div>
        </div>
        <div  style="position:relative; width:300px; height:80px; padding:2px; float:right">
            <div class="table" style="padding:2px;"> 
                <img src="images/packaged.gif" onmouseover="window.status='Packaged Lender Panel'" onmouseout="window.status='Please choose a menu option'" title="Packaged Lenders" style="cursor:pointer" border="0" alt="" onclick="window.open('/M2K-HLP2/packagedlenders.asp','PKG',
'scrollbars=yes,width=420,height=375,fullscreen=no');" />
            </div> 
            <div style="height:1px;"></div>           
            <div class="table" style="padding:2px;">
                <a href="#" onmouseover="window.status='Packager Procuration Fees Menu'" onmouseout="window.status='Please choose a menu option'" onclick="document.location.href='lenders.cgi';">Packaged Products<br /><img alt="" src="images/10quid.jpg" title="Packager Procuration Fees" style="cursor:pointer" border="0" onclick="document.location.href='lenders.cgi';" /><br />Procuration Fees</a>
            </div>            
        </div>
        <div class="titlecell" onmouseover="window.status='Please choose a menu option'">&nbsp; </div>   
    </div> 
</div>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Sort by date Sort by votes
Should you not begin a little easier? From the pictures I see this:

- an image at the top
- an h1 title tag
- four floated divs with certain margins.

So, try and simplify.
 
Upvote 0 Downvote
H1 title tag ? it was a table cell with text and image background.

Should this be a H1 tag, i'll try but I don't understand.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
It looks like a title, ya? I looked at the picture and that looked like a title. And h1-h6 are used as titles, headings. So, semantically, it makes sense that it is a heading, be it h1 or any other.

You may be coming around to using css and proper xhtml code to develop your website, but you're still thinking the old way. Just forget all you knew about web design and start anew. Look at your picture. Do you see a table? Do you see a table cell with coloured background? If you do, you need to further distance yourself from that. What you should be seeing is a picture, a title and four boxes. Bottom background has absolutely no semantic meaning (it is there purely for design), so you should omit it from this planning and just pin it down later as the bottom positioned background of the container or something.
 
Upvote 0 Downvote
ok i've done a rewrite but now it's all over the shop.


here is the code
Code: 
<div align="center"><img src="/images/hlp-lenders.jpg" title="HLP Lender Partners" border="0" alt="HLP Lender Partners" /></div>
<h1 align="left" style="width:600px;" class="titlecell" onmouseover="window.status='Please choose a menu option'">&nbsp;HLP Lender Partners</h1>
            <div align="center" class="table" style="padding:2px; width:300px;">    
                <img src="/images/dtl.gif" onmouseover="window.status='Direct Lender Panel'" onmouseout="window.status='Please choose a menu option'" title="Direct Lenders" style="cursor:pointer" border="0" alt="" />
            </div>
            <div align="center" class="table" style="padding:2px; width:300px;">
                <a href="#" onmouseover="window.status='Direct to Lender Procuration Fees'" onmouseout="window.status='Please choose a menu option'">Direct to Lender<br /><img alt="" src="/images/10quid.jpg" title="Lender Procuration Fees" style="cursor:pointer" border="0" /><br />Procuration Fees</a>
            </div>
            <div align="center" class="table" style="padding:2px; width:300px;"> 
                <img src="images/packaged.gif" onmouseover="window.status='Packaged Lender Panel'" onmouseout="window.status='Please choose a menu option'" title="Packaged Lenders" style="cursor:pointer" border="0" alt="" />
            </div>      
            <div align="center" class="table" style="padding:2px; width:300px;">
                <a href="#" onmouseover="window.status='Packager Procuration Fees Menu'" onmouseout="window.status='Please choose a menu option'" >Packaged Products<br /><img alt="" src="images/10quid.jpg" title="Packager Procuration Fees" style="cursor:pointer" border="0" /><br />Procuration Fees</a>
            </div>            
<h1 align="left"  style="width:600px;" class="titlecell" onmouseover="window.status='Please choose a menu option'">&nbsp;</h1>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Look at your picture. Do you see a table?[/code]
yes i do, a table with four main cells a header and a footer.

It's not just to with coding, i'm not a designer , i can't paint, or draw, i see most things as a table, whether i'm doing a report in word, a spreadsheet in excel, or drawing a diagram for someone.

It's not that easy to move away from tables , when your brain automatically lines things up in neat little boxes!!!!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
Click to expand...
 
Upvote 0 Downvote
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
  <title>Boxes</title>
  <style type="text/css">
	#container {
		width: 600px;
		padding-bottom: 20px;
		background: url(bluestripe.jpg) bottom left no-repeat;
	}

	#container div {
		margin: 1px;
		padding: 2px;
		width: 292px;
		border: 1px solid blue;
	}

	#container h1 {
		background: url(bluestripe.jpg) bottom left no-repeat;
	}
  </style>
</head>
<body>
  <div id="container">
    <img src="/images/hlp-lenders.jpg" alt="logo" />
    <h1>HLP Lender Partners</h1>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>
Something like this? Untested.
 
Upvote 0 Downvote
Oops, totally untested. Need to add [tt]overflow: auto;[/tt] on #container and [tt]float: left;[/tt] on #container div.
 
Upvote 0 Downvote
Look at your picture. Do you see a table?[/code]
yes i do, a table with four main cells a header and a footer.
Click to expand...

Well stop! :)

Don't think of it as a table. Think of it for what it IS.
i.e.
A picture
A heading
4 pictures

Start by creating a page with an image tag (and your header image)

Then put in your heading

Then 4 more images

Don't worry what the layout is like, just get the (x)html clean.

Now you have a semantic document structure and you can start to think about how you can use CSS to make it look the way you want.

It IS a big step, it's not easy but I assure you that sooner or later it will "click". It's nothing to do with being arty or creative, it's actually just the opposite - it's semantic - i.e. logical!

BTW, where in the world are you. For some reason I thought you were American, but I see tenners on your page!


Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
Click to expand...
 
Upvote 0 Downvote
yes i do, a table with four main cells a header and a footer.
Click to expand...
Unfortunately, I think that's why you are having problems. This is obviously your mindset based on previous development but it's something you need to try and get past.

What you should do is start simple. Forget your website for a second and create a blank new page. Try and create the format you are looking for with simple, different coloured boxes. Get rid of things such as the align, style and mouseover tags so you have the most basic of pages. Give each div you create a class and then start applying the relevant CSS to each class until you have the desired output.

Then, and only then, start to add some content to each box to replace the background colour of each box. Then, add your mouseover events and you should be done. I really think that doing it this way is the best way you'll learn as at the moment you still appear to be making some of the same mistakes that you were doing before.

If you approach each page you create in this manner, I really think you'll start to pick things up easily.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
Thanks for all the input, this breaking away from tables and the mind set that goes with it is far harder than I ever thought.

But it's not just a web developement mind set, it's the way things are, do you see a table in a book when it says "Table of Contents" - see what i mean!

It's not just a new way of developing it's going against standard english language, that's why it's so hard to change the way i think.

oh and the money - doesn't it give it away what country i'm in :)





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
right I have my page but how do i center things


here is the code
CSS
Code: 
#titlecell
	{
	font-family: Arial, Verdana;
	font-size: 15pt;
	color: #ffffff;
	background-image: url('/images/tablebar.jpg');
	background-repeat: no-repeat;
	text-decoration: none;
        padding-bottom: 30px;
        background-position: bottom;
    overflow: auto;
	}
		
#titlecell h1 
    {
	font-family: Arial, Verdana;
	font-size: 15pt;
	color: #ffffff;
   	background-image: url('/images/tablebar.jpg');
    vertical-align: bottom;
    text-align: left;
    background-repeat: no-repeat;
    text-decoration: none;
    }
 
#titlecell div 
    {
    margin: 1px;
    padding: 2px;
    width: 292px;
    border-width: 1px;
    border-style: solid;
    border-color: #233e97;
    float: left;
    }

HTML
Code: 
<div id="titlecell" style="width: 600px;">
    <img src="<tmpl_var name='url_to_domain'>/images/hlp-lenders.jpg" alt="HLP Lender Partners" />
    <h1 onmouseover="window.status='Please choose a menu option'">&nbsp;HLP Lender Partners</h1>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
and why is class="box" on the div's where is this class defined?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
how do i line up the div's ? they are just one underneath each other surely
Code: 
#titlecell div 
    {
    margin: 1px;
    padding: 2px;
    width: 292px;
    border-width: 1px;
    border-style: solid;
    border-color: #233e97;
    float: left;
    }

is no good it's applying float:left; to all the child divs I want them to be two columns wide I don't understand how this is going to work.

surely i need to float some of them right don't i and I don't see how i'm going to get the whole page in the center of the page without putting another div around the lot and centering it.

hmmm the code above just seems to have produced exaclty what i had in the first place but in a different way, both of which is not the desired result.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
How about something like this?
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
	<head>
		<title>Simple Document</title>
		<style type="text/css">
		#container
		{
			width: 750px;
			margin: 0 auto;
		}
		.box 
		{
			width: 375px; 
			float: left;
		}
		.content
		{
			clear: both;
		}	
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header" class="content">
				Header
			</div>
			<div class="content">
				<div class="box">
					Part 1
				</div>
				<div class="box">
					Part 2
				</div>
			</div>
			<div class="content">
				<div class="box">
					Part 3
				</div>
				<div class="box">
					Part 4
				</div>
			</div>
			<div id="footer" class="content">
				Footer
			</div>
		</div>
	</body>
</html>


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.
 
Upvote 0 Downvote
try something like this:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">
#titlecell
    {
    font-family: Arial, Verdana;
    font-size: 15pt;
    color: #ffffff;
    background-image: url('/images/tablebar.jpg');
    background-repeat: no-repeat;
    text-decoration: none;
        padding-bottom: 30px;
        background-position: bottom;
    overflow: auto;
    }
        
#titlecell h1
    {
    font-family: Arial, Verdana;
    font-size: 15pt;
    color: #ffffff;
       background-image: url('/images/tablebar.jpg');
    vertical-align: bottom;
    text-align: left;
    background-repeat: no-repeat;
    text-decoration: none;
    }
 
#titlecell div
    {
    margin: 1px;
    padding: 2px;
    width: 292px;
    border-width: 1px;
    border-style: solid;
    border-color: #233e97;
    }
    
div.boxl {
   float:left;
}

div.boxr {
   float:right;
   clear:both;
}

</style>

</head>

<body>
<div id="titlecell" style="width: 600px;">
    <img src="<tmpl_var name='url_to_domain'>/images/hlp-lenders.jpg" alt="HLP Lender Partners" />
    <h1 onmouseover="window.status='Please choose a menu option'">&nbsp;HLP Lender Partners</h1>
    <div class="boxl"></div>
    <div class="boxr"></div>
    <div class="boxl"></div>
    <div class="boxr"></div>
</div>
</body>
</html>

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Upvote 0 Downvote
aghhh i'm confused, that's back to the way i was originally doing it and got told off for not using <H1>.

think i'll just give up and go back to a table..........

just kidding, but it's 5pm on a Friday, so i'll pick it up next week.

Have a great weekend all.

Regards,

1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Don't be confused! You can simply replace my header div with h1 tags if you are just going to be displaying header text. I'm not saying i've created the perfect code for your situation, I'm simply showiny you, using div tags, so that you get the idea of how the layout can be acheived - you should replace my tags with the relevant content you want to display.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
But it's not just a web developement mind set, it's the way things are, do you see a table in a book when it says "Table of Contents" - see what i mean!
Click to expand...

No, I see a list, possibly an ordered list.

And yes, you are in the UK. Whereabouts?


Incidentally, you COULD float all the picture divs left. So long as they were within a wrapper/container that had a width that only allowed 2 of them to sit side by side ;-)

I'm not saying that's how I would do it though... I might have a stab later tonight, but I've already got a list of things to do "later tonight".

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
 
Upvote 0 Downvote
No, I see a list, possibly an ordered list.
Click to expand...
lol - exactly my point foamy. And i know i said i'd leave it till next week but i got home and it was bugging me so i tried again, i'm just not paid enough you know - lol

i think i've worked out some of my problem , i'm not sure if this is right but is it to do with that margin collapsing problem i read here.

basically if you float something left and another thing right if the container div isn't wide enough and the two floated divs edges touch each other it forces the floated right div onto a new line so to speak.

better illustrated here


the siolution i have isn't ideal, ive found because the main 4 divs have been set with a margin of 2px when the left and right float are put together the two floated divs have a distance of 4px making it look uneven.

illustrated here

which isn't as sleek and nice looking as the original table method


here is the code i'm using, any way i can match the original design?

CSS
Code: 
#titlecell
	{
	font-family: Arial, Verdana;
	font-size: 15pt;
	color: #ffffff;
	background-image: url('/images/tablebar.jpg');
	background-repeat: no-repeat;
	text-decoration: none;
    padding-bottom: 26px;
    background-position: bottom;
	}
		
#titlecell h1 
    {
	font-family: Arial, Verdana;
	font-size: 14pt;
	color: #ffffff;
   	background-image: url('/images/tablebar.jpg');
    vertical-align: bottom;
    text-align: left;
    background-repeat: no-repeat;
    text-decoration: none;
    }
 
.box
    {
    font-family: Arial, Verdana;
	font-size: 12pt;
    margin: 2px;
    padding: 10px;
    width: 292px;
    border-width: 1px;
    border-style: solid;
	border-color: #233e97;
    text-align: center;
    }

XHTML
Code: 
<div align="center">
    <div id="titlecell" style="width: 640px;">
        <img src="images/hlp-lenders.jpg" alt="HLP Lender Partners" />
        <h1>&nbsp;HLP Lender Partners</h1>
        <div style="float:left;">
            <div class="box"><img src="images/dtl.gif" alt="" /></div>
            <div class="box"><a href="#">Direct to Lender<br /><img alt="" src="/images/10quid.jpg" title="Lender Procuration Fees" /><br />Procuration Fees</a></div>
        </div>   
        <div style="float:right;">     
            <div class="box"><img src="/images/packaged.gif" alt="" /></div>
            <div class="box"><a href="#">Packaged Products<br /><img alt="" src="images/10quid.jpg" title="Packager Procuration Fees" /><br />Procuration Fees</a></div>
        </div>            
    </div>
</div>
one last thing i've noticed because i'm using <h1> the text is in bold, i don't want bold text, how do i use the css to turn off bold?

oh and i'm southcoast of england - nr Brighton :)






"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
ok got the bold problem sorted
Code: 
font-weight:normal;

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
741
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
145
vacunita
vacunita
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
134
CoolBreeze007
CoolBreeze007
LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
245
LyndonOHRC
LyndonOHRC

Part and Inventory Search

Sponsor

Back
Top