CSS3 - HTML5 QA Section

[facuxt]

Hello everyone, i am a web developer with some time left, i think that this post will be helpfull with all those guys trying to do their own pages or just want to learn something new. In the way i came with lots of issues that blocked me, the only way was to ask a friend of mine wich answered me very peacefully.

If anyone has any question about this, just post it here, im sure more people than just me will be very happy to help.

Cheers to everybody!

[iwantawhtecollr]

I'm actually running into a problem with a website I'm coding. What I'm trying to accomplish is to nest graphics in specific locations on the screen regardless of screen size. i.e. if you are looking at the page from a 800x600 browser, there should be an image in the upper left corner where as if you are looking at the page in a 1440x900 browser, the image will be hosted off the middle of the page and have a border to the sides. tried all the location peramiters (absolute: , fixed: , relative: ...) and I cannot figure out what I'm doing wrong. Thanks for reading my rant; got any thoughts? 

[Ziommm]

I'm actually running into a problem with a website I'm coding. What I'm trying to accomplish is to nest graphics in specific locations on the screen regardless of screen size. i.e. if you are looking at the page from a 800x600 browser, there should be an image in the upper left corner where as if you are looking at the page in a 1440x900 browser, the image will be hosted off the middle of the page and have a border to the sides. tried all the location peramiters (absolute: , fixed: , relative: ...) and I cannot figure out what I'm doing wrong. Thanks for reading my rant; got any thoughts? 

 

Mh, you could make it float:right and then add a right and top margin in "%".

 

But what are you trying to achieve exactly ?

[loganryan99]

I'm actually running into a problem with a website I'm coding. What I'm trying to accomplish is to nest graphics in specific locations on the screen regardless of screen size. i.e. if you are looking at the page from a 800x600 browser, there should be an image in the upper left corner where as if you are looking at the page in a 1440x900 browser, the image will be hosted off the middle of the page and have a border to the sides. tried all the location peramiters (absolute: , fixed: , relative: ...) and I cannot figure out what I'm doing wrong. Thanks for reading my rant; got any thoughts? 

 

I think what you're trying to do is adjust content to fit the size of the screen, like how the header on the LTT forums will resize as you resize your browser, however the content in the center will not grow any smaller. (Let me know if i'm off base here)

.myElement{    min-width: 800px;    margin: 0;}

The above code will make the content always stay in the center of the screen, but never shrink below 800px in width. So when I view it on a lower resolution display, the content will not seem squished together or otherwise formatted incorrectly.  (The horizontal scrollbar will appear if the browser is reduced to a width of under 800px)

[iwantawhtecollr]

Catman, you are my hero! I can't tell you how much I have been fighting this thing

[QuestCube]

Hint: Use css3please.com, where you can customize different css3 rules, it has a live preview, and also it generates the code for all different browsers, as every browser has it own rules with css3 for some reason^^

Also, if you like to do extended CSS, "LESS" can help you alot ;)

http://lesscss.org/

[alpenwasser]

as every browser has it own rules with css3 for some reason^^

That is the one major annoyance which would probably prevent me from ever doing web

development professionally. It's fun to do the occasional project to broaden my horizons

and stuff, but in the long run, all that non-standard compliance by the browsers would

drive me insance! :lol:

Although I have to admit, it has gotten a lot better in the past 8 years or so since I

developed my first website. Most stuff that's different between modern browsers are

rather small things that won't cause major usability breakages whereas IE8 and less

are easily capable of completely breaking your site even if you do something that's

actually more or less reasonable (that's just my personal experience, IE9 and 10 have

not been particularly troublesome for me).

As a side note: It's not just CSS3, CSS1 and 2 are also a victim of this, although since

they have been standardized in their entirety you don't need those pesky vendor prefixes

("-webkit-","-moz-" etc.). The reason for those prefixes is that not everything of CSS3

has been standardized yet. CSS3 is divided up into smaller junks and is not really a

complete standard like CSS1 and 2 are IIRC.

Anyway, I think this thread is a good idea, but maybe it should be made a bit structured

if it grows so that people can easily see in the first post which problems have been

asked and answered? That would enable the thread to not just be a place to ask these sorts

of questions but also give it some value as an evolving document.

Just a thought, and this depends on participation of course ;)

[loganryan99]

That is the one major annoyance which would probably prevent me from ever doing web

development professionally. It's fun to do the occasional project to broaden my horizons

and stuff, but in the long run, all that non-standard compliance by the browsers would

drive me insance! :lol:

Although I have to admit, it has gotten a lot better in the past 8 years or so since I

developed my first website. Most stuff that's different between modern browsers are

rather small things that won't cause major usability breakages whereas IE8 and less

are easily capable of completely breaking your site even if you do something that's

actually more or less reasonable (that's just my personal experience, IE9 and 10 have

not been particularly troublesome for me).

As a side note: It's not just CSS3, CSS1 and 2 are also a victim of this, although since

they have been standardized in their entirety you don't need those pesky vendor prefixes

("-webkit-","-moz-" etc.). The reason for those prefixes is that not everything of CSS3

has been standardized yet. CSS3 is divided up into smaller junks and is not really a

complete standard like CSS1 and 2 are IIRC.

Anyway, I think this thread is a good idea, but maybe it should be made a bit structured

if it grows so that people can easily see in the first post which problems have been

asked and answered? That would enable the thread to not just be a place to ask these sorts

of questions but also give it some value as an evolving document.

Just a thought, and this depends on participation of course ;)

 

Most browsers now are getting close to being compliant with HTML5 and CSS3 standards. The only one who's behind is Microsoft, but they're starting to make it better. When I do web development, I usually only use the standard syntax, and users with a non-compliant browser will just have to view a less pretty page. If everyone keeps using the browser-specific CSS rules, then it won't get any better. If more and more people start doing this, people who use non-standard browsers will eventually have to switch, unless they are updated to be compliant.

[QuestCube]

Most browsers now are getting close to being compliant with HTML5 and CSS3 standards. The only one who's behind is Microsoft, but they're starting to make it better. When I do web development, I usually only use the standard syntax, and users with a non-compliant browser will just have to view a less pretty page. If everyone keeps using the browser-specific CSS rules, then it won't get any better. If more and more people start doing this, people who use non-standard browsers will eventually have to switch, unless they are updated to be compliant.

 

Most modern Browsers already support non-browser specific rules anyway. As far as I know, Chrome 26, Firefox 16+, IE 10+ and Opera 12.10+ are the browsers supporting these.