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.
Related
Having an issue with content with floated images and text that is now deep inside a flex container (wasn't in previous site). See here for example: https://m2.alocalprinter.shop/products/flyers-leaflets/flyer-printing
Scroll down to the description below the products. The floated icons next to the text should be 60x60px with 20px right padding and variable bottom padding. But they are rendered at 40x40px. If I increase image width to 80px then it renders at 60px. For whatever reason flex is setting the image width to width minus padding. Only way I have found to correct this is to switch from padding to margin then it behaves as expected. For example, first icon using margin instead of padding:
Problem is that would require us to go through all the content to make this change. I've tried to reproduce this on CodePen but with a simple layout it doesn't happen. Must be something to do with the more complex layout of a real page. I've tried everything I can think of and have found but nothing other than using margin instead of padding fixes it.
Can anyone see a way to fix this flex bug with CSS rather then having to change all the content to workaround it?
Yes there are better ways to lay out the content but what's been done is what worked perfectly well before and suits the skills of staff that manage the content day-to-day.
#Adam Because there is box-sizing property applied by default. So in this case you can initialize image box-sizing: initial; by adding css for images.
so this will help you.
.category-below-description img {
box-sizing: initial;
}
I'm trying to align one large image in the center of the div.entry-content on this page: http://rowanibbeken.co.uk/bankside-power-station-bankside-london (i.e. I don't want the smaller images to effect the centering of the large image) whilst I'd like the purchase button table at the bottom to be in line with the large image. So far the main problem has been the div. After trying every centering method under the sun I'm still unsure why it's shifted to the right and has messed up the alignment of the whole page. If anyone has any advice on this that would be great.
Thanks in advance!
Rowan
Take the images out of the table, add a clear:both; to their CSS, and give them each a margin: 0 auto;
The clear should make it so that nothing else is on the same line as the image no matter what size it is, and the margin will center them.
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.
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?