The landing page image of my site keeps on getting trimmed on the top and bottom (height is limited somewhere). What I'd like is for the image to just display in aspect ratio, without height limited in normal browser.
I've wasted a good couple of hours trying changing tags in Chrome, debugging CSS, but I can not seem to get it to work.
The website is http://raiseyourglass.co.za/index.html.
The problem is, the background image doesn't command any height vs the width of the page. You can take advantage of the fact that percentage values for padding-bottom go off the width of the element. Try adding this to your CSS (you may need to add !important if the template overrides the CSS):
.wsite-background.wsite-custom-background {
padding-bottom: 33.33%;
}
Related
Hello i have been working on this website for a while and i have been working on making it resizable when you adjust the window size (or resolution of screen) and when i finally got it to work now the links on the graphics are not clickable
http://javiermedinaloera.com/
Here is my website, all of the circles are coded to be links but only two of them work
Thank you very much, i would really appreciate your help
I know what your problem is: you have 100% width for all items in each line, but they have the same z-index, of course one will "cover" the others. The solution is change the width of them, give each of them a width let's say 250px, then adjust your "left" attribute. Probably you could see your site works in IE, because IE doesn't render your css the ORDINARY way.
Your div tags are not formatted with specific widths. Each div tag is taking up close to the whole width of the page. You need to give them specific widths. In the style tag at the top, add this CSS.
<style type="text/css">#arrieros{ width: 270px; }</style>
Just set the width to 270px for each div that you have and it should work fine.
I'm working on a custom stylesheet to override this site. https://adminluonline.blackboard.com/. Essentially we want the page elements to load as 100%. They all seem to assume that 1000px is the min-width for some reason. They'll stretch out past that as far as I want but won't go smaller.
I'm using the stylish Firefox plugin and am using !important to override. I've even gone as far as telling everything but 1 div not to display. However even with just one div, with no padding and no margins, it won't cooperate. Does anyone have any suggestions as o what could be my next steps?
#loginpane has a fixed width of 800px. That's what's causing the page to stop shrinking. Either use media queries or change this and the child elements which have a static width of 600px
Line 3 of theme1.css:
body{ min-width: 1000px; }
Probably the problem.
I have created a master page in asp.net which dont have any server side control as of now. I used div every where rather than table. There is not even a single Table right now in the page. Now When i tried to use that master page on other pages I found that div section that was holding the body content of the page is not expanding as the content is growing and content is overflowing on other sections.
Do we have any way to make div expandable with keeping minimum height fixed.
i.e. If the content is less than the minimum height set than regions should be shown with minimum height that was set else if content is more than minimum height then height starts growing with the page.
How can we do this.
This is my site where i want to make make about us and contact us page to be expandable.
You can find the css named style.css within the site.
By default a div will expand beyond the size specified using the min-height CSS property. My guess is that you are looking at the wrong thing as the cause of this issue. For your information IE6 I believe ignores the min-height property and will shrink to its content size even when the content size is smaller than the specified min-height.
UPDATE:
When you detect a browser with the problem mentioned above (i.e Internet Explorer 6) use JavaScript to measure the height of the wrapper DIV using it's offsetHeight and then subtract that value from what the min-height should be. If the value is positive then set the style.height value to the min height value.
Try this css:
div {
min-height: 100px;
overflow: hidden;
}
This overflow: hidden is a css-hack so to say. Maybe it helps you out here...
I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my div layers were overlapping each other.
Here's what it looks like:
Basically it looks as though it's mainly my center content div that is being squeezed out, as well as my header image and navigation witch are in the same top div. My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.
How do I fix it so that my divs stay in place when the browser is resized?
as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowing to other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div)
e.g.
overflow:auto;
or
overflow:hidden;
Express your widths and font-sizes in ems.
Here's a good calculator:
http://riddle.pl/emcalc/
Percentages will work, too.
Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.
I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.
you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.
Can you post some of your CSS?
The simplest way is to give all of your columns relatively sane width settings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.
Check out the min-width property. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Queries like so:
#media all and (max-width: 30em) {
/* Alternative narrow styles */
}
or so:
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresize event. I'd recommend jQuery for such a solution.
I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line
so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.
I have a really cool website that allows people to upload images. Sometimes there images are really large, as seen in the below div:
![Overflow][1]
Is there a style that can I add to my DIVs to fix this?
Link
Set your CSS overflow property on the div to one of these:
overflow: auto; /* Adds scrollbars only when necessary */
overflow: scroll; /* Adds inactive scrollbars until needed, then activates */
overflow: visible; /* Causes the div to expand to fit the content */
overflow: hidden; /* Hides any content that overflows */
You can use the CSS overflow property: set it to hidden or auto to either hide content or add scrollbars if necessary.
Generally speaking, with large images you want to thumbnail them and not automatically display them, particularly if they're over a certain size.
Using the height and width CSS attributes (or the height and width attributes) will scale the image but it'll still download the whole thing. If its large that could be a problem. It's best to generate a thumbnail on upload, display that and then allow the user to click on that to display the full-size image.
<style>img { max-width: 100% }</style>
This will make the browser resize images to fit inside their containing box. There's a few drawbacks, one being that it obviously won't work in IE6 (maybe 7?), and if the containing element has padding you'll need a wrapper around the image to make it fit.
Another great one although not fully supported would be adding max-width: 400px to your image.
Instead of using CSS, you should do a basic width & height check on your server side, and if it goes beyond a certain threshold use HTML/Javascript to resize the image. Many website forum applications do this and often allow you to click to expand the image.
Then make sure you use the Z-LAYER property to make sure the image floats above content blocks so when the image expands it's above everything.
Automatically resize each of the uploaded images, using a toolkit like ImageMagick. You'd also end up with better looking images, because it'll resample (rather than just resize).
You can then create good looking thumbnails, previews and other sizes of each images that'll fit nicely into your template designs.
If you don't want to go all the way to resizing the actual image file, and want to maintain the proportions of the image, then you can interrogate the image for its sizes (height and width) then multiply them by a required factor to fit into your div.
For example, if you have a 1024x768 image and want to put it in a div that is 800 wide, you know the width will be 800, and the height will be 768 x (800/1024) = 600. Then when displaying your image you can set the height and width properties as required.
or, with some little piece of javascript, you can check for an image width. if is larger than Xpx, then you scale to Ypx. Ofcourse, you will have a little "image flick" until the page is completly loaded.
You can inspire yourself from any IPB forum :)