Tekforums

Chat => Entertainment & Technology => Topic started by: neXus on August 17, 2006, 11:23:56 AM

Title: Fixed background, scroll middle
Post by: neXus on August 17, 2006, 11:23:56 AM
Just seen gamespot
http://uk.gamespot.com/

H8 the use of the actual background to fussy but i like the scroll of the center element, how is this done?
Title: Re:Fixe background, scroll middle
Post by: brummie on August 17, 2006, 11:30:02 AM
surely its just

margin-left: auto;
margin-right: auto;
Title: Re:Fixe background, scroll middle
Post by: skidzilla on August 17, 2006, 11:33:33 AM
Do you mean something like this?


/* CSS Fixed Background */
body {background: black url(your-background.jpg) 0 0 no-repeat fixed;}
Title: Re:Fixe background, scroll middle
Post by: neXus on August 17, 2006, 12:00:51 PM
Quote from: skidzillaDo you mean something like this?


/* CSS Fixed Background */
body {background: black url(your-background.jpg) 0 0 no-repeat fixed;}

that would be what i did not know what to do -  fixed; in bg properties.
Title: Re:Fixed background, scroll middle
Post by: Clock'd 0Ne on August 17, 2006, 15:56:23 PM
Im surprised you never knew of that one, its an old property :-)
Title: Re:Fixed background, scroll middle
Post by: neXus on August 17, 2006, 19:36:43 PM
Quote from: Clockd 0NeIm surprised you never knew of that one, its an old property :-)

I know of it of course, its just the implementation of it with the background in terms of an actual image background of that type.
http://www.zdnet.co.uk/i/z/ads/pa/Skins/Darkly/scanner-darkly-bg.jpg
Making it work in all window sizes etc in how it is

Always the odd things you learn

I now know a really clever and dead easy way to do rounded boxes which is 10 times better then I did before for example

I also now know how (still only using Divs) to do a box with some content in that can hide and appear with a click of top bar or something and changes colour.
You can do it many ways but the code I got with it now is so easy and works in all browsers.

Always learning m8 :)
Title: Re:Fixed background, scroll middle
Post by: Clock'd 0Ne on August 17, 2006, 19:44:44 PM
I dont learn so fast, tables the way forward, etc  :P  :-)
Title: Fixed background, scroll middle
Post by: addictweb on August 18, 2006, 00:44:02 AM
Dont spose I can enquire about the rounded boxes?

Ive always wondered an easy way to do it, I use a complex table with images in each section, most tricky.
Title: Re:Fixed background, scroll middle
Post by: M3ta7h3ad on August 18, 2006, 01:16:45 AM
im curious too.. only way I know is a CSS version of the table hack.

http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
Title: Re:Fixed background, scroll middle
Post by: M3ta7h3ad on August 18, 2006, 01:19:01 AM
Ahhh think I found it.

http://www.html.it/articoli/nifty/index.html

Rather nifty!! :D lol

Edit: ahhh Im loving the DOM section, rather interesting! :)
Title: Fixed background, scroll middle
Post by: neXus on August 18, 2006, 01:46:36 AM
Quote from: sexytwDont spose I can enquire about the rounded boxes?

Ive always wondered an easy way to do it, I use a complex table with images in each section, most tricky.

Quote from: M3ta7h3adAhhh think I found it.

http://www.html.it/articoli/nifty/index.html

Rather nifty!! :D lol

Edit: ahhh Im loving the DOM section, rather interesting! :)

Forget having Javascript

http://www.5thdigital.com/development/Round_corners/round.html

Images needed are in link

css:
body {
color:#ffffff;
}

.bl {background: url(bl.gif) 0 100% no-repeat #737373; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}


Html:



Home







I am a big round box, huray
oooh, fancy







Title: Re:Fixed background, scroll middle
Post by: M3ta7h3ad on August 18, 2006, 03:08:58 AM
aaaaahhh but that loads images like what i said earlier :) prefer the javascript way to be honest :) as you dont have to use the javascript, it just means it takes out the tag.
Title: Re:Fixed background, scroll middle
Post by: neXus on August 18, 2006, 09:31:32 AM
Quote from: M3ta7h3adaaaaahhh but that loads images like what i said earlier :) prefer the javascript way to be honest :) as you dont have to use the javascript, it just means it takes out the tag.
You do need the javasctript, I will wait for you to realise why :)

