I have the following structure:
<div class="service lorange">
<div class="img"></div>
<div class="title two-lines"><span>P-Accelerator for Start-Ups</span></div>
</div>
And the following CSS:
.service .img {
transition: opacity 300ms;
}
.service:hover .img {
opacity:0
}
.service has a rounded border (35px) and overflow: hidden;.
This causes the inner .title to have its borders cut-off with its parent's borders (this is the expected behavior).
However, during the transition when hovering, and only mid-transition (since it starts and till it ends, not before or after it starts and finishes), the .title borders do not cut off for some reason.
Any idea what's going on?
I've tried making a fiddle, but it doesn't reproduce the issue. What property can be causing this?
Edit: The fiddle in its shell does not reproduce the problem, but looking at the shell alone as a page does (I took the source of the iframe the fiddle uses)
My solution: (But I am looking for a better one.)
#services-grid .service .title {
position: relative;
z-index: 10;
top: 130px;
font-size: 13pt;
text-align: center;
height: 54px; /* IE fix */
/* Add radius to bottom of .title */
border-bottom-left-radius: 8px 15px;
border-bottom-right-radius: 8px 15px;
}
JSFiddle: http://jsfiddle.net/KC4TH/4/
The real reason this is happening is that browsers are only cropping the child element properly if it is not positioned (i.e. has position:static;). I've taken the liberty to alter your markup a bit and created a new jsFiddle which works as it should on Chrome, Firefox and IE10 (also working on IE9 but without the transition ofcourse).
Markup:
<div class="serviceContainer"> <!-- added a container -->
<div class="service lorange">
<!-- removed div.img -->
<div class="title two-lines"><span>P-Accelerator for Start-Ups</span></div>
</div>
</div>
CSS: (I've tried to include only the relevant CSS in the fiddle)
#services-grid .serviceContainer{ /* added a new container which the has the background image */
background:url(http://foto.hrsstatic.com/fotos/0/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F3%2F9%2F4%2F0%2F394033%2F394033_p_465430.jpg/zoKRL9Oq7JFnhFhhAn%2FfTQ%3D%3D/128,128/6/Catalonia_Yucatan_Beach-Quintana_Roo-Pool-394033.jpg) center center no-repeat;
float:left;
border-radius:35px;
-moz-border-radius:35px;
-webkit-border-radius:35px;
-ms-border-radius:35px;
margin:0 15px;
overflow:hidden;
}
#services-grid .service.lorange .title span{ /* Give background color only to the span */
background-color:#efbd00;
}
#services-grid .service.lorange:hover{ /* fade color to container only when hovered */
background:#efbd00;
}
#services-grid .service .title {
position:static; /* This is what's doing the trick */
padding-top:130px; /* position the span using padding instead of position:absolute */
font-size:13pt;
text-align:center;
}
The "border-radius on the child" solution is only a cosmetic quickfix which can cause inconsistencies and it's also causing little bumps on each side because of the radius difference:
Related
Just a simple image that uses some jQuery to fade some content over the top when moused over.
Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.
each image is layed out like so
<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1></div>
<img class="display" src="http://placehold.it/400x300">
</li>
Can see a live example here.
http://jsfiddle.net/QLUMH/
Any ideas on ways to fix/improve what I am doing here? Cheers
Demo
Here you have live example,
you are giving 100% to width and height.
so that really goes overflow.
Code edited-
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
The issue is that your description fills the entire column, which is wider than your image. If you add an "inner column"/container that collapse to the same width as your image, it will work alright. I've created a fork of your demo that demonstrates this.
I've added a wrapper "ib" (Just stands for inner block. rename this to a proper name) inside each .column.item like so:
<div class="ib">
<div class="description">
<h1>Image hover</h1>
</div>
<img class="display" src="http://placehold.it/400x300">
</div>
And then just created a very simple CSS rule for making this wrapper collapse to its contents:
.ib {
display: inline-block;
position: relative;
}
You did not style your li. The issue is that in foundation.css it is getting padding-left and padding-right. You need to remove that and use margin-left and margin-right instead. And you also need to fix the width of the li. As .description will get its 100% height. So you need to include a small css in your own file (don not modify foundation.css).
#portfolio li.columns{
/* You can use the width in '%' if you want to make the design fluid */
width: 400px;
padding: 0px;
margin: 0px 0.9375em;
}
Fiddle
You'll just have to get rid of the padding on tne li
li{ padding:0 }
or use the the box-sizing property:
`li { box-sizing:border-box; -moz-box-sizing:border-box; }
Change in CSs will help,
I have updated the same in fiddle
with change in CSS,
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
#portfolio .description h1 {
color: white;
opacity: 1;
font-size: 1.4em;
text-transform: uppercase;
text-align: center;
margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}
Update:
If the H1 created extra cutter and wrapping issue(for some), please use the DIV tag instead, which should work fine!
I hope this will solve your problem :)
I have the following html:
<div class="main_container">
<div class="sub_container">
<div class="floating">wookie1</div>
...
<div class="floating">wookie5</div>
</div>
</div>
Consider it's like an image gallery.
main_container has an unfixed size, it's set as a percentage of the user resolution.
I want sub_container to have the exact width of the sum of the floating div.
If I use "display:table;" for sub_container and "display: inline-block;" for floating divs, it works fine:
until I have enough div in the list, so that the sum of width is larger than main_container and they break on the next line:
But still, I want subcontainer (yellow background) to to be ALWAYS the EXACT WIDTH of the sum of the divs, even when they go on several lines, like this:
I've googled for hours now, and wasn't able to find an elegant solution (css only, if possible.)
Here's the jsfiddle, to play with this.
Pure CSS Solution
The problem is that for the items to "know" to wrap to the next line, the container has to have "filled" its available horizontal space, which is your .main_container width. Yet you want the background to not go beyond what is needed for the actual elements themselves. So I've used the elements themselves to create the background with the help of cobbled together pseudo-elements.
Here's the fiddle (tested in IE9, Firefox 18, Chrome 24 on a Win 7 machine)
What I am doing is piecing together the background with each individual .floating element, which makes the right most element to be the right border control for the size of the background (note the two different width examples in the fiddle).
The explanation of each part is given in the comments below. There are a two key limitations to note:
The .floating cannot have a position set, so that is a potential limitation based on particular application.
The background needs to be either a solid color or purely vertical oriented "motion" (i.e. a gradient fading from top to bottom, or horizontal lines would work).
KEY CSS (with explanatory comments)
.sub_container {
border-left: 1px solid #333; /* forms its own left border */
overflow: hidden; /* needed for background and border to work */
position: relative; /* positioning background off this */
z-index: 1; /* needs a stacking context */
}
.floating {
font-size:20px;
line-height:30px;
padding:0 5px 0 5px;
border: 1px solid black;
margin: 3px;
display: inline-block;
/* NOTE: CANNOT be given positioning */
}
.floating:after {
content: '';
position: absolute; /* will position off subcontainer */
border-top: 1px solid black; /* makes the top/bottom border itself */
border-bottom: 1px solid black;
z-index: -1; /* push it to the background */
top: 0; /* set it to top of sub_subcontainer */
bottom: 0; /* set it to bottom of sub_container */
margin-left: -100%; /* shove it past the far left edge of sub_container */
/* next, use padding to bring it back to its position at the end
of the text string of .floating */
padding-left: 100%;
/* next, add enough padding on the right to compensate for the right
padding, right margin, and right border of .floating */
padding-right: 9px;
background-color: yellow; /* set your background color */
/* NOTE: this will not work with a background image that
has any horizonal differences to it (top to bottom
gradient would probably be okay) */
}
.floating:before { /* make right border */
content: '';
padding-top: 10000px; /* give it some obscene height that will not be exceeded */
margin: -5000px 0; /* counter the padding height by half size margins top/bottom */
/* next, push this behind the background with an even lower z-index
to hide it if it is not the right most element beign used to
form the right border */
z-index: -2;
border-right: 1px solid black; /* make the right border */
float: right; /* get the before element to the right */
position: relative; /* needs to be adjusted in position */
right: -9px; /* move it same as padding-right of the after element */
display: block; /* give it a display */
}
I got bored trying this and created a JS script based on jQuery to solve it.
var t = $(".sub_container").width()/$(".floating").outerWidth();
$(".sub_container").width(parseInt(t) * $(".floating").outerWidth());
Demo
Reread your question...since you won't commit to anything (max-width:80%, 500px, etc) I broke everything on the 4th child - per your example.
CSS
.main_container, .sub_container, .floating { outline:1px solid black }
.sub_container { background-color:yellow; display:table; padding-left:5px }
.floating {
float:left;
padding:5px;
margin:5px 5px 5px 0;
}
.floating:nth-child(4n+5) {
clear:left;
float:left;
}
HTML
<div class="main_container">
<div class="sub_container">
<div class="floating">wookie1</div>
<div class="floating">wookie2</div>
<div class="floating">wookie3</div>
<div class="floating">wookie4</div>
<div class="floating">wookie5</div>
<div class="floating">wookie6</div>
<div class="floating">wookie7</div>
<div class="floating">wookie8</div>
<div class="floating">wookie9</div>
</div>
</div>
EDIT (option 2)
I don't believe what you're trying to do can be accomplished by HTML/CSS alone. I offer another solution based on a hunch...and your Image Gallery comment.
CSS
.main_container, .sub_container, .floating { outline:1px solid black }
.main_container {
text-align:center
}
.sub_container { background-color:yellow; display:inline-block; max-width:80%; }
.floating {
display:inline-block;
padding:5px;
margin:5px;
}
HTML
<div class="main_container">
<div class="sub_container">
<div class="floating">wookie1wookie1wookie1</div>
<div class="floating">wookie2</div>
<div class="floating">wookie3</div>
<div class="floating">wookie4</div>
<div class="floating">wookie5</div>
<div class="floating">wookie6wookie6</div>
<div class="floating">wookie7wookie7wookie7</div>
<div class="floating">wookie8</div>
<div class="floating">wookie9</div>
</div>
</div>
It does not make .subcontainer snap to the contents; however, (using max-width) it does allow you to give it some breathing room from the main container and its children can be of various sizes.
Delete main container width and .sub_container position absolute and you should be good to go.
.main_container {
#width:380px;
}
.sub_container {
#position: absolute;
}
Use span element instead of div for "sub_container"
.sub_container{background-color:yellow;}
I'm trying to get a fixed width white <div> on a gray background (body), but everything is shown gray; the white is ignored. Code is on jsbin. Any ideas? I did this on previous websites, and there everything was peachy. I can't see any difference with what I'm doing here.
PS: I had to write the jsbin URL down, and manually type it here, since Firefox refused to copy it from the share popup to the clipboard. This also worked previously :-(
Your containers and sidebars are left floated, but they arent "cleared".
What you do is add a div
<div class="clearBoth"></div>
after your sidebar div.
and then in your css:
.clearBoth {
clear:both;
}
The floats are ruining it.
It is caused by the floats :-)
Basically #container don't have dimension because everything inside it are floated. No dimension = no background to appear
Adding overflow: auto to #container is one way to solve the problem (depends on how you exactly want the whole layout to appear).
body {
background-color: #CCCCCC;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
text-align: center;}
#container {
background-color: #FFFFFF;
display: inline-block;
margin: 0 auto;
text-align: left;
width: 400px; }
try these changes
Your problem is that by spec, contained DIV's are taken out of the flow of the document. Because of this, your container div is considered empty by compliant browsers.
Place the following code at the bottom of your stylesheet:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
Then make the change to your container like so:
<div id="container" class="clearfix">
I have a large graphic that I am trying to pull up behind my content. Currently, instead of pulling up behind my content, the graphic is just placed below it, which leaves a big gap between the bottom of the content and the footer. The large graphic in reference is the watercolor bird at the bottom. The content is the resume text. Keep in mind that that resume text is an accordion link that expands. I need help closing up this space, please.
http://imip.rvadv.com/index3.html
CSS:
#bottom-graphic-container {
margin:0;
padding:0;
background:#fff url(../images/bg-bottom.jpg) bottom left no-repeat;
height:313px;
}
.wrapper{
max-width:920px;
margin:25px auto 0 auto;
padding:0;
width:100%;
z-index:1;
}
.st-accordion ul li.st-open > a{
/*margin-top:70px;*/
}
.st-open:last-child .st-content {
padding-bottom: 0;
}
.st-content{
padding: 5px 0px 100px 0px;
}
.st-content p {
font-size: 14px;
font-family: Georgia, serif;
font-style: normal;
line-height:22px;
padding: 0px 4px 15px 4px;
}
.st-accordion{
width:100%;
min-width:270px;
margin:0 auto;
}
.st-accordion ul li{
overflow: hidden;
padding:0 30px;
}
.st-accordion ul li:first-child{
overflow:visible;
list-style-type:none;
}
.st-accordion ul li:last-child{
}
.st-accordion ul li > a{
font-family: 'Trocchi', serif;
text-shadow: 1px 1px 1px #fff;
color:#688993;
line-height:44px;
font-size: 36px;
display: block;
text-decoration:none;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
color:#18232e;
}
HTML:
<div class="wrapper">
<!-- <div class="chirp">chirp</div>-->
<div id="st-accordion" class="st-accordion">
<ul>
<li>
Chirp. Would you like to know about me?<h2>Read the official birdwatcher's guide.</h2>
<div class="st-content"><p>content goes here</p>
</div>
</li>
<li>
A bird's eye view of my endeavors<h2>and other flights of fancy, also known as my portfolio.</h2>
<div class="st-content">
<p>Portfolio Goes Here.</p>
</div>
</li>
<li>
My migration pattern<h2> and other common facts, otherwise known as my resume.</h2>
<div class="st-content"><p>content goes here</p>
</ul>
</div>
</div>
</div>
<!--bottom graphics-->
<div id="bottom-graphic-container"></div>
<!--Footer-->
<div id="footer-container">
<div id="footer-content-container">
<div id="footer-copy">Tiffani Hollis, Creative Professional (404)931.6057 thollis#i-make-it-pretty.com</div>
<div id="signature"><img src="images/signature.png"></div>
</div>
</div>
I replicated your website locally and was able to fix this for you.
Reference: jsFiddle 1 (Note: Due to #font-face Same Domain Orgin Rules, those font's aren't shown.)
The solution was to change the HTML order for the Corner Bird so that this Div with ID name #bottom-graphic-container will contain the Accordion content (with class name .wrapper ).
Then, several modifications/configurations were done to the CSS to allow for proper operation. Notably, I set the Footer and the Corner Bird Div's to position:fixed; so it always clings to the bottom. When there's Link's or Resume Text behind the Footer, the expected browser scrollbar comes into play.
To clarify further: The Corner Bird is the "back-layer", the Accordion is the "middle-layer", and the Footer is the "front-layer". They all work in harmony now. :-D
Since the Corner Bird is now behind the Accordion div, that bg-background.jpg was clipping into the Header Image. The solution was to convert this image to PNG with Transparency. I used open source irfanview for that. I've included that PNG here as well, or you can make your own.
When all is said and done, your website will work as you expect it to. Tested in IE8, Firefox, and Chrome with no issues. (Side note: In IE8 I did not test #font-face fonts).
Here's a screenshot of your webpage with the browsers window adjusted to a small size:
The modified HTML:
<!--bottom graphics--><!-- Think of this as "bottom-back-layer" since various layers are at play here. -->
<div id="bottom-graphic-container">
<!--Footer-->
<div id="footer-container"><!-- Think of this as "bottom-front-layer". That said, back-layer and front-layer are also 'top' and 'bottom' too (nothing overlaps). -->
<div id="footer-content-container">
<div id="footer-copy">
<!-- Removed personal info -->
</div>
<div id="signature"><img src="images/signature.png"></div>
</div>
</div>
</div> <!--Closing tag for bottom graphics-->
The modified CSS:
.wrapper{
width: 920px;
max-width:920px;
margin: 0 auto;
padding: 0;
margin-bottom: 65px; /* Once the last item in Accordion menu is behind Footer, margin-bottom:65px; will provide Browser main scrollbar if hidden. */
position: relative; /* position:relative required with z-index below. (or absolute can be used with more CSS settings */
z-index: 1; /* A z-index of 1 is used since it's higher than '#bottom-graphic-container' (0 z-index) so Accordion Links are clickable */
}
#bottom-graphic-container {
width:100%;
height:313px;
background-image:url(../images/bg-bottomTrans.png); /* Use transparent PNG image. This CSS rule has color #fff removed as well. */
background-repeat: no-repeat;
position: fixed;
bottom: 94px; /* The height used here is the height of 'bg-footer.png' image. */
/* border: 1px solid red; */ /* Use for troubleshooting since image, even when transparent, may prevent interaction with content under it. */
}
#footer-container {
width:100%;
height:94px;
background-image:url(../images/bg-footer.png);
background-repeat: repeat-x;
position: fixed;
bottom:0;
z-index: 10; /* A z-index of 10 will allow the footer to cover the Accordion Links. */
}
#resume-container ul li{
list-style-type:disc;
list-style-position:inside;
line-height:20px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
padding-left:20px;
margin-right:80px;
} /* this closing '}' was missing */
The modified PNG with transparency background image file:
bg-bottomTrans.png
Final Update: As the above jsFiddle is one method to satisfy this Question, here is a complete different method at the request of the OP.
Reference: jsFiddle 2
The Bottom Graphic and Footer are part of the last Accordion item (Resume). Note moving up items that were at the bottom to be closer to top will create empty space at bottom of webpage for large monitors (To be sure, maximize your browser). To change the distance, adjust the CSS bottom property for the Bottom Graphic and Footer as noted in the CSS.
This is why the first method above has them fixed so no matter the browser height, uniform look is achieved. Note: Font-face has Same Domain Origin Policy rules, hence they don't render in jsFiddle.
To access the jsFiddle Edit Page, remove /show/ from Address Bar.
The HTML and CSS Panels is your code.
I've included comments in the CSS section and the HTML section changes include:
1. Div id="masthead-container" now contains the other items.
2. The other items are: class="wrapper", id="bottom-graphic-container" and id="footer-container
3. When viewing the HTML in the jsFiddle, the RED tags seen are due to previous markup errors. Once your webpage is composed, visit W3C Online Validation to see where the error occurs. Example: you have an unclosed or extra div tag that shouldn't be there.
I see two possible modification to improve the visual/remove the space:
Change the wrapper class to remove the bottom margin:
.wrapper {
margin: 25px auto -50px;
max-width: 920px;
padding: 0;
width: 100%;
z-index: 1;
}
The line that's changed is the margin one. I put -50px at the bottom margin. You can play with that value (make it lower or higher) to change the space between your wrapper and the footer.
You might want to add a rule to the last accordion child as well. Because he doesn't need the extra bottom padding that separate him from its siblings.
.st-open:last-child .st-content {
padding-bottom: 0;
}
This one target the .st-content div that have .st-open as parent , but only if the block with the .st-parent is the last-child of its parent. Hence, it works only for the bottom part of your accordion, setting a bottom padding of 0 instead of 100px.
I have a containing div that is NOT restricting the width of its child divs. The divs are stretching all the way to the full width of the screen, when i have a set width on both the container and the child. Why is this happening. I do NOT have any positioning or floating going on.
Please view my HTML:
<ul class="tabs_commentArea">
<li class="">Starstream</li>
<li class="">Comments</li>
</ul>
<div id="paneWrap">
<div class="panes_comments">
<div class="comments">member pane 1</div>
<div class="comments">member pane 2</div>
<div class="comments">member pane 3</div>
</div>
My CSS, the relevant parts of it at least:
#MembersColumnContainer {
width: 590px;
float: left;
padding-right: 0px;
clear: none;
padding-bottom: 20px;
padding-left: 2px;
}
ul.tabs_commentArea {
list-style:none;
margin-top: 2px !important;
padding:0;
border-bottom:0px solid #666;
height:30px;
}
ul.tabs_commentArea li {
text-indent:0;
margin: !important;
list-style-image:none !important;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
float: right;
}
#paneWrap {
border: solid 3px #000000;
}
.panes_comments div {
display: ;
padding: px px;
/*border:medium solid #000000;*/
height:150px;
width: 588px;
background-color: #FFFF99;
}
You could set max-width on either, or both, of the div elements to prevent their expansion:
#containerDiv {
min-width: 400px; /* prevents the div being squashed by an 'extreme' page-resize */
width: 50%; /* defines the normal width of the div */
max-width: 700px; /* prevents the div expanding beyond 700px */
}
It might also be that you're allowing the div's overflowed contents to be visible, as opposed to hidden (or auto). But without specific examples of your mark-up and css it's very difficult to guess.
Generally giving elements layout is pretty straight forward (always assuming you have a good understanding of floating, positioning and the box model), and in most cases you wouldn't have to use max- min-width to control elements on the page.
My two cents: If I was you, I'd start stripping out code (starting with the !important rule), and see when the problem is solved. De-constructing the code like that is a good way to find bugs.
Sorry I couldn't help, but I'm reluctant to give advice since the code you provided shows a lot of other stuff going on elsewhere that might be contributing to your problem (like having to use !important).
:D
I figured out the problem. The file that was calling in the css was conflicting with another external css file that had the same element with the same name in it. Thank you all for your help though.