How to float an element?

To float an element, such as image, into xhtml code.

Page 1 of 1

3 Replies - 868 Views - Last Post: 24 December 2008 - 02:24 PM

#9 bookworm619  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 9
  • Joined: 23-December 08

Re: How to float an element?

Posted 23 December 2008 - 11:12 PM

Hey. I did most of the work but I kept on struggling to understand how to float an image and text into a good website. I attached the text file if you guus are not getting this.
Any tips on the website (color, font or anything) will be helpful too.

<html>
<head>
	<TITLE>Favorite Sites</TITLE>
</head>
<body style="background-color: black; background-image: url(images/bluebackground.jpg)">
<h1 style="color: white; text-align: center">Favorite Sites</h1>
<p style="text-align: center; color: white">
<a href="#social">Social Utility</a>  <a href="#entertainment">Entertainment</a>  <a href="#Books">Books</a>  <a href="#movies">Movies</a>  <a href="#games">Games</a> 

</p>
<h2 id style="color: white;="social">Social Utility</h2>
<ul style="color: white;>
	<li><a href="http://www.facebook.com/"><img src="Images/friends.jpg" alt="friends" width="120" height="120"/></a><b> - Facebook is a social networking site that makes it easy for you to keep in touch with friends, family and employees. It is great way to meet old friends and keep up on what they are doing. People use Facebook to keep up with friends, upload photos and share information. It is similar to Myspace but it has more features.</b></li><br />
	<br />
	<li><a href="http://www.oovoo.com/">Oovoo</a><b> - Oovoo connect people by its high-quality video and audio online. It allow six people to talk or sign face-to-face with each other at the same time. ooVoo offers video messaging to an email or another ooVoo account, text messaging, and file sharing. It can be only use for temporary as a demo. Until that is, It is great tool to chat.</b></li>
</ul>
<hr style="color: white" />

<h2 id style="color: white;="entertainment">Entertainment</h2>
<ul style="color: white;>
	<li><a href="http://www.collegehumor.com/"><img src="images/laugh.jpg" alt="Humor" width="120" height="120" /></a><b> - CollegeHumor is the best humor site on the internet. It is included funny videos, pictures, and jokes. That site allow users to submit items into the website under one condition: it has to be original. The site is specialized into college audience. It has features content that would appeal to the universities and colleges.</b>
</li><br />
	<b />
	<li><a href="http://www.youtube.com/">YouTube</a><b> - Youtube is a video sharing website where users can upload, view and share video clips.It can include jokes. </b> </ul>
<hr style="color: white" />
<h2 id style="color: white;="Books">Books</h2>

<ul style="color: white;>
	<li><a href="http://www.bryerpatch.com/"><img src="/content/enforced/162572-080525102.20072/images/tnbabyquilt01.jpg" /></a> - Sentence 1. Sentence 2. Sentence 3. Sentence 4. Sentence 5.</li><br />
	<br />
	<li><a href="http://www.padutch.com/quilts.shtml">Amish Quilts</a> - Sentence 1. Sentence 2. Sentence 3. Sentence 4. Sentence 5.</li>
</ul>
<hr style="color: white" />
<h2 id style="color: white;="movies">Movies</h2>
<ul style="color: white;>

	<li><a href="http://www.hulu.com//">The Ten Commandments</a> - Sentence 1. Sentence 2. Sentence 3. Sentence 4. Sentence 5.</li><br />
	<br />
	<li><a href="http://www.imdb.com/title/tt0399862/"><img src="/content/enforced/162572-080525102.20072/images/tnspear.jpg" /></a> - Sentence 1. Sentence 2. Sentence 3. Sentence 4. Sentence 5.</li>
</ul>
<hr style="color: white" />
<h2 id ="games">Games</h2>
<ul style="color: white;>
	<li><a href="http://afro-ninja.com/vflash.php?id=50" target="window"><img src="Images/territory.jpg" alt="territory" width="120" height="120" /></a><b> -  Territory War Online is strategy-based game where two teams of players against each other with various kinds of weapons. In turn-based fashion, each turn will enable a player from your team to move or use weapon. The concept is to beat the opposing team by using your own strategy. This game play online with people all over in United States.</b></li><br />

	<br />
	<li><a href="http://www.chess.com/play/" target="window"><img src="Images/chess.jpg" alt="chess" width="120" height="120"/></a><b> - Chess is a online board game for two players. It start with each beginning with 16 pieces of six kinds. Each pieces that are moved in different ways such as diagonally, straight or even one square at a time. The objective of game is to checkmate the opposing king.</b></li>
