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 5 of 5
  1. #1
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts

    image overflow into new div

    Hi, long time no see, what I am trying to achieve is the bottom of my logo to overflow into the next div, here is the css code for the logo
    Code:
    .logo{
    	position:absolute;
    	top:107px;
    	overflow:visible;
    }
    using a span to display the image like so
    Code:
    <span class="logo"><img src="logo.png" width="210" height="123">
    But the bottom of the logo is hidden, I need to bring it to the front, i have tried the overflow:visible and z-index:2; if you have any other ideas, please reply.
    The reason for this is the logo has a different colour background and needs to be the same colour as the background of the div it overflows.
    If this doesn't make sense I will add pictures of what i want to achieve and what I have got so far.
    This isn't a paid job.
    Thanks.
    Rafiki.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page? If not, please post all relevant HTML+CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    It isn't online yet, here is the full code of html and css pages, very early stage and stuck already
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="design.css" />
    <meta name="description" content="Dry Core preservations" />
    <meta name="keywords" content="Damp proof, damp proofing, feature walls," />
    <meta name="author" content="Dry Core Preservations" />
    <meta charset="UTF-8" />
    </head>
    
    <body>
    <div id="head">
    <p class="protimeter"><img src="http://www.damp-meter-direct.co.uk/images/GE-Protimeter-logo.jpg" alt="" height:"50px" width="100" /><br />We use protimeter products<br /> to survey our jobs.</p> 
    <span class="logo"><img src="logo.png" width="210" height="123"></span></div>
    <div id="nav"> </div>
    <div id="sub_header"></div>
    <div id="body"> </div>
    <div id="footer"> </div>
    <div id="side_bar"> </div>
    </body>
    </html>
     //css
    @charset "UTF-8";
    /* CSS Document */
    
    #head
    {
    	position:absolute;
    	top:0px;
    	height:200px;
    	width:60%;
    	background-color:#FFFFFF;
    	left:20%;
    	border:thin;
    	border-color:#000000;
    	border-style:solid;
    }
    
    #nav{
    	top:100px;
    	background-color:#FFFFFF;
    	position:absolute;
    	height:35px;
    	width:570px;
    	right:20%;
    }
    
    #sub_header
    {
    	position:absolute;
    	top:200px;
    	height:300px;
    	width:60%;
    	background-color:#FFFFFF;
    	left:20%;
    	border:thin;
    	border-color:#000000;
    	border-style:solid;
    }
    
    #body
    {
    	position:absolute;
    	top:500px;
    	height:750px;
    	width:60%;
    	left:20%;
    	background-color:#FFFFFF;
    	padding:0px;
    	border:thin;
    	border-color:#000000;
    	border-style:solid;
    }
    
    #footer{
    	position:absolute;
    	top:1250px;
    	height:200px;
    	width:100%;
    	background-color:#CC00FF;
    	left: 0px;
    	border:thin;
    	border-color:#000000;
    	border-style:solid;
    }
    #side_bar{}
    
    .logo{
    	position:absolute;
    	top:107px;
    	overflow:visible;
    }
    
    .protimeter{
    position:absolute;
    top:5px;
    right:13px;
    font-family:gill-sans;
    font-size:10px;
    }
    Don't ask why HTML 5 doctype.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'd recommend you to drop all absolute positions and top/left/right properties from your CSS to allow the elements in their normal flow. It's not a good practice to use absolute positions everywhere, as it has some pitfalls, see http://www.tyssendesign.com.au/artic...ning-pitfalls/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    I got the solution in the end, will read up on that soon been a while since I done any coding

    Using
    Code:
    overflow:visible;
    z-index:2;
    worked for now.
    Thanks


  •  

    Posting Permissions

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