slooshy

HI there, I am in a real quandry here as I cannot get my image to appear on my page. The code I have used is as follows: <img src="images/angela.jpg" align ="left" alt="my pic" width="150" height="220" /> The image is on one folder down from the html document that calls for it. Please can anyone help? At the moment I can't see the woods for the trees, I've been stuck with this problem for days now. Please, Please can someone point out to me what I am doing wrong. Thanks in advance, Slooshy

HI there, I desperately need feedback on my website and would be grateful for any comments positive or negative. I'd also be grateful for colour suggestions as I'm not sure which colours would work best for the products I sell. My web address is thetapestryhouse.com Thanks in advance for your help. Warm regards, Angela

HI Everyone, I am a bit confused about where to place navigation in my code. I've been told conflicting things 1) That for SEO purposes content should be coded before navigation on the page 2) The complete oposite, that search engines like to find your links quickly so navigation should be coded first above content. Please can anyone advise me on this? Many thanks, Slooshy

HI Elanman, Thank you for your swift response. I have tried what you said but the image is still too high up on the right. I have included another screen shot to show you what it now looks like. The top image is a background image so I am trying to get the new image to sit at the bottom of the background image, if at all this is possible. Screenshot..doc

I'd like an image to sit in the bottom right hand corner of my page underneath the background image. I've attached a file with the screen shot. Here is the CSS: body { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 11px; color : #333333; text-align : center; margin : 0; padding-top : 20px; padding-right : 0; padding-bottom : 20px; padding-left : 0; } #wrapper { width : 956x; padding : 10px; margin-top : 0; margin-right : auto; margin-bottom : 0; margin-left : auto; height : auto; text-align : left; border : 1px solid #dddddd; } #header { height : 150px; background-image : url(../images/logo.gif); background-repeat : no-repeat; background-position : center 0%; margin : 0; padding : 0; width : auto; background-color : #ffffff; } #container { padding : 0; margin-top : 10px; margin-right : 0; margin-bottom : 0; margin-left : 0; height : 1%; width : auto; } #left { margin : 0; width : 160px; padding-top : 10px; padding-right : 20px; padding-bottom : 10px; padding-left : 20px; float : left; } #nav { margin : 0; padding : 10px 0 10px 0; list-style-image : none; list-style-type : none; background-color : #ccccff; border: 4px solid #ffccff; } #nav li { margin : 0; padding : 0; display : block; background-position : 0 50%; } #nav li a:link, #nav li a:visited, #nav li a:active { color : #d80090; text-decoration : none; display : block; margin : 0; padding-top : 3px; padding-right : 15px; padding-bottom : 3px; padding-left : 15px; width : 130px; } #nav li a:hover { color : #2b00ff; background-color : #ffffff; text-decoration : none; } #center { text-align : justify; color : #d80090; height : auto; width : 504px; padding-top : 10px; padding-right : 20px; padding-bottom : 10px; padding-left : 20px; float : left; margin-top : 0; margin-right : 0; margin-bottom : 0; margin-left : 6px; line-height : 1.8em; } h2 { text-align : left; font-size : 16px; margin : 0; padding : 0; color : #cc99ff; } .first { font-family : Georgia, Serif; font-size : 2.1em; font-weight : bold; } #right { background-image : url(../images/sissy.gif); background-repeat : no-repeat; padding-top : 10px; padding-right : 20px; padding-bottom : 10px; padding-left : 20px; height : 310px; width : 160px; float : left; margin-top : 0; margin-right : 0; margin-bottom : 0; margin-left : 6px; } .clearer { font-size : 0; line-height : 0; display : block; margin : 0; padding : 0; clear : both; height : 0; width : auto; } #footer { margin-top : 10px; margin-right : 0; margin-bottom : 0; margin-left : 0; text-align : center; padding-top : 15px; padding-right : 0; padding-bottom : 15px; padding-left : 0; background-color : #f4ccff; } #footer p { color : #999999; margin-top : 0; margin-right : auto; margin-bottom : 0; margin-left : auto; padding : 0; } Many thanks for your help :-) Screenshot..doc

Hi everyone, Can I begin by saying what a great forum this is. Its like an online university full of tutors. Anyhow, I am adapting a tutorial that I got from this site and I wondered how I would put an image in the bottom right of this template. Please forgive my ignorance but I am relatively new to all this. <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"> <ul id="nav"> <li><a href="#" title="home">home</a></li> <li><a href="#" title="about us">about us</a></li> <li><a href="#" title="services">services</a></li> <li><a href="#" title="portfolio">portfolio</a></li> <li><a href="#" title="testimonials">testimonials</a></li> <li><a href="#" title="contact us">contact us</a></li> </ul> </div> <div id="center"> <h1>Title Placeholder</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> <div id="right">Some content</div> <div class="clearer"> </div> </div> <div id="footer"><p>© <a href="http://www.sebastiansulinski.co.uk/" title="Freelance Web Designer" target="_blank">Freelance Web Designer</a> </p> </div> Many thanks, Slooshy

I'm exactly the same. I am lacking in the creative department so its hard for me to try and thing of a design that is workable from sratch. My html and css are OK but I need more experience of implementing it. I started with looking at the tutorial on this site and they have been a great help. I particularly loved the 3 column layout tutorial. I'm working on adapting it now and its been great fun. I think this is the way forward for me to learn the basics. I wish you luck. Slooshy

Thank you, Pat. You are a star!

I've just tried to validate my pages and its thrown back a lot of errors. I know this is a bit cheeky but can someone have a look at it for me as I don't understand what the validator throws up. Here is my code: <link rel="stylesheet" type="text/css" style1.css" /> <link rel="stylesheet" href="CSS/style1.css" type="text/css"/> </head> <body> <div id="header"> </div> <div id="container"> <div id="left"><ul id="nav"> <li><a href="home.html">HomePage</a></li> <li><a href="about.html">About Lady Elspeth</a></li> <li><a href="sissymanor.html">About The Sissy Manor</a></li> <li><a href="ContactUS.html">Contact Us</a></li> <li><a href="Testimonials.html">Testimonials</a></li> <li><a href="Pricing.html">Tributes</a></li> </ul> <p> <img src="images/pinkboy.jpg" width="154" height="300"/> </p> </div> <div id="center"> <h2><p><span class="first">W</span>elcome to the Sissy Manor</p></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <p><img src="images/bow.gif" width="58" heigth="70"/></p> PLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> <p><img src="images/bow.gif" width="58" heigth="70"/></p> </div> <div id="right"><img src="images/splash.gif" width="220" height="115" alt "Sarcastic Lady"/> </div> <div class="clearer"> </div> </div> <div id="footer"><p> © Lady Elspeth 2008 </p> </p> </div> </body> </html> </body> </html> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; text-align: center; margin: 0px; padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; } #wrapper { width: 956px; padding: 10px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; height: auto; text-align: left; border: 1px solid #DDDDDD; } #header { height: 150px; background-image: url(../images/logo.gif); background-repeat: no-repeat; background-position: center; margin: 0px; padding: 0px; width: auto; background-color: #ffffff; } #container { padding: 0px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; height: 1%; width: auto; } #left { margin: 0px; width: 160px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; float: left; } #nav { border: 2px solid pink; margin: 0px; padding: 10px 0px 10px 0px; list-style-image: none; list-style-type: none; background-color:#ccccff; } #nav li { margin: 0px; padding: 0px; display: block; background-position: 0px 50%; } #nav li a:link, #nav li a:visited, #nav li a:active { color: #d80090; text-decoration: none; display: block; margin: 0px; padding-top: 3px; padding-right: 15px; padding-bottom: 3px; padding-left: 15px; width: 130px; } #nav li a:hover { color: #2b00ff; background-colour:#ffffff; text-decoration: none; } #center { text-align: justify; color: #d80090; height: auto; width: 504px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; float: left; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 6px; line-height: 1.8em; } h2 {text-align: left; font-size: 16px; margin: 0px; padding: 0px; color: #cc99ff; } .first{ font-family:Georgia, Serif; font-size:2.1em; font-weight:bold; } #right { background-image: url(../images/sissy.gif); background-repeat: no-repeat; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; height: 400px; width: 160px; float: left; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 6px; } .clearer { font-size: 0px; line-height: 0px; display: block; margin: 0px; padding: 0px; clear: both; height: 0px; width: auto; } #footer { margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-align: center; padding-top: 15px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; background-color: #f4ccff; } #footer p { color: ##999999; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding: 0px; } #footer a:link, #footer a:visited, #footer a:active { color: #999999; text-decoration: none; } #footer a:hover { color: #CCCCCC; text-decoration: none; } Many thanks, Slooshy

Oh Fantastic! It works! You don't know how crazy this was making me. Thankyou.

HI, I am trying to adapt a three column layout that I copied from the tutorials on this site. So far it seems to be working OK. But when I try to drop a background image in to the right column the image does not show because there is no text in the right column. If I add text part of the image shows. Is there a way I can use this image and get it to appear properly without adding text to the right column. Here is the CSS: #right { background-image: url(../images/leaf.gif); background-repeat: no-repeat; border: 1px solid pink; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; height: auto; width: 160px; float: left; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 6px; Many thanks, Slooshy

Thank you so much Sebastion for posting this tutorial. I have bought lots of books but none of them explain the three column layout as concisely as you have. For the first time I feel I am begining to understand. Slooshy

Many thanks for your swift response; it really is appreciated Am I right then to begin with pen and paper to work out all my dimesions? It seem like it is going to be very tricky, is there not a standar grid anywhere that you can use for say a 800 x 600 site? Thanks, Slooshy.

Hi Everyone, I am a complete beginner to webdesign so please bear with me if I come over as completely ignorant. I have been doing a bit of CSS and HTML from books or online tutorials and am now at the stage where I want to try and create a website myself. The thing is the books and tutorials give you examples but I have never been able to adjust these examples for my own design as they end up all distorted. So my questions are: 1) If I wanted to do a three collumn layout what exactly do I do at the pen and paper stage? 2) Do you work to screen resolution (ie. divide 800 by 600 in to three)? 3) How do I know if I have set the correct margin, border and padding? 4) And, what image sizes should I use if I want a background image in the center content column? Like I said I am pretty green so please forgive me if my questions border on the ridiculous. Many thanks, Slooshy PS: This is a fantastic forum, I'm so glad I found it.