I avoid using it, do everything not to have javascript, somone has it off your site is buggered becuase the layout will not be the intended output.

Css sometimes is a pain but at least you can make it work on everyones machine.

And yes images but not crappy table or complex code.
Title: Fixed background, scroll middle
Post by: addictweb on August 18, 2006, 12:43:25 PM
Very nice, some good methods there, neXus seems most intuitive but M3ta7h3ads will cut down on page size without the images if its an issue.

Oooo, I want to make a site with roundy bits!
Title: Re:Fixed background, scroll middle
Post by: M3ta7h3ad on August 18, 2006, 13:19:34 PM
lol tom :) Just knocked up a simple image gallery last night, auto thumbnailing goodness!! :D lol, now just need to shove it all in roundy bits :D
Title: Re:Fixed background, scroll middle
Post by: Clock'd 0Ne on August 18, 2006, 15:07:36 PM
This made interesting reading:

http://www.decloak.com/Dev/CSSTables/CSS_Tables_01.aspx :twisted:
Title: Re:Fixed background, scroll middle
Post by: M3ta7h3ad on August 18, 2006, 15:23:43 PM
lol... so does this

http://www.hotdesign.com/seybold/  :twisted:
Title: Re:Fixed background, scroll middle
Post by: neXus on August 18, 2006, 15:45:08 PM
Quote from: Clockd 0NeThis made interesting reading:

http://www.decloak.com/Dev/CSSTables/CSS_Tables_01.aspx :twisted:
Harsh and the far opinion but yeah, you dont do all the fancy things of css and the standards, you do keep it simple and limit to what works, Still does not stop you creating clever features and less code doing it the proper way, an as M3ta7h3ad  look on the web and and you find the exact oposite for each argument on everything ^^

tables though - DIE DIE DIE
Using them in the odd bit if you can not do it css and divs yeah ok, make a site and its structure from them - burn in hell :)
Title: Re:Fixed background, scroll middle
Post by: Clock'd 0Ne on August 18, 2006, 15:58:28 PM
Quote from: neXustables though - DIE DIE DIE
Using them in the odd bit if you can not do it css and divs yeah ok, make a site and its structure from them - burn in hell :)

Let battle commence :mrgreen:


edit:

QuoteThe hacks involved in doing something like building a simple footer in CSS are so numerous and ugly that from this alone one must suspect that those who suggest these methods in lieu of a single table have something different on their agenda, an emotional investment in an idealized final solution formed independently of the way the real world works. Their arguments about saving file size and bandwidth are equally inane. We should optimize our tools for the way we operate, not the way we imagine we might be helping out the Apache kernel or the Unix file system.

LMAO.
Title: Re:Fixed background, scroll middle
Post by: M3ta7h3ad on August 18, 2006, 16:44:55 PM
ROFLMAO ;)

A COUNTER SIRE!!!

http://www.sitepoint.com/article/tables-vs-css/2

QuoteThe Winner!
CSS and standards-based design take the match. One look at the source of each design is enough to make me choose this one. CSS offers multiple other benefits, mostly having to do with accessibility. But, ultimately, this is about me being lazy. If I made this design with tables, and the client contacted me one year later to request changes, Id tell him I joined the foreign legion and flee the country. If I made it with CSS, Id give it a shot without thinking twice.

Be you man enough to continue thy battle!!!  yaaaaarrrrrrr!!!  :twisted:
Title: Re:Fixed background, scroll middle
Post by: Clock'd 0Ne on August 18, 2006, 17:24:35 PM
Id like to discredit that article for providing no clear examples of the table code used and for not actually getting it working across the browsers with just CSS "oh doesnt work needs more tinkering, cba, etc... WINNER ANYWAY TBH!"

