Why is this happening?

All Forums >> [Web Development] >> Cascading Style Sheets

Message

Nicole -> Why is this happening? (5/21/2006 6:48:19)
Hi everyone, Still learning, but getting there I think! I've struck a snag with my portfolio page though and can't seem to work out what's happening and why. http://www.users.on.net/~nicoleoz/portfolio.htm I've added images to represent the portfolio pages and have the text alongside with a left margin set to about 180px so that the text doesn't wrap (looked up how to do that in Google and found that solution on another forum. Is it correct?). But whe using the text-resizer in Firefox and IE (not sure about Opera, couldn't get it to open just then, will reboot and try again), when using the text-resizer on the smallest text, it's pushing the bottom portfolio image way over to the right and when increasing the size using the 2 biggest sizes, in IE it's pushing all the content way down the page. Anyone have a clue why this is happening? Any suggestions greatly appreciated. Nicole Edit: Just checked Opera, problem is only happening when smallest text is selected.

Tailslide -> RE: Why is this happening? (5/21/2006 8:12:11)
Hi Nicole - the problem is that the divs you've got around your images aren't clearing the previous one so you get overlap. However there's probably a better way : Couple of things there - firstly, you're re-using ids on the same page (portfolio) which is a big no-no and can cause "issues". If I were you I'd set up a class called portfolio (yes I know you've got one already - bear with me) rather than an id. Have a div with the class portfolio and in that div have your image and then the paragraphs of text. In the CSS Have the class portfolio with clear:both so that each div will clear the previous one. also add another line for images within that class which will float them left. If you like you can have a left hand margin on the paragraphs so they don't wrap underneath the images if you don't want that. That will cut down on the markup and make your life much easier.

Tailslide -> RE: Why is this happening? (5/21/2006 8:24:35)

Ok - had a play with it and this seems to work well:

Edit: TEST PAGE

HTML:

<div class="portfolio">
<img src="images/wv.png" width="133" height="82" />
<h3>Smith Vision</h3>
<p>Website Redesign adhering to <acronym title="World Wide Web Consortium">W3C</acronym>
<acronym title="Hypertext Markup Language">HTML 4.01</acronym> standards using 
external, embedded and inline <acronym title="Cascading Style Sheets">CSS</acronym>. 
This website needed to remain with a red, white and blue colour scheme, though 
needed to present an image of being the governing body of swimming in the 
Missouri Valley region of the United States.</p>
</div> <!-- end portfolio div -->

<div  class="portfolio">
<img src="images/mvs.png" width="133" height="82" />
<h3>Missouri Valley Swimming LSC.</h3>
<p>Website Redesign adhering to <acronym title="World Wide Web Consortium">W3C</acronym>
<acronym title="Hypertext Markup Language">HTML 4.01</acronym> standards using 
external, embedded and inline <acronym title="Cascading Style Sheets">CSS</acronym>. 
This website needed to remain with a red, white and blue colour scheme, though 
needed to present an image of being the governing body of swimming in the 
Missouri Valley region of the United States.</p>
</div> <!-- end portfolio div -->

<div class="portfolio">
<img src="images/tgci.png" width="133" height="82" />
<h3>The Gender Centre Inc.</h3>
<p>Website Redesign adhering to <acronym title="World Wide Web Consortium">W3C</acronym> 
<acronym title="Extensible Hypertext Markup Language">XHTML 1.0</acronym> standards using external, embedded and inline 
<acronym title="Cascading Style Sheets">CSS</acronym>. This website needed to present a professional image while keeping the information relevant, 
current and include downloadable Kits & Fact Sheets, archive the Centre's history and magazine editions and keep the latest news and events 
updated.</p>
</div> <!-- end portfolio div -->

CSS:

.portfolio h3 {margin-left:180px;margin-top:0;}
.portfolio p {margin-left: 180px;}
.portfolio {margin-top:20px; clear:both;}
.portfolio img {padding: 16px;border: 1px solid #bbb;	margin: 0 0 0 16px;	float:left;}

There's a couple of other issues you need to address.
You're menu and content blocks are overlapping just slightly - you'll need to reduce the widht of one or other slightly - check it out in FF web developer with outline block level elements.

Also - you're using ems to size the width of your menu items. Trouble is in a fixed width layout this breaks the page when you increase the font-size in IE. If you're using a fixed width layout then stick with px to size the menu item widths. Keep using % or ems whichever you prefer for the font sizing though!

jaybee -> RE: Why is this happening? (5/21/2006 9:05:04)
You may already realise this but it took me a while to get it into my thick head so I'll put it here for anyone else who might not have twigged. id and class are not CSS terms, they're HTML. The id attribute has several roles in HTML, as well as being a style sheet selector it can be: * A target anchor for hypertext links. * A means to reference a particular element from a script. * A name of a declared OBJECT element. * Used for general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.). because of this it MUST be unique on a page. class you can have as many as you like but remember that if you refer to one in your stylesheet the style will apply to all.

Nicole -> RE: Why is this happening? (5/21/2006 9:15:36)
Thanks Tail and Jaybee Tail I haven't looked at your "Test Page" but will in a sec. I'm also leaving the published page as is at the moment because I've just gone and added some things that have now ruined everything! At least I know I can rescue everyrything by viewing source online. I keep forgetting to use all of those Firefox Web Developer things, thanks for the reminder. I knew about id and class, I thought I understood it well enough that if you were only going to use things on one page then an id is okay. It's probably best to just stick to classes huh? Thanks so far.

Tailslide -> RE: Why is this happening? (5/21/2006 9:23:41)
No ids are fine - they're good actually (they outweigh classes). But you can only use an ID once on a page - so stick to using them for big stuff like content divs or footers for instance. If you need to do something more than once on a single page as for instance with your sections for different clients on your portfolio page, then use classes.

jaybee -> RE: Why is this happening? (5/21/2006 9:55:58)
quote: if you were only going to use things on one page then an id is okay. It's probably best to just stick to classes huh? No, not things on one page. Once on a page. id=unique, only mentioned once on a page. It can be mentioned on all your pages but just once on each. As Tail says they're good to use but for the big stuff.

Page: [1]

0.046875