Welcome to Dream.In.Code
Become an Expert!

Join 149,520 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,402 people online right now. Registration is fast and FREE... Join Now!




Trouble with Aligning Images and Text

 
Reply to this topicStart new topic

Trouble with Aligning Images and Text

Israel
25 Jun, 2007 - 09:16 PM
Post #1

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 626


Dream Kudos: 175
My Contributions
I must have forgotten everything from Web Design class... I'm having trouble just aligning images next to text. I'm trying to get the text to the right of the images, and not below it.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
  <title>dic/help;)</title>
<style type="text/css">
A.txt:link  {color: #E6C78E; text-decoration: underline}
A.txt:visited {cursor: crosshair; color: #E6C78E; text-decoration: underline}
A.txt:hover {cursor: crosshair; color: #E6C78E; text-decoration: underline}
.span{text-decoration:underline;}
.span2{text-align: left;}
.span3{color:#999999;}
.span4{font-size:4; color:#E6E6FA;}
    h1{font-family:Times New Roman; font-weight:bold; color:#E6C78E;}
div.one{font-family:Times New Roman; font-weight:bold; color:#333333;}
p.one{text-align:center;
       font-family:Technical;
       font-size: 1.1em;
       color: #E6C78E;
       background-image:url("./body_back.gif");}
A.one:link {color:#999999; text-decoration: underline;}
A.one:visited {cursor: crosshair; color:#999999; text-decoration:underline;}
A.one:hover {cursor: crosshair; color:#999999; text-decoration:underline;}
img{border:0;}
</style>
</head>

<body>
<center>
<div align="center">
<img src="./logo3.PNG" alt="The Inn"></div>
<p class="one">106 South Main Somewhere, GA<br />
<br />
e-mail ~ <a class="txt" href="mailto:Someone@aol.com">frontdesk@theinn.com</a></p>

<p>
<h1>Welcome to The Inn!</h1>  
<div class="one">
     <a href="./Guest2.html"><img src="./top3.GIF" ></a><br />
     <a href="./Catering2.html"><img src="./middle2.GIF" ></a><br />
     <a href="./Conferences2.html"><img src="./middleCon.GIF" ></a><br />
     <a href="./RecentEvents2.html"><img src="./middleEvent.gif"></a><br />
     <a href="./Map2.html"><img src="./middleMap.GIF" ></a><br />
         <a href="./Recipes2.html"><img src="./middleRec.GIF" ></a><br />
     <a href="./History2.html"><img src="./middleHis.GIF" ></a><br />
     <a href="./Gardens2.html"><img src="./middleGar.GIF" ></a><br />
     <a href="./InnNote2.html"><img src="./middleNot.GIF" ></a><br />
     <a href="./Pets.html"><img src="./middlePet.GIF" ></a><br />
     <a href="./forthearts.org/"><img src="./middleArt.GIF" ></a><br />
     <a href="http://www.visit-somewhere.com"><img src="./bottom.GIF" ></a><br />
<br />It only takes two
words to describe the kind of visit you'll enjoy here-simply elegant.<br />

<br />This country inn is a charming combination of two turn-of-the
century houses, both of which are on the National Register of Historic Places. The two houses stand together on South Main Street in
our historic district,both serving as a symbol of the prosperity enjoyed by the
founders of this old cotton community.<br />

<br />With seventeen rooms, the inn has all the comforts of home.
Private baths, TV's, telephones, coffee makers, and just about any other modern convenience are standard with each room as well as a <span>full
breakfast</span> ~ and just about the finest breakfast this side of the Mississippi.
<br />

<br />Make yourself at home and enjoy all aspects of the inn. The gardens are beautiful year-round, or
have a glass of wine on our wrap-around porch.  You can also enjoy a traditional home cooked southern buffet open Sundays at noon. Or
try our famous dinners nightly Thursday through Saturday, from 6pm to 9pm. Lunches are also available Wednesday through Friday 11:30 to <span id=span2>2pm.</span>
<br />
</div>
     </body>
</html>

User is offlineProfile CardPM
+Quote Post

DilutedImage
RE: Trouble With Aligning Images And Text
26 Jun, 2007 - 05:01 PM
Post #2

D.I.C Addict
Group Icon

Joined: 20 Nov, 2006
Posts: 643



Thanked: 6 times
Dream Kudos: 25
My Contributions
Which image(s) are you wanting on the left? ... Perhaps a "float:left" would work? That would cause the text to begin at the top-right of the image, and then wrap below it. If you want the text to continue down, without ever going beneath the image, then you'll likely want to split the image and the text into separate DIV tags. In which case, you'd use a "float:left" on the DIV containing the image(s).

p.s. Some alt tags would be nice, as would some width/height values, since we don't have those images to test with. wink2.gif

This post has been edited by DilutedImage: 26 Jun, 2007 - 05:03 PM
User is offlineProfile CardPM
+Quote Post

Israel
RE: Trouble With Aligning Images And Text
26 Jun, 2007 - 09:42 PM
Post #3

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 626


Dream Kudos: 175
My Contributions
I just merged all those images into one. They were supposed to be touching each other anyway so I found it much easier to work with that way. Now my only problem is trying to align the text over it. I've tried this:
CODE

<html>
<head>
   <title>Some Title</title>
<style>
div.one{text-align:center;
            font-family:Times New Roman;
            font-weight:bold;
            color:#333333;}
ul{float: left;}
img{border:0;}
</style>
</head>

<body>
<p>
<div class="one">
<h1>Welcome to The Inn!</h1></p>  

<p><img src="./menu.png" align="left">
   <ul>  
     <li><a href="./Guest2.html">Guest Rooms</a></li>
     <li><a href="./Catering2.html">Catering</a></li>
     <li><a href="./Conferences2.html">Conferences</a></li>
     <li><a href="./RecentEvents2.html">Events</a></li>
     <li><a href="./Map2.html">Map</a></li>
     <li><a href="./Recipes2.html">Recipes</a></li>
     <li><a href="./History2.html">History</a></li>
     <li><a href="./Gardens2.html">Garden</a></li>
     <li><a href="./InnNote2.html">Notables</a></li>
     <li><a href="./Pets.html">Pet Rules</a></li>
     <li><a href="./forthearts.org/">The Arts Center</a></li>
     <li><a href="http://www.visit-somewhere.com">Our City</a></li>
   </ul>

<p>

I was going to add the alt tags after I got things lined up right. I don't know the exact width and height of the image but I took 12 of the image I attached with this and just stacked them on top of each other.

This post has been edited by Israel: 26 Jun, 2007 - 10:35 PM


Attached image(s)
Attached Image
User is offlineProfile CardPM
+Quote Post

ahmad_511
RE: Trouble With Aligning Images And Text
27 Jun, 2007 - 07:12 AM
Post #4

D.I.C Regular
Group Icon

Joined: 28 Apr, 2007
Posts: 351



Thanked: 8 times
Dream Kudos: 400
My Contributions
Try tp put images in cell(s) of an non-borderedtable
Then put the text into an other cell the you want to.
User is offlineProfile CardPM
+Quote Post

Israel
RE: Trouble With Aligning Images And Text
27 Jun, 2007 - 09:30 PM
Post #5

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 626


Dream Kudos: 175
My Contributions
Yeah, I actually thought of that right before I went to bed last night. It's working great now. Thanks for the encouragement!
User is offlineProfile CardPM
+Quote Post

ahmad_511
RE: Trouble With Aligning Images And Text
27 Jun, 2007 - 09:45 PM
Post #6

D.I.C Regular
Group Icon

Joined: 28 Apr, 2007
Posts: 351



Thanked: 8 times
Dream Kudos: 400
My Contributions
I knew it
Some times my brain stop working for hours then when I just about to sleep I realize how stupid I’ve been.
So it’s good that works after all

User is offlineProfile CardPM
+Quote Post

DilutedImage
RE: Trouble With Aligning Images And Text
27 Jun, 2007 - 11:26 PM
Post #7

D.I.C Addict
Group Icon

Joined: 20 Nov, 2006
Posts: 643



Thanked: 6 times
Dream Kudos: 25
My Contributions
If you're just looking for a 'quick & dirty' solution, then tables will certainly do that. They're really not meant to be used for that though. If you're interested in learning the 'proper' way of doing that, then this article might be of interest to you:

Table Vs. CSS - A Fight to the Death


NOTE: I'm not trying to discourage a solution, but rather share another option. There are many situations where the 'quick & dirty' solution is the logical choice for the project. Not to mention, projects are often restricted by their delivery medium.


User is offlineProfile CardPM
+Quote Post

ahmad_511
RE: Trouble With Aligning Images And Text
28 Jun, 2007 - 08:28 PM
Post #8

D.I.C Regular
Group Icon

Joined: 28 Apr, 2007
Posts: 351



Thanked: 8 times
Dream Kudos: 400
My Contributions
Of course .CSS is good but some times tables are good enough.

SitePoint.com is awesome,two month ago I have downloaded two css tutorial and one dhtml
They have ability to teach you any thing in a short time

That’s what I like about dreamincode members, every buddy loves to share their experience

Thanks for sharing

Regards
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/7/09 08:21PM

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month