Back To Website Design Forum

word wrap trick..

  • roulettered56
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Sep 26, 2008
  • Posts: 10
  • Status: Offline

Post October 14th, 2008, 8:57 pm

Hey guys,

let's imagine I have a content area on my page:

Code: [ Select ]
<div id="content">
            <p>
                     **Content etc**
            </p>
        </div>
  1. <div id="content">
  2.             <p>
  3.                      **Content etc**
  4.             </p>
  5.         </div>

I'd like to have an Adsense/HTML block at the top right of the text/content in which the the text wraps around.

texttexthtmlhtml
texttexthtmlhtml
texttexthtmlhtml
texttexttexttext
texttexttexttext
texttexttexttext

Can this be done?

Thank you so much for your help and don't hesitate to ask for any help.

Louis
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 14th, 2008, 8:57 pm

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post October 16th, 2008, 7:48 am

I haven't ever done anything like that ... maybe something like the following could work like with images almost:
HTML:
Code: [ Select ]
<div id='content'>
<div id='adsense'>Some Ads</div>
Some content here.
</div>
  1. <div id='content'>
  2. <div id='adsense'>Some Ads</div>
  3. Some content here.
  4. </div>

CSS:
Code: [ Select ]
div#content{
width:980px;
}
div#adsense{
width:400px;
float:right;
}
  1. div#content{
  2. width:980px;
  3. }
  4. div#adsense{
  5. width:400px;
  6. float:right;
  7. }
Let's leave all our *plum* where it is and go live in the jungle ...
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post October 16th, 2008, 11:19 am

why not make 3 div's like so

texttexthtmlhtml
texttexthtmlhtml
texttexthtmlhtml
texttexttexttext
texttexttexttext

KEY:
Red part <div id="top">texttext</div>
Green part <div id="adsence">your google ads</div>
The Blue part <div id="fulltext">there rest of you text</div>

AND THEN YOU WOULD NEED TO WORK OUT THE CSS CODE, but the above one is probley more easy IF it works but use this way as a fall back cos this one will work even if it is a bit fiddly!
^__^
  • roulettered56
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Sep 26, 2008
  • Posts: 10
  • Status: Offline

Post October 16th, 2008, 11:41 am

Of course.. 3 parts ;)

Thank you guys I really appreciate it.

Louis
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post October 16th, 2008, 12:29 pm

The thing is with three parts, the text won't be allowed to be dynamic, and you'd have to make it static text otherwise how will you know how much text to pull out from the database because all letters aren't the same size
Let's leave all our *plum* where it is and go live in the jungle ...
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post October 17th, 2008, 2:51 am

What database? No one said anything about a one!
^__^
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post October 17th, 2008, 3:15 am

I know ... I am just thinking ahead ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • roulettered56
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Sep 26, 2008
  • Posts: 10
  • Status: Offline

Post October 17th, 2008, 4:26 pm

Hmm, I tried the first way but all that's showing is the text. The 3 part way is a bit complicated to simply wrap text around something.

I'm not saying this is an easy job But I'm sure it can be done.

Any solutions?

All the best
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post October 19th, 2008, 12:06 pm

Uhh...container div, text, float div in the container?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post October 19th, 2008, 1:24 pm

yeah like I showed in my first reply ... it does work ... I just tried it ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • roulettered56
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Sep 26, 2008
  • Posts: 10
  • Status: Offline

Post October 25th, 2008, 11:57 am

Would you be able to post the template example code showing it work please Rihteous?

Not that I don't beleive you it's just I want to see where I went wrong.

I'm viewing in IE.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post October 26th, 2008, 3:49 am

just a few posts up
Let's leave all our *plum* where it is and go live in the jungle ...
  • roulettered56
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Sep 26, 2008
  • Posts: 10
  • Status: Offline

Post October 26th, 2008, 4:25 am

OK guys I'm still looking for a work around as Righteous_trespasser's help did not show in IE for me. much appreciated though, thank you.

I pasted the code into a text file and saved as html to view.

Page 1 of 1

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 129 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.