squemish

Author Topic: Images and Text  (Read 1783 times)

Misty0625

  • Guest
Images and Text
« on: October 06, 2011, 03:26:45 pm »
Hello!

Just a quick question. This is something I can do when creating a website through notepad, however, Dreamweaver is something different for me. What I am trying to do is get my text centered on the right side of my page next to the image. How do I get this to work?

I am attaching the html page and the css page for you o look at. Also, eventually I will need help stylizing that navigation. Right now the only requirements to this assignment are to just put placeholder for the homepage. I've got them all except that text to the side!

Please let me know if you cannot review the documents.

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: Images and Text
« Reply #1 on: October 06, 2011, 03:50:45 pm »
Is this the look you are going for?

http://jsbin.com/irirot/3/edit#preview

If you click the code button at the top left you can see what the CSS and HTML looks like. You didn't upload your image so I just used one I had as a placeholder.

I added two new styles:

#text {
  float:right;
  width:168px;
  text-align:center;
}
   
#leftImage {
  float:left;
}

And also added a clear to the footer style:

#footer {

    width:100%;
    text-align:center;
    font-size:10px;
    background-color: #CC0000;
    color: #CCCCCC;
    clear:both;

}

The HTML has been modified a bit too. A new <span> tag was added and the text was moved into it.

<div id = "main">
  <img src="http://er5325.aisites.com/imd312_scripts/week7/images/image2.jpg" width="600" height="400" alt="image" longdesc="ART MUSEUM GROUNDS 6-09 4.JPG" id="leftImage" />
  <span id="text">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
</div> <!-- ends main body -->
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

Misty0625

  • Guest
Re: Images and Text
« Reply #2 on: October 07, 2011, 06:50:00 am »
Yes! That is exactly what I was looking for. So I guess using Dreamweaver is still just like using Notepad then. It's what I would have done there, but dreamweaver has the option to just insert images and then I didn't know how to make the text float to the side of it.

Thanks for your help!

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: Images and Text
« Reply #3 on: October 07, 2011, 07:33:58 am »
Whatever you can do in Notepad you can do in Dreamweaver. Just click the "Code" button to go into the code view. You can hand write all of the HTML/CSS code through there, just like you have done in Notepad. I personally prefer to do most of my work through the Code view in Dreamweaver. But I do like to use Dreamweaver for the file management options...uploading files to my site. The code view is also much better than notepad because it has line numbers, color highlighting and it can point out common syntax errors.
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu