Problem with positioning in css and floats etc

Hi,

Just joined the forums today and I am very new to CSS. Designed my website years ago and then stopped developing it as I went back to painting and stopped making animations for a while. (plus I played way to much eq..)

I am currently undertaking a major revamping of my website, slowly redoing and adding to the animations both gifs and flash, and trying to get away from the frames, tables and all the old html that I used.

But.. major problems with the css!!! The following page http://www.arthouse.org/dflytest.html I am trying to make it so the text is first on the block of the white background under the first lot of dragons and then on the black and above the dragons on black. I think from what I have read that the first black block should just flow under the previous block but it flows over it instead... .. I have been trying to fix it by removing bits out .. and in dflytest2.html the file also has a grey box with text on it that I want to flow directly (but with a white break) under the black box area. My intention is that once I have this basic layout sorted I will then use it over and over again with the rest of the animations from my site. I think if I sort out the flow of the first black box the grey one will also flow over it more naturally.. The other problem with this page is that no matter what I do there is always a horizontal scroll bar..

My other test page at http://www.arthouse.org/dragonindex.html, I also think I have made the coding far to complex with what is actually needed. I made it all to columns and blocks then stuck the dragons in them when could I just have made some sort of tag for each one to position it correctly? All I want is the dragons to fly on the top, the left and right of the text.. which will eventually be links to other flash dragons, and the copyright stuff to be right at the bottom of the page. At the moment it displaces badly on small browers windows and I thought the way to go might be to insert some java script to load a diff css depending on browser window size.

Phew.. that all seemed a bit confusing ! but maybe if you look at the pages you may see what I am talking about. I am going to take my dog for a walk now to see if that gives me any inspiration!!!

I am currently testing the pages on a mac using safari, netscape 7.2 and mozilla.. then if I get them at all straight checking them in IE on a pc. I am coding the pages partly by hand and with dreamweaver.

Thank you all for your time taken in just reading this longwinded and winding explanation of what I had hoped to be a very simple design!!!

The first thing you need to do is produce syntactically correct xhtml and css. you have multiple errors in both so I suggest you do some validation and correct the errors shown.

Oh and scrap Dreamweaver. Hand code it all.

Once you have valid code, then we can see where your going wrong.

I have corrected the xhtml and it now has no warnings or errors. The css has errors to do with transparency but no others and some warning about colours. I will try and work out what those ones mean. I particularly want to keep the transparency in. It appears to work in the browsers I am targetting for my webpages so far.. I have had to remove the ad code from burst media as the old code was not xhmtl compliant (as far as I can tell..) and the new code is unliked by safari on mac.. I will write to them seperately and ask advice about their code!
How important are the warnings about colour such as
Line : 76 (Level : 1) You have no background-color with your color : #smlflyingsnakedragon
Line : 76 (Level : 1) Same colors for color and background-color in two contexts #black and #smlflyingsnakedragon
Line : 76 (Level : 1) Same colors for color and background-color in two contexts #black2 and #smlflyingsnakedragon
Line : 76 (Level : 1) Same colors for color and background-color in two contexts #black and #smlflyingsnakedragon?

Thanks for advice

Back to walking dogs and working on rediting all those old gifs to be transparent!

Hmm I tried fixing the warning messages from the css checker re background colours but when I gave them background colours it ruined the transparency I need for going over images etc.

I slightly solved one problem by putting all the text in one block in the white, which naturally flows over the black strip .. but I really need the black box to move down the page. Its attributes I have tried at both relative and absolute, its set to clear all and float.. so realy it should just move further down the page when I resize the window but it doesnt.

I shall keep experimenting.

If anyone takes a look its www.arthouse.org/dflytest.html I am currently fooling around with..
regards

Whilst it may seem a contradiction, this is valid css:

Code: Select all

background-color: transparent;

Get rid of this line from the top of yoour pages. It's not mandatory and it throws IE into quirks mode.

Code: Select all

<?xml version="1.0" encoding="utf-8"?>

IE doesn't understand; 'position: fixed;'.

A problem with having a fixed menu coloured as yours is, is that when the page is scrolled, there are times when the menu becomes invisible.

ooh! thanks

If I don't get tooo fed up and go and watch torchwood instead I'll pop that in tonight!

Now that would be seriously fed up.

I watched the first couple of episodes out of curiosity for a new program and decided it was utter dross!

jack is rather tasty though... but not as cute as the guy who plays dr who..

hm.. the fixed menu thing I'm experimenting with .. its supposed to be transparent then when you run your mouse over it it becomes opaque and you can see the menu.. supposedly.

