Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Help please.

Chaz889
in Frontend

Featured Replies

Hey, well I'm new to HTML and all this web design stuff.

 

I have coded a website, it looks quite good for a noob I think.

 

IMAGE:

webv.png

 

Ok, now I want to add text, in the green area, under the header and almost wrap around the image but not above it.

 

Could anyone help me do this?

 

code:

 

 

 

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>JP Gardening Service</title>
	<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
	<link href="index.css" rel="stylesheet" type="text/css">
</head>

<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">
		<!-- DO NOT EDIT, Centers WHOLE website.-->
		<div align="center">
		<!-- DO NOT EDIT, SPACING FOR MENU AND LOGO.-->
		<div id="Table_01" class="ts-1">
		<div class="ts-1-1"><img alt="" src="images/Untitled-1_01.gif" width="9" height="58"></div>
		<div class="ts-1-2"><a href="index.html"><img alt="" src="images/Home.gif" width="65" height="58"></a></div>
		<div class="ts-1-3"><img alt="" src="images/Untitled-1_03.gif" width="52" height="58"></div>
		<div class="ts-1-4"><a href="services.html"><img alt="" src="images/Services.gif" width="93" height="58"></a></div>
		<div class="ts-1-5"><img alt="" src="images/Untitled-1_05.gif" width="51" height="58"></div>
		<div class="ts-1-6"><a href="portfolio.html "><img alt="" src="images/portfolio.gif" width="105" height="58"></a></div>
		<div class="ts-1-7"><img alt="" src="images/Untitled-1_07.gif" width="30" height="58"></div>
		<div class="ts-1-8"><a href="contact.html"><img alt="" src="images/contact.gif" width="144" height="58"></a></div>
		<div class="ts-1-9"><img alt="" src="images/Untitled-1_09.gif" width="360" height="10"></div>
		<div class="ts-1-10"><img alt="" src="images/Untitled-1_10.gif" width="113" height="48"></div>
		<div class="ts-1-11"><img alt="" src="images/Untitled-1_11.gif" width="231" height="33"></div>
		<div class="ts-1-12"><img alt="" src="images/Untitled-1_12.gif" width="16" height="48"></div>
		<div class="ts-1-13"><img alt="" src="images/Untitled-1_13.gif" width="231" height="15"></div>
		<div class="ts-1-14"><img alt="" src="images/Untitled-1_14.gif" width="909" height="113"></div>
		<div class="wrapper">





		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>

		<!-- DO NOT EDIT, SPACING FOR MENU AND LOGO.-->

			<!-- Header starts here-->
		<div class="content">
		<h1 align="center">Welcome to JP Gardening services</h1>


		</div> 
			<!-- header ends here -->
		<!-- Paragraphs on home pages-->
		<div class="text">


		<P ALIGN="Left">Hello and welcome to my website. Here is where you will find all the information about JP Gardening Services.</p>


		</div>
		<!-- Paragraphs on home pages ends here -->


		<br>
		<br>
		<br>




		<div class="image1"><img alt="" src="images/image1.jpg" width="215" height="177"></div>
		</div>



		<!-- wapper ends here -->
		<!-- copy right ends here -->
		<div class="copy-right"> 
		<center><p>  All rights resevered JP Gardening Services © 2010</p></center>
		<!-- copy right ends here -->


		</div>
		</div>
	</div>

</body>
</html>

 

CSS

* {margin: 0;
padding: 0;
}

table {margin:0 auto;}

td img{border:none; margin:0 auto;}


body{
background: #2b2b2b;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #C4C4C4;
}





h1
{
Font-family: Arial, Helvetica, sans-serif;
font-size: 30px;

}

div.copy-right
{
width:900px;
padding:5px;
border:0px solid gray;
margin:0px;
background:black;

}


div.image1  {
width:215px;
padding:auto;
border: 3px solid #000000;
margin:250px;
position:center;
}



div.content{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: #000000;
background: white;
width:820px;
padding:-00x;
border:1px solid gray;
margin:-260px;
text-align: left;
}


