SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: simple code for a content holder
-
Nov 24, 2007, 07:59 #1
- Join Date
- Jun 2003
- Posts
- 39
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
simple code for a content holder
I would appreciate it if someone could help me with the code for a content
holder or contentbox to place content such as a newsletter signup box.
I also want the box to have a background image or alternatively it could have
a left and right border as well as a header & footer image. The content should fit within. Please see this page
http://how-to-manifest-your-desires.com/default.html for a idea of what I'm
talking about.
thanks,
jimo
-
Nov 24, 2007, 08:51 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Jimo,
I'm a little confused as to what you are asking here
Are you asking for help with this site or was that an example of what you wanted (though I doubt it) or is there some specific area that you want help with?
That page has 200 errors and you are unlikely to get a good response to your question unless you try cleaning it up a bit also.
You will also need to be more specific in which area you want help otherwise someone has to fix the whole site which could take ages with all those errors in there.
The page is completely broken in Firefox (so much for table sites rendering the same cross browser) and IE looks strange also but not quite so bad.
I couldn't really tell what effect you were trying to achieve as the page just seems like a muddle. If you can identify which area you want help and explain why that page is such a mess at present, it would help us to point you in the right direction.
-
Nov 24, 2007, 08:55 #3
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You beat me on this one Paul
I also cannot understand how the site linked gives any example of what is wanted. That site needs to be started from scratch, and is no real improvement over the currently used site. First point to address is getting rid of the TABLES!
-
Nov 24, 2007, 09:31 #4
- Join Date
- Jun 2003
- Posts
- 39
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hey guys,
Sorry I wasn't very clear.
Don't worry too much about the code on the page, because I will not be using that page.
This is the page that I'll be using.
http://www.how-to-manifest-your-desi.../css-test.html
I just wanted you guys to see how the content boxes on that page looked (visually) to give you an idea of what I'm looking for. I would like to stack the content boxes on top of each other on either side of the text.
Regards,
jimo
-
Nov 24, 2007, 09:39 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Are you talking about the box on the left and right that have a rounded top that says "Web Menu" and then have a border around them?
-
Nov 24, 2007, 10:08 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Something like this.
http://www.pmob.co.uk/temp/round-content-box.htm
View source to see the code and then ask questions later
-
Nov 24, 2007, 11:24 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Here's your code tidied up and the content boxes inserted. You will need to grab the images from my site or make your own.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled 1</title> <style type="text/css"> body { text-align: center; background: url(http://www.how-to-manifest-your-desires.com/images/bak.jpg); font-family: Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif; color: #000; font-size: small; margin:0;padding:0; } a:link {color: #003346; text-decoration: underline; } a:visited {color: #1C4A96; text-decoration: none; } a:hover {color: #003346; text-decoration: underline; } a:active {color: #1C4A96; text-decoration: underline; } #header { background:red url("http://www.how-to-manifest-your-desires.com/images/header.jpg"); width:840px; height:180px; } #content { background: url("http://www.how-to-manifest-your-desires.com/images/contentbak.jpg") repeat-y left top; width:840px; margin:auto; text-align:left; } .textarea { width:790px; margin:auto; text-align: left; } #leftcontentbox { float:left; width:164px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #rightcontentbox { float:right; width:164px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #formcontainer{ float: right; width: 140px; text-align: center; background: #C8E0F7} #footer{ width:840px; margin:auto; height:33px; background:url(http://www.how-to-manifest-your-desires.com/images/footer.jpg) no-repeat left top; clear:both; } /* round box */ .box{ width:164px; margin:10px 0; padding-bottom:12px; background:url(images/webmenu-base.gif) no-repeat left bottom; } .box h3{ height:24px; line-height:24px; font-size:85%; color:#b00000; background:url(images/webmenu2.gif) no-repeat left top; text-align:center; margin:0; } .box h3.wmenu{ background:url(images/webmenu.gif) no-repeat left top; text-indent:-999em; } .content{ border:1px solid #fac43e; border-bottom:none; } .content p{padding:5px;margin:.5em 0 0 0;} .content ul{ margin:.5em 0 0 1.5em; padding:0; } .content ul li{padding:5px;} #middle{overflow:hidden;padding:10px;} * html #middle{height:1%} </style> </head> <body > <div id="content"> <div id="header"></div> <div class="textarea"> <div id="leftcontentbox"> <div class="box"> <h3 class="wmenu">Web Menu</h3> <div class="content"> <p>Content goes here : Content goes here : Content goes here : Content goes here : </p> <p>Content goes here : Content goes here : Content goes here : Content goes here : </p> </div> </div> <div class="box"> <h3>Newsbox</h3> <div class="content"> <ul> <li>A list of sorts</li> <li>A list of sorts</li> <li>A list of sorts</li> <li>A list of sorts</li> <li>A list of sorts</li> <li>A list of sorts</li> </ul> </div> </div> </div> <div id="rightcontentbox"> <div class="box"> <h3 class="wmenu">Web Menu</h3> <div class="content"> <p>Content goes here : Content goes here : Content goes here : Content goes here : </p> <p>Content goes here : Content goes here : Content goes here : Content goes here : </p> </div> </div> <div class="box"> <h3>Newsbox</h3> <div class="content"> <ul> <li>A list of sorts</li> <li>A list of sorts</li> <li>A list of sorts</li> <li>A list of sorts</li> <li>A list of sorts</li> <li>A list of sorts</li> </ul> </div> </div> </div> <div id="middle"> <p>This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: </p> <p>This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: </p> <p>This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: This is the center content : This is the center content: </p> </div> </div> <div id="footer"></div> </div> </body> </html>
Last edited by Paul O'B; Nov 24, 2007 at 13:11.
-
Nov 24, 2007, 12:58 #8
- Join Date
- Jun 2003
- Posts
- 39
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks, Paul - thats perfect.
I've grabbed the code so you can take down the page.
jimo
Bookmarks