Overflow

AngelicaM · 01-09-2013, 12:02 PM

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

Excavator · 01-09-2013, 03:46 PM

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.

AngelicaM · 01-10-2013, 09:10 AM

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

Excavator · 01-10-2013, 11:03 AM

Can you give us a link to your test site? Sorta need to see the code and images to know what's going on...

AngelicaM · 01-10-2013, 09:07 PM

Here is the html:
<body>

<div id="container">
<div id="header">

<div id="gradientbuttons">
<ul>
<?php include "meny.inc";
?>
</ul>
</div>
</div>
<div id="ribbon" ><img src="bilder/images/ribbon_04.png" width="1049" height="96" /></div>

<div id="content">


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

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

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

</div>
</div>
</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

Excavator · 01-10-2013, 11:11 PM

Quote:

Originally Posted by AngelicaM

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, [code][/code] - 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.

AngelicaM · 01-11-2013, 07:20 AM

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

Excavator · 01-11-2013, 08:59 AM

Quote:

Originally Posted by AngelicaM

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?

AngelicaM · 01-12-2013, 08:16 PM

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

.

Excavator · 01-12-2013, 08:40 PM

In that example I posted, I made #container relative, #header overflow: hidden; and used ap on the ribbon. Does that work for you?

AngelicaM · 01-12-2013, 08:46 PM

No the header overflows anyway. i tried to strip it down and do it from scratch to. Still same issues.

Excavator · 01-13-2013, 12:47 AM

Quote:

Originally Posted by AngelicaM

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 [code][/code] this time.

A link to the test site would be even better ...

AngelicaM · 01-13-2013, 07:35 PM

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.

Excavator · 01-13-2013, 11:22 PM

Quote:

Originally Posted by AngelicaM

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*/
}

AngelicaM · 01-14-2013, 10:36 AM

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