div.wrapper
{
background: #d3f361;
width:308px;
padding:300px;
border:3px #ffffff;
margin:0px;

}


























.ts-1 {
border: none;
height: 171px;
position: relative;
text-align: left;
width: 909px;
}

.ts-1-1 {
border: none;
height: 58px;
left: 0px;
padding: 0px;
position: absolute;
top: 0px;
width: 9px;
}

.ts-1-2 {
border: none;
height: 58px;
left: 9px;
padding: 0px;
position: absolute;
top: 0px;
width: 65px;
}

.ts-1-3 {
border: none;
height: 58px;
left: 74px;
padding: 0px;
position: absolute;
top: 0px;
width: 52px;
}

.ts-1-4 {
border: none;
height: 58px;
left: 126px;
padding: 0px;
position: absolute;
top: 0px;
width: 93px;
}

.ts-1-5 {
border: none;
height: 58px;
left: 219px;
padding: 0px;
position: absolute;
top: 0px;
width: 51px;
}

.ts-1-6 {
border: none;
height: 58px;
left: 270px;
padding: 0px;
position: absolute;
top: 0px;
width: 105px;
}

.ts-1-7 {
border: none;
height: 58px;
left: 375px;
padding: 0px;
position: absolute;
top: 0px;
width: 30px;
}

.ts-1-8 {
border: none;
height: 58px;
left: 405px;
padding: 0px;
position: absolute;
top: 0px;
width: 144px;
}

.ts-1-9 {
border: none;
height: 10px;
left: 549px;
padding: 0px;
position: absolute;
top: 0px;
width: 360px;
}

.ts-1-10 {
border: none;
height: 48px;
left: 549px;
padding: 0px;
position: absolute;
top: 10px;
width: 113px;
}

.ts-1-11 {
border: none;
height: 33px;
left: 662px;
padding: 0px;
position: absolute;
top: 10px;
width: 231px;
}

.ts-1-12 {
border: none;
height: 48px;
left: 893px;
padding: 0px;
position: absolute;
top: 10px;
width: 16px;
}

.ts-1-13 {
border: none;
height: 15px;
left: 662px;
padding: 0px;
position: absolute;
top: 43px;
width: 231px;
}

.ts-1-14 {
border: none;
height: 113px;
left: 0px;
padding: 0px;
position: absolute;
top: 58px;
width: 909px;
}

In the code you posted,

 

 

                       <div class="text">


                       <P ALIGN="Left">Hello and welcome to my website. Here is where you will find all the information about JP Gardening Services.</p>


                       </div>
                       <!-- Paragraphs on home pages ends here -->


                       <br>
                       <br>
                       <br>




                       <div class="image1"><img alt="" src="images/image1.jpg" width="215" height="177"></div>
                       </div>

 

 

Would be changed to something like this

 

 

 

 

<img class="image1" alt="" src="images/image1.jpg" width="215" height="177">             

                       <p class="text">Hello and welcome to my website. Here is where you will find all the information about JP Gardening Services.</p>


                       </div>
                       <!-- Paragraphs on home pages ends here -->


                       </div>

 

 

And this css.

 

p.text{float:left}

p.text + img.image1{float:right}

 

  • Author

In the code you posted,

 

 

                       <div class="text">


                       <P ALIGN="Left">Hello and welcome to my website. Here is where you will find all the information about JP Gardening Services.</p>


                       </div>
                       <!-- Paragraphs on home pages ends here -->


                       <br>
                       <br>
                       <br>




                       <div class="image1"><img alt="" src="images/image1.jpg" width="215" height="177"></div>
                       </div>

 

 

Would be changed to something like this

 

 

 

 

<img class="image1" alt="" src="images/image1.jpg" width="215" height="177">             

                       <p class="text">Hello and welcome to my website. Here is where you will find all the information about JP Gardening Services.</p>


                       </div>
                       <!-- Paragraphs on home pages ends here -->


                       </div>

 

 

And this css.

 

p.text{float:left}

p.text + img.image1{float:right}

 

 

 

That won't work for some reason, I must be doing something wrong, all I did was delete the paragraphs and image and pasted what you said.

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.