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.
Related
Here's my dilemma, I've got a background image that has a bar on it. I fit the background image by using
body {
background-image: url("foo");
background-size: 100%;
}
I also have some html that I want to be inside that bar. The problem is, when the user resizes the browser window, the image adjusts to fit it (which is what I want it to do) but the html stays in the same spot, so it gets put outside the bar. Is there a way I can make my html resizable like the image so that it appears that the html is glued to the image? Can somebody give me a css clip for this?
The biggest problem with using images to guide your layouts is exemplified by this issue. Unfortunately, Harrison, you there is no solution that will enable you to do what you want across browsers or browser sizes without changing the image. If you can, please post a screenshot of what it is supposed to look like so that we can help you modify your background to improve its compatibility
In the meantime, I suggest that you remove the bar from the image and continue to use the image as your background. Then use a div with display: block; and use the bar as its background.
If you want the bar to be resizable, set its height and width to percentage amounts of the container height and width. Of course, when the window is reduced in size to a large extent, the HTML would spill out, there's no remedy for that.
I have made a little gallery (http://www.kongeboa.dk/billeder/3/Coco/)
If you refresh, and choose to view one of the other thumbnails below the actualy image, you will see that the image resizes randomly...
I have a width on the image tag set to 100%
I am sure, that all the images has a size of 460px to fill the width of the design.
When all thumbnails have been viewed, the big image shows in the correct size (460px)
The problem happens in Safari and Chrome. OSX and Windows.
I have no idea why this happens, and i dont know how to debug it...
In short: remove float: left; from the '.image' style.
Since the '.image' style makes the div containing the image float left, the 100% is relative to the size of a div which sizes to fit the image, so you'll probably get variable results in different browsers. If you remove the float: left; from the '.image' style, it'll fill 100% of the width, and the image will in turn fit 100% of its width, and everything should be grand.
You should remove float: left from .image.
It's some kind of WebKit bug from some combination of width="100%", the shrink-wrapping behaviour of float: left, and image caching.
Live Demo - (check it in Chrome, you'll see the image is full width)
If you know they've all got a width of 460px why not set width="460"? As far as I can recall percentages for img.width are not part of the HTML spec.
If you want to make sure the image always fills its container, then what you want is the CSS style width:100%.
I give it a try...
Remove width="100%" from the img-tag and remove width:100%; from the .img class. Not sure if that solution would work for you?
So, I have an image that I sliced up in photoshop and want to add into a that is centered (with dreamweaver).
As the picture is 1024px wide and 768px high, I've created a box of that size, setting margins to auto.
The in itself is getting centered just fine, and I've pasted the code of the image in there... but the image itself is not getting centered at all ! It stays on the top-left of my webpage !!
I don't exactly understand what I'm doing wrong, so if anybody here as an idea about how to fix this, it would be very useful !
Thanks in advance :)
As others have said, without seeing your code, it's difficult to envisage what's happening. However, it's important to realize that HTML treats images as inline elements. In order to centre an image with CSS, you need to set its display property to block. For example:
img.centered {
display: block;
margin: 0 auto;
}
As long as your tag has a declared width, just apply the centered class to the image, and it will be centered inside its parent element.
For more details, see my article Centering web pages and other elements with CSS.
I have a header class which has a background and a header-center class which provides the nav content for the header. My problem is that if the window is smaller than the header-center width, the header background doesn't span the entire top when you scroll over. Stackoverflow seems to have the same problem, try resizing it and you'll see what I mean - they gray background doesn't expand over to the search box. How would I go about fixing this?
Thanks!
if the background is inside a container with a width of 100% and any parent container, including the <body> or <html> don't have a width set in the CSS then you will experience this behaviour. as 100% will be 100% of the browser viewport. Change this to a fixed width and it should stretch to fill the fixed width.
What you need to do is set a display: inline-block on your body tag. If you do this to stack-overflow's site. It fixes the problem.
This method is called "shrink-to-fit".
Here's a fiddle with the problem. DEMO
As you can see when you scroll the div doesn't expand the width of the whole screen anymore.
and here's a fiddle without the problem. DEMO
This has been answered similarly elsewhere by user473598 here How to make div not larger than its contents? you don't technically need the element to be a span though. buti-oxa's answer is worth noting as well as it notes that using this method is some what costly as it means formatting the element at least twice. Since it's being applied to the body it doesn't seem like that bad of a deal in your situation.
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.