Here's some HTML:
<div class="float">
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>
And that is all aligned along the side of the page using this CSS:
div.float
{
border-right: 1px solid orange;
position: absolute;
z-index: 2;
margin-left: 5px;
margin-top: 5px;
float: left;
width: 200px;
}
div.mask
{
position: relative;
z-index: 1;
margin-top: 5px;
float: left;
width: 206px;
height: 805px;
background-color: white;
}
img.left
{
z-index: inherit;
margin-bottom: 3px;
float: left;
width: 200px;
min-height: 200px; /* for modern browsers */
height: auto !important; /* for modern browsers */
height: 200px; /* for IE5.x and IE6 */
opacity: 0.4;
filter: alpha(opacity=40);
}
img.left:hover
{
opacity: 1;
}
Basically, what this does is put a column of pictures on the left side of the page. No big deal. However, I need each of those pictures, which are album covers, to have album titles. The way these album titles look are as such: an orange rectangle with white text. This is then vertically centered over the img. The problem is that each image has a different height, so I need to align these titles specific to the img.
Also, as an add-on, I have created a gradient that causes the top of the first image to fade into white and the bottom of the last image to fade into white. When you hover over the fade, the images will begin to scroll using jquery. The problem here is that I can not get these gradients to stay in their fixed locations and cut off the bottoms and tops of images when the page is resized. I will attach images of how it looks.
Yet another issue, the albumTitle should be at 90% opacity. The image should be at 40% opacity. Hovering over the image should change the image to 100% opacity and the albumTitle to 30% opacity. Hovering over the albumTitle should have the same effect. I do not know how to fix this either.
For the first part: you can center the titles dynamically using jQuery.
http://jsfiddle.net/p7GzB/6/
Without jQuery you would probably have to use container divs, and a cross-browser solution for the vertically centered titles.
Related
I have 2 divs. Right div is an image cutted diagonally. Left divs must have some text inside. I want this to be fully responsive like this:
The problem occurs when I change window size, it's collapsing like in the image:
.
Also there is a text on left div that need to be displayed, but with flex this seems not to work so i disabled it. Please provide solution for this.
Here is my css and html:
#diagonal {
display: flex;
width: 100%;
}
#diagonal #ct-about-col-left {
width: 60%;
border-right: 190px solid transparent;
border-bottom: 500px solid grey;
z-index: 2;
}
#diagonal span {
display: none;
}
#ct-about-col-right {
height: 500px;
width: 50%;
border: 2px solid;
background-image: url(images/content/about/right-col-image.jpg);
z-index: 0;
margin-left: -12%;
margin-right: 0;
}
}
<div id="diagonal">
<div id="ct-about-col-left">
<span>We are the best</span>
<span>text1 text1 text1</span>
<span>Text2 text2 text2 text2</span>
<div>
<span>Read more</span>
</div>
</div>
<div id="ct-about-col-right"></div>
</div>
Maybe consider a slightly different mark-up and method of adding the picture (as a background-image) and making the angle (with transform: skew).
Live Demo: http://codepen.io/anon/pen/rjyKRo
<div class="container">
<div class="caption">
<p>CONTENT</p>
</div>
</div>
* { box-sizing: border-box; }
.container {
width: 100%;
height: 50vh;
overflow: hidden;
background-image: url("http://unsplash.it/600");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 50%;
}
.caption {
height: 100%;
width: 50%;
min-width: 500px;
padding-top: 20%;
padding-left: 130px;
background-color: #ddd;
transform: skew(10deg, 0deg);
transform-origin: 100% 100%;
}
.caption p {
transform: skew(-10deg, 0deg);
}
May I suggest another approach which will save You some markup space and CSS rules as well.
Simply create a full-width div with the ID of lets say ct-about, give it a background color grey and then simply chain the image background on top of the color like so:
background: url('images/content/about/right-col-image.jpg') no-repeat right top, grey;
This simply tells the browser, make my box grey and put that image over the grey color. The no-repeat right top properties are preventing the browser from repeating the image so you don't get a tile, tell ti to place the image on the far right and top positions.
This way everything will be responsive as well.
Here is a Fiddle for You to better understand.
You can find more information about multiple CSS backgrounds in the Mozilla Developer Network
I have a gallery slider in bootstrap. It must be RWD so I must use eg. max-height.
The problem is that the images in this gallery can be different. They can be bigger/smaller - with different ratio.
In this example a .carousel div has height: 450px. To be RWD friendly I want use max-height, but images in this carousel must be 100% to entire div with keeping ratio. Even if some image will be overflowing outsdie this div (or conversely). On this case img must be centered vertically and horizontally (maybe with flexbox?).
When I do max-height the carousel will be jumping because photos can be bigger or smaller. When I set height to carousel she didn't jumping, but it isn't RWD option and some images can be smaller than div (check example below)
Here is example
Try using object-fit: cover.
These will keep your image ration no matter what size you set it. It sort of act like cropping the image. You can add object-position: center too to position your image on the center.
.carousel-inner > .item > img {
object-fit: cover;
object-position: center;
// then your height and/or width
}
Refer on these link for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Your best bet is really to add your images as background images in your css you can either do this in the actual css stylesheet or just add a style tag to the .item itself. Then add your height and such to the .carousel .item instead of the entire carousel itself along with background position and background size then remove the image tag completely from your .item in your markup. In the following example I added the !Imporatant to the background size and background position. You can remove these if you are going to just state the background in the css stylesheet but if you want you can do somthething like put them in the html markup in a style tag like
<div class="item active" style="background:url('path-to-image');"></div>
If you do this you would need to keep the important statements in your css in order for this to work otherwise there is no need for them.
Here is a revised fiddle Fiddle Demo
So your css would look something like the following:
.carousel .item{
width: 100%;
height: 450px;
overflow: hidden;
background-position:center !Important;
background-size:cover !important;
}
.carousel .item:nth-of-type(1){
background:url('https://pixabay.com/static/uploads/photo/2014/03/29/09/17/cat-300572_960_720.jpg')
}
.carousel .item:nth-of-type(2){
background:url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-349976.png')
}
.carousel .item:nth-of-type(3){
background:url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-80082.jpg')
}
/* Indicators list style */
.article-slide .carousel-indicators {
width: auto;
white-space: nowrap;
margin: 0;
left: 50%;
transform: translate(-50%, -50%);
}
/* Indicators list style */
.article-slide .carousel-indicators li {
border: medium none;
border-radius: 0;
float: left;
height: 54px;
margin-bottom: 5px;
margin-left: 0;
margin-right: 5px !important;
margin-top: 0;
width: 100px;
}
/* Indicators images style */
.article-slide .carousel-indicators img {
border: 2px solid #FFFFFF;
float: left;
height: 54px;
left: 0;
width: 100px;
}
/* Indicators active image style */
.article-slide .carousel-indicators .active img {
border: 2px solid #428BCA;
opacity: 0.7;
}
Just after a bit of CSS help please.
I need to develop this header based on a PSD design, but no idea where to start with it.
It's a fixed header, full width and 125px high with white background. Behind it will be a 500px high slider. And the site's logo will be within 1000px centered wrapper, has a transparent background so that the slider image shows through.
Here is a capture of the design:
Any ideas how this can be done please?
Edit:
I would create two divs. One with the logo with no background color and the other with the background color. Take a look at the code below. Make sure when you change the width of header-left that you update it in header-right.
HTML:
<div class="header">
<div class="header-left logo"><img src="logo.png" alt="logo" /></div>
<div class="header-right"></div>
</div>
CSS:
.header {
position: relative;
display: inline-block;
width: 100%;
line-height: 0;
font-size: 0;
}
.header-left {
display: inline-block;
width: 100px;
height: 125px;
}
.header-left {
display: inline-block;
width: calc(100% - 100px);
width: -webkit-calc(100% - 100px);
height: 125px;
background: #ffffff;
}
Original:
I would create PNG that has the logo transparent in the middle with 1000px on the left and right that was white and use the image as a background that was centered horizontally. Since it's just white it shouldn't be that big of a file.
I currently don't have code to show as an example because I been trying to make this work but not even coming close to making it work as expected. I can't show the images because of an NDA. So will describe the best I can.
Basically:
I have a logo image inside of a div. The div has margin:0 auto; so it is centered in the browser.
I have a "Arrow" png image with transparent background that needs to be flushed against the right side of the browser.
The catch is, No matter how wide you make the browser window, I need the arrow tip to stay next to right side of the logo with the tail of the arrow still being flushed against the right side of the browser.
The content of the page will be centered as well. Just in case this info was needed.
Basically I need the arrow to resize to the browser width, but make sure the arrow tip is always pointing at the logo.
All my attempts makes the div too big, causing the logo to just be flushed all the way to the left and not centered.
I understanding that may consist of the arrow being sliced into two images, but even then I am still confused on to how I can make this actually work. Starting to think it isn't something that is possible.
Here is an image to explain, I am sure once I figure out how to do the top arrow arrow I can get the bottom arrow. The bottom arrow is slightly different because the arrow tip may be at different places depending on the page.
FINAL Update: Using the Advice from Max
Note: I only tested it on chrome, firefox and safari, all recent versions as of this post. Not sure what issues I will run into with other versions or IE.
HTML
<div class="header-wrapper">
<div class="header">
<img src="images/logo.png" />
</div>
<div class="arrow-wrapper">
<div class="arrow-tail"></div>
</div>
</div>
CSS Code
.header-wrapper{
position:relative;
width:100%;
overflow:hidden;
}
.header {
position: relative;
z-index: 10;
height: 69px;
margin: 0 auto;
}
.arrow-wrapper {
z-index: 5;
background:url(../images/arrow_tip.png) no-repeat top left;
width: 50%;
position: absolute;
left: 50%;
top: 18px;
padding: 0 0 0 120px;
height:23px;
margin-left:140px;
}
.arrow-tail{
background:url(../images/arrow_tail.png) repeat-x top left;
height:23px;
width:100%;
}
If I got you right, this could a be a solution:
http://jsfiddle.net/WazcT/3/
HTML:
<div class="main">
<div class="header"></div>
<div class="arrow_container">
<div class="arrow">←‐‐</div>
</div>
</div>
CSS:
.main{
position: relative;
width: 100%;
overflow: hidden;
}
.header{
position: relative;
opacity: 0.5;
z-index: 10;
width : 400px;
height: 100px;
margin: 0 auto;
background: #ccc;
}
.arrow_container {
z-index: 5;
background: #88b7d5;
width: 50%;
position: absolute;
left: 50%;
top: 10px;
padding: 10px 0 10px 200px;
}
.arrow{
padding: 10px;
background: #eee;
font-size: 32px;
}
I am building a CSS site and fail solving this partial problem:
On the left side there is a box which consists of three images. A top image, an (optional and stretched) middle image, and a bottom image.
I want the box to the left automatically stretch if there is more content inside. This already works for the right side with my current code.
(I put both columns into a container div and set the left box to height: 100.)
But now there shall also be content in the left box. This content does overflow because I set the left box to position: absolute. Thus it does not increase the size.
I didn't manage to get this effect without position: absolute though. I tried using float etc.
Here is the example code:
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
<div id="bgbottom">
<div id="bgmiddle">
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
With this stylesheet:
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
position: relative;
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
position: absolute;
width: 185px; /* width of the bg images */
height: 100%;
background: url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
position: absolute;
width: 100%;
height: 100%;
background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
position: absolute;
width: 100%;
top: 250px; /* Don't cover top GIF */
bottom: 15px; /* Don't cover bottom GIF */
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
}
It looks like this (Colored it for better understanding):
The yellow part is actually a stretched image, I left it out for the example, it works as expected.
How can I add text into the left box that will also stretch it? Or is it possible with TABLE instead of CSS at this point?
EDIT: BitDrink's solution looks this way at my browser (current FF)
alt text http://img502.imageshack.us/img502/1241/layoutsample2.png
I could be wrong here but what you are trying to achieve here is two columns of the same height no matter how much text is in the left or right columns.
Equal Height Columns using CSS is the best CSS technique for this where by the backgrounds and bottom curved edges would need to be given to div#vertical stretcher.
The only other way that I know to make two columns equal height is to use JavaScript. See The Filament group article on setting equal heights with jQuery.
the problem is the absolute positioning! If you want an automatic resize (in vertical) of the left box, just apply a "float:left" to #bgtop!
Notice that the attribute "min-height" is not supported from all browsers (for example IE6)! The code below is an example:
<style type="text/css" >
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
float: left;
width: 185px; /* width of the bg images */
height: 100%;
background: #CCC url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
width: 100%;
height: 100%;
background: #666 url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
width: 100%;
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
background-color: #FFF;
border: 1px dotted black;
}
</style>
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
text top
<div id="bgmiddle">
text middle
<div id="bgbottom">
text bottom
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
You can see the result below:
The 4 div(s) resize vertically according to their content!