Just nu i M3-nätverket
Gå till innehåll

Problem med bild på bilder


kungmats

Rekommendera Poster

Jag vill lägga 3 bilder i rad tätt intill varandra.

 

Uppe på dom 3 vill jag sen lägga en fjärde bild som delvis är transparent men jag får inte till det.

Min fjärde bild hamnar bara bredvid, under eller ovanför och trycker ut tabellen oavsett hur jag gör.

 

Om jag provar utan tabeller så går det bra, men jag måste ha en centrerad tabell(oavsett skärmupplösning) ... då har jag inte fått det att fungera med "position absolute" ... den räknar väl från övre vänstra hörnet ... eller har jag fel?

 

Tacksam för tips

 

 

 

[log]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title></title>
</head>

<body bgcolor="#404040" topmargin="0" leftmargin="0">

<div align="center">
 <table border="0" width="1024" height="690" cellspacing="0" cellpadding="0" background="images/behind_bottom_table.jpg">
   <tr>
     <td width="100%" height="20">
       <p align="center"><marquee style="font-family: Verdana; color: #F9E3A9; font-weight: bold" scrolldelay="1" scrollamount="3">Aktuellt  ...............</marquee>

     </td>
   </tr>
   <tr>
     <td width="100%" height="670"> 

       <div align="center">
         <center>
         <table border="0" width="732" height="480" cellspacing="0" cellpadding="0">
           <tr>
             <td width="100%" height="500" background="images/behind_top_table.gif" valign="bottom">
               <div align="center">
                 <center>
                 <table border="0" width="633" height="413" cellspacing="0" cellpadding="0">
                   <tr>
                     <td width="100%" height="377" valign="bottom">

<!-- Dom tre bilderna bredvid varandra. Alla tre är 212x377px .... totalt alltså ett utrymme på 636x377px -->
                     <img src="images/front_picture_01.jpg" style="position: left: 0px; top: 0px; x-index: 1;">
                     <img src="images/front_picture_02.jpg" style="position: left: 0px; top: 0px; x-index: 1;">
                     <img src="images/front_picture_03.jpg" style="position: left: 0px; top: 0px; x-index: 1;">

<!-- Bilden som jag vill ha uppe på dom 3 bilderna ... den är 636x377px -->
	     <img src="images/frames.gif" style="position: relative; left: -636px; top: 0px; x-index: 2;" width="636" height="377">
                     </td>
                   </tr>
                   <tr>
                     <td width="100%" height="36"><font size="1"> </font></td>
                   </tr>
                 </table>
                 </center>
               </div>
             </td>
           </tr>
           <tr>
             <td width="100%" height="30">

             </td>
           </tr>
         </table><br /><br /><br /><br />
         </center>
       </div>
     </td>
   </tr>
 </table>

</body>

</html>

[/log]

[inlägget ändrat 2007-01-23 13:39:45 av kungmats]

Länk till kommentar
Dela på andra webbplatser

Tabellen har du satt till 633 och bildernas sammanlagda bredd blir som du skriver 636. Go figure.

 

 

 

Länk till kommentar
Dela på andra webbplatser

Dumpa tabellerna helt och gör om - använd div och Css.

 

edit: kanske är för sent -- resten av siten är kanske uppbyggd så?!

[inlägget ändrat 2007-01-23 16:23:25 av Jonas_Bo]

Länk till kommentar
Dela på andra webbplatser

Som Jonas säger att det läge för att använda DIV och CSS för att styra layouten men om det nu inte går så prova så här:

 

I head-taggen:

<style type="text/css">
div#o1 {
position: absolute;
z-index:1;
}
div#o2 {
position: absolute;
z-index:2;
}
</style>

I din td(cell):

<td>
<div id="o1">Din tre bilder</div>
<div id="o2">Din stora bild</div>
</td>

 

Länk till kommentar
Dela på andra webbplatser

Tack för era förslag ... jag har spolat tabellerna.

Men postion: absolute? .... utgår inte det frånövre vänstra hörnet, eller ha jag gjort fel som fått det så? ... i mitt fall skulle det bara funka på en skärmupplösning i så fall.

 

Nu blev det så här:

 

 

Min css

[log]#box1 {

background-image: url(images/behind_bottom_table.jpg);

width: 1024px;

height: 690px;

padding: 0px;

margin-right: auto;

margin-left: auto;

border: 0px solid ;

}

 

 

#box2 {

background-image: url(images/behind_top_table.gif);

width: 732px;

height: 500px;

padding: 0px;

margin-top: 40px;

margin-right: auto;

margin-left: auto;

border: 0px solid ;

}

 

 

#box3 {

width: 636px;

height: 377px;

padding: 0px;

margin-right: auto;

margin-left: auto;

border: 0px solid ;

}[/log]

 

 

Index

[log]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title></title>

<link rel="stylesheet" href="style.css" type="text/css">

</head>

<body bgcolor="#404040" topmargin="0" leftmargin="0">

 

<div id="box1">

 

<div id="3"><p align="center"><marquee style="font-family: Verdana; color: #F9E3A9; font-weight: bold" scrolldelay="1" scrollamount="3">Aktuellt vårerbjudande från..............</marquee>

</div>

 

<div id="box2">

<div id="box3">

<img src="images/front_picture_01.jpg" style="margin: 87px 0 0 0; z-index:1;"><img src="images/front_picture_02.jpg" style="margin: 87px 0 0 0; z-index:1;"><img src="images/front_picture_03.jpg" style="margin: 87px 0 0 0; z-index:1;"><img src="images/frames.gif" style="margin: -392px 0 0 0; z-index:2;">

</div>

</div>

</div>

</body>

 

</html>[/log]

 

[inlägget ändrat 2007-01-23 17:38:01 av kungmats]

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...