|
Users viewing this topic:
none
|
|
Login  | |
|
RE: New CSS Question - 10/1/2008 8:34:02 AM
|
|
|
iluvatar
Posts: 1925
Joined: 4/12/2005
Status: online
|
You have two <div> tags both named "wrapper" that are nested inside each other - one is using the height/width parameters in the header, the other is being overridden by your inline "style" parameters.
I'd recommend doing your basic development in Firefox, using the FireBug add-on. The "HTML" tab organizes the elements in your code into a tree hierarchy, so it's easy to see how things are laid out and organized. It also highlights the areas spanned by each element, which is very helpful when trying to figure out why the positioning isn't working. It also allows you to right click on anything in the page, select "Inspect Element" and brings you right to that element's position in the tree view.
Also, try running your pages through the W3C Markup validator at http://validator.w3.org/. If your markup validates, you stand a better chance of achieving cross-browser compatibility.
-Dan.
_____________________________
Well, I've been to one world fair, a picnic, and a rodeo, and that's the stupidest thing I ever heard come over a set of earphones.
|
|
|
|
|
RE: New CSS Question - 10/1/2008 10:08:05 AM
|
|
|
sunshinesoprano
Posts: 944
Joined: 4/12/2005
From: Georgia
Status: offline
|
Thanks, Dan. That makes sense. I was trying to do some copy and paste action and I think I screwed it up.
How do you do the development in Firefox?
_____________________________
Pure Heart-Fresh, Progressive Southern Gospel
Sing, laugh, love, PRAISE!
|
|
|
|
|
RE: New CSS Question - 10/1/2008 2:10:05 PM
|
|
|
skreyola
Posts: 1929
Joined: 1/28/2008
From: Mars
Status: offline
|
What's going wrong is that you've nested to elements with the same id, as iluvatar said. By the way, make sure if you're using a set of attributes on more than one element, you make it a class instead of an id. By the way, I would strongly encourage you to use percentage values for your width (and encase your attribute values in quotes). It won't validate as strict without the quotes, and using a width="some%" will ensure it looks right on low and high screen resolutions (some people still use 640x480, which will chop a big chunk off your 700+ div).
You probably don't need to set a height on your divs, unless you have things floating or absolutely positioned within them.
To develop in Firefox simply means that you use Firefox to view the pages while you're working on them. I strongly agree with this. Build the page in FF, then apply fixes for IE using conditional comments. Other browsers will mostly render correctly using the Firefox-designed code.
_____________________________
-- Skreyola
http://skreyola.livejournal.com/
Linux is a multiuser, modular, peer-reviewed, free operating system. Therefore, it tends to be stable, secure, and reliable.
Open Source is good stewardship!
I run Debian Linux (http://www.debian.org/)
|
|
|
|
|
RE: New CSS Question - 10/11/2008 11:19:01 AM
|
|
|
sunshinesoprano
Posts: 944
Joined: 4/12/2005
From: Georgia
Status: offline
|
What percentage should I make the wrapper width? I'm still running into an issue with the white wrapper not being long enough in Firefox, but it looks right in IE.
_____________________________
Pure Heart-Fresh, Progressive Southern Gospel
Sing, laugh, love, PRAISE!
|
|
|
|
|
RE: New CSS Question - 10/11/2008 12:40:00 PM
|
|
|
zatuzik
Posts: 1
Joined: 11/5/2006
Status: offline
|
What percentage should I make the wrapper width? I'm still running into an issue with the white wrapper not being long enough in Firefox, but it looks right in IE.
|
|
|
|
|
RE: New CSS Question - 10/11/2008 2:04:58 PM
|
|
|
skreyola
Posts: 1929
Joined: 1/28/2008
From: Mars
Status: offline
|
quote:
ORIGINAL: sunshinesoprano
What percentage should I make the wrapper width? I'm still running into an issue with the white wrapper not being long enough in Firefox, but it looks right in IE.
Have you tried putting padding or border on your wrapped elements (giving you the white border) and not giving the wrapper a background color?
I can't be more help because what's on the links you gave is still the old version.
_____________________________
-- Skreyola
http://skreyola.livejournal.com/
Linux is a multiuser, modular, peer-reviewed, free operating system. Therefore, it tends to be stable, secure, and reliable.
Open Source is good stewardship!
I run Debian Linux (http://www.debian.org/)
|
|
|
|
|
RE: New CSS Question - 10/11/2008 8:45:28 PM
|
|
|
iluvatar
Posts: 1925
Joined: 4/12/2005
Status: online
|
quote:
ORIGINAL: sunshinesoprano
What percentage should I make the wrapper width?
I don't really like using percentages. Percentages mean that your layout can change as people resize their browser window. Some of the accessibility folks might have issues with that, though.
quote:
I'm still running into an issue with the white wrapper not being long enough in Firefox, but it looks right in IE.
You've still got two div's called "wrapper." Dump the outer one and then just fix the footer.
I don't want to sound rude, but I'd honestly just start over with this page. There isn't really so much there that re-doing it would be all that hard and with the mish-mash of html styling, auto-generated code, poorly laid out css, you're likely to just get more confused and not get the results you want. There's so much stuff in this page, I can't imagine trying to edit it or make sense of it.
You'd do well to start with a top-down analysis of the page - what blocks of information are there: picture, title, menu, band lineup, tour dates, etc. What types of text are there: Title, Red menu, Red headline, bold black italics, etc.
Then just use div and span tags to group these sections of text into logical blocks, and configure your css code to format and position everything. Once you get everything separated out like that, the site will be MUCH easier to maintain.
All you really need to get started is Firebug and a decent code editor that will color-code code elements for you - I use DreamWeaver at work, but only for its editor and its file management, not as an actual design/layout tool. All the code I do by hand. There are free ones out there.
I'd rather not post my work url here publicly, but PM me and I'll be happy to send it to you. It's nothing fancy and it's hardly a model of proper web design, but it's fairly neat and clean and done completely with CSS and javascript - and if I did it right, I could lose a good chunk of the javascript (and also make it more accessible, and load more quickly, but that's on my to-do list). The CSS Zen Garden is a great place to look to how to really incorporate css into your site.
-Dan.
_____________________________
Well, I've been to one world fair, a picnic, and a rodeo, and that's the stupidest thing I ever heard come over a set of earphones.
|
|
|
|
|
RE: New CSS Question - 10/12/2008 8:03:00 AM
|
|
|
sunshinesoprano
Posts: 944
Joined: 4/12/2005
From: Georgia
Status: offline
|
Thanks, Dan. I'm really new to the CSS thing so I'm sort of learning as I go.
I actually redid all the code yesterday afternoon and I think I finally got it all cleaned out.
Now I've seen the span tag used, but am not 100% clear on how to use it and when to use it. Is it mostly for text or what?
Thanks again!
_____________________________
Pure Heart-Fresh, Progressive Southern Gospel
Sing, laugh, love, PRAISE!
|
|
|
|
|
RE: New CSS Question - 10/12/2008 8:24:35 AM
|
|
|
sunshinesoprano
Posts: 944
Joined: 4/12/2005
From: Georgia
Status: offline
|
I totally think I got it! I cleaned out the CSS and started from scratch and it looks great in Firefox and IE!
Thanks, everyone!!!!
< Message edited by sunshinesoprano -- 10/13/2008 5:52:59 AM >
_____________________________
Pure Heart-Fresh, Progressive Southern Gospel
Sing, laugh, love, PRAISE!
|
|
|
|
|
RE: New CSS Question - 10/12/2008 9:33:27 AM
|
|
|
iluvatar
Posts: 1925
Joined: 4/12/2005
Status: online
|
quote:
ORIGINAL: sunshinesoprano
Rock on! I finally got it!!! I cleaned out all the CSS and started it fresh and it's perfect in FF and IE!
Thanks, everyone!!!
Cool!
quote:
ORIGINAL: sunshinesoprano
Thanks, Dan. I'm really new to the CSS thing so I'm sort of learning as I go.
That's ok. Prior to a couple months ago, I didn't even know what CSS was. That's why I can say it's not hard. 
quote:
I actually redid all the code yesterday afternoon and I think I finally got it all cleaned out.
Now I've seen the span tag used, but am not 100% clear on how to use it and when to use it. Is it mostly for text or what?
Pretty much.
Think of anything inside a <div> as being a "block level" unit and anything inside a <span> as being an "inline" unit. A block-level element will interrupt the flow of the rest of the page, causing line breaks and such. Inline elements flow in line with the surrounding text. If you want something BOLD LIKE THIS in the middle of your sentence, use <span>. If you want a block of text (e.g. a paragraph, and <p> is another block-level element) to be treated as a separate, logical block, either for formatting or position purposes, then use a block-level tag.
-Dan.
< Message edited by iluvatar -- 10/12/2008 9:42:36 AM >
_____________________________
Well, I've been to one world fair, a picnic, and a rodeo, and that's the stupidest thing I ever heard come over a set of earphones.
|
|
|
|
|
RE: New CSS Question - 10/12/2008 6:20:05 PM
|
|
|
skreyola
Posts: 1929
Joined: 1/28/2008
From: Mars
Status: offline
|
quote:
ORIGINAL: iluvatar
quote:
ORIGINAL: sunshinesoprano
What percentage should I make the wrapper width?
I don't really like using percentages. Percentages mean that your layout can change as people resize their browser window. Some of the accessibility folks might have issues with that, though.
That's why I love them. They don't force your users to view it based on how wide you think their browser window ought to be. I can see forcing width for certain things, like poetry or art that needs to be seen in a particular way, but text, in my opinion, should flow and adjust with the window width, both for convenience and accessibility. But I'm pretty big on accessibility.
Just out of curiosity, why would you not want the layout to adjust to the browser width?
I wouldn't mind it so much if people wouldn't use absolute px sizing for font size and disable scrollbars so I can't move the content if their lamebrain 5000px-wide layout doesn't fit my window. *shrug* I know it's rare, but it does happen sometimes.
_____________________________
-- Skreyola
http://skreyola.livejournal.com/
Linux is a multiuser, modular, peer-reviewed, free operating system. Therefore, it tends to be stable, secure, and reliable.
Open Source is good stewardship!
I run Debian Linux (http://www.debian.org/)
|
|
|
|
|
RE: New CSS Question - 10/13/2008 9:07:26 PM
|
|
|
iluvatar
Posts: 1925
Joined: 4/12/2005
Status: online
|
quote:
ORIGINAL: skreyola
quote:
ORIGINAL: iluvatar
quote:
ORIGINAL: sunshinesoprano
What percentage should I make the wrapper width?
I don't really like using percentages. Percentages mean that your layout can change as people resize their browser window. Some of the accessibility folks might have issues with that, though.
That's why I love them. They don't force your users to view it based on how wide you think their browser window ought to be. I can see forcing width for certain things, like poetry or art that needs to be seen in a particular way, but text, in my opinion, should flow and adjust with the window width, both for convenience and accessibility. But I'm pretty big on accessibility.
Just out of curiosity, why would you not want the layout to adjust to the browser width?
I wouldn't mind it so much if people wouldn't use absolute px sizing for font size and disable scrollbars so I can't move the content if their lamebrain 5000px-wide layout doesn't fit my window. *shrug* I know it's rare, but it does happen sometimes.
Actually, the site I maintain is smaller than most windows. I forget the exact dimensions, but it's somewhere around 660-675px wide, IIRC. I opted to develop the web site around some pre-existing artwork that wouldn't scale properly if it were allowed to grow with the window. With a more functional, less "pretty" site (though it's not really all that "pretty"), percentages would work.
I may change the site eventually. The small size has been a bit constricting at times, though it does force me to be concise and choose my layouts wisely.
-Dan.
_____________________________
Well, I've been to one world fair, a picnic, and a rodeo, and that's the stupidest thing I ever heard come over a set of earphones.
|
|
|
|
|
RE: New CSS Question - 10/14/2008 12:58:29 AM
|
|
|
skreyola
Posts: 1929
Joined: 1/28/2008
From: Mars
Status: offline
|
quote:
ORIGINAL: iluvatar
quote:
ORIGINAL: skreyola
quote:
ORIGINAL: iluvatar
quote:
ORIGINAL: sunshinesoprano
What percentage should I make the wrapper width?
I don't really like using percentages. Percentages mean that your layout can change as people resize their browser window. Some of the accessibility folks might have issues with that, though.
That's why I love them. They don't force your users to view it based on how wide you think their browser window ought to be. I can see forcing width for certain things, like poetry or art that needs to be seen in a particular way, but text, in my opinion, should flow and adjust with the window width, both for convenience and accessibility. But I'm pretty big on accessibility.
Just out of curiosity, why would you not want the layout to adjust to the browser width?
I wouldn't mind it so much if people wouldn't use absolute px sizing for font size and disable scrollbars so I can't move the content if their lamebrain 5000px-wide layout doesn't fit my window. *shrug* I know it's rare, but it does happen sometimes.
Actually, the site I maintain is smaller than most windows. I forget the exact dimensions, but it's somewhere around 660-675px wide, IIRC. I opted to develop the web site around some pre-existing artwork that wouldn't scale properly if it were allowed to grow with the window. With a more functional, less "pretty" site (though it's not really all that "pretty"), percentages would work.
I may change the site eventually. The small size has been a bit constricting at times, though it does force me to be concise and choose my layouts wisely.
-Dan.
That's a good choice, if the layout needs to be the same width as the artwork. I never scale graphics dynamically unless they are very, very simple things like a square or a bar.
I'm not meaning to pick at you, and you can do things any way you want. Both extremes can get a little annoying. I know that studies show shorter line lengths are easier to read, but I just prefer to get as much on the screen as possible before I have to scroll. It comes in handy when I want to eat while reading. *shrug* I know I'm not like most people, so that's okay.
Too wide makes people cuss and scream. Too narrow may not bother a lot of folks, and the rest will just sneer and be less likely to come back, so I guess narrow is the best choice, if you're going to force visitors into a fixed-width layout.
Of course, there is a solution that fits both wide and narrow screens with fixed-width blocks. Have narrow fixed-width blocks and float them. If the screen is wide enough, it'll show more than one. Low-resolution visitors will see one column. I know it won't work for every site, but I think it's an interesting idea for some sites.
 But in the end, a site is what it is. Some people will like it, and some won't. The main thing is to avoid the nasty things people sometimes do in Web design. Yes, I'm talking to you, people who write sites for MSIE and make others see messages that they need to change to IE. :P
_____________________________
-- Skreyola
http://skreyola.livejournal.com/
Linux is a multiuser, modular, peer-reviewed, free operating system. Therefore, it tends to be stable, secure, and reliable.
Open Source is good stewardship!
I run Debian Linux (http://www.debian.org/)
|
|
|
|
|
RE: New CSS Question - 10/14/2008 7:52:33 PM
|
|
|
iluvatar
Posts: 1925
Joined: 4/12/2005
Status: online
|
quote:
ORIGINAL: skreyola
I'm not meaning to pick at you, and you can do things any way you want.
No offense taken. I've done some C++ work in the past, but I'm fairly new to web development and there are still a bunch of things I have yet to learn. Web stuff seems to involve much more give-and-take, balancing issues that compete/conflict with each other.
-Dan.
_____________________________
Well, I've been to one world fair, a picnic, and a rodeo, and that's the stupidest thing I ever heard come over a set of earphones.
|
|
|
|
|
RE: New CSS Question - 10/14/2008 11:36:23 PM
|
|
|
skreyola
Posts: 1929
Joined: 1/28/2008
From: Mars
Status: offline
|
quote:
ORIGINAL: iluvatar
quote:
ORIGINAL: skreyola
I'm not meaning to pick at you, and you can do things any way you want.
Web stuff seems to involve much more give-and-take, balancing issues that compete/conflict with each other.
-Dan.
Quite so!
_____________________________
-- Skreyola
http://skreyola.livejournal.com/
Linux is a multiuser, modular, peer-reviewed, free operating system. Therefore, it tends to be stable, secure, and reliable.
Open Source is good stewardship!
I run Debian Linux (http://www.debian.org/)
|
|
|
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
 Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts |
|
|
Forum Tools
Printable Version