Furthermore the whole article hinges on the premise of using tables across the entire site for the design, which is clearly silly. You use each tool appropriately and cant fairly compare the two in such a way. The fact that they revert to using bgcolor on the first page is enough for me... :roll:

I may be back later with a counter-article.
Title: Re:Fixed background, scroll middle
Post by: M3ta7h3ad on August 18, 2006, 19:11:50 PM
ahhh but CSS is an all or nothing approach, and while he didnt go to the effort of sorting out his browser compatibility errors, his points are still valid.

Specifically the quote about the foreign legion.

Trying to update a page that has been made solely using tables, or using tables for layout with mixed css in there, is an absolute nightmare. Its the reason programmers are encouraged to use a standard syntax to develop software, and it does help.

In your defence you do mention about mixed css and tabled websites, but these work against someone who is trying to update a website, especially if its not the original developer. If I came across someone using CSS in some places, tables in others, Id go crazy, and unleash a torrent of abuse at the computer screen :D lol.

Some of the websites Ive helped with have been complete arses in their organisation of code. While in some cases tables may be faster, and use less space. CSS and HTML and the seperation of design and structure, makes updating sites infinately easier :)
Title: Re:Fixed background, scroll middle
Post by: M3ta7h3ad on August 18, 2006, 19:13:52 PM
P.S. the above is the reason I wont touch any Macromedia or Microsoft web authoring package with a bargepole. Used to be that macromedia would use a thousand spacer.gifs in a design, then insert this "mm_roll" bollocks all over the place.

Nightmare.
Title: Re:Fixed background, scroll middle
Post by: Clock'd 0Ne on August 18, 2006, 19:30:05 PM
Ive put together what I would consider some pretty complicated layouts using tables, divs, etc where appropriate and with good, clean structure and perhaps comment labelling where necessary if you intend to pass on to others its not that difficult tbh.

Especially in the case of tables, particularly because it is so evident where each cell/row starts and ends:


 

 

 

 

  text
 

 

 

 

 


That would be gibberish if you didnt know what it did. Nest in a few more divs, make it a bit easier to read  :-)

Okay so tables arnt CSS-P, ready for 2015 when standards are actually followed rigidly, but it they are still XHTML/CSS compliant.

Each to his own I guess, you use what works for you. Sam shares my line of thinking and it works for us, one day we might have to worry about some deprecation but not for a long time yet.
Title: Re:Fixed background, scroll middle
Post by: M3ta7h3ad on August 18, 2006, 19:45:14 PM
To be honest I doubt tables will be removed from any standards in the near future anyway, its just a personal preference at the moment, but divs are so much cleaner in my opinion :)

And... tr bl are crap names :D lol use proper names! :D
Title: Re:Fixed background, scroll middle
Post by: Clock'd 0Ne on August 18, 2006, 20:10:49 PM
LOL thats neXus code as well :lol:
Title: Fixed background, scroll middle
Post by: addictweb on August 18, 2006, 20:32:58 PM
**Cowers quietly for always having used tables EVERYWHERE**

Better go read some CSS tutorials
Title: Re:Fixed background, scroll middle
Post by: neXus on August 18, 2006, 20:41:01 PM
You asked for round corners and it took me a few mins to whip something up for you of course i would name them better but I was doing it fast, lol.

No matter what people say or try you have to put to much layout and style information imbedded into the html/xhtml, and thats what xhtml and css does better.

Look at XML as an example, Probably in the next few years will be the way you create websites, the world of warcraft site for example is built on it.

XML is ust XML, you have your xsql for you database input, you have your xsl stylesheet, xst etc
As you put it nige if you looked at each you would not have a clue whats going on without looking at the other, but thats the approach you need to do.
Of course all code you need to have comments these days since your either (well you should be) making modular systems and sites either using OO or just a component system.
Others will be looking at the code besides you working in a team so you need to do that and in an ideal world create the documentation for classes etc (most dont becuase in the real world you never have the time) and so comments become important.
Then you know what goes on, also id names etc being actually relevent to the div or what ever they are attached to is important.

