Topic: Tables to CSS (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=27709" title="Pages that link to Topic: Tables to CSS (Page 1 of 1)" rel="nofollow" >Topic: Tables to CSS <span class="small">(Page 1 of 1)</span>\
 
Hugh
Paranoid (IV) Inmate

From: Dublin, Ireland
Insane since: Jul 2000

 posted posted 03-30-2006 18:53

Im used to using tables, so I could have done this really easily, but in a in effort to switch to pure css I came across a few problems:

http://www.icklepix.com/texasnights/

I was hoping someone could tell me why there is so much space to scroll to, and how to get the footer lined up, does z-index work with relatively positioned stuff ?

Any good links to thse kinda tutorials would be good, any I found on google werent very useful
DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 03-30-2006 18:58

1) Before trying to fix layout issues, make sure your code validates -
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.icklepix.com%2Ftexasnights%2Findex1.htm&charset=%28detect+automatically%29&doctype=Inline

You have no doctype specified, so it is pointless to go any further until that is taken care of.

2) All those divs in the header surely we can find a better way than that. But more on that once the validation errors are gone =)
Hugh
Paranoid (IV) Inmate

From: Dublin, Ireland
Insane since: Jul 2000

 posted posted 03-30-2006 19:16

I was gonna just do that when its finished, but ill fix that now so ..
Hugh
Paranoid (IV) Inmate

From: Dublin, Ireland
Insane since: Jul 2000

 posted posted 03-30-2006 19:37

ok, now that its validated:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.icklepix.com%2Ftexasnights%2Findex1.htm&charset=%28detect+automatically%29&doctype=Inline

Any idea why the scrollbars think there is a lot to scroll through? or know a good visual tutorial showing how to position elements relatively into frames.


Edit: The whole things has fallen apart without me knowing, dont have alcue now, Im contemplating going back to tables.

for any onlookers it should look this this:
http://www.icklepix.com/pokernights/pokernights7.png



(Edited by Hugh on 03-30-2006 19:46)

(Edited by Hugh on 03-30-2006 19:56)
Hugh
Paranoid (IV) Inmate

From: Dublin, Ireland
Insane since: Jul 2000

 posted posted 03-30-2006 20:12

HELP!

The only thing I changed was that it validated, lowercased tag names, put <link> in the head, and put attribs in "quotes" that was about it.

Could this drastically change its output ?:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Tyberius Prime
Maniac (V) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

 posted posted 03-30-2006 21:48

Indeed it could. Going from quirkmode to xhtml-strict will make your output much more reliable, but it will also change it from the quirkmode output.

It seems you don't have a doctype specificed right now... looks completly broken in my opera - the top background image repeated over and over again.

You don't need zindices on position:relative elementns. you should probably not be saying 'position:relative' in the first place. You shouldn't need negative top's either if you used float: left;...
There are many more things where you are doing this completly different from how I'd approach the problem, but they aren't necessarily wrong.

Here's how I'd set this up: one div inside the body for centering... another full inner width div, background image the whole top without the navigation. Then the navigation as one or three lists, depending on how well it'd work with a br, with float: right, and appropriate margins on the uls and lis.
Then the content div, border-left: 10 px solid black; (or what ever width), same on the right.
Then the bottom div, background-color:black; hearts image with float:left, a <p> with margin-top: 0px; and float:right; for the text.

The cards I'd try a div outside the centered div, float: right, valign:bottom.

so long,

->Tyberius Prime
Hugh
Paranoid (IV) Inmate

From: Dublin, Ireland
Insane since: Jul 2000

 posted posted 03-30-2006 22:55

Cool thanks, I've been looking everywhere for relatively positioned 3 column setups the nearest ive seen is using float.

btw, the cards arent actually part of it anymore, heh :P Im gonna try some more with floats and come back here, when I use float they all over lap, so which order does it go by? the order of the html or the style sheet ? I know these are awfully dumb questioned but I usually position absolutely and use code to move stuff, but this site doesnt have any animation and using code would be too much.

the current layout for reference is

<centering layout>
<header>
<header elements>
</header>

<content>
<left border>
<center div> <- When using float on the borders, this is over the borders, and the total width of the center, do I also need float:middle?
<right border>
</content>

<footer>
<left border>
<center div>
<right border>
</footer>

</centering layout>


should it go
left
center
right

or

left
right
center

?
Hugh
Paranoid (IV) Inmate

From: Dublin, Ireland
Insane since: Jul 2000

 posted posted 03-30-2006 22:59

Oh also.. any idea why you gotta scroll to the right?
DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 03-31-2006 01:03
quote:

Hugh said:

I was gonna just do that when its finished



No! Never do it that way.

quote:

Hugh said:

HELP!

The only thing I changed was that it validated, lowercased tag names,
put <link> in the head, and put attribs in "quotes" that was
about it.

Could this drastically change its output ?:
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;


Of course! That's why you *always* start with your doctype in place and your code valid.

quote:

Hugh said:

Oh also.. any idea why you gotta scroll to the right?


Off hand - no. I'll come back later and dig through your example more, but all the positioning you have going on, and all those needless divs in the header portion are jsut asking for trouble.

Specifying position:relative; is pointless - that's teh defualt. Specifying all the top/left values is completely unnecessary. It is the way people always try to do it when they go for a CSS layout for the first time. You have to change your way of approaching this, and allow the document to flow naturally. More often than not, things will line up properly almost by default.
Also, specifying a div whose sole purpose is to hold a background image is about as semantically incorrect as using an image tag for decorative images, or using a table for layout.

Trim down your markup - cut out anything not needed for the *structure* of the document.
Trim out all the positioning attributes of your CSS, use FLOAT where necessary to line elements up side by side, and attach background images to the existing elements where possble. The z-indexes aren't doing anything for you either.

It is always best to start with the least amount of code, and build up only when needed. Always try to solve your problem without adding extraneous mark-up, and without trying to nail down your CSS positioning. At the same time, don't fight to avoid adding tags that are relevant structurally.

Gotta run for the moment...be back later to look more at the code.
DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 03-31-2006 01:06

Hmm, missed this:

quote:

Hugh said:

Cool thanks, I've been looking everywhere for relatively positioned 3 column setups the nearest ive seen is using float.


Again, it's worth reiterating: forget about the "position" attribute. It has it's function, but for general alyout issues just forget that it even exists. Forget about specifying top/left/right/bottom position values. Use float, margins, and padding to achieve the positioning you need.

As for the <border> specified in your layout scheme - avoid this too! This has no structural relevence, and so should not be in your markup.
Define your borders with CSS, applying your background images to existing elements. The approach you are taking is still emersed in table-layout thinking.



(Edited by DL-44 on 03-31-2006 01:09)
Hugh
Paranoid (IV) Inmate

From: Dublin, Ireland
Insane since: Jul 2000

 posted posted 03-31-2006 01:22

I've been playing with all sorts of combinations of stuff, I stripped all the top left and position relatives etc.. and used floats, it look okay, but I couldnt see it as being possible to make a 9 gridded layout with a variable width and height in the center and outside. After spending about 4 hours on it tonight (which i really shouldnt have as I have exams on monday) and because its to be rushed a little bit, a gave it a go in tables, it only took 10 min:
Fuck it

I might still try to make it css, but its usuable for now once I get a menu into it.
DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 03-31-2006 02:01
quote:

Hugh said:

but I couldnt see it as being possible to make a 9 gridded layout


That's the entire problem! You're thinking in terms of tables.

You will *never* get a good table-free layout to work if you can't get past thinking in terms of tables.

You don't need a '9-grid'. You need top, middle, bottom. No grid.

FWIW.

be back again later...


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu