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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Overflow

  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Overflow

    I am trying to put a ribbon image under my header that looks like its outside the container and wrappes around it. I have rounded corners and chosen overflow hidden so the header wont stick outside the box. This is why the ribbon wont show outside the box. Can this be solved somehow?
    Thanx

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello AngelicaM,
    Have you tried it yet with absolute positioning?
    Using ap on your ribbon image removes it from the normal flow of the document so it would still be visible outside the boundries of your container with hidden overflow.

    Look at a simple positioning tutorial that might give you an idea or two.

    You could always give us a look at the test site for more help too.
    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
    Jan 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks that works but the boxes underneath go up under that div now, and i tried a lot of different things but didn't get it to work properly. And the ribbon goes outside on the right and i got that working fine in chrome but then in firefox it goes the other way. i put in right: 10px. Is there a better way to get this working.
    I can add that i am pretty new at this .

    Thank you for any kind of help!

    /Angelica

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Can you give us a link to your test site? Sorta need to see the code and images to know what's going on...
    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

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the html:
    <body>
    <!-- CONTAINER -->
    <div id="container">
    <div id="header">


    <div id="gradientbuttons">
    <ul>
    <?php include "meny.inc";
    ?>
    </ul>
    </div><!--end gradientbuttons -->
    </div><!--end header -->
    <div id="ribbon" ><img src="bilder/images/ribbon_04.png" width="1049" height="96" /></div>
    <!-- CONTENT -->
    <div id="content">
    <!-- HEADER -->

    <div class="textruta">
    <h1>Välkommen till A.M. Foto & Design!</h1>


    <HR WIDTH="90%" ALIGN="left">
    <h2>Under uppbyggnad</h2>

    </div><!--end textruta -->
    <div class="textruta">
    <h1>NEWS!!</h1>
    <p> </p>
    </div><!--end textruta -->

    </div><!--end content -->
    </div><!--end container -->
    </body>

    The css:

    body {
    background-color: #CCC;

    }
    #header {
    background-repeat:no-repeat;
    width: 1000px;
    overflow:hidden;
    height:362px;
    margin-bottom:0px;
    background-image: url(../bilder/images/header_02.png);
    margin-top: auto;
    margin-right: auto;
    margin-left: auto;

    }
    #ribbon {
    position: absolute;
    }
    #content {

    height:auto;
    margin-top: 0px;
    margin-right: auto;
    margin-left: 20px;

    }


    #container {
    background-image: url(../bilder/back2.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    width: 1000px;
    height:auto;
    margin-top: auto;
    margin-right: auto;
    padding-bottom:50px;
    margin-left: auto;
    border:3px solid #999;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -opera-border-radius:8px;
    -khtml-border-radius:8px;
    border-radius:20px;
    box-shadow:rgba(0,0,0,0.5) 0px 0px 24px;
    overflow:hidden;
    }

    .textruta {
    border:3px solid #999;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -opera-border-radius:8px;
    -khtml-border-radius:8px;
    border-radius:20px;
    box-shadow:rgba(0,0,0,0.5) 0px 0px 24px;
    width: 400px;
    height: auto;
    font-family: "Felix Titling";
    font-size: 14px;
    font-style: normal;
    color: #333;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    background-color: #CCC;
    float:left;
    margin-top: 120px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    overflow: hidden;


    }

    Hope you can see what the problem is. I removed the left right code from #ribbon, because it does not solve the problem. Its the same result in safari, ie9, firefox, opera, and the same when i look in chrome and safari om my ipad, wierd??

    /Angelica

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by AngelicaM View Post
    Hope you can see what the problem is. I removed the left right code from #ribbon, because it does not solve the problem. Its the same result in safari, ie9, firefox, opera, and the same when i look in chrome and safari om my ipad, wierd??

    /Angelica
    I'm not sure where #ribbon is supposed to go but it needs top/left coords to work.

    See what these changes do for you -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body {background: #ccc;}
    #container {
    	width: 1000px;
    	margin: 0 auto;
    	padding-bottom: 50px;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	border: 3px solid #999;
    	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
    	-moz-border-radius: 8px;
    	-webkit-border-radius: 8px;
    	-opera-border-radius: 8px;
    	-khtml-border-radius: 8px;
    	border-radius: 20px;
    	box-shadow: rgba(0,0,0,0.5) 0px 0px 24px;
    	background: url(../bilder/back2.png) no-repeat fixed center center;
    	position: relative;
    }
    #header {
    	height: 362px;
    	width: 1000px;
    	overflow: hidden;
    	background: url(../bilder/images/header_02.png) no-repeat;
    }
    #ribbon { 
    	position: absolute; 
    	top: 362px;
    	left: -24px;
    	/*following for demo only, since I don't have your image*/
    	background: #f00;
    }
    #content {
      margin: 0 0 0 20px;
      overflow: auto;
    }
    .textruta {
    	width: 400px;
    	margin: 120px 20px 20px;
    	padding: 10px 10px 10px 20px;
    	float: left;
    	border: 3px solid #999;
    	-moz-border-radius: 8px;
    	-webkit-border-radius: 8px;
    	-opera-border-radius: 8px;
    	-khtml-border-radius: 8px;
    	border-radius: 20px;
    	box-shadow: rgba(0,0,0,0.5) 0px 0px 24px;
    	font: normal 14px "Felix Titling";
    	color: #333;
    }
    hr {
    	width: 90%;
    	float: left;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <div id="gradientbuttons">
                    <ul>
                    	<?php include "meny.inc"; ?>
                    </ul>
                <!--end gradientbuttons--></div>     
            <!--end header--></div>
        <img src="bilder/images/ribbon_04.png" alt="description goes here" width="1049" height="96" id="ribbon">
            <div id="content">     
                <div class="textruta">
                    <h1>Välkommen till A.M. Foto & Design!</h1>
                    <hr />
                    <h2>Under uppbyggnad</h2>
                <!--end textruta--></div>    
                <div class="textruta">
                    <h1>NEWS!!</h1>
                    <p> </p>
                <!--end textruta--></div>    
            <!--end content--></div>   
        <!--end container--></div>
    </body>
    </html>
    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    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

  • #7
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok sorry.. Thanks for the advice. The html i posted before the css.
    When i put either left or right it has different outcome in those browsers i specified earlier, so that is the problem now. Can you think of something thats wrong in the other code or am i missing something?

    Thanks for your help
    /Angelica

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by AngelicaM View Post
    When i put either left or right it has different outcome in those browsers i specified earlier, so that is the problem now.
    You probably need to make #container position: relative;

    Did you look at that tutorial I suggested?
    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

  • #9
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes i looked at the tutorial, and i see that you have to make the container relative for absolute to work. So i got that working but the problem is when i set the container to relative my header overflows instead, and the ribbon does not if i have the code overflow:hidden. So i been trying to google that for a while now and am not getting any wiser. Do you have any suggestions? Thanks so much for the help so far .

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    In that example I posted, I made #container relative, #header overflow: hidden; and used ap on the ribbon. Does that work for you?
    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

  • #11
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No the header overflows anyway. i tried to strip it down and do it from scratch to. Still same issues.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by AngelicaM View Post
    No the header overflows anyway. i tried to strip it down and do it from scratch to. Still same issues.
    Let's have a look at the most current version of code your working with. Remember to use the &#91;code&#93;&#91;/code&#93; this time.

    A link to the test site would be even better ...
    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

  • #13
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    CSS:
    Code:
    body	{
    	background-color: #CCC;
    
    }
    #header	{
    	background-repeat:no-repeat;
    	width: 1000px;
    	overflow:hidden;
    	height:362px;
    	margin-bottom:0px;
    	background-image: url(../bilder/images/header_02.png);
    	margin-top: auto;
    	margin-right: auto;
    	margin-left: auto;
    
    }
    #ribbon	{
    	position: absolute;
    	width:1049;
    	right:-25px;
    	
    }
    #content	{
    
    	height:auto;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-left: 20px;
    	
    }
    
    
    #container	{
    	width: 1000px;
    	height:auto;
    	margin: auto;
    	padding-bottom: 50px;
    	background: url(../bilder/back2.png);
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	border: 3px solid #999;
    	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
    	-moz-border-radius: 8px;
    	-webkit-border-radius: 8px;
    	-opera-border-radius: 8px;
    	-khtml-border-radius: 8px;
    	border-radius: 20px;
    	box-shadow: rgba(0,0,0,0.5) 0px 0px 24px;
    	position:relative;
    }
    .textruta	{
    	border:3px solid #999;
    	-moz-border-radius:8px;
    	-webkit-border-radius:8px;
    	-opera-border-radius:8px;
    	-khtml-border-radius:8px;
    	border-radius:20px;
    	box-shadow:rgba(0,0,0,0.5) 0px 0px 24px;
    	width: 400px;
    	height: auto;
    	font-family: "Felix Titling";
    	font-size: 14px;
    	font-style: normal;
    	color: #333;
    	padding-top: 10px;
    	padding-right: 10px;
    	padding-bottom: 10px;
    	padding-left: 20px;
    	background-color: #CCC;
    	float:left;
    	margin-top: 120px;
    	margin-right: 20px;
    	margin-bottom: 20px;
    	margin-left: 20px;
    	overflow: hidden;
    
    		
    }
    HTML:
    Code:
    <body>
    <!-- CONTAINER -->
    <div id="container">
    <div id="header">
    
    
    <div id="gradientbuttons">
      <ul>
    <?php include "meny.inc";
    ?>
        </ul>
        </div><!--end gradientbuttons -->
        </div><!--end header -->
        <div id="ribbon" ><img src="bilder/images/ribbon_04.png" width="1049" height="96" /></div>
    <!-- CONTENT -->
    <div id="content">
    <!-- HEADER -->
    
    	<div class="textruta">
    	<h1>Välkommen till A.M. Foto & Design!</h1>
        
    
    <HR WIDTH="90%" ALIGN="left">
    	<h2>Under uppbyggnad</h2> 
    	
    	</div><!--end textruta -->
        <div class="textruta">
    	<h1>NEWS!!</h1>
    	<p> </p> 
    	</div><!--end textruta -->
         
      </div><!--end content -->
    </div><!--end container -->
    </body>
    Site: www.angelicamartell.com/index2.php
    and how its supposed to look with the old header, just go to home.

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by AngelicaM View Post
    Site: www.angelicamartell.com/index2.php
    and how its supposed to look with the old header, just go to home.
    That's what we needed! We can get all the CSS/markup from that, no need to post it.

    It looks like you're having trouble with uncollapsing margins.
    Look at your CSS like this -
    Code:
    body	{
    	background: #ccc;
    
    }
    
    #container	{
    	width: 1000px;
    	margin: 0 auto;
    	padding-bottom: 50px;
    	background: url(../bilder/back2.png);
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	border: 3px solid #999;
    	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
    	-moz-border-radius: 8px;
    	-webkit-border-radius: 8px;
    	-opera-border-radius: 8px;
    	-khtml-border-radius: 8px;
    	border-radius: 20px;
    	box-shadow: rgba(0,0,0,0.5) 0px 0px 24px;
    	
    	overflow:hidden;
    }
    #header	{
    	width: 1000px;
    	height:362px;
    	background: url(../bilder/bilder/newmoon2_01.png) left top no-repeat;
    	margin: 0 auto;
      overflow: auto; /*to fix uncollapsing margins*/
    }
    #ribbon	{
    	position: absolute;
    	width:1049;
    	right:15px;
    }
    #content	{
      margin: 0 0 0 20px;
      overflow: auto; /*to clear floats*/
    }
    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

  • #15
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thanks a lot. I see you removed the position relative from the container is that deliberate? I did put in relative again on the container and removed overflow hidden. The only problem now is the rounded corners on top, header still sticking out.

    So i don't need to post any code?

    www.angelicamartell.com/index.php


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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