3 Replies - 1088 Views - Last Post: 04 November 2015 - 12:42 PM

#1 Fish Driver   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 21-October 15

Alining text and images in HTML/CSS

Posted 04 November 2015 - 12:01 PM

So, I'm making a website but I'm having trouble getting the images and text to line up properly.
Here's what it looks like now:

Posted Image

And this is what it's supposed to look like (hooray for clumsy 10 second editing job in Paint):

Posted Image

Here's my HTML code:

<h2>Nausicaa of the Valley of the Wind</h2>
			<p><a href="http://www.imdb.com/title/tt0087544/">
			<p><img src="Nausicaa.jpg" alt="Nausicaa of the Valley of the Wind" width="300" height="400" align="left" hspace="20">
			</a>
			 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nibh nisl. Praesent id fringilla augue.
			 Sed faucibus tristique orci, a dictum justo rhoncus in. Morbi id nulla non augue feugiat hendrerit.
			 Nam at sapien volutpat, rutrum tortor eget, pretium augue. Fusce mattis, enim vel condimentum venenatis, 
			 nibh ex laoreet justo, non vulputate velit velit id tellus. Sed condimentum risus ac risus cursus scelerisque. 
			 Aenean orci odio, rhoncus non risus non, rhoncus commodo ex. Nulla facilisi. In hac habitasse platea dictumst. 
			 Sed cursus sagittis aliquet. Sed id elit at turpis facilisis venenatis.</p>
			 
			 <p>Directed by Hayao Miyazaki. 1984. MPAA rating: PG.</p>
			
			<br></br>
			
			
<h2>Castle in the Sky</h2>
			<a href="http://www.imdb.com/title/tt0092067/">
			<p><img src="Castle in the Sky.jpg" alt="Laputa" width="300" height="400" align="left" hspace="20">
			</a>
			 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nibh nisl. Praesent id fringilla augue.
			 Sed faucibus tristique orci, a dictum justo rhoncus in. Morbi id nulla non augue feugiat hendrerit.
			 Nam at sapien volutpat, rutrum tortor eget, pretium augue. Fusce mattis, enim vel condimentum venenatis, 
			 nibh ex laoreet justo, non vulputate velit velit id tellus. Sed condimentum risus ac risus cursus scelerisque. 
			 Aenean orci odio, rhoncus non risus non, rhoncus commodo ex. Nulla facilisi. In hac habitasse platea dictumst. 
			 Sed cursus sagittis aliquet. Sed id elit at turpis facilisis venenatis.</p>
			
			 <p>Directed by Hayao Miyazaki. 1986. MPAA rating: PG.</p>


and my CSS code:

section {
	background-color: #008;		
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFC7C;	
	width: 70%;
	margin: auto;
	padding-left: 15px;
	padding-right: 15px;
}


Is This A Good Question/Topic? 0
  • +

Replies To: Alining text and images in HTML/CSS

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15800
  • View blog
  • Posts: 63,301
  • Joined: 12-June 08

Re: Alining text and images in HTML/CSS

Posted 04 November 2015 - 12:25 PM

Oh so much main in there.. why are you starting <p> in the middle of a href? Eesh.

Second - divs are you friend.
Third - give your divs a class in the CSS to apply consistent look to.
Fourth - you can look at your HTML in a browser's "dev tools" (f12 on the ol' IE).. and you can see where sections end and begin. After corralling your code in divs you'll notice the images over flow the div tags. A quick 'overflow auto' in the CSS clears that up.

    <style type="text/css">
        .section  /* <---- class name */
        {
            background-color: #008;
            font-family: Arial, Helvetica, sans-serif;
            color: #FFFC7C;
            width: 70%;
            margin: auto;
            padding-left: 15px;
            padding-right: 15px;
            overflow:auto; /* <--- important*/
        }
    </style>


    <div class="section">  <!-- <---- divs with a class!-->
        <h2> Nausicaa of the Valley of the Wind</h2> <p>
            <a href="http://www.imdb.com/title/tt0087544/">

                <img src="Nausicaa.jpg" alt="Nausicaa of the Valley of the Wind" width="300" height="400" align="left" hspace="20">
            </a>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nibh nisl. Praesent id fringilla augue. Sed faucibus tristique orci, a dictum justo rhoncus in. Morbi id nulla non augue feugiat hendrerit. Nam at sapien volutpat, rutrum tortor eget, pretium augue. Fusce mattis, enim vel condimentum venenatis,
            nibh ex laoreet justo, non vulputate velit velit id tellus. Sed condimentum risus ac risus cursus scelerisque. Aenean orci odio, rhoncus non risus non, rhoncus commodo ex. Nulla facilisi. In hac habitasse platea dictumst. Sed cursus sagittis aliquet. Sed id elit at turpis facilisis venenatis.
        </p>
        <p> Directed by Hayao Miyazaki. 1984. MPAA rating: PG.</p>
    </div>
    <br /><!--<---- single line breaks-->

    <div class="section"><!--<---- divs with a class!-->
        <h2> Castle in the Sky</h2> <a href="http://www.imdb.com/title/tt0092067/"> <img src="Castle in the Sky.jpg" alt="Laputa" width="300" height="400" align="left" hspace="20"> </a>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nibh nisl. Praesent id fringilla augue. Sed faucibus tristique orci, a dictum justo rhoncus in. Morbi id nulla non augue feugiat hendrerit. Nam at sapien volutpat, rutrum tortor eget, pretium augue. Fusce mattis, enim vel condimentum venenatis,
            nibh ex laoreet justo, non vulputate velit velit id tellus. Sed condimentum risus ac risus cursus scelerisque. Aenean orci odio, rhoncus non risus non, rhoncus commodo ex. Nulla facilisi. In hac habitasse platea dictumst. Sed cursus sagittis aliquet. Sed id elit at turpis facilisis venenatis.
        </p> <p> Directed by Hayao Miyazaki. 1986. MPAA rating: PG.</p>
    </div>

Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Alining text and images in HTML/CSS

Posted 04 November 2015 - 12:37 PM

Just to note that section is a new HTML5 element.
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15800
  • View blog
  • Posts: 63,301
  • Joined: 12-June 08

Re: Alining text and images in HTML/CSS

Posted 04 November 2015 - 12:42 PM

@andrew - I flipped a coin if the OP was fully aware of that or not.. flopped on 'probably not'.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1