</ul>
<hr style="color: white" />
<p style="text-align: center;color: white>
<a href="/d2l/lms/content/manage/modify/index.html">Home Page</a>  <a href="/d2l/lms/content/manage/modify/WebDevI.html">Web Development I Page</a>  <a href="/d2l/lms/content/manage/modify/list.html">List Page</a> 

</p>
</body>
</html>


Attached File(s)

  • Attached File  sites.txt (4.36K)
    Number of downloads: 61

Was This Post Helpful? 1

#10 ~NJ  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 52
  • Joined: 22-December 08

Re: How to float an element?

Posted 23 December 2008 - 11:36 PM

I presume you're trying to float the images to the left of the paragraphs?
If so, the following has been edited to accomodate your needs. Basically you can allocate a float alignment (either left or right) with some simple css:
/* Can also substitute "right" instead of "left" */
float: left;



A huge tip to save you time and make your projects more professional is to look into external CSS files. It's extremely bad practice to use inline CSS in ANY circumstance. That said, I've included the CSS inline merely for convenience and I still highly recommend you move it to a CSS file.

<html>
<head>
	<TITLE>Favorite Sites</TITLE>
</head>
<body style="background-color: black; background-image: url(images/bluebackground.jpg)">
<h1 style="color: white; text-align: center">Favorite Sites</h1>
<p style="text-align: center; color: white">
<a href="#social">Social Utility</a> &middot; <a href="#entertainment">Entertainment</a> &middot; <a href="#Books">Books</a> &middot; <a href="#movies">Movies</a> &middot; <a href="#games">Games</a> 

</p>
<h2 id style="color: white;="social">Social Utility</h2>
<ul style="color: white;>
	<li><a href="http://www.facebook.com/"><img src="Images/friends.jpg" alt="friends" width="120" height="120" style="float: left; margin-right: 20px;" /></a><b> - Facebook is a social networking site that makes it easy for you to keep in touch with friends, family and employees. It is great way to meet old friends and keep up on what they are doing. People use Facebook to keep up with friends, upload photos and share information. It is similar to Myspace but it has more features.</b></li><br />
	<br />
	<li><a href="http://www.oovoo.com/">Oovoo</a><b> - Oovoo connect people by its high-quality video and audio online. It allow six people to talk or sign face-to-face with each other at the same time. ooVoo offers video messaging to an email or another ooVoo account, text messaging, and file sharing. It can be only use for temporary as a demo. Until that is, It is great tool to chat.</b></li>
</ul>
<hr style="color: white" />

<h2 id style="color: white;="entertainment">Entertainment</h2>
<ul style="color: white;>
	<li><a href="http://www.collegehumor.com/"><img src="images/laugh.jpg" alt="Humor" width="120" height="120" style="float: left; margin-right: 20px;" /></a><b> - CollegeHumor is the best humor site on the internet. It is included funny videos, pictures, and jokes. That site allow users to submit items into the website under one condition: it has to be original. The site is specialized into college audience. It has features content that would appeal to the universities and colleges.</b>
</li><br />
	<b />
	<li><a href="http://www.youtube.com/">YouTube</a><b> - Youtube is a video sharing website where users can upload, view and share video clips.It can include jokes. </b> </ul>
<hr style="color: white" />
<h2 id style="color: white;="Books">Books</h2>

<ul style="color: white;>
	<li><a href="http://www.bryerpatch.com/"><img src="/content/enforced/162572-080525102.20072/images/tnbabyquilt01.jpg" style="float: left; margin-right: 20px;" /></a> - Sentence 1. Sentence 2. Sentence 3. Sentence 4. Sentence 5.</li><br />
	<br />
	<li><a href="http://www.padutch.com/quilts.shtml">Amish Quilts</a> - Sentence 1. Sentence 2. Sentence 3. Sentence 4. Sentence 5.</li>
</ul>
<hr style="color: white" />
<h2 id style="color: white;="movies">Movies</h2>
<ul style="color: white;>

	<li><a href="http://www.hulu.com//">The Ten Commandments</a> - Sentence 1. Sentence 2. Sentence 3. Sentence 4. Sentence 5.</li><br />
	<br />
	<li><a href="http://www.imdb.com/title/tt0399862/"><img src="/content/enforced/162572-080525102.20072/images/tnspear.jpg" style="float: left; margin-right: 20px;" /></a> - Sentence 1. Sentence 2. Sentence 3. Sentence 4. Sentence 5.</li>
