This is my first question, I don't think I'm doing something wrong asking it, as it's specific, I'm trying to do a gallery, this gallery has pages, each of which has a caption, I need to show an image with 16:9 ratio and the caption no matter how long it's.
As it's right now, it can show the caption, but when we resize the browser to a smaller breakpoint, if the caption is too long it will just break (will show the caption but maybe not the image if the caption is too long).
That's the solution I'm looking for right now, I'll leave a jsfiddle as an example, I tried to make it the simplest possible, so don't look at the ugly arrows and stuff :P.
fiddle: http://jsfiddle.net/Vb7bP/5/
An ugly fix for this would be to change the padding-bottom here:
.galleryContainer {
padding-bottom: 56.25%; // This is for the image to respect a 16:9 aspect ratio.
}
But that won't work cause it might break if the caption is too long or too short, we might loose our 16:9 ratio.
The caption css I think is fine, it's positioned at the bottom of the div as absolute.
.galleryCaptionWrapper {
background: #ccc;
width: 100%;
position: absolute;
padding: 25px;
z-index: 3;
bottom: 0;
}
Any kind of help will be much appreciated, sorry if the question is wrong. Thanks!
Is this what you're looking for?
http://jsfiddle.net/Vb7bP/3/
I think you had absolute positioning on a lot of things where you didn't need it. Pertinent css is here:
.galleryImageWrapper {
background-color: #000;
width: 100%;
padding-bottom: 56%;
position: relative;
}
.galleryImageWrapper img {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
}
I had a similar question myself:
Scaling object element height proportional to width + constant with CSS
You don't have to do anything special to make the caption come after the image. That's the standard behavior for block elements.
Related
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I am relatively new to front-end dev so a bit lost as to how i can go about this. I created a container that contains a slider and some images. My supervisor has a huge screen so obviously there will be empty space at the bottom of the screen. So he doesn't want that. Instead he wants the container to be centered horizontally and vertically based on the size of the user's screen.
How can I do this properly with as minimal code as possible? I believe there is jQuery plugin but wanted to see if there is a better way or if doing this makes sense at all or not?
Due to the flow-based nature of CSS, without Javascript this can only be done if the vertical size of the centered element is fixed, by applying a position:absolute' andtop:50%` within a fixed container, and then use negative margin to offset the container. Click here for JSFiddle Sample.
Alternatively the same effect can be reached by using display:table-cell, but that's kind of messy and loses you a lot of flexibility. Sample already supplied in the other answer here so I'll save myself the effort :)
You can do it easily using a vertical-align property.
Since vertical-align works the desired way way only in a table cell, this trick with display property can give you the desired effect.
#yourDiv {
// give it a size
width: 100px;
height: 100px;
margin: 0 auto;
}
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
See a fiddle with demo.
Try this:
HTML:
<div class="center"></div>
CSS:
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: red;
}
Demo: http://jsfiddle.net/WDth4/
Exactly Center an Image/Div Horizontally and Vertically:
http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/
I've gone through CSS validation (which did find some pesky unclosed tags, sorted now).
I'm trying to align an image to the top right side of my page, with title text on the top left.
I can do this, but when I resize the browser window the image always wants to overlap the title text before either of them resize. If I remove the margins that I've used to place the image then the image sits under the title text (and to the right) instead of just to the right of it, but I feel removing this (while keeping the positioning) might be key. I do need the image to be overlapped by some other elements though.
Here's a snippet of my code for the image:
img#site-logo {
max-width: 100%;
height: auto;
clear: both;
position: relative;
z-index: 0;
margin: -12.87em 2em -16em 0px;
}
And for the site title:
#site-title a {
font-size: 4.875em;
font-weight: bold;
line-height: 78px;
padding: 0px;
margin-right: auto;
white-space: nowrap;
z-index: 2;
position: relative;
}
Site is live here:
http://dominicpalma.com/
There are surely several different approaches to solve your problem.
But in my eyes it would be the best solution to set a min-width for your #page element.
#page{
min-width:900px;
}
I have played a little bit around with the width and think a min-width of 900 px fits best in your case.
Working with a Wordpress theme, and needed to have the blue blur background stay with the slider when the browser window is re-sized. I have achieved that goal, but I have noticed that when you narrow the browser, everything does not stay centered there is a large space on the left. What would be the best way to remedy this?
http://www.stringcreative.ca/wp/
The sites a bit of a mess, you need to have the wrappers with the image, then the containers the same size centered
#wrapper {
background: #000b1a url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat fixed top center;
}
#header_container {
margin: 0 auto;
height: 117px;
width: 960px;
position: relative;
}
dont need a lot of the position's set to absolute, and margins at - to get it to fit.
also look into the 960 Grid System. i use it all the time, and saves me loads of time getting the site to fit. hope this helps
It's because your solution for centered the slider is inelegant, and relies on fixed widths and absolute positioning to make it look right.
To fix it, you need to change a few things.
Change #homebgw to:
#homebgw {
background: url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat scroll 50% -117px transparent;
height: 411px;
width: 100%;
}
Change #header to:
#header {
background: url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat scroll 50% 0;
height: 100px;
margin: 0 auto;
padding-bottom: 35px;
width: 1400px;
}
Quite simply, you don't need absolute positioning to solve the issues you posted above. If you're using absolute positioning and negative margins to correct center alignment issues, you're probably doing something wrong. Keep it simple, and Google how to achieve the results you desire. The net is full of helpful documentation to achieve these basic results without hacking up your code with fixes ;)
Heyo, I'm using a 2000px width image as a background for a 960px width webpage. I am trying to make it so it doesn't show a horizontal scrollbar when a part of the image is to the right of what's visible, but what I'm trying to do is not working for me.
Two IDs are involved. One is 'bg' which has the background image as its background and is positioned where I want it, while the other is 'bg_holder' which contains only 'bg' and which I tried to use to neatly cover the visible web page area and hide its overflow so the part of the background image that is jutting out wouldn't cause a scrollbar. But this does not appear work, as a scrollbar is created when there is a part of the image to the right of the visible web page (but not when it's to the left).
Is there anything wrong with this CSS snippet? Could something outside of this snippet be the source of the problem? Is there another approach I can take?
#bg_holder {
position: absolute;
overflow: hidden;
min-width: 960px;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
}
#bg {
background: url(../img/bg.jpg);
position: absolute;
height: 1050px;
width: 2000px;
margin-left: -1366px;
left: 50%;
z-index: -1;
}
To answer your question, by positioning #bg absolutely, you take it out of the document flow / out of it's parent element, so the overflow:hidden has no effect.
As an additional comment, you can position the background image exactly where you want (x, y) when you put it directly in #bg_holder, there doesn't seem to be any need to put the background in a separate div. As far as I can tell at least, but I haven't seen the rest of your code and don't know what you want to achieve exactly.