Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need some help with positioning

    Hi new here. Im trying to position 2 images on my site so it looks like this: http://i1081.photobucket.com/albums/...ps6876a446.png

    As you can see I want the 2 pictures to overlap.

    Ive tried for several hours to do it myself but with little success so looking for some help now. I have no knowledge about CSS or HMTL but my web designer wasnt able to do this so thats why Ive tried to do it myself.
    Any help is greatly appreciated.

    This is was I was able to do with the images. It looks good when its on a blank html page but when I paste it onto my site it just goes all over the place.

    CSS:

    Code:
    .img1{top:0px; left:0px; z-index:10; position: absolute;}
    
    .img5{
    	top: 463px;
    	right: 40px;
    	z-index: 20;
    	position: absolute;
    	width: 574px;
    	height: 230px;
    }
    
    .container-3{    
      position:relative; 
    }
    
    .top{   
      width: 500px;  
      height:800px;
      border-bottom:none;
      position:absolute;
      z-index:4;
    } 
    
    .bottom{
      z-index:2;
      width: 1100px;
      height: 250px;
      position:absolute;
      top:600px;
      left:0;
    }
    HTML for the container and the 2 images:

    Code:
    <div class="container-3">
      <div class="top"><img src="images/bildlyx2.jpg" height="471" class="img1" />
      </div>
      <div class="bottom"></div>
          </div>
    And the HTML for my site:

    Code:
    <?php
    require('includes/database.php');
    ?>
    <!DOCTYPE html>
    <html lang="en"><head>
    <title>Home</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/superfish.css">
    <link rel="stylesheet" type="text/css" media="screen"  href="css/grid.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
    <link rel="stylesheet" href="css/jqtransform.css" type="text/css">
    
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    
    <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/superfish.js"></script>
    <script src="js/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript" src="js/tms-0.4.1.js"></script>
    <script src="search/search.js"></script>
    <script src="js/jquery.jqtransform.js"></script>
    
    
    <script>
    
    	$(document).ready(function(){
    		$('.slider')._TMS({
    			show:0,
    			pauseOnHover:true,
    			prevBu:'.prev',
    			nextBu:'.next',
    			playBu:'.play',
    			duration:1000,
    			preset:'fade',
    	        pagination:'.pags',
    			pagNums:false,
    			slideshow:3500,
    			numStatus:false,
    			banners:'fade',
    			waitBannerAnimation:false,
    			progressBar:false
    		})		
     })
     
     $(function(){ 
    			
    			$('#form-2').jqTransform();
    		
    		});
    
    
    
    </script>
    
    <!--[if lt IE 8]>
           <div style=' clear: both; text-align:center; position: relative;'>
             <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
               <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
            </a>
          </div>
        <![endif]-->
    <!--[if lt IE 9]>
       		<script type="text/javascript" src="js/html5.js"></script>
        	<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
    	<![endif]-->
    </head>
    <body>
    <div class="bg-pic">
    <!--==============================header=================================-->
    <header>
    
    
    
    				<?php include('includes/menu.php');?>
       
         <div class="slider-block">
     
              <ul class="pags">
                <li><a href="#" class=""></a></li>
                <li><a href="#" class=""></a></li>
                <li><a href="#" class=""></a></li>
                <li><a href="#" class=""></a></li>
                <li><a href="#" class=""></a></li>
              </ul>
    
              <div class="slider">
                <ul class="items">
                  <li><img src="images/slideshow1.jpg" alt="">
                  	<div class="banner">
                    	<ul class="listbanner">
                            <li><span>Typ:</span><a href="#">Penthouse</a></li>
    						<li><span>Kust:</span><a href="#">Costa del Sol</a></li>
                            <li><span>Område:</span><a href="#">Benalmadena Costa</a></li>
                            <li><span>Badrum:</span><a href="#">3</a></li>
                            <li><span>Sovrum:</span><a href="#">3</a></li>
                            <li><span>Yta:</span><a href="#">310 m²</a></li>
                            <li><span>Terass:</span><a href="#">186 m²</a></li>
                            <li><span>Pris</span><a href="#">€1.950.000</a></li>
                        </ul>
                        <div class="fright marg1"><a href="http://www.spanskalyxbostader.se/details.php?id=21" class="button-5">Läs mer</a></div>
                    </div>
                   </li>
                   <li><img src="images/slideshow2.jpg" alt="">
                  	<div class="banner">
                    	<ul class="listbanner">
                            <li><span>Typ:</span><a href="#">Lägenhet</a></li>
    						<li><span>Kust:</span><a href="#">Costa del Sol</a></li>
                            <li><span>Område:</span><a href="#">Puerto Banús</a></li>
                            <li><span>Badrum:</span><a href="#">2</a></li>
                            <li><span>Sovrum:</span><a href="#">2</a></li>
                            <li><span>Yta:</span><a href="#">72 m²</a></li>
                          <li><span>Terass:</span><a href="#">70 m²</a></li>
                          <li><span>Pris</span><a href="#">€580.000</a></li>
                        </ul>
                        <div class="fright marg1"><a href="http://www.spanskalyxbostader.se/details.php?id=11" class="button-1">Läs mer</a></div>
                    </div>
                   </li>
                   <li><img src="images/slideshow3.jpg" alt="">
                  	<div class="banner">
                    	<ul class="listbanner">
                            <li><span>Typ:</span><a href="#">Lägenhet</a></li>
    						<li><span>Kust:</span><a href="#">Costa del Sol</a></li>
                            <li><span>Område:</span><a href="#">Puerto Banús</a></li>
                            <li><span>Badrum:</span><a href="#">2</a></li>
                            <li><span>Sovrum:</span><a href="#">2</a></li>
                            <li><span>Yta:</span><a href="#">120 m²</a></li>
                            <li><span>Terass:</span><a href="#">15 m²</a></li>
                            <li><span>Pris</span><a href="#">€1.200.000</a></li>
                        </ul>
                        <div class="fright marg1"><a href="http://www.spanskalyxbostader.se/details.php?id=57" class="button-1">Läs mer</a></div>
                    </div>
                   </li>
                   <li><img src="images/slideshow4.jpg" alt="">
                  	<div class="banner">
                    	<ul class="listbanner">
                           <li><span>Typ:</span><a href="#">Ville</a></li>
    					  <li><span>Kust:</span><a href="#">Costa del Sol</a></li>
                            <li><span>Område:</span><a href="#">Marbella</a></li>
                            <li><span>Badrum:</span><a href="#">7</a></li>
                          <li><span>Sovrum:</span><a href="#">6</a></li>
                            <li><span>Yta:</span><a href="#">75 m²</a></li>
                            <li><span>Terass:</span><a href="#">186 m²</a></li>
                            <li><span>Pris</span><a href="#">€9.900.000</a></li>
                        </ul>
                        <div class="fright marg1"><a href="http://www.spanskalyxbostader.se/details.php?id=41" class="button-1">Läs mer</a></div>
                    </div>
                   </li>
                   <li><img src="images/slideshow5.jpg" alt="">
                  	<div class="banner">
                    	<ul class="listbanner">
                           <li><span>Typ:</span><a href="#">Lägenhet</a></li>
    					  <li><span>Kust:</span><a href="#">Costa del Sol</a></li>
                            <li><span>Område:</span><a href="#">Marbella</a></li>
                            <li><span>Badrum:</span><a href="#">4</a></li>
                            <li><span>Sovrum:</span><a href="#">4</a></li>
                            <li><span>Yta:</span><a href="#">531 m²</a></li>
                            <li><span>Terass:</span><a href="#">N/A</a></li>
                            <li><span>Pris</span><a href="#">€4.500.000</a></li>
                        </ul>
                        <div class="fright marg1"><a href="http://www.spanskalyxbostader.se/details.php?id=59" class="button-1">Läs mer</a></div>
                    </div>
                   </li>
    
                </ul>
              </div>
                      
    	</div>
        
      <div class="clear"></div>     
    </header>
    
    
    
    
    <!--==============================content================================-->
    
      <section id="content">
    
             
            <div class="container_12">
    <div class="grid_9" style="width:900px;">
                	<h2>Etvab luxury estates</h2>
                    <div class="line-1"></div>
    
    <div style="float: left; width:410px;">           
    <p>&nbsp;<br>
    </p>
    
    <p>Etvab luxury estates är en webportal för den kräsne bostadsköparen.
    
    Här har vi samlat ett representativt urval av de mest
    
    exklusiva bostäderna på Spaniens södra kust.
    
    Bostäder med unika lägen – havsnära eller örnnästen.
    
    Bostäder med förfinad design.
    
    Bostäder med vyer som är ”breathtaking”.
    
    Bostäder med luft och ytor som andas välbefinnande.
    
    Bostäder som har allti modern utrustning och senaste teknologi.
    
    Vi har medvetet lagt ribban högt, för att kittla fantasin, ge en svindlande
    
    resa i tid och rum och visa det bästa av spansk modern arkitektur.
    
    Vi har i första hand valt bostäder med lägen och kvalitet
    
    som är i absolut topskikt.
    
    Vi har inte tittat på status i områden
    
    då vi bedömer att det inte avgör bostadens värde och attraktion.
    
    Vår ambition är att förnya dessa sidor regelbundet, till nöje
    
    och nytta för den som söker inspiration till ett husköp
    
    med högsta kvalitet och läge.
    
    Men även för den som njuter av design och vackra miljöer
    
    - på avstånd.</div>     
    <p>&nbsp;<br>
    </p>
    
    
     <style>
    	.qs_input { height:40px; padding: 0px 0px 0px 8px; background: #f3f3f3; border: 1px solid #dfdfdf; border-bottom: 2px solid #d7d6d6; font-family: 'Helvetica Neue', sans-serif; font-size: 1.0 em;}
    	.the_table {font-family: 'Helvetica Neue', sans-serif; font-size: 0.8em;}
    	.fastighet { padding:5px;}
    	.inne { padding:8px 0px 8px 8px;  height:15px;}
    </style>
     <div id='qsResale' class='qs_body' style='width:50%; float:right; margin-left: 15px; padding:0px; margin: 0px;'>
    <form name='qsFormResale' id='qsFormResale' method='post' action='search.php'>
    <table class="the_table" style='width:98%; float:left;'>
    	<tr><td class='qs_label' style='width:98%;'><h7>Typ av fastighet</h7></td></tr>
    	<tr><td>
    <select class='qs_input fastighet' name='Type' id='Type' style='width:90%;'>
    <option class='qs_input' value='No Preference'></option>
    <option class='qs_input' value='S'>Studio</option>
    <option class='qs_input' value='A'>Lägenhet</option>
    <option class='qs_input' value='T'>Radhus</option>
    <option class='qs_input' value='V'>Villa</option>
    <option class='qs_input' value='P'>Tomt</option>
    <option class='qs_input' value='C'>Kommersiella</option>
    <option class='qs_input' value='AS'>Lägenhet & Studio</option>
    <option class='qs_input' value='AT'>Lägenhet & radhus</option>
    <option class='qs_input' value='AV'>Lägenhet & villa</option>
    <option class='qs_input' value='TV'>Radhus & villa</option>
    </select>
    		</td>
    	</tr>
    
    
    		<tr><td class='qs_label' style='vertical-align:top;'><h7>Kust</h7></td></tr>
            <tr><td>
    			<select class='qs_input fastighet' name="Area" id="Area" onchange="cambia(this, document.qsFormResale.Location);" style='width:90%;'> 
    			<option value='Costa de la Luz'>Costa de la Luz</option>
    			<option value='Costa del Sol'>Costa del Sol</option>
    			<option value='Costa del Sol East'>Costa del Sol East</option>
    			<option value='Granada (Costa Tropical)'>Granada (Costa Tropical)</option>
    			<option value='Almería (Costa Almería)'>Almería (Costa Almería)</option>
    			<option value='Murcia (Costa Calida)'>Murcia (Costa Calida)</option>
    			<option value='Alicante (Costa Blanca)'>Alicante (Costa Blanca)</option>
    			<option value='Costa Azahar'>Costa Azahar</option>
    			<option value='Costa Brava'>Costa Brava</option>
    			<option value='Costa Dorada'>Costa Dorada</option>
    			<option value='Ibiza'>Ibiza</option>
    			<option value='Cordoba'>Cordoba</option>
    			<option value='Tenerife'>Tenerife</option>
    			<option value='Mallorca'>Mallorca</option>
    
    			</select>
                
    			</td>
    		</tr>
            
            
    
    	<tr>
    	  <td class='qs_label' style='vertical-align:top;'><h7>Område</h7></td></tr>
    	<tr><td>
    		<select class='qs_input' size='5' style="height:150px; width:395px;" name='Location' id='Location' multiple='multiple' style='width:90%;'>
    		<option class='qs_input inne' value='No Preference'>Ingen Preferens</option>
    		<option class='qs_input inne' value='Ayamonte'>Ayamonte</option>
    		<option class='qs_input inne' value='Huelva'>Huelva</option>
    		<option class='qs_input inne' value='Sanlucar de Barrameda'>Sanlucar de Barrameda</option>
    		<option class='qs_input inne' value='Tarifa'>Tarifa</option>
    		<option class='qs_input inne' value='Jimena de la Frontera'>Jimena de la Frontera</option>
    		<option class='qs_input inne' value='San Pablo de Buceite'>San Pablo de Buceite</option>
    		<option class='qs_input inne' value='Jerez de la Frontera'>Jerez de la Frontera</option>
    		<option class='qs_input inne' value='Cadiz'>Cádiz</option>
    		<option class='qs_input inne' value='Olvera'>Olvera</option>
    		</select></td>
    	</tr>
    
    	<tr><td class='qs_label'><h7>Sovrum</h7></td></tr>
    	<tr><td>
    		<select size='1' class='qs_input fastighet' name='Beds' id='Beds' style='width:90%;'>
    <option class='qs_input' value='No Preference'>Ingen Preferens</option>
    <option class='qs_input' value='1'>1 Bädd</option>
    <option class='qs_input' value='1x'>1 Bädd eller fler</option>
    <option class='qs_input' value='2'>2 Bäddar</option>
    <option class='qs_input' value='2x'>2 Bäddar eller fler</option>
    <option class='qs_input' value='3'>3 Bäddar</option>
    <option class='qs_input' value='3x'>3 Bäddar eller fler</option>
    <option class='qs_input' value='4'>4 Bäddar</option>
    <option class='qs_input' value='4x'>4 Bäddar eller fler</option>
    <option class='qs_input' value='5'>5 Bäddar</option>
    <option class='qs_input' value='5x'>5 Bäddar eller fler</option>
    <option class='qs_input' value='6'>6 Bäddar</option>
    <option class='qs_input' value='6x'>6 Bäddar eller fler</option>
    <option class='qs_input' value='7'>7 Bäddar</option>
    <option class='qs_input' value='7x'>7 Bäddar eller fler</option>
    <option class='qs_input' value='8'>8 Bäddar</option>
    <option class='qs_input' value='8x'>8 Bäddar eller fler</option>
    <option class='qs_input' value='9'>9 Bäddar</option>
    <option class='qs_input' value='9x'>9 Bäddar eller fler</option>
    		</select></td>
    	</tr>
    
    	<tr><td class='qs_label'><h7>Pris från</h7></td></tr>
    	<tr><td><p>
    	  <input type='text' class='qs_input' id='PriceMin' name='PriceMin' style='width:80%;' value='0' maxlength='8' onChange='return f_checkNumber(this,0,0);'>
    	      &nbsp;<span class='qs_text'>&euro;</span></p></td></tr>
    
    	<tr>
    	  <td class='qs_label'><h7>Pris upp till</h7></td></tr>
    	<tr><td><input type='text' class='qs_input' id='PriceMax' name='PriceMax' style='width:80%;' value='0' maxlength='8' onChange='return f_checkNumber(this,0,0);'>&nbsp;<span class='qs_text'>&euro;</span></td></tr>
    
    	<tr>
    	  <td class='qs_label'><h7>Referens nr</h7></td></tr>
    	<tr><td style='padding-right:5%;'><input type='text' class='qs_input' id='RefNum' name='RefNum' value='' maxlength='12'></td></tr>
    
    	<tr><td style='padding-top:10px;'><input type='submit' input type='button' class="button-5" value="Sök"></td></tr>
    </table>
    
    <input type='hidden' name='P1' id='P1' value='ETvabResales'>
    <input type='hidden' name='P2' id='P2' value='R'>
    <input type='hidden' name='P3' id='P3' value='ALL'>
    <input type='hidden' name='QS' id='QS' value='RESALE'>
    <input type='hidden' name='Country' id='Country' value='Spain'>
    <input type='hidden' name='RentalType' id='RentalType' value=''>
    <input type='hidden' name='RentalDateFrom' id='RentalDateFrom' value='06-02-2013'>
    <input type='hidden' name='RentalDateTo' id='RentalDateTo' value='06-02-2013'>
    <input type='hidden' name='Language' id='Language' value='8'>
    <input type='hidden' name='CustomArea' id='CustomArea' value=''>
    </form>         
          </div>
                
          <div class="container-3">
      <div class="top"><img src="images/bildlyx2.jpg" height="471" class="img1" />
      </div>
      <div class="bottom"></div>
          </div>
    			
    					
        </div>
    
         <div class="clear"></div>  
    
    
     </section> 
     
    <div class="clear"></div>
    <!--==============================footer=================================-->
        
     <footer><div class="container_12">
        	<div class="grid_12"><div class="line-2"></div></div>
        	
            <div class="grid_2">
                <p>&nbsp;</p>
              <h5>Kontor Stockholm: </h5>
            	<h5>Kontor Marbella:</h5>
           	  <h5>E-mail:</h5>
            	<ul class="list1">
               		
                </ul>
          </div>
          <div class="grid_2">
          <p>&nbsp;</p>
           	<h5>+46 8 966 545</h5>
            <h5>+34 951087873</h5>
            <h5>Info@etvab.nu</h5>
           
           	  <ul class="list1">
           		  
              </ul>
            </div>
            <div class="grid_2">
           	  <h3 class="marg6"></h3>
            	<ul class="list1">
    
                </ul>
            </div>
            <div class="grid_2">  
             <p>&nbsp;</p>     	
              <h5>&nbsp;</h5>
           	  <p>&nbsp;</p>
           	  <ul class="list1">
           	    
         	    </ul>
          </div>
            
          <div class="grid_4">
      
                <p class="foot-text">Etvab luxury estates © 2012 <a href="index-6.html"></a>&nbsp;<!-- {%FOOTER_LINK} --></p>
            </div>
            <div class="clear"></div>
            
        </div>
      
            <div class="clear"></div>		
     </footer> 
    </div>
    <span class="bottom"><img  src="images/bildlyx1.jpg" width="442" height="484" class="img5" /></span>
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Hetsig,
    Instead of putting each image in a containing div and then mixing up the styling of both the div and the img, just put the images in your markup.

    Something like this -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .container-3 { position: relative; }
    #top {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	z-index: 1;
    	background: #0f0; /*demo only*/
    }
    #bottom {
    	position: absolute;
    	top: 550px;
    	left: 300px;
    	z-index: 2;
    	background: #f00; /*demo only*/
    }
    img {display: block;} /*demo only*/
    </style>
    </head>
    <body>
    <div class="container-3">
        <img src="images/bildlyx2.jpg" alt="description" width="500" height="800" id="top"> 
        <img src="images/bildlyx2.jpg" alt="description" width="1100" height="250" id="bottom"> 
    </div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hm it didnt make much difference rly, got the same result as before

    http://i1081.photobucket.com/albums/...ps26687b70.png

    Is there any way to drag the footer further down so it makes enough space for the images? Cant figure out how to do that.

    And for some reason the images move when I upload the code. Its looks like this in Dreamweaver:

    http://i1081.photobucket.com/albums/...ps6c23a729.png


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •