Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login


Tycoon Talk > Web Development and Programming Support > CSS Forum > css image positioning agro

Reply
css image positioning agro
Old 09-10-2005, 08:23 AM css image positioning agro
hiptobesquare's Avatar
Extreme Talker

Posts: 186
Location: London UK
Trades: 0
Talkupation: hiptobesquare is on a distinguished road
Hi, im making a site inwhich im using html and css to sort my layout, ive run into problems making all of my css commands work together at one time. My problem seem to revolve around this line of code at the top of page:

HTML 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">
Im using <span id> tags to position some images absolutely on my page, now when i remove the above code and just use a simple <html> tag, my image placement is correct, but i loose all the formatting of my tables, like the borders and cellspacing etc. If i use the chunk of code above my <span id> tags are ignored (but only the tags for positioning, text formatting is fine) and my tables work out fine. The whole page of code is pasted below with the code posted above, so the tables will work but not my image placement. its also posted at www.farena.co.uk so you can see it in action.

Any lead on this would be fantastic and greatly appreciated, thanks.

HTML 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=iso-8859-1" />
<meta name="keywords" content="doorstop" />
<title>The Doorstop</title>
<style type="text/css">
		@import "doorstop.css";
</style>

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" margin height="0">


<table border="0" align="left" valign="top"  width="" cellspacing="3" cellpadding="2">
  <tr height="90">
  	<td width="100" align="right" bgcolor="#bbb2d6" class='innertablewhite'>
  		  <span id="bigHead">the<br>
  		                    door<br>
  		                    stop</span>
    </td>
    <td width="10" bgcolor="#bbb2d6" class='innertablewhite'>
  	</td>
  	<td  rowspan="1">
  	</td>
  </tr>
  <tr>
  	<td bgcolor="#8f83b8" align="right" valign="top" width="" class='innertablewhite'>
	<br><br><br><br>
  		   <a href="index.htm">          <span id="bigLink">       Home            &nbsp;&nbsp;</span></a><br>
     <br>
         <a href="hingebegin.php">     <span id="bigLink">       Hinged Doors    &nbsp;&nbsp; </span></a><br>
         <a href="handles.php">     <span id="littleLink">                                Handle Selector &nbsp;&nbsp; </span></a><br>  
         <a href="accessories.php">   <span id="littleLink">    Accessories      &nbsp;&nbsp;</span></a><br>
     <br>
         <span id="inactiveLink">       Sliding Doors   &nbsp;&nbsp;</span><br>
         <a href="frameparts.php">     <span id="littleLink">    Front Frame     &nbsp;&nbsp;</span></a><br>  
         <a href="interiorparts.php">  <span id="littleLink">    Interiors       &nbsp;&nbsp;</span></a><br>  
         <a href="howto.htm">          <span id="littleLink">    How To          &nbsp;&nbsp;</span></a><br>  
     <br>
         <a href="faq.htm">            <span id="bigLink">       F A Q's         &nbsp;&nbsp;</span></a><br>
     <br>
         <a href="delivery.htm">       <span id="bigLink">       Delivery        &nbsp;&nbsp;</span></a><br>
     <br>
         <a href="showcart.php">       <span id="bigLink">       Checkout        &nbsp;&nbsp;</span></a><br>
     <br>
         <a href="samples.htm">        <span id="bigLink">       Samples         &nbsp;&nbsp;</span></a><br>
     <br>
         <a href="contact.htm">        <span id="bigLink">       Contact         &nbsp;&nbsp;</span></a><br>

  	</td>
  	<td bgcolor="#8f83b8">
  	</td>
	<td valign="top">
	

<SCRIPT LANGUAGE="JavaScript" 
TYPE="text/javascript"> 
<!-- 
if(document.images) 
{ 
col = new Array() 
for(i=0;i<10;i++) 
{ 
col[i] = new Image() 
col[i].src = "images/col" + i + ".gif" 
} } 
function glassauto1() 
    { if(document.images) { 
    
    document.colswitch1.src = "images/col"+document.doorglass.door1glass.selectedIndex+".gif" 
    } } 
    window.onerror = null; 
function glassauto2() 
    { if(document.images) { 
    
    document.colswitch2.src = "images/col"+document.doorglass.door2glass.selectedIndex+".gif" 
    } } 
    window.onerror = null; 



