PDA

View Full Version : Div tags and wordpress



CUBICcube
03-26-2008, 07:11 PM
Im wondering how I can make div tags act like tables so when i type they dont overlap Im asking this because mine overlap over my foot(if i make one) so im just trying to figure out how to make them all react to eachother.
Im also trying to figure out if this is possible to make into a wordpress theme..
Iv made most of it in photoshop now im just trying to get it up online

here is my code

46

Longover
03-26-2008, 08:08 PM
Just a guess, but you might want to try using position:relative; for the <div> that you don't want to overlap others.

Here are also a few tuts that might help:
W3.org (http://www.w3.org/TR/CSS21/tables.html)
Another Site (http://www.communitymx.com/content/article.cfm?cid=afc58)

pghcollectibles
03-26-2008, 09:00 PM
w3schools.com (http://www.w3schools.com)

CUBICcube
03-27-2008, 12:04 AM
trying to just switch back to tables... ill do Divs later... pissin me off to much hehe

pghcollectibles
03-27-2008, 10:51 AM
these are various css items i copied from w3schools.

CSS Positioning Properties

The CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
Property Description Values IE F N W3C bottom (http://www.w3schools.com/css/pr_pos_bottom.asp) Sets how far the bottom edge of an element is above/below the bottom edge of the parent element auto
%
length 5 1 6 2 clip (http://www.w3schools.com/css/pr_pos_clip.asp) Sets the shape of an element. The element is clipped into this shape, and displayed shape
auto 4 1 6 2 left (http://www.w3schools.com/css/pr_pos_left.asp) Sets how far the left edge of an element is to the right/left of the left edge of the parent element auto
%
length 4 1 4 2 overflow (http://www.w3schools.com/css/pr_pos_overflow.asp)
Sets what happens if the content of an element overflow its area visible
hidden
scroll
auto 4 1 6 2 position (http://www.w3schools.com/css/pr_class_position.asp) Places an element in a static, relative, absolute or fixed position static
relative
absolute
fixed 4 1 4 2 right (http://www.w3schools.com/css/pr_pos_right.asp) Sets how far the right edge of an element is to the left/right of the right edge of the parent element auto
%
length 5 1 6 2 top (http://www.w3schools.com/css/pr_pos_top.asp) Sets how far the top edge of an element is above/below the top edge of the parent element auto
%
length 4 1 4 2 vertical-align (http://www.w3schools.com/css/pr_pos_vertical-align.asp) Sets the vertical alignment of an element baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
% 4 1 4 1 z-index (http://www.w3schools.com/css/pr_pos_z-index.asp) Sets the stack order of an element auto
number 4 1 6 2

i think you would name a division to define an area but would still want to include tables within that division to organize your content. you might have many tables, headers etc within a div.

pghcollectibles
03-27-2008, 10:53 AM
you will have to excuse the layout (it removed my table the contents were in when i posted that from here http://www.w3schools.com/css/css_positioning.asp

CUBICcube
03-27-2008, 05:43 PM
Wow very useful site, thanks alot you guys, i think i might go back to useing Div tags cause it seems alot easyer after learning how to use wordpress themes useing Tables might be insanely hard to for me right now... not sure thanks anyway though ill keep trying to learn this stuff.

CUBICcube
03-27-2008, 07:29 PM
OK, why when I try to change my Divs to relative from absolute they jump around and lineup accoding to where they are placed in the code

pghcollectibles
03-27-2008, 11:09 PM
tables are so easy to use they are everywhere you look. ive not used wordpress at all but im guessing there in there.

<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>

this is your basic 2x2 table. the tr is for rows the td is for columns
if you wanted to stretch a cell accross more than 1 col, you would do for example:

<table>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>

if you wanted to stretch a cell accross more than 1 row, you would do for example:

<table>
<tr>
<td rowspan="2">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

play around and read a little about the attributes at w3schools or wherever.