I want to frame a div surrounding divs having higher z-index.
(The framed div will contain a slideshow with elements, animated and with wierd margins, and the masking divs are supposed to hide the the texts being animated from the side.)
I'm thinking something like:
<div class="fullwith mask"></div>
<div class="mask leftpadding"></div>
<div id="slideshow" style="width:640px;height:405px;"></div>
<div class="mask rightpadding"></div>
<div class="fullwith mask"></div>
I've created this fiddle that by no means work, please fill the gap or tell me if I'm off the mark here.
Related
Let's say I have this structure:
<div className="row">
<div class="col-sm">
<div>TEST</div>
</div>
<div class="col-sm">
<div>TEST<br>TEST<br>TEST</div>
</div>
</div>
Basically, I know how to make the columns of the same height (using the .equal class on the row) however, what I need is the child div of the column to also be of the same height. Currently, if one of the child divs is shorter, it won't look aligned because I set the background color to be in the child div and not on the col-sm div.
I cannot set the background on col-sm for flexibility reasons. E.g. I may need to use that child div component in another section that doesn't use 'col-sm'.
Mine currently is the one on top, I want it to become the one at the bottom:
A situation like this, for me, would be time to turn to jQuery or a plugin such as MatchHeight.
matchHeight makes the height of all selected elements exactly equal.
I'm making a box based layout and I'm having issues with the gutters in bootstrap 3. Since they've been changed to be padded since bootstrap 2, every time I want to add padding to a box it completely destroys the gutter. I can't seem to find a way of remedying the problem.
I use a .box class to highlight the box from it's gutter and give them background colours and images. I want padding inside the box for the text so it's not right on the edge of the box walls, so I made a .box-inner class, but I can't just apply padding to it :/
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="box">
<div class="box-inner">
<h1>Test2</h1>
</div>
</div>
</div>
</div>
</div>
Any help would be very appreciated! I've been banging my head against the wall for hours.
Fiddle here, I highlighted the problem areas with a comment:
http://jsfiddle.net/kbj8dd0e/6/
Sure you can add padding. Just add it to the .box.
Have a look at this:
http://jsfiddle.net/kbj8dd0e/5/
(note that I changed the col-md to col-xs to make it show better in that small fiddle pane, but the same should work for any col class.)
All I did was move the padding to the .box class to be able to remove the redundant .box-inner. I also removed all your instances of <div class="row"><div class="col-md-12">...</div></div> as this just adds markup and serves no purpose whatsoever.
Or am I missing something here?
This might explain my question a bit better:
I need one child div positioned on top of the other so that the last-child is only showing around the edges, but the two child divs need to scroll together and keep the background of the first-child div static. This mesa that the viewport would be the first-child, but the content of the first and second child would have to scroll within the container so they can scroll together., with the first-child being the viewport.
I have the following HTML structure:
<div class="container">
<div class="text">
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
</div>
<div class="bars">
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="b"></div>
<div class="a"></div>
</div>
</div>
The bars extend to the width of the page, and the text div is overlaid on top of them, with a margin around it. I position each bars div so that they match up at the same horizontal level with the visually corresponding row.
The text div is positioned to be x pixels from each side, so that there is a margin around it. This way, you can see the ends of the bars below it.
The markup is easy, but I can't figure out the CSS for this...
text is positioned absolutely, so that it can extend to the bounds of the page with a margin. This is fine if the content inside it stays within the bounds, but it does not in this case.
This is all very hard to explain, but basically, here's the problem: I set container to overflow:scroll because I need the bars to scroll with the rows. Since text has a background image, and is positioned so that you can just see the ends of the rows beneath it, it has to be position:absolute. This doesn't work, however, when the content exceeds the bounds of text. I can't add the background image tocontainerbecause it would cover the ends of thebars`.
Does that make sense? No? Here's a jsFiddle: http://jsfiddle.net/charlescarver/BskaP/2/
Does it still not make sense? Here's a picture:
Any ideas? Ask me some questions so I can explain this better.
You don't need a lot of the css that's there -- for example the .container. If I understand correctly (and I'm not 100% sure I do) you'd like a image on the .text div which remains fixed while the rest of the page -- bars and text scroll.
You cannot put the image on the text div as it will scroll; rather, I suggest putting the image on each .row with a position: fixed as well as using padding-bottom:20px instead of the margin, so that there appears to be an image behind all of the rows and the effect is continuous. That will give you the effect I think you're after
http://jsfiddle.net/BskaP/5/
You can use jQuery's scrollTop() function to get an elements position based on scroll. Coupled with a scroll() event, you should be able to sort something out.
So put something in your scroll event to offset the position of your rows and text by the value of scrollTop().
scrollTop() : http://api.jquery.com/scrollTop/
scroll event : http://api.jquery.com/scroll/
My initial thoughts was to avoid JavaScript by combining the rows and text elements together and fake the rows being behind the text... but given your specific situation I couldn't come up with anything...
You should add overflow:auto to row. Here is a jsfiddle that proves it works: http://jsfiddle.net/BskaP/3/
I added an extra long row to it for an example.
I don't know if this is what you want, but I think it is.
I have a pre-code page coded as follows:
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video"></div>
<div class="content"></div>
</div>
</div>
Where linearBg is a gradient background, the back board of the website.
Wrapper is the container for the inner div's, and the rest are content oriented.
So I've already implemented this with styles and all sorts, but the thing is I want to add:
<div class="watermark"></div>
Underneath/behind both the content and video div, sort of like a reverse watermark,
I've tried z-indexing but I'm not an expert. Could you guide me on to do make this possible?
http://jsfiddle.net/nEWCP
All I need is to get the watermark behind both the video and content div's.
Something like this?
http://jsfiddle.net/yXTYM/3/
The trick is:
position: relative on the video and content div
position: absolute on the watermark div and no positioning, so that it starts where the previous element (nav) ended
height: 100% on the watermark so that it spans to the bottom of the wrapper
overflow: hidden on the containing div so that the watermark doesn't extend below it
Let me know if this is what you had in mind.
From your description, I don't think that you would even need a new HTML element. If you want a "reverse watermark" as you've described it, it sounds like you want a different background behind the content and video elements. Something different from the gradient.
Really all you need to do is define a class in your CSS that adds the watermark when you need it.
Here's a basic example. The orange color simulates your watermark behind only the video and content.
.watermark { background: url('/path/to/watermark.png'); }
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video watermark"></div>
<div class="content watermark"></div>
</div>
</div>
http://jsfiddle.net/82saE/
I think I have what you're after - a wrapping element that mirrors the dimensions of linearBg - giving you a gradient background with a repeating image as well.
I am trying to build a page with the following in it:
Already have the following:
one div for page to center the whole page with width 809px
inside <div class="page"> is the following:
<div class="header">
<div class="container"> (container for content stuff)
<div class="footer">
What I am struggling with:
<div class="container"> should contain the following:
leftmost <div class="leftShadow"> with 100% height to container, with left shadow image as background for <div class="leftShadow">
second to left <div class="custom_content"> with 100% height to container (will contain content of page
second to right <div class="sidebar_right"> with 100% height to container (will contain extra links)
rightmost <div class="rightShadow"> with 100% height to container, with right shadow image as background for <div class="rightShadow">
So to summarise:
<div class="page">
<div class="header">header image</div>
<div class="container">
<div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
<div class="custom_content">(this is where the content would be)</div>
<div class="sidebar_right">(some other links)</div>
<div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>
So what is supposed to happen is, when either custom_content or sidebar_right div's strength in length below the other, the other one would stretch in height to be the same with as the longer div. Obviously, both side div's (leftShadow and rightShadow) should also stretch to 100% of the container's height.
Can someone please guide me in the right direction? Basically, these div's should behave much like a table would when one td's content stretches beyond the height of the other td's.
Don't use divs like tables!
The leftShadow and rightShadow divs are completely unnecessary. Combine your background images into a single image and set it as the background of your container div.
To make sure the background image fills the height of the container, set background-repeat: repeat-y.
Why not use something like "Faux Columns"?
See http://www.alistapart.com/articles/fauxcolumns/
Perhaps you won't need the leftShadow and rightShadow divs: take a look at faux columns.
This is what you are looking for, I hope. :)
I'd do this differently because you're not going to get your divs to behave like tables.
I'm not entirely sure what you're wanting this to look like, but I'm guess you want some sort of shadow image down the left and right side of the container div. How about removing the leftShadow and rightShadow divs, put a repeatable background image on the content div of width 809px (and maybe height 1, depending on what your shadow image looks like). Also perhaps set overflow:hidden on the content div - if I remember rightly thats a kind of hack which will make the containing div stretch in this situation.