</ul>
<hr style="color: white" />
<h2 id ="games">Games</h2>
<ul style="color: white;>
	<li><a href="http://afro-ninja.com/vflash.php?id=50" target="window"><img src="Images/territory.jpg" alt="territory" width="120" height="120" style="float: left; margin-right: 20px;" /></a><b> -  Territory War Online is strategy-based game where two teams of players against each other with various kinds of weapons. In turn-based fashion, each turn will enable a player from your team to move or use weapon. The concept is to beat the opposing team by using your own strategy. This game play online with people all over in United States.</b></li><br />

	<br />
	<li><a href="http://www.chess.com/play/" target="window"><img src="Images/chess.jpg" alt="chess" width="120" height="120" style="float: left; margin-right: 20px;" /></a><b> - Chess is a online board game for two players. It start with each beginning with 16 pieces of six kinds. Each pieces that are moved in different ways such as diagonally, straight or even one square at a time. The objective of game is to checkmate the opposing king.</b></li>
</ul>
<hr style="color: white" />
<p style="text-align: center;color: white>
<a href="/d2l/lms/content/manage/modify/index.html">Home Page</a> &middot; <a href="/d2l/lms/content/manage/modify/WebDevI.html">Web Development I Page</a> &middot; <a href="/d2l/lms/content/manage/modify/list.html">List Page</a> 

</p>
</body>
</html>



You'll need to do some retouching to the padding and margin values to some of the elements but other than that, that's the gist of it. If you want an element to clear (that is to force it to display as a block element instead of inline to the floated element) a floated element, all you have to do is:
/* "both" can be substituted for either "left" or "right" to clear specific floats */
clear: both;


This post has been edited by ~NJ: 23 December 2008 - 11:37 PM

Was This Post Helpful? 1
  • +
  • -

#11 bookworm619  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 9
  • Joined: 23-December 08

Re: How to float an element?

Posted 24 December 2008 - 12:57 PM

I deeply thank you, ~NJ for helping me to float an element but you are right. BUT[size=3], I also need help to do some retouching to the padding and margin values to some of the elements.


<html>
<head>
	<TITLE>Favorite Sites</TITLE>
</head>
<body style="background-color: black; background-image: url

(images/bluebackground.jpg)">
<h1 style="color: white; text-align: center">Favorite Sites</h1>
<p style="text-align: center; color: white">
<a href="#social">Social Utility</a> &middot; <a 

href="#entertainment">Entertainment</a> &middot; <a 

href="#Books">Books</a> &middot; <a href="#movies">Movies</a> &middot; 

<a href="#games">Games</a> 

</p>
<h2 id style="color: white;="social">Social Utility</h2>
<ul style="color: white;>
	<li><a href="http://www.facebook.com/"><img src="Images/friends.jpg" 

alt="friends" width="120" height="120" style="float: left; margin-right: 

20px;" /></a><b> - Facebook is a social networking site that makes it 

easy for you to keep in touch with friends, family and employees. It is 

great way to meet old friends and keep up on what they are doing. People 

use Facebook to keep up with friends, upload photos and share 

information. It is similar to Myspace but it has more 

features.</b></li><br />
	<br />
	<li><a href="http://www.oovoo.com/">Oovoo</a><b> - Oovoo connect 

people by its high-quality video and audio online. It allow six people 

to talk or sign face-to-face with each other at the same time. ooVoo 

offers video messaging to an email or another ooVoo account, text 

messaging, and file sharing. It can be only use for temporary as a demo. 

Until that is, It is great tool to chat.</b></li>
</ul>
<hr style="color: white" />

<h2 id style="color: white;="entertainment">Entertainment</h2>
<ul style="color: white;>
	<li><a href="http://www.collegehumor.com/"><img 

src="images/laugh.jpg" alt="Humor" width="120" height="120" 

style="float: left; margin-right: 20px;" /></a><b> - CollegeHumor is the 

best humor site on the internet. It is included funny videos, pictures, 

and jokes. That site allow users to submit items into the website under 

one condition: it has to be original. The site is specialized into 

college audience. It has features content that would appeal to the 

