|
| |
|
|
Nicole
Posts: 2830
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
 |
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.
< Message edited by Nicole -- 5/21/2006 7:03:59 >
_____________________________
|
|
|
|
Tailslide
Posts: 6034
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6034
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
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!
< Message edited by Tailslide -- 5/21/2006 8:38:16 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6034
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 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
|
|
|
Printable Version 
