|
CSS - Css Markup Standards
Curious, what is regarded as the standard CSS markup method?
Displaying your attrbutes horizontally: #wrapper{selector:attribute; selector:attribute; selector:attribute; selector:attribute;} Or Vertically: #wrapper{ selector:attribute; selector:attribute; selector:attribute; } Personally, horizontal seems the best. I like it because I can see the #id's and .classes all together and can follow the structure abit better. Makes it easier for me to find a certain stlye element. The argument someone presented in favor of vertical display is you won't miss a selector:attribute and the horizontal display it is hard to see the selectors:attributes. My counter arguement, in my head, was I can glance at a set of selectors:attributes and can easily identify what is / isn't there. I think I've read and written so much css that I can quickly identify pattens for certain elements and can spot rather quickly what is missing, if that is the problem, sometimes there is a large issue at hand. Eitherway, I'm in support of the horizontal display. Especially when there is a vertical style sheet that is 1152 lines long and the find option in dreamweaver is my best way of locating the style element. Thoughts on the matter? Similar TutorialsI am currently using this for expired memberships: <div style="opacity:0.1;filter:alpha(opacity=10)"> It does not work in Internet Explorer 8. Any idea why? Yes I also will change this to css. I am just wondering if there is such a thing as a standard way of writing html to suite a standard css. So that, for example you could download a new 'standard' css file and have it work straight away with your old html. Sometimes the guys on oswd.org come pretty close, but the html always looks messy. Rogue div tags all over the shop. Can anyone point me to a resource on this, or a design forum where they practise it? Thanks. C Let's start off with the code: Code: <div class="tuts_900"> <h1>Recent Tutorials</h1> <img src="tutorial_avatars/vendetta.gif" width="60" height="60" alt="Vendetta Upper Deck" title="Vendetta Upper Deck" align= "left" border="0" /> <h2>Vendetta Upper Deck</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ornare. Nam tincidunt ultrices libero. <p>Submitted Oct. 20, 2006 | <a href="">View Tutorial</a><img src="sitegfx/tuts_orange_arrow.gif" width="13" height="7" alt= "" title="" border="0" /></p> </div> What I'm trying to do is specifically target the <img> tag withint the <p> tag that's within the tuts_900 div. I tried this: div.tuts_900 p img { asdfgasdgfgasdasd }; with no success. How can I do this? Thanks. I'm in the middle of doing a site conversion to xHTML and CSS using semantic markup, Lets say I have something which needs a rating displayed in stars... E.g. if the current html is : Code: <h1>Book Name</h1> <img src="star.gif"><img src="star.gif"><img src="star.gif"><img src="star.gif"> I'd like... Code: <h1>Book Name</h1> <h2>4 Stars</h2> And do some image replacement on this when skinning the site... what do you think? -D I noticed that googlebot is reading and indexing the content of the left sidebar and and not the center content (title of posts etc). I have tried this fix: Place the sidebar call after The Loop in your theme files and then use CSS to float your post content right or absolutely position your sidebar on the left. Because the spider bots read the page markup from the top down. So if your left sidebar lies above your post content in the markup, the sidebar will be indexed first. If, on the other hand, your left sidebar appears below your post content in the markup but is positioned left by CSS, the bots will index your post content first. It works when I float the center content to the right to the point where the sidebars are where they are supposed to be but they are pushed down a little from the top and it throws the page nav (bottom of center content) and the footer out of wack. I was just wondering if any knew any good books on CSS (especially how it pertains to webdesign). One good example is Eric Meyer on CSS. Thanks so much! Hey people, Just want to know how i would make the equivalent alignment of an img to absmiddle. If i don't have absmiddle it doesn't display properly. As well as that, if the align tag with "left" as the value is missing, then text doesn't wrap around the image. How do i fix that? Also, while i'm here, i may as well ask about an equivalent to hspace as well. One of my images has hspace 6, and if i take it away, it displays incorrectly. Why do they make these things so hard? haha thanks people. Hi, I've created a fixed width Div/CSS design for my forum, and while Firefox can handle excessively wide user-posted images, IE handles it badly and stretches the div that the image is in, breaking the layout. An example is he http://forums.hiveworldterra.co.uk/viewtopic.php?t=496 (currently with my CSS work around - not pretty) What I would like is a non-Javascript, CSS-based method (or very minimal that gives acceptable results when JS is off) of making the containing Div of the image scroll horizontally when the image is over 590px wide, but not show a vertical scroll bar and not show any scroll bars if the image is under 590px. Is that even possible? thanks for any suggestions IBBoard Hi- I need to know if IE 5, IE 6 or IE7 are considered standards-compliant and do any of them support fully CS2 and strict standards? Thanks in advance- S Hi, I'm working on my first standards compliant site, so I'm a bit of a novice with the CSS required. You can view a test page I have set up at: 67.207.72.2/test_styles.htm (forum rules won't let me include this as a url) The css file for this page is at: 67.207.72.2/css/test_styles.css My issue is that the right column stops short- I'd like the background color to continue down the length of the page. To try to do this, I set the wrapping div on this section (#main_content) of the page with the appropriate background-color. IE displays the page the way I want it to appear, but FF, Safari, and Chrome all do not. I know this means I'm doing it wrong, but I don't know what to change. I've also tried using an image for a background for the #main_content div, and to set a height: 100% property for the column, but neither of those worked. Can anyone point me in the right direction? Thanks for your time. |
|||||||