universities and colleges.</b>
</li><br />
	<b />
	<li><a href="http://www.youtube.com/">YouTube</a><b> - Youtube is a 

video sharing website where users can upload, view and share video 

clips.It can include jokes. </b> </ul>
<hr style="color: white" />
<h2 id style="color: white;="Books">Books</h2>

<ul style="color: white;>
	<li><a href="http://www.bryerpatch.com/"><img 

src="/content/enforced/162572-080525102.20072/images/tnbabyquilt01.jpg" 

style="float: left; margin-right: 20px;" /></a> - Sentence 1. Sentence 

2. Sentence 3. Sentence 4. Sentence 5.</li><br />
	<br />
	<li><a href="http://www.padutch.com/quilts.shtml">Amish Quilts</a> - 

Sentence 1. Sentence 2. Sentence 3. Sentence 4. Sentence 5.</li>
</ul>
<hr style="color: white" />
<h2 id style="color: white;="movies">Movies</h2>
<ul style="color: white;>

	<li><a href="http://www.hulu.com//">The Ten Commandments</a> - 

Sentence 1. Sentence 2. Sentence 3. Sentence 4. Sentence 5.</li><br />
	<br />
	<li><a href="http://www.imdb.com/title/tt0399862/"><img 

src="/content/enforced/162572-080525102.20072/images/tnspear.jpg" 

style="float: left; margin-right: 20px;" /></a> - Sentence 1. Sentence 

2. Sentence 3. Sentence 4. Sentence 5.</li>
</ul>
<hr style="color: white" />
<h2 id ="games">Games</h2>
<ul style="color: white;>
	<li><a href="http://afro-ninja.com/vflash.php?id=50" 

target="window"><img src="Images/territory.jpg" alt="territory" 

width="120" height="120" style="float: left; margin-right: 20px;" 

/></a><b> -  Territory War Online is strategy-based game where two teams 

of players against each other with various kinds of weapons. In turn-

based fashion, each turn will enable a player from your team to move or 

use weapon. The concept is to beat the opposing team by using your own 

strategy. This game play online with people all over in United 

States.</b></li><br />

	<br />
	<br />
	<br />

<li><a href="http://www.chess.com/play/" target="window"><img 

src="Images/chess.jpg" alt="chess" width="120" height="120" 

style="float: left; margin-right: 20px;" /></a><b> - Chess is a online 

board game for two players. It start with each beginning with 16 pieces 

of six kinds. Each pieces that are moved in different ways such as 

diagonally, straight or even one square at a time. The objective of game 

is to checkmate the opposing king.</b></li>
</ul>
<hr style="color: white" />
<p style="text-align: center;color: white>
<a href="/d2l/lms/content/manage/modify/index.html">Home Page</a> 

&middot; <a href="/d2l/lms/content/manage/modify/WebDevI.html">Web 

Development I Page</a> &middot; <a 

href="/d2l/lms/content/manage/modify/list.html">List Page</a> 

</p>
</body>
</html>



Was This Post Helpful? 0
  • +
  • -

#12 ~NJ  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 52
  • Joined: 22-December 08

Re: How to float an element?

Posted 24 December 2008 - 02:24 PM

Simply apply a clear:both to all <h2> tags so that they clear past the floated text that's above them. I've also just noticed that your code isn't exactly W3C compliant. You've got text floating around in the middle of unordered lists which is bad practice if they're not in a list item. You've also got to watch your use of parameters. Going through, I noticed you had things like:
<h2 id style="color: white;="Games">Games</h2>


Which is obviously wrong and it was in almost every H2 tag, it looked like you must have copy and pasted them.

You also had quite a few unclosed quotes ie:
<ul style="color: white><li>...


Again which is obviously wrong, so I fixed that up too.

Here is a revised version with some clearing in place:
<html>
<head>
	<TITLE>Favorite Sites</TITLE>
</head>
<body style="background-color: black; background-image: url

(images/bluebackground.jpg)">
<h1 style="color: white; text-align: center">Favorite Sites</h1>
<p style="text-align: center; color: white">
<a href="#social">Social Utility</a> &middot; <a

href="#entertainment">Entertainment</a> &middot; <a

href="#Books">Books</a> &middot; <a href="#movies">Movies</a> &middot;

<a href="#games">Games</a>

</p>
<h2 id="social" style="color: white; clear:both;" >Social Utility</h2>
<ul style="color: white;">
	<li><a href="http://www.facebook.com/"><img src="Images/friends.jpg"