if(document.images) 
{ 
bars = new Array() 
for(i=0;i<3;i++) 
{ 
bars[i] = new Image() 
bars[i].src = "images/bars" + i + ".gif" 
} } 
function barsauto1() 
    { if(document.images) { 
    choose=document.doorglass.door1bars.options[document.doorglass.door1bars.selectedIndex].text.charAt(0) 
    document.barswitch1.src = "images/bars"+choose+".gif" 
    } } 
    window.onerror = null; 
function barsauto2() 
    { if(document.images) { 
    choose=document.doorglass.door2bars.options[document.doorglass.door2bars.selectedIndex].text.charAt(0) 
    document.barswitch2.src = "images/bars"+choose+".gif" 
    } } 
    window.onerror = null; 


//--> 
</SCRIPT>
	
	  		<table class='outertable' cellspacing='0' cellpadding="5" border="0">
  
 		
  		
  		
  		<?php
  		session_start();	
$user="root";
$host="localhost";
$password="";
$database="doorstop";
$connection = mysql_connect($host,$user,$password)   or die ("couldn't connect to server");
$db = mysql_select_db("doorstop")                    or die ("coudn't locate the database");

  	$_SESSION[overlap] = "30";
  $_SESSION["doorsize"] = sprintf("%.0f",(($_SESSION["apwidth"] +  $_SESSION[overlap])      / 2));
  $_SESSION[numdoor]="2";
  
		
  		

echo"
  <tr valign='top' height='150'>
    <td rowspan='1'   bgcolor='#8f83b8' class='innertablewhite' width='300'>
";	
	
