|
HTML - Footer Background Colour + Curved Corners!
Hey guys, basically i'm not great with html and i've been wracking my brains trying to figure these out. (nothing has helped so far)
Anyways, heres my site If you scroll to the bottom you can see the footer box, It's the same color as the posts. I want to change the footer box to white, but everything I change doesn't effect it. I'm also wondering how to create rounded corners on the main blog posts, as i believe this will make the layout smoother. yet i've not found any code that works! Any help would be appreciated a billion Similar TutorialsHey there, I've got a problem with my BG colour on a very simple page. I've uploaded this page he http://www.alastairq.co.uk/s-gaming The Web page looks like it should in FireFox 2 but in IE 6, the colour is completely wrong. Could anyone help me? Thanks, alastairq I'm quite new to this and used a tag generator thing, how do I make the background black and has anyone got any other tips to make this look more attractive? Here is the code: HTML Code: <p style="text-align: center;"><span style="background-color: rgb(0, 0, 0);"><br></span></p> <p style="text-align: center;"><span style="color: rgb(255, 255, 255);"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="background-color: rgb(255, 255, 255);">if this newsletter is not displaying properly, click <a title="Sternberg Clarke New Talent - February 2010" href="http://www.scflyers.com/newsletterfeb10.html" target="_blank">here</a> to see it in its full splendour</span></span></span></span></p> <p style="text-align: center;"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="background-color: rgb(255, 255, 255);"><br></span></span></span></p> <table style="border: 4px solid rgb(244, 249, 249); width: 751px; height: 604px; background-color: rgb(255, 255, 255);" align="center" border="4" cellpadding="0" cellspacing="6"> </table> <table style="border: 0pt solid rgb(0, 0, 0); width: 600px; height: 183px;" align="center" border="0" cellpadding="0" cellspacing="0" frame="border"> <tbody> <tr> <td style="width: 20px; height: 20px;" colspan="8"> <p><img style="border: 1px solid black;" title="sclogo" src="http://www.scflyers.com/htmlfiles/logo_600px.gif" alt="sclogo" width="600"></p> </td> </tr> <tr> <td colspan="8"> <p style="text-align: center;">performers of the month - March 2010</p> <hr> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="6"> <p><span style="text-decoration: underline;"><span style="font-size: x-large;">the langley sisters</span></span></p> <p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p> </td> <td> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="5" valign="middle"> <p style="text-align: center;"><img style="border: 1px solid black;" title="Langley Sisters" src="http://www.scflyers.com/langley-sisters_250px.jpg" alt="Langley Sisters" width="250" height="238"></p> <p style="text-align: center;"> <object style="width: 250px; height: 206px;" data="http://www.youtube.com/v/1uSKPIZaZtg&feature" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/1uSKPIZaZtg&feature"> </object> </p> </td> <td> <p style="padding-left: 30px;"><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis. </span></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </td> <td> <p> </p> <p> </p> </td> </tr> <tr> <td colspan="8"> <hr> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="6"> <p><span style="text-decoration: underline;"><span style="font-size: x-large;">puncture kit</span></span></p> <p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p> </td> <td> </td> </tr> <tr> <td><br></td> <td colspan="5" valign="middle"> <p style="text-align: center;"><img style="border: 1px solid black;" title="pk" src="http://www.scflyers.com/puncture_250px.jpg" alt="puncture kit" width="250" height="238"></p> <p style="text-align: center;"> <object data="http://www.youtube.com/v/wCdauhGajBE&feature" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/wCdauhGajBE&feature"> </object> </p> <p> </p> <p> </p> <p> </p> <p> </p> </td> <td style="padding-left: 30px;" valign="top"> <p><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p><span style="font-size: small;"><br></span></p> </td> <td style="width: 20px; height: 20px;"><br></td> </tr> <tr> <td colspan="8"> <hr> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="6"> <p><span style="text-decoration: underline;"><span style="font-size: x-large;">cash cows</span></span></p> <p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="5"> <p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong><img style="border: 2px solid black;" title="cashcows" src="http://www.scflyers.com/cashcows_250px.jpg" alt="cashcows" width="250" height="238"></strong></span></span></p> <p style="text-align: center;"> <object data="http://www.youtube.com/v/IvTHGp8Yui8" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/IvTHGp8Yui8"> </object> </p> <p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong> </strong></span></span></p> <p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong> </strong></span></span></p> </td> <td style="padding-left: 30px;" align="left"> <p style="text-align: justify;"><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"><span style="font-size: small;"><br></span></p> </td> <td><br></td> </tr> <tr> <td colspan="8"> <hr> </td> </tr> <tr> <td style="text-align: center;" colspan="8"> <p><span style="font-size: x-large;"><span style="text-decoration: underline;">kate mlynar</span></span></p> <p><span style="font-size: x-large;"><span style="text-decoration: underline;"><br></span></span></p> </td> </tr> <tr> <td> </td> <td colspan="5"><img title="km" src="http://www.scflyers.com/km_250px.jpg" alt="km" width="250" height="238"> <p> <object data="http://www.youtube.com/v/tz8BvSiop5Q" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/tz8BvSiop5Q"> </object> </p> </td> <td style="padding-left: 30px; text-align: justify;" valign="top"> <p><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p> </td> <td> </td> </tr> <tr> <td><img title="bottomleft" src="http://www.scflyers.com/htmlfiles/bl.gif" alt="bottomleft"></td> <td colspan="5"><br></td> <td> </td> <td><img title="bottomright" src="http://www.scflyers.com/htmlfiles/br.gif" alt="bottomright" width="20" height="20"></td> </tr> </tbody> </table> <p style="text-align: center;"><span style="color: rgb(255, 255, 255);"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;">click <a href="mailto:sarah@sternbergclarke.co.uk?subject=unsubscribe"> here</a> to unsubscribe</span></span></span></p> <p style="text-align: center;"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="color: rgb(0, 0, 0);"><br></span></span></span></p> <p> </p> Hi, I have this website: http://www.dmucomputing.co.uk/ The problem that I am currently having is that the background colour on the navigation panel on the left hand side of the screen does not follow all the way to the bottom of the page. I have checked it in Firefox and IE, but am having the same problem on both. Can anyone advice please? Thank you in advance. Hey, i need some help. im making a little web page where you can choose what colour you want the background to be by clicking on a little coloured square. can someone please help me with the coding for this, Can somebody please explain to me why when I enter the background colour <body bgcolor="blue"> it just wipes out everything on my page from text to photos. And yes I'm a complete novice Hi all, nooby web developer here, so sorry if this question has an obvious answer, but I've searched all over for an answer to this. I've got a 'masthead' image at the top of my site, which has a colour gradient going from red to white. If I set the background colour for the element that its in to either red or white, it doesn't quite look right. What I'd really like is a different solid colour either side of the image. I was wondering: is there any way to set the background colour of one side of the image to red, and one side to white? Many thanks in advance. Hi I have a DIV that contains a php include on my page. The main page with the DIV has a black background, and the include page has a purple background. The problem is that the include's background is overriding the main page background, making it all purple. How do I make the background colors perform as they should? Thanks for your help Shaun Hi All, Nice site BTW, my problem is i want to add some text with a background colour behind it but i want the background colour to stretch the full width of the page ? Can anybody help me out Thanks Hi, I have a search form with the following code:# <!-- Begin FusionBot.com site search engine code--> <FORM NAME=fbsearch METHOD=GET ACTION="http://ss021.fusionbot.com/cgi-bin/ss_query"> <INPUT TYPE=text NAME=keys style="height: 18px; width: 100px; background-color:#1E7CC8;<input size="8" SIZE=10> <INPUT TYPE=hidden NAME=sitenbr VALUE="154309449"> <INPUT TYPE="image" src="http://www.freewebs.com/hanifm/search.gif" name="go" value="go" alt="Click to Search"><BR> </DIV> </FORM> <!-- End FusionBot.com site search engine code --> What I want is, is for the form to be like the login area of this site: http://www.pixel2life.com/ if u look at the top right of that site u can see it has the bit with username. I want that same style of the box with the white text inside and with the same border thickness and colour. These are the colours: Inside of the form (background): #1E7CC8 The Border colour: #64A2D6 The boder thickness has to be small like the one on the sie If anyone could do this it would be much appreciated. Thank You Hi Guys I would like to get the footer background on this site to stretch accross the full width of the browser, but as I have already applied a background image to the body then I'm not sure how to achieve this effect. At the moment I have a background image applied to the footer but I may take this out and just have a simple white strip which covers the full width. The site: http://horizonwebsites.co.uk/soccerwaveuk/ The CSS: http://horizonwebsites.co.uk/soccerwaveuk/screen.css This is an effect I've wanted to use for a while now on several projects so if any one has done this or knows of sites that use it I'd be really keen to learn how. Thanks, Kev How do make a curved edge for a table row or table data? Right now my site looks kind of boxy. ....I had enough! My footer is all over the place! Why can't it just move down when the text becomes longer! I am just using <div>. My header, the nav bar and the right side bar are fixed and I want the footer to just fit in underneath. Anybody got some code which solves that problem? Chris PHP Code: <?php echo "<div class='mainarea'>"; include ("includes/header.inc"); include ("includes/navigation.inc"); if ($var == 'service' or $var == 'consultancy') { echo "<div class='textarea_services'><p><br /></p>"; include ("text.php"); echo "</div>"; } else { echo "<div class='textarea'><p><br /></p>"; include ("text.php"); echo "</div>"; } if ($var != 'service' and $var != 'consultancy'){include ("includes/rightside.inc");} if ($var != 'privacy'){include ("includes/footer.inc");} echo "</div>"; ?> Hi all, I currently have images for my corners and I'm trying to add corners via CSS. http://www.css3.info/preview/rounded-border/ I am struggling quite a lot. Could anyone look at the website I'm working on and just advise me on the code change please? It's really simple but I keep getting repeating images and all sorts. The website in question is http://www.karishmabhandari.com I would like white corners to blend in with the white content area. I've very much noticed this is in the wrong section if someone could move it for me please. Hi Was wondering if there was a way of doing rounded corners for buttons etc using CSS/HTML. Any ideas? Is there a more effective way for accessibility? I'm new to CSS/HTML so please go slow Thanx Hi, I want to implement something like this into my website, with a single 'snipped-off' corner image on an otherwise square, bordered content surround. I'm really not sure what would be the best way to do it, though. Would you use divs or tables, and how exactly would you go about implementing it? ( example: ) P.S. the real layout isn't that hideous, thankfully--just clear colours so you can see what's going on. Any help would be greatly appreciated! J-L Hi, I am assigining 2 bg images to a div box that is 2.5in wide and 3in hight. The bgs are just to make the corners round. Would anyone please help me assiging this div the 2 bg images 1 to the left and 1 to the right IN A WAY that the bgs would AUTOMATICALLY resize to the correct height, because the bgs are 824px high and I don't want to worry about remaking the corners just becuase the div got a bit wider or taller. Thanks in advance. Hi guys, i am a new one on this forum, hope you will help me! So here is the problem, take a look at the screenshot, its like div.topRightCommBg doesn`t see negative margin In others browser it`s fine It happens in 6 and 7 IE, and i know that there is some problem with div.common_text if i delete it external block it goes fine with corners, don`t understand it! I did zoom: 1 but i ain`t helped, please do not advise to change structure of code, i want understand what wrong with it! cause i when i was making another site, it was great in the same situation, so is there any ideas? Hello all, I just need some help on table corners that is probably really easy. I've uploaded the files for you and the web page is located he http://www.emmaflewers.com/karishmabhandari/ I'm wondering why there is a white line underneath my table? I'm trying to create a white content area and just have four rounded corners. The corners are all even sizes, 20x20px. I am so close to sorting that out but I still can't get it working I usually just stick to square corners but I wanted to try something different this time. If anyone sees some code they don't like either, please let me know! Well, I finally applied my layout I've been designing for my site to my forums. ALl was going well until I tried to make rounded corners for the head of my tables. I was attempting this effect with nested divs, but instead of doing like it should (creating rounded corners), it went all over the place. Any help? Link to problem Link to CSS By the way, both the template HTML and CSS validates fine. Hi, I am trying to create a page with a large text box that has rounded corners. What do you suggest is the best way to accomplish this? 1) Using CSS and by: -moz-border-radius-topleft / -webkit-border-top-left-radius -moz-border-radius-topright / -webkit-border-top-right-radius -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius 2) Using DIV tags on the top-left, top-right, bottom-left, bottom-right and css to add the image as a background? Best, E |
|||||||