I may scrap a lot of it and try something else all together.. Just need a standard design which will work well for various different pages of animated gifs for people to download.. My site is looking sooo old right now! Some of the pages have last updated in 98 on..

Ok I now have managed to get it almost how I want it in Safari, Netscape and Mozilla on a mac.. IE5 it completely breaks down on .. and I'm going to check it later with later versions of IE on a pc. Then start from the ground up working how to make it IE compliant..

A few things though.. I can't make the central black area expand with window resizing to fit the height of the text and animations.. so for now I've kludged it with a set height value.

The bottom black box doesnt stretch to the bottom..

The whole page size always thinks its larger than the browser window that is open and there is a permanent scroll bar there.

Still need to work out the bottom links, I am not sure how widely transparency is consistent within browsers so I may go for a constant grey.. at the moment it works great in safari and netscape but not so well in mozzilla, and the links box is too small will probably put some sort of expanding box there.

Apart from that still need to make all dragons transparent and add smoke to the latest ones...

Oh yeah and recheck the validator and do the colour warnings..

I have ordered the book you recomended Geof, and will start reading it this week. Hopefully, I'll slowly get there!

and Torchwood was much much better this week

Oops forgot to add the page link im currently working on.. www.arthouse.org/dflytest.html Any help would be gratefully received!

Been on holiday and come back to the same old page again... It validates fine for xhtml, and the css apart from the transparency on the bottom menu which will be links eventually. It still has warnings about background colour. I have tried background-color: trasnparent; but that does not seem to be working eg..

Warnings

URI : file://localhost/TextArea

Line : 11 (Level : 1) You have no background-color with your color : #toptext
Valid CSS information

#toptext {
left : 0;
top : 0;
clear : both;
position : absolute;
z-index : 0;
float : left;
text-align : left;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : small;
color : #333333;
background-color : transparent;
padding-left : 1em;
}

Could anyone point out what I am doing wrong please? I am planning to use this general plan as a template to redo all my other animation pages, some of which have been up since pre 2000..

http://www.arthouse.org/dflytest.html

Also any othere ideas about a menu for the bottom right would be a great help, I am thinking of having a small black bar saying links which expands to all the links on rollover.. The page will link back to the main animation index (which is a complete mess at the moment as is most of my site) and also to the home/main index page, a help page, the store and proabably to my paintings page.

I also realise that the page is not backward compatible to browswers pre ie 6, the latest netscape and early mozzilla and will also need to have a css sheet specifically for the smallest browswer windows. I was thinking of running a java script to load a diff css for these cases. Any advice please.

thanks

Yes, it's a weird one that isn't it? It's not as if you haven't specified background-color at all, you have just specified it as transparent which is a valid value.

At the end of the day, it's only a warning and your site's css will still validate.

I see it as they are just making sure you haven't forgot anything.

Ok, I'll leave the css warnings alone for now Does anyone have any idea why I cant get rid of the horizontal scroll bar at the bottom?

thanks

Just a note, CSS warnings are not errors. I've got a bazillion of them, but it doesn't matter at all.

Thanks for all the help guys Slowly but surely I am ironing out all the problems! Learning CSS is certainly far more complex than learning the old html years ago

I have now managed to get rid of the horizontal scroll bar in all major modern browsers but Safari on mac.. weird it still has a horizontal scroll bar no matter how wide I make my page.. (I am on a screen thats 1920 wide right now.. normally I have my browswer window open to half the the screen width or less)

I am wondering if anyone knows why the bottom two dragons.. the large snakey ones.. the one on black when I resize the window, flows nicely over the white box behind the other dragon but the orangey coloured one stays in position and you have to scroll to see it.. I would like that one to also flow over the area where the other one is .. whilest keeping half the screen black and half white. This demonstrates nicely the pixelated effect of the animations if you put them on the wrong colour background.. (everyone always does, even if I don't make them transparent they tend to edit them anyway which never quite works as they don't have the originals.

This now mainly just leaves the question of the links.. I am considering just making a small backbutton. I will be redoing the main index page anyway and it will have links to all the other places, like the store, help page, paintings, etc. I don't see anyway to make it a fixed link that floats over the page in IE, which I think is over half the browsers around.. I will eventually make a seperate css for smaller window sizes and pre IE6 older browsers too, but would like a link area that is more cross browser supported than my currrent idea.. which is transparent (hardly supported) and fixed (no ie support..) any ideas anyone?

Thanks again for all help so far

I am on line most of the time so if you do have any ideas and have msn/icq I can be reached at via msn at lsk@inscot.demon.co.uk or icq on 109721052.