I am just beginning to learn css, studying some sitepoint books. I have been modifying some of the lesson files and have run into what is probably something simple, but I’m getting frustrated again and really want to get this figured out.
I’m trying to put a background image in the #sidebar2 div and I haven’t been able to get it to work. I am using a bright red background image so that I can spot it easily. http://northwoodsartscouncil.org/memberscss2.htm http://northwoodsartscouncil.org/stylesz.css
could someone help make my day?
Thanks In Advance.
I think Paul was just being humble by not suggesting that you read through his previous posts as well. He is the one that I learned most everything I know about CSS from. You will find many 3-column examples at his site also.
In the beginning I learned how to handle floats by dissecting other people’s examples to see how the CSS was styling each element on the page. A lot of times we use internal CSS on demo pages so you can just view the page source. That will give you a glimpse of all the code and allow you to see how the CSS interacts with the HTML just by scrolling up and down in the page source.
I am going to give you some links to read through and a few links to some very simple layouts using floats.
That should give you something to chew on for now, just jump in and give a shot at writing a new 3-column page using floats. If you have any problems just give us a link or post your code.
It may have been best to come here for suggestions first before building that page. You have used way too much absolute positioning which results in very fragile layouts.
It is best to use floated columns and normal page flow to build pages with. Absolute positioned elements are completely removed from the normal flow of the document.
You said you are new to CSS, one thing you may want to learn next is how to use shorthand properties. That will cut your file size down and make things easier to manage.
Thank You So Much.
I feel rather foolish that it was something so obvious.
Not to make excuses, or seem to be bashing, most of the code and css for that page came directly from lessons in a Sitepoint book (HTML UTOPIA: DESIGNING WITHOUT TABLES USING CSS). I did hack it up (quite badly, obviously) with some absolute positioning for some of the images in an effort to get results.
Can someone Please steer me in the right direction as to reference material that will get me off on the right foot learning css? I’ve found a ton of information online, but I need to be spending my time learning from something recommended by you experts.
I don’t feel very confident in what I’ve been learning from since my page was that messed up.
Thank you all!
This is the kind of help I was hoping for from this forum.
I really appreciate the links and advice to steer me in the right direction. Lots to chew on, Thanks again.
There’s only so much you can learn from books because although they can teach you how elements work they don’t always teach you when its right to use them as a lot of the finesse comes from practice and experience.
I think we all went through the same process of latching on to something that seemed perfect for the job (like absolute positioning) only to find out later that it wasn’t the right approach in most cases.
Usually for side columns you would float the elements so that the page can grow normally and you can regain the flow by clearing the floats. Absolute elements can’t be cleared and you could never put a footer under more than one absolute column because the other columns would just over-ride the footer should their content be taller.
You should also allow elements to breathe and if they contain text they should not be trapped in elements of fixed height because the text will always break out. That may mean that you have to change how the design looks but the look should not dictate everything because it is the content that is most important.
Allowing elements space to breathe and not trying to fit everything in tiny little boxes will help to make the site more usable. Whenever, you code something then say to yourself “what if ?”. e.g.What would this look like if the text was enlarged, or the user has larger fonts by default, what happens if the text breaks to another line instead of the one line the design shows etc. Just try to think and plan ahead for these eventualities.
If you read through the posts in the forum you can learn a lot quickly and you should set yourself a few hours aside and read through Rayzur’s and Deathshadow’s previous posts if you want to see the right way to code layouts as they have provided many examples with a lot of documentation in the comments.
There’s a lot to learn at first and you are bound to get it wrong but don’t be dismayed when someone says that’s completely wrong because that’s the way you learn quicker.
Which is why it’s badly broken here since my machines all run large fonts/120dpi… elements are busting out of their containers and overlapping all over the place.