alt="friends" width="120" height="120" style="float: left; margin-right:

20px;" /></a><b> - Facebook is a social networking site that makes it

easy for you to keep in touch with friends, family and employees. It is

great way to meet old friends and keep up on what they are doing. People

use Facebook to keep up with friends, upload photos and share

information. It is similar to Myspace but it has more

features.</b></li><br />
	<br />
	<li><a href="http://www.oovoo.com/">Oovoo</a><b> - Oovoo connect

people by its high-quality video and audio online. It allow six people

to talk or sign face-to-face with each other at the same time. ooVoo

offers video messaging to an email or another ooVoo account, text

messaging, and file sharing. It can be only use for temporary as a demo.

Until that is, It is great tool to chat.</b></li>
</ul>
<hr style="color: white; clear: both;" />

<h2 id="entertainment" style="color: white; clear:both;">Entertainment</h2>
<ul style="color: white;">
	<li><a href="http://www.collegehumor.com/"><img

src="images/laugh.jpg" alt="Humor" width="120" height="120"

style="float: left; margin-right: 20px;" /></a><b> - CollegeHumor is the

best humor site on the internet. It is included funny videos, pictures,

and jokes. That site allow users to submit items into the website under

one condition: it has to be original. The site is specialized into

college audience. It has features content that would appeal to the

universities and colleges.</b>
</li><br />
	<b />
	<li><a href="http://www.youtube.com/">YouTube</a><b> - Youtube is a

video sharing website where users can upload, view and share video

clips.It can include jokes. </b> </ul>
<hr style="color: white; clear: both;" />
<h2 id="Books" style="color: white; clear:both;">Books</h2>

<ul style="color: white;">
	<li><a href="http://www.bryerpatch.com/"><img

src="/content/enforced/162572-080525102.20072/images/tnbabyquilt01.jpg"

style="float: left; margin-right: 20px;" /></a> - Sentence 1. Sentence

2. Sentence 3. Sentence 4. Sentence 5.</li><br />
	<br />
	<li><a href="http://www.padutch.com/quilts.shtml">Amish Quilts</a> -

Sentence 1. Sentence 2. Sentence 3. Sentence 4. Sentence 5.</li>
</ul>
<hr style="color: white; clear: both;" />
<h2 id="movies" style="color: white; clear:both;">Movies</h2>
<ul style="color: white;">

	<li><a href="http://www.hulu.com//">The Ten Commandments</a> -

Sentence 1. Sentence 2. Sentence 3. Sentence 4. Sentence 5.</li><br />
	<br />
	<li><a href="http://www.imdb.com/title/tt0399862/"><img

src="/content/enforced/162572-080525102.20072/images/tnspear.jpg"

style="float: left; margin-right: 20px;" /></a> - Sentence 1. Sentence

2. Sentence 3. Sentence 4. Sentence 5.</li>
</ul>
<hr style="color: white; clear: both;" />
<h2 id ="games" style="clear: both; color: #FFF;">Games</h2>
<ul style="color: white;">
	<li><a href="http://afro-ninja.com/vflash.php?id=50"

target="window"><img src="Images/territory.jpg" alt="territory"

width="120" height="120" style="float: left; margin-right: 20px;"

/></a><b> -  Territory War Online is strategy-based game where two teams

of players against each other with various kinds of weapons. In turn-

based fashion, each turn will enable a player from your team to move or

use weapon. The concept is to beat the opposing team by using your own

strategy. This game play online with people all over in United

States.</b></li><br />

	<br />
	<br />
	<br />

<li style="clear: both;"><a href="http://www.chess.com/play/" target="window"><img

src="Images/chess.jpg" alt="chess" width="120" height="120"

style="float: left; margin-right: 20px;" /></a><b> - Chess is a online

board game for two players. It start with each beginning with 16 pieces

of six kinds. Each pieces that are moved in different ways such as

diagonally, straight or even one square at a time. The objective of game

is to checkmate the opposing king.</b></li>
</ul>
<hr style="color: white; clear: both;" />
<p style="text-align: center;color: white>
<a href="/d2l/lms/content/manage/modify/index.html">Home Page</a>

&middot; <a href="/d2l/lms/content/manage/modify/WebDevI.html">Web

Development I Page</a> &middot; <a

href="/d2l/lms/content/manage/modify/list.html">List Page</a>

</p>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1