if      ($_SESSION[apwidth] <= '1500' and $_SESSION[apwidth] >= '800') 
{echo"	
	<span id='door1alignsmall'> 
	<IMG NAME = 'colswitch1' border=''
SRC= 'images/col0.gif' 
WIDTH = '53' 
HEIGHT = '143'>
</span>
<span id='door2alignsmall'>                                                     
<IMG NAME = 'colswitch2' border=''
SRC= 'images/col0.gif' 
WIDTH = '53' 
HEIGHT = '143'> 
</span>

<span id='door1barssmall'>
<IMG NAME = 'barswitch1' border=''
SRC= 'images/bars0.gif' 
WIDTH = '53' 
HEIGHT = '143'>
</span>
<span id='door2barssmall'>
<IMG NAME = 'barswitch2' border=''
SRC= 'images/bars0.gif' 
WIDTH = '53' 
HEIGHT = '143'>
";}

else if      ($_SESSION[apwidth] <= '2100' and $_SESSION[apwidth] >= '1501') 
{
echo"	
	<span id='door1alignlarge'> 
	<IMG NAME = 'colswitch1' border=''
SRC= 'images/col0.gif' 
WIDTH = '75' 
HEIGHT = '143'>
</span>
<span id='door2alignlarge'>                                                     
<IMG NAME = 'colswitch2' border=''
SRC= 'images/col0.gif' 
WIDTH = '75' 
HEIGHT = '143'> 
</span>

<span id='door1barslarge'>
<IMG NAME = 'barswitch1' border=''
SRC= 'images/bars0.gif' 
WIDTH = '75' 
HEIGHT = '143'>
</span>
<span id='door2barslarge'>
<IMG NAME = 'barswitch2' border=''
SRC= 'images/bars0.gif' 
WIDTH = '75' 
HEIGHT = '143'>
</span> 
";}echo"
    </td>

	<td valign='top' class='innertablewhite' bgcolor='#BBB2D6' width='300'>
	";echo'
	<span id="bigLink">'."$_SESSION[sysname]".'</span><br><br>
	<span id="normal">This wardrobe will need '."$_SESSION[numdoor]".' doors '."$_SESSION[doorsize]".'mm wide and '."$_SESSION[apheight]".'mm high. Please choose a glass finish for each door and decide how many decorative bars (if any) each door each door should have.</span>
';echo"

	</td>
  </tr>
    <tr valign='top' height='165'>
    <td rowspan='1'   bgcolor='#BBB2D6' class='innertablewhite' width='300'>
	";echo'
	        <FORM NAME ="doorglass"
             method="post"
             action="getglassinfo.php"> 
             <span id="normal">Choose a glass finish for your doors and whether or not you want bars.
			 <br><br>
  Door 1:</span><br>
        <SELECT NAME = "door1glass" 
        onChange = "glassauto1()"> 
        <option value="Silver Mirror       ">Silver Mirror
        <option value="Dove White          ">Dove White
        <option value="Flame Red           ">Flame Red
        <option value="Orchard Green        ">Orchard Green
        <option value="Ocean Blue          ">Ocean Blue
        <option value="Metallic Blue       ">Metallic Blue 
        <option value="Titanium            ">Titanium 
        <option value="Sky Blue            ">Sky Blue
        <option value="Jet Black           ">Jet Black    
        <option value="Bordeaux            ">Bordeaux
        <option value="Fuschia             ">Fuschia
        <option value="Lilac               ">Lilac
        <option value="Primrose            ">Primrose
        <option value="Chromatic blue      ">Chromatic blue
        </select>
        
        <SELECT NAME = "door1bars" 
        onChange = "barsauto1()"> 
        <option value="No Bars">No Bars
        <option value="1 Bar">1 Bar
        <option value="2 Bars">2 Bars
        <option value="3 Bars">3 Bars
        </select>
        <br>
  <span id="normal">
 Door 2:</span><br>
        <SELECT NAME = "door2glass" 
        onChange = "glassauto2()"> 
        <option value="Silver Mirror       ">Silver Mirror
        <option value="Dove White          ">Dove White
        <option value="Flame Red           ">Flame Red
        <option value="Orchard Green        ">Orchard Green
        <option value="Ocean Blue          ">Ocean Blue
        <option value="Metallic Blue       ">Metallic Blue 
        <option value="Titanium            ">Titanium 
        <option value="Sky Blue            ">Sky Blue
        <option value="Jet Black           ">Jet Black    
        <option value="Bordeaux            ">Bordeaux
        <option value="Fuschia             ">Fuschia
        <option value="Lilac               ">Lilac
        <option value="Primrose            ">Primrose
        <option value="Chromatic blue      ">Chromatic blue
        </select>
        <SELECT NAME = "door2bars" 
        onChange = "barsauto2()"> 
        <option value="No Bars">No Bars 
        <option value="1 Bar">1 Bar
        <option value="2 Bars">2 Bars
        <option value="3 Bars">3 Bars
        </select>
        <br>
        <br>




         
          
	
    </td>

	<td valign="middle" align="center"class="innertablewhite" bgcolor="#8f83b8" width="300">
	  <input type="submit" value="submit">
            <a href="doorcalculator.php">reset</a>
            </FORM>
			';echo"
	</td>
  </tr>
    <tr valign='top' height='165'>

    <td align='right' class='innertable' width='300'>
    </td>
	<td valign='top' class='innertable'  width='300'>
	</td>
  </tr>
"; 
  
 

		
		?>  		
  		</table>
	</td>
  </tr>
  <tr height="16">
  	<td colspan="3" bgcolor="#8f83b8" align="right" valign="center">
  		<div id="normal">THE DOORSTOP IS A TRADING STILE OF NICE AS PIE LTD</div>

  		  	</td>
  	</tr>
  	  <tr>
    <td  colspan="3">
  	  <span id="copyFont">copyright 2005 NICE AS PIE LTD</span>
    </td>
  </tr>
</table>
  
  </body>
  </html>
and this is the css page:

[css]
/* CSS Document */



body {
background-image: url(images/backgroun); background-repeat: repeat-y; background-position: left top;}


#logo{position:absolute; top:0px; left:0px;}

#bigHead {font: 30px Arial, Verdana, sans-serif; line-height: 30px; background: none; font-weight:normal; text-decoration: none; color: #ffffff;}
#headingText {font: 12px Arial, Verdana, sans-serif; line-height: 12px; background: none; font-weight:bold; text-decoration: none; color: #8f83b8;}
#normalText {font: 12px Arial, Verdana, sans-serif; line-height: 12px; background: none; font-weight:normal; text-decoration: none; color: #8f83b8;}

#normal {font: 12px Arial, Verdana, sans-serif; line-height: 20px; background: none; font-weight:normal; text-decoration: none; color: #ffffff;}
#normalBold {font: 12px Arial, Verdana, sans-serif; line-height: 20px; background: none; font-weight:bold; text-decoration: none; color: #ffffff;}
#normalPurple {font: 12px Arial, Verdana, sans-serif; line-height: 20px; background: none; font-weight:normal; text-decoration: none; color: #8f83b8;}
#normalBoldPurple {font: 12px Arial, Verdana, sans-serif; line-height: 20px; background: none; font-weight:bold; text-decoration: none; color: #8f83b8;}

#copyFont {font: 10px Arial, Verdana, sans-serif; line-height: 10px; background: none; font-weight:normal; text-decoration: none; color: #8f83b8;}

#bigPink {font: 25px Arial, Verdana, sans-serif; line-height: 27px; background: none; font-weight:bold; text-decoration: none; color: #8f83b8;}
#medPink {font: 16px Arial, Verdana, sans-serif; line-height: 18px; background: none; font-weight:none; text-decoration: none; color: #8f83b8;}
#littlePink {font: 12px Arial, Verdana, sans-serif; line-height: 14px; background: none; font-weight:none; text-decoration: none; color: #8f83b8;}
#tinyPink {font: 10px Arial, Verdana, sans-serif; line-height: 12px; background: none; font-weight:none; text-decoration: NONE; color: #8f83b8;}


#inactiveLink {font: 12px Arial, Verdana, sans-serif; line-height: 14px; background: none; font-weight: bold; text-decoration: underline; color: #000000;}
#littleInactiveLink {font: 10px Arial, Verdana, sans-serif; line-height: 14px; background: none; font-weight:normal; text-decoration: none; color: #DDF609;}

#bigLink {font: 12px Arial, Verdana, sans-serif; line-height: 14px; background: none; font-weight:bold; text-decoration: underline; color: #ffffff;}
#littleLink {font: 10px Arial, Verdana, sans-serif; line-height: 14px; background: none; font-weight:normal; text-decoration: none; color: #ffffff;}


.dynamicField {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
color: #8f83b8;
background-color: #ffffff;
font-style: none;
border: 0px;
padding-left: 2px;
line-height: 12px;
}


.dynamicFieldPurple {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
color: #ffffff;
background-color: #8f83b8;
font-style: none;
border: 0px;
padding-left: 2px;
line-height: 12px;
}

/*Index*/

/*#homephoto {position: relative; top: -4px; left:-3px}*/
#hingebeginphoto{position: relative; bottom: -0px;}


.outertable{border-style:solid; border-color: #8F83B8; border:2px;}
.innertable{border-style:solid; border-color: #8F83B8; border:1px;}
.innertablewhite{border-style:solid; border-color: #FFFFFF; border:1px;}
.td{border-style:solid; border-color: #000000;}



#display_price{position: absolute; top: 250px; left: 211px}

#doorfitting {position: absolute; top: 357px; left: 346px}


#door1alignsmall {position:absolute; top:190; left:135}
#door2alignsmall {position:absolute; top:190; left:195}
#door1barssmall {position:absolute; top:190; left:135}
#door2barssmall {position:absolute; top:190; left:195}


#door1alignlarge {position:absolute; top:190; left:135}
#door2alignlarge {position:absolute; top:190; left:195}
#door1barslarge {position:absolute; top:190; left:135}
#door2barslarge {position:absolute; top:190; left:195}

[/css]
thanks for looking
hiptobesquare is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 09-30-2005, 03:27 AM
ScriptReference's Avatar
Average Talker

Posts: 25
Location: Reno, NV
Trades: 0
Talkupation: ScriptReference is on a distinguished road
Your forgot the units on your boxes (e.g. #door1alignlarge {position:absolute; top:190px; left:135px}). Once you do that, there's a little more work to do for alignment, but at least you have control of the boxes.
__________________

Please login or register to view this content. Registration is FREE
ScriptReference is offline
Reply With Quote
View Public Profile Visit ScriptReference's homepage!
 
Reply     « Reply to css image positioning agro
 
Previous Thread | Next Thread Tycoon Talk > Web Development and Programming Support > CSS Forum > css image positioning agro

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.13351 seconds with 12 queries