SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
-
Jun 20, 2006, 07:10 #1
- Join Date
- Aug 2002
- Location
- Derbyshire, UK
- Posts
- 295
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Floating an image in text with h1's and h2's
I am trying to float an image in a containter div with <p> text and <h1>, <h2>'s floating and wrapping around the image.
Works a treat in firefor but IE 6 on windows...nope.
See attached gif for layout example of what I am trying to do.
Here's my HTML
HTML Code:<div id="holder"> <div id="image"> <script type="text/javascript">this creates the image here. fixed size.</script> </div> <h1>Title</h1> <h2>Description:</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce semper risus id nulla. Maecenas sagittis turpis id elit. Aliquam gravida, tellus non varius posuere, eros justo pharetra leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod in, turpis..</p> <h2>Description 2</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <h2>Offer:</h2> <p>SS554</p> </div><!-- end holder wrap -->
Code:#holder{ width:480px; background-color:#FFFFCC; } #holder h1, #holder h2, #holder h3 { display:inline; float:left;/*This helps float the content in ie*/ } html > body #holder h1, html > body #holder h2, html > body #holder h3 { float:none; } #image{ width:255px; height:175px; float:right; padding-bottom:10px; margin-top:18px; }
I am super stuck. Apart from making the html non semantic and styling the heading's as <p> tags and using css to make they appear as headings I have no idea what to do.. I dont really want to have to use paragraphs for the whole thing as it's not correct.
Thanks, I am so stcuk on this one!
****************
The Webmistress
-
Jun 20, 2006, 07:40 #2
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
separate the display inlines by class or tag
PS you also need to clear the floats
class
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>12345 12345 12345 12345 12345</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> *{padding:0;margin:0;} #holder{ padding-top:10px; width:480px; background:#FFFFCC; } .x{display:inline;} #holder h1,#holder h2,#holder h3,#holder p{padding:10px 5px 5px 5px;} #image{ width:255px; height:175px; float:right; margin:0 0 5px 5px; background:#ff6600; } </style> </head> <body> <div id="holder"> <div id="image"> <!-- <script type="text/javascript">this creates the image here. fixed size.</script> --> </div> <h1 class="x">Title</h1> <h2 class="x">Description:</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce semper risus id nulla. Maecenas sagittis turpis id elit. Aliquam gravida, tellus non varius posuere, eros justo pharetra leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod in, turpis.. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce semper risus id nulla. Maecenas sagittis turpis id elit. Aliquam gravida, tellus non varius posuere, eros justo pharetra leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod in, turpis.. </p> <h2>Description 2</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <h2>Offer:</h2> <p>SS554</p> </div><!-- end holder wrap --> </body> </html>
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>12345 12345 12345 12345 12345</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> *{padding:0;margin:0;} #holder{ padding-top:10px; width:480px; background:#FFFFCC; } #holder h1,#holder h2{display:inline;} #holder h1,#holder h2,#holder h3,#holder p{padding:10px 5px 5px 5px;} #image{ width:255px; height:175px; float:right; margin:0 0 5px 5px; background:#ff6600; } </style> </head> <body> <div id="holder"> <div id="image"> <!-- <script type="text/javascript">this creates the image here. fixed size.</script> --> </div> <h1>Title</h1> <h2>Description:</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce semper risus id nulla. Maecenas sagittis turpis id elit. Aliquam gravida, tellus non varius posuere, eros justo pharetra leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod in, turpis.. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce semper risus id nulla. Maecenas sagittis turpis id elit. Aliquam gravida, tellus non varius posuere, eros justo pharetra leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod in, turpis.. </p> <h3>Description 2</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <h3>Offer:</h3> <p>SS554</p> </div><!-- end holder wrap --> </body> </html>
-
Jun 20, 2006, 07:45 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
You may need to clarify this a little because it seems to me that if you remove the float from your h1,h2,h3 styles then IE looks exactly like mozilla and other browers.
Code:#holder h1, #holder h2, #holder h3 { display:inline; }
-
Jun 20, 2006, 07:47 #4
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
-
Jun 20, 2006, 07:58 #5
- Join Date
- Aug 2002
- Location
- Derbyshire, UK
- Posts
- 295
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I managed to get around the problem (luckiliy in this case) by using a definition list. In this case it was actually what I should have been doing. It's odd how it seems to float around with no issues.
I removed the inline from my headings but then it acted like a block and pushed itself down below the floated image... hmmmm. I am on ie win 6.029****************
The Webmistress
-
Jun 20, 2006, 08:02 #6
- Join Date
- Aug 2002
- Location
- Derbyshire, UK
- Posts
- 295
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks all4nerds. Nearly there now.
Only problem on mine was the first 2 headings. (h1 & h2) sit on the same line.****************
The Webmistress
-
Jun 20, 2006, 08:23 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
by using a definition list. In this case it was actually what I should have been doing. It's odd how it seems to float around with no issues
IE will not wrap elements around floats if the element has "layout" but will avoid the float and not wrap under where possible.
-
Jun 20, 2006, 08:25 #8
- Join Date
- Aug 2002
- Location
- Derbyshire, UK
- Posts
- 295
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How odd? Seems wierd that my definition lists work instead then! eek.
****************
The Webmistress
-
Jun 20, 2006, 08:31 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Probably something else going on but if its working for you then that's fine
-
Jun 20, 2006, 08:45 #10
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
how do you want the H1 and H2
A (use display inline)
Title Description:
B (needs nothing are by default display block)
Title
Description:
like this
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>12345 12345 12345 12345 12345</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> *{padding:0;margin:0;} #holder{ padding-top:10px; width:480px; background:#FFFFCC; } #holder h1{padding:0 5px 0 5px;} #holder h2,#holder h3,#holder p{padding:10px 5px 5px 5px;} #image{ width:255px; height:175px; float:right; margin:0 0 5px 5px; background:#ff6600; } </style> </head> <body> <div id="holder"> <div id="image"> <!-- <script type="text/javascript">this creates the image here. fixed size.</script> --> </div> <h1>Title</h1> <h2>Description:</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce semper risus id nulla. Maecenas sagittis turpis id elit. Aliquam gravida, tellus non varius posuere, eros justo pharetra leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod in, turpis.. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce semper risus id nulla. Maecenas sagittis turpis id elit. Aliquam gravida, tellus non varius posuere, eros justo pharetra leo, non dictum nulla tellus non sapien. In lacinia ligula ac leo. Suspendisse sapien diam, dapibus sed, tincidunt vitae, euismod in, turpis.. </p> <h3>Description 2</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <h3>Offer:</h3> <p>SS554</p> </div><!-- end holder wrap --> </body> </html>
Last edited by all4nerds; Jun 20, 2006 at 10:32.
Bookmarks