http://jsfiddle.net/6dhm0s8v/3/
The image does not fit inside the modal, no matter what size I make it. I've tried these for modal image
width: 500px;
max-width: 500px;
Neither of these work and the image goes right outside of the modal.
How can I fix this?
You need to use img.modalImg in your CSS instead of just .modalImage FIDDLE
Also you might need to reset your left, top and transform.
Related
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
My css:
a.red, object, embed {
display: inline-block;
background-image:url(/bowties/red.png);
background-size: contain;
background-repeat:no-repeat;
width: 100%;
height: 30%;
}
My Html:
<a class="red"/>
What I want to do is have the image automatically sized right so I can use these as menu items. One on top of the next and so on. If I kept them in an image tag wrapped in an anchor then "height: auto;" works. I want to turn them into sprites which is why I am pulling it out, but I would like these to scale based on the size of the screen. Thanks in advance!
From my understanding this is not possible.
I found a resource that simply had me add a relatively sized 'filler' image. A blank placeholder that caused the div to get a height and width, then be able to be re-sized on the container re-size. Slight bit of a hack, but worked.
I have an application a sort of a toolbar which will appear at the bottom of screen with fixed positioning. But when I scroll a page all the way down, toolbar hides some links at the footer of the page. Now I can hide that bar, but I want that even without hiding none of the client page's link should get hidden behind toolbar.
Thus I want to attach a transparent div at the bottom of the page. I attach it just above body tag. I know it can mess with client's page, but just wanna experiment. I attach it with this style
style='width:100%; height:190px;'. This works fine, but if I give absolute positioning to the body, it gets all messed up.
So I want to know whether there is a way to attach a div to bottom of a page regardless of positioning of the main container. Is this achievable only using css or javascript should be used?
You can set the bottom attribute to 0px.
Use the following style for the div.
<div style="position: absolute; bottom: 0px; height: 120px; width: 300px;background-color: blue">
So, my issue right now is that I have a wrapper div with overflow: hidden and a min-height: 100% so that it stays the height of the browser window.
However, this causes issues when I have a huge population of content on the sidebar (shown in the linked image)
http://d.pr/2jVn
If I remove the overflow: hidden from the wrapper div then it'll just look funky.
What I need to know is how to keep my content displaying without it disappearing.
Add max-height:100% and overflow: auto at your div. i am pretty sure this is going to work. But it would be better for us if you provided some code.
You might want to try something like this:
#yourDiv {
min-height:100%;
}
I have a weird problem. The background image (black stripes) in the main container breaks up when the browser window is resized smaller and the user/viewer scrolls up and down (in Safari). The stripes stop stretching down 100%.
#mother {width: 100%; min-height: 100%;height: auto !important; height: 100%; margin: 0 auto; background: url('/img/bg.png') repeat-y center;}
link text
The way to change this horizontally is to set a min-width declaration on the div. Mid-width 100% doesn't work, you need a pixel value.
I don't seem able to duplicate your problem in Safari (or any other browser) vertically - the stripes don't reach the bottom of the page even on first load.
Quite Tricky :)
body { display: table; width:100%}
I'm not aware of a way of directly changing this behaviour myself. Firefox is the same, I think, at least horizontally.
Does it make any difference if you apply the background image to an element that contains #mother? Depending on your page, perhaps you could apply it to the body.