Floating Web Page?

Jan 12th, 2010 at 05:47 PM
User 488667 Photo

Ken Mac
Registered User
19 posts

Hello,

Does anyone know how to float a web page like this.

http://www.truebounce.com/cust_fab.htm

You input would be great...

Thanks,

Ken
Jan 12th, 2010 at 06:23 PM
User 476017 Photo

Dave Butler
Ambassador
375 posts

Kenne MAC wrote:
Hello,

Does anyone know how to float a web page like this.

http://www.truebounce.com/cust_fab.htm

You input would be great...

Thanks,

Ken


Can you explain in a bit more detail what you mean by float a web page.
If you mean float images try this for starters

Sample CSS Code
Step 1To float the image to the left, use the following code:
img.floatLeft {
float: left;
margin: 4px;
}

Step 2Adjust the settings in the code. For example, if you do not want a margin of 4 pixels, change it to whatever margin you want by replacing the 4 with a different number.

Step 3To float an image to the right, use the following code:
img.floatRight {
float: right;
margin: 4px;
}
Again, the margin can be changed the same way it was changed in step 2.

then add the HTML Code
Step 1To float an image on the left of the page with HTML, type the following code into your text editor:
<body>
<img src="yourpicture.jpg" class="floatLeft">
<p>This is the text the image will float around</p>

Step 2Replace the the name of the image file as well as the text in the HTML code. If the image is saved on a server, you may need to include the full image path in the <img src=> tag. An example of a full image path would look something like "/images/my pictures/webpageimages/yourpicture.jpg."

Step 3Float an image on the right side of the page by including the following code:
<body>
<img src="yourpicture.jpg" class="floatRight">
<p>This is the text the image will float around</p>
You may notice that the only change in the code is changing the "class: from floatLeft to floatRight.
Dave Butler
Yorkshire
England

Old Rishworthians Rugby Union Football club http://www.orrufc.co.uk
Tuxedo Junction Yorkshire Function Band http://www.riley-tuxedojunction.co.uk
The Commons Guest House http://www.thecommons-guesthouse.co.uk
all created with Coffee Cup html editor
Jan 12th, 2010 at 06:27 PM
User 463058 Photo

Cary
Ambassador
1,085 posts
Online Now

The page itself is centered normally, and the fixed (or non-scrolling) image is in the background of the body, with the position set for the bottom, left corner:

body{ background-image: url(../images/tablebg_1.jpg);
background-repeat: no-repeat;
background-position: bottom left;
background-attachment:fixed;
}

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.