No point doing
Where that holds a list of availible locations for travel ^^

http://m3t.co.uk/
I have learnt more since this site and its not the biggest site in the world either but a friend did try and duplicate the site once using tables becuase he thought it would not be much more.
Was over twice as much code for the style and layout and no where near as clean.


I will give you css is a pain sometimes on certain things, normally when you try and do something clever and complicated you over work it if your first taught tables etc. You over think and you make it far to complex and it does not work or/and does not work in all browsers.
Still do that sometimes but you got to keep it simple and learn the little tricks and then you crack it and tbh some things are pritty easy.

The footer issue i dont understand again if you know the way its fine and i have never had an issue.

M3t footer works how it should there, only issue with m3t is dynamic increase of blocks
http://m3t.co.uk/index.php?page=policies (look on the left)
And since then i learnt how to do it with max and min height control and works in all browsers and tbh dead easy when you know how.

Css and tables have issues with different browsers its the people thinking their way to render is better which is the issue, but to be corret things should be seperate and less code is always better.
Title: Fixed background, scroll middle
Post by: neXus on August 18, 2006, 20:49:08 PM
Quote from: sexytw**Cowers quietly for always having used tables EVERYWHERE**

Better go read some CSS tutorials

The thing is Helping others is that if your told how to do sites using tables etc and you do that and keep doing it you make things work and look great but its nasty code tbh and you pick up many bad habbits.
To unlearn it and learn div css or even xml approaches it is a lot harder then learning from scratch since you peseption needs to be changed as well.

Lucky that me and my m8 at uni doing web stuff found a back that opened our eyes and we unlearnt stuff from uni.
Funny actually got an A in first html course and another also and we attended like 3 lectures, we simpley knew better.
When showing off my end site I had the lecturer get another guy and both quiiz me over it, I knew the answers I made the site but they did not teach the approach, it was better but they did wonder.
Me and Richard certanly learned a lot in that year at uni web wise thanks to our friend Jamie.

Not looked abck since and Picked up loads of things

Once Things are out the way i am doing right now I will be working on a proper 5thdigital site, i got some plans but my god its going to be amazing. I have made the odd image and concept and they look great.
My customer login and e-card (Little box, image of company or person, links to account etc) looks nice and different.
My main menu is going to be a little different from before.
Im going to use this background element, not as extreme as gamespot but it will look cool.

One site design thing i have learnt recently is to be a little more open and "flow" images will come accross different boxes and objects and elements of sites but be seperate from that, easy to change and not effect the elements it interacts with.
Cant wait to work on it.
The gallery i have shown, found flaws in terms of the little boxes, I could create code to size images if they are to large etc but i have come up for a better design for that as well now.

All cool stuff, cant wait to do them and show them off.
Title: Fixed background, scroll middle
Post by: addictweb on August 18, 2006, 22:31:52 PM
Cheers for the advice.

Ive just got my new space with goDaddy so I can do a bit of experimenting now, its been a while since ive written anything.
Title: Fixed background, scroll middle
Post by: neXus on August 18, 2006, 22:38:13 PM
Quote from: sexytwCheers for the advice.

Ive just got my new space with goDaddy so I can do a bit of experimenting now, its been a while since ive written anything.

Here is some help

Use external style sheet
Use id and (css)# for tags and the style
I use Class="" for links () becuase they you do a.link {}

Dont use spans with actual style on them since they have inherant issues, use them for seperators only, basically enclose so you know something is inside something but dont give them style - things go belly up, dont ask why but complex.


Its odd to stay but while you learn thing tables

Making a box with rows etc?











Then add your style controls for each

css stuff comes from web and playing with it really.
Title: Fixed background, scroll middle
Post by: addictweb on August 18, 2006, 23:32:44 PM
OK, ill try to remember to incorporate those when I start to get to grips with it.

Cheers!