PDA

View Full Version : Trying to get my div box the same as my table



Danaldinho
Mar 14th, 2009, 12:32 AM
Hey guys,

I have a perfectly fine looking table on my web page here: http://www.lilwaynehq.com/cash-money-records/

But I want to use div's on my new design which can be seen here: http://www.lilwaynehq.com/cash-money-records/cash-money-records2.php

I just can't get it looking like the page with the tables on with the divs :(

Does anyone know how I can get it to look more or less the same?

Thanks alot :)

Excavator
Mar 14th, 2009, 01:46 AM
Hello Danaldinho,
Not sure what you want to change there. Both look like 2 column layouts with the menu column on opposite sides. I'm looking at it in FireFox...
Did you want to move the menu column over to the left side?

Validator finds plenty there that can be fixed - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.lilwaynehq.com%2Fcash-money-records%2Fcash-money-records2.php see the links about validating in my sig below.


...

Danaldinho
Mar 14th, 2009, 02:31 PM
Hey,

Ok, this is what I want to do:

I want to get the same looking boxes from here (http://www.lilwaynehq.com/cash-money-records/) to here (http://www.lilwaynehq.com/cash-money-records/cash-money-records2.php)

But on here (http://www.lilwaynehq.com/cash-money-records/), the boxes look perfect and I have used tables, but on here (http://www.lilwaynehq.com/cash-money-records/cash-money-records2.php) I am using divs

And I just can't get the divs to look like the tables. This is what I need help with.

So if anyone could help me get the two pages looking similar, I would really appreciate it.

Thanks :)

abduraooft
Mar 14th, 2009, 06:49 PM
And I just can't get the divs to look like the tables. This is what I need help with.

I'm not sure the area where you've trouble.
If you are trying to stop the text overlapping the image at the bottom of boxes, remove all inline styles applied to those p (margin:5px) and then add

div.cash-money p {
margin-left:110px;
padding:5px;
} into your CSS.

Danaldinho
Mar 14th, 2009, 07:46 PM
I'm not sure the area where you've trouble.
If you are trying to stop the text overlapping the image at the bottom of boxes, remove all inline styles applied to those p (margin:5px) and then add

div.cash-money p {
margin-left:110px;
padding:5px;
} into your CSS.

Thanks mate, that worked perfect :)

But, there is another little problem (I don't want all of the space under the p's)

So on the class "div.cash-money p" I added a "margin: 0;"

But then the text overlapped the image at the bottom again :(

Does anyone know a way around this?

Thanks alot :)

Stardog
Mar 14th, 2009, 08:26 PM
Remove the "padding:5px" from div.cash-money p.

Change "margin-left: 110px" to "margin: 5px 0px 5px 110px".

You can put more than one number in the margin attribute. It's like North, East, South, West, so 5px is the top margin, 0px is the right margin, 5px is the bottom margin and 110px is the left margin.

Margins also collapse into each other, so the P's won't have a 10px gap between them, just the 5px. Padding doesn't collapse though.

Danaldinho
Mar 14th, 2009, 09:09 PM
Remove the "padding:5px" from div.cash-money p.

Change "margin-left: 110px" to "margin: 5px 0px 5px 110px".

You can put more than one number in the margin attribute. It's like North, East, South, West, so 5px is the top margin, 0px is the right margin, 5px is the bottom margin and 110px is the left margin.

Margins also collapse into each other, so the P's won't have a 10px gap between them, just the 5px. Padding doesn't collapse though.

Thanks, this worked perfect :D

I really appreciate it :)

Now, I don't know if its possible and its not a big deal, but on some of the "Notes" of the people in the grey boxes, their notes are like 3 or 4 sentances.

Well I was wondering if its possible to somehow to make the image have the same height difference on the top and bottom.

Kind of like the "Birdman" box (where the gap at the top is very similar to the bottom)

Thanks :D

PS: I have given reputation to all the users who have helped me out in this thread and clicked on the "Thanks" button ;)

abduraooft
Mar 15th, 2009, 12:44 PM
Very simple, and effective using the dead centre (http://www.wpdfd.com/editorial/thebox/deadcentre4.html) approach :)


.cash-money {/*style.css (line 606)*/
background:#DDDDDD none repeat scroll 0;
border:1px solid black;
padding:3px;
position:relative;
}
#cashmoney {/*style.css (line 601)*/
/*float:left;*/
margin:-50px 5px 5px; /* 100/2 px */
position:absolute;
top:50%;
left:0;

}

Danaldinho
Mar 15th, 2009, 02:00 PM
Very simple, and effective using the dead centre (http://www.wpdfd.com/editorial/thebox/deadcentre4.html) approach :)


.cash-money {/*style.css (line 606)*/
background:#DDDDDD none repeat scroll 0;
border:1px solid black;
padding:3px;
position:relative;
}
#cashmoney {/*style.css (line 601)*/
/*float:left;*/
margin:-50px 5px 5px; /* 100/2 px */
position:absolute;
top:50%;
left:0;

}

Thanks mate, it worked :D :D

I am really grateful for all your help here guys

Also: "You must spread some Reputation around before giving it to abduraooft again." ;)

abduraooft
Mar 15th, 2009, 03:29 PM
Lol, I must thank you for making all those images with equal dimensions. :)

Danaldinho
Mar 15th, 2009, 05:11 PM
Hehe :P

Danaldinho
Apr 10th, 2009, 03:35 PM
Hey again guys, I'm sorry, but I am having to come back to this thread.

I recently checked out this page in IE6 ( http://www.lilwaynehq.com/cash-money-records.php ) and it displays all the music artists pictures from the boxes below all the boxes :(

Does anyone know how to fix this issue.

Thanks :)

abduraooft
Apr 10th, 2009, 04:21 PM
I recently checked out this page in IE6 ( http://www.lilwaynehq.com/cash-money-records.php ) and it displays all the music artists pictures from the boxes below all the boxesAre you talking about http://www.lilwaynehq.com/cash-money-records/
If so, have a try by adding height:1%; to your .cash-money to enable the hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html).

Danaldinho
Apr 14th, 2009, 10:31 PM
Thanks abduraooft, worked perfect.

Appreciate it