Bear with me here, this is kind of hard to explain properly...
THIS FIRST PART AS DESCRIBED BELOW IS WORKING FINE.
On this first image you see a browser screen that is wider than my (bootstrap) container. The blue is the whole screen window, the white is the container (with a max-width) with the basic 12 columns from bootstrap.
I want the laptop on the right to be wider then the x-number of columns it has on its bootstrap grid. When the (for example) 7 colums have a width of (for example) 500px and the image is 800px wide, it will naturally overflow the container (if the image is not given a width, ofcourse). So when you make your window smaller (see second image) you just cut of the image a little.
THIS SECOND PART AS DESCRIBED BELOW IS THE PROBLEM...
Now I want to have the same thing on the left side... But When I have 7 colums in my bootstrap, that are (for example) 500px wide, and I have an image inside that, with a width of 800px the overflow happens naturally on the right side again. I would like this to be on the left side!! So something like having a div with an image inside the is aligned to the right, but the overflow is on the left.
THIS IS WHAT IS HAPPENING RIGHT NOW: where the overflow is on the right (when it should be on the left).
I do NOT want to strech this image longer than the natural width of the image
I PREFER it being <img>-tags in stead of background-image, but if this is not possible I can accept that.
Some Code is provided in this JSFiddle
Use
.imgLeft{
direction: rtl;
}
OR
.imgLeft{
position: relative;
}
.imgLeft > img{
position: absolute;
right: 0;
}
Giving max-width to image will works
.imgRight, .imgLeft img{
max-width:100%;
}
Related
Working on site for a school project running into silly issues.
http://jmtestserver.net46.net/
1) So first thing I'm wondering, my height on the div with the textured background is set at a manual PX. I want this to be set at auto because I'm making this responsive so I want it to grow and shrink with the box divs. However, if I set it to auto it looks like this
http://i.imgur.com/AWFmiOM.png
I don't understand why the box divs arent pushing it down??
2) As you can see the 2 boxes on the right stick down further than the 2 boxes on the left. I don't understand why this is because the boxes use the exact same css other than color and the image sizes are are exactly the same. So I cant figure out for the life of me why they wont match up heightwise.
Thank you in advance! I know these are simple things but they are causing me a lot of trouble!
1) The problem with your footer "floating" up behind your boxes has to do with the "float: left;" on your boxes. The elements after your boxes will basically ignore the boxes as if they werent there. To fix this simply add clear: both; to a element after the float happens.
You can read more about it here: Float
#bottom-section {
clear: both;
}
2) The boxes being bigger has to do with your images not being the same size, either find/make images with the same height or add a height value to .photo_icon
.photo_icon {
height: 50px;
}
If you inspect your webpage you will see that the images are not all the same size. You can force them to be by changing your main.css. Modify .photo_icon as below:
.photo_icon {
width: 50%;
margin-top: 1%;
height: 99px; /* This line */
}
question: icons in 3rd and 4th box are bigger (height 98px vs. 55px in first two cases).
question: boxes has content of different height and take exactly the same height as its content. As I said, content in 3rd and 4th box is higher than in first two boxes.
Solution:
resize/crop your icons to the same size (height). If you add .photo_icon {height: 55px;} you'll see it will work correctly with icons with proper size.
Heights of your images are not same. If you make them same size, or add something like
height: 101px;
to your .photo_icon class, it would solve the problem
My site is centrally aligned in a div container #980px width. I need a div gutter on the left and one on the right for clickable banner ads but i don't want them within the scrollable container.
To explain more clearly, if the screen res goes down to 980px I don't want to see the ads or a scroller - just my container. If it goes down less than 980px I want to see a scroller (as I do now) for the center container.
The gutters are only for wider screen users and should not be included in the scroll. I don't want to use media queries as I want part of the ad to show either side if the screen resolution is nearly wide enough.
I'm stuck how to do this. Do I position absolute the container and position relative the gutters? Do I need to use overflow?
Check this fiddle: http://jsfiddle.net/ezy2J/1/
Be aware that unless the iframe is wide enough the banners won't show in the fiddle, so make sure to resize the html iframe in the fiddle.
You can use position: relative on the container and then position: absolute on the banners to get them to stay outside the container.
I've used media queries to hide, show and resize the banners (drag the iframe width for the HTML). You'd probably use display: block and display: none for compatibility instead of opacity: 0 and opacity: 1 but it looks nicer for these purposes!
something like that?
learn about position: absolute
dont forget about position: relative on parent container
I'm in the process of creating a responsive site (currently only working on the main content.)
I've created two floated divs with percentage based widths. One contains an image which resizes with the browser resizing. The image has a min-width of 100px.
Can anyone tell me why when put into a mobile sized width it doesn't drop down? How can I make the image stack underneath the text?
JS Fiddle
Live site
If you apply the:
min-width: 100px; to the aside element instead, then on a small screen it drops to the bottom. Good luck with the design. (Like this: http://jsfiddle.net/eddturtle/7d6D7/1/)
Question
I'd like the CSS background texture for my content area to begin immediately after a variable-height header. The texture has a natural height of 900px and is graduated to a flat color, so if it fits in the available space between content-start and body-end, the whole texture should be displayed. The texture shouldn't artificially expand the content area or cause unnecessary scroll, but scroll should still appear when content is longer than fits in the page.
JSFiddle
On request, here's a JSFiddle of my issue. Since there's really only one DOM element in the question, I think the fiddle doesn't clarify much. http://jsfiddle.net/AbEUe/5/
What doesn't work
#contentAndBackground {
padding-bottom: 900px;
margin-bottom: -900px;
background: url('my900pxHighImage.png') repeat-x;
}
The above ensures the whole image is shown, but the negative margin doesn't keep the unnecessary scrollbars away as I'd hoped.
#contentAndBackground {
min-height: 900px;
background: url('my900pxHighImage.png') repeat-x;
}
Same problem. The whole image is shown, but scrollbars are always showing.
I'd like to avoid using JavaScript that needs to handle screen resizing.
I think I did it: http://jsfiddle.net/AbEUe/7/
I have created 2 container divs, both have a height of 100%.
The first contains header and background, and has overflow:hidden so the background is stopped at the bottom.
The second contains header and content, and because of use of positioning this one is on top of the first container, and it can stretch to more than 100% (if the amount of text requires that).
You can see you have to render the header twice, but that won't matter because the first isnt visible.
Edit:
Solved the last problem (see comment) by also setting the background to the content div. See http://jsfiddle.net/AbEUe/8/
Your question is not very clear, but this prevents your kitties from being chopped up.
#content {background: url('http://placekitten.com/g/200/300') repeat-x; min-height:300px;}
Basically, I am looking for a way to center a container that is 1600px within a container that is 940px.
I want the page to stay centered at all times, and the main content of the site is 940px wide. I have an image that is 1600px, and just adding the image forces the image to align left with the 940px container and overflow to the right 660px. See the image below for an example.
What I want is the image to center within the 940px container, and save for adding multiple background images, which really isn't pre IE8 friendly, I am at a loss.
I've never really had to do this before, so I've never run into this problem.
Right now, I have the page set to a master container of 1600px. This works, but when you open the page, the page starts at the far left of the 1600px container and the main content appears uncentered.
Example 2 below is what I am looking for.
Any help is greatly appreciated. Thanks guys and gals!
Or you could just center the 1600 container relative to the Page using the following attributes:
left: 50%;
margin-left: -800px;
You can use javascript to get the width of both divs, then take the difference between the two (1600-940=660px). Divide that by two for centering (330px). Then position the container left that amount (-330px).
You can set a negative margin on the image. You can use Javascript to compute the actual number, but if it's always going to be 1600 within 940, then you can set a negative margin of 330px.
(Container width - Content width) / 2 = Left Margin
#container img { margin-left: -330px; }