jasonc Posted January 16, 2008 Share Posted January 16, 2008 this is the html code, but for some reason the css has to be in a separate file i tried to add it but the page did not show correctly. so i have included both files here.. what i am trying to get is the image to be above all the text (not overlapping) and in the same place, top right of the box. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="csscode.css"> </head> <body bgcolor="#000000"> <table width="100%"> <tr> <td> <div class="containercolour2"> <b class="rtopcolour2"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><font size="2" color="#000000" face="Tahoma"> <div class="right"> <a href="?i=1" target="_top"><font color="#FFFFFF" size="2" face="Tahoma">comments</font></a> <font size="2">(</font> 1 <font size="2">)</font> (27 clicks)</div> </font> <a class="two" href="?i=1" target="_blank"> <h1>play the drums</h1><img src="images/noimage.gif" width="100" class="floatRight"> </a> <font size="2" color="#FFFFFF" face="Tahoma">16-01-2008</font> <font size="2" color="#FFFFFF" face="Tahoma"> By blahblah(10)</font> <b class="rbottomcolour2"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b align="right"></b></b></div></td> </tr> </table> </body> </html> .containercolour1 { position:relative; background:#799BD9; margin:0 5px; top: 2432px; left: 67px; } .rtopcolour1, .rbottomcolour1{ display:block; background:#507BCD; } .rtopcolour1 *, .rbottomcolour1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; } .containercolour2 { position:relative; background:#325EAF; margin:0 5px; left: 110px; top: 187px; } .rtopcolour2, .rbottomcolour2{ display:block; background:#507BCD; } .rtopcolour2 *, .rbottomcolour2 *{ display: block; height: 1px; overflow: hidden; background:#325EAF; } .r1{ margin: 0 5px} .r2{ margin: 0 3px} .r3{ margin: 0 2px} .r4{ margin: 0 1px; height: 1px } a.one:link { color: #000; } a.one:visited { color: #000; } a.one:hover { color: #999999; } a.one:active { color: #000; } a.one { text-decoration: none; } a.two:link { color: #000; } a.two:visited { color: #000; } a.two:hover { color: #fff; } a.two:active { color: #000; } a.two { text-decoration: none; } h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; } h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 5; } img.floatLeft { float: left; margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 3px; } img.floatRight { float: right; margin: 15px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 3px; } .right { position:absolute; bottom:4; right:6; left: 5px; top: 80px; } .floatright { float: right; margin: 0px 0px 0px 2px; } Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted January 16, 2008 Share Posted January 16, 2008 I guess this is what you wanting; but I am not sure. background-position: top right; Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted January 16, 2008 Share Posted January 16, 2008 No advice will help you when your code is such a mess. And your html is a mess while missing the whole point of css. It is not valid, so there is no telling what will happen if you add css tags ... some may work, others may not. It has broken tags, no tags when necessary and can easily be fixed. Once the html is fixed and it is valid, with no errors, layout tweaks will work. Until then, in quirks mode with broken html anything can happen First things first ... use the correct doctype by tacking this on to the end of what you have now "http://www.w3.org/TR/html4/loose.dtd"> Lose the bad old deprecated styling in the body tag. So much easier and cleaner to add it into the css. body { color:#000000; font-size: 12px; color:#FFFFFF } Next, WHY are you using a table as the main container? You are close to having it right ... lose the table altogether and create a main container id in the css to replace it. #container {width:100%} Markup level font tags???!!! Lose them. Create classes for them in the style sheet if you must. This must go: <font color="#FFFFFF" size="2" face="Tahoma"> along with this: <font size="2" color="#FFFFFF" face="Tahoma"> and this: <font size="2"> and, of course, this: <b align="right"> Both versions of your tahoma font tags can be filtered down to a simple css based class, like so (specify alternate web friendly generic fonts as well for those who don't have tahoma): .nofonts1 { font-family:"Tahoma", Verdana, Arial, Helvetica, sans-serif; font-size:1.1em; } Font "2" is nothing. It is very old html 3. It is relative to the body font size. So if the body font size is 12px, then use all relative sizing to that from now on (smaller or larger) either in percentage or em - like 1.1em or 102%. You are also not using proper block level tags (paragraphs, lists, etc.) - although you DID use a header tag, then messed up the link coding. Links are coded within block tags, not around them. Margins and paddings should take the place of for spacing (use a span tag if it is within a block tag. (add this to your css: .leftbigspace {padding-left:20px}) Now to see what you had become what you have BEFORE even trying to figure out any img layout! <body> <div id="container"> <div class="containercolour2"> <b class="rtopcolour2"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b> <div class="right"> <p class="nofonts1"><a href="?i=1" target="_top">comments</a> (1 ) <span class="leftbigspace">(27 clicks)</span></p> </div> <h1><a href="?i=1" class="two"><img src="images/noimage.gif" width="100" >play the drums</a><h1> <p class="nofonts1"> 16-01-2008 By blahblah(10)</p> <b class="rbottomcolour2"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b align="right"></b> </b> </div> </div> <body> Of course, now you need to style your block tags if the defaults are too big. in the css star from this (top and bottom margin of 5px and no left right margin) and tweak to suit: p {margin:5px 0} Once you start seeing your code going top to bottom, as it should flow top, left, right, bottom on the screen. It will be easier to handle tweaking elements to how you want them. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.