I have a problem with a website I am developing right now, and I've been scratching my head here for a while. Basically I have a responsive design, however I want the images to all be centered together (with the yellow image directly above where the magenta image is currently) and then the 'block' of images to center horizontally and vertically within available space. The code is currently hosted at http://dorreen.webfactional.com
The problem is that the images are misaligned - the top images are spread out and the bottom images are clustered together. I'm not sure exactly what I should post - Here's a JSfiddle (Except the fiddle sort of works how I want it to)
The code:
#textContent { width: 49%; }
#imgContent { width: 49%; }
.content {
float: left;
padding: 0% 0.5%;
}
.content > img { margin: 0.5% auto; }
<div class="content" id="imgContent">
<img src="http://placehold.it/240x240/ff0000/000000" />
<img src="http://placehold.it/240x240/ffff00/000000" />
<img src="http://placehold.it/240x240/00ff00/000000" />
<img src="http://placehold.it/240x240/ff00ff/000000" />
</div>
What you're seeing is the text-align: justify of the image container aligning all but the last line. To a zeroth approximation, text-align:left (or center, I guess) should help you.
Related
Working in a Wordpress post, I want to add two images side-by-side and keep the block of images centered (one is aligned left, the other right). (That on its own I've got.)
When the page size is smaller, I want the images to stack. (That I've got.)
But the images aren't then centered in the page in this responsive mode. First one is left and the other right.
I've played with different image alignments through WP, but I can't get the combination to work.
Here's my html:
<div class="ps-image-container">
<div class="ps-inner-image-container">
<div class="ps-responsive">
<img src="https://passports. ... " class="alignleft" />
</div>
<div class="ps-responsive">
<img src="https://passports. ... " class="alignright" />
</div>
</div>
</div>
and css:
.ps-image-container {
display: block;
/*width: 98%;
margin: 0 auto;*/
}
.ps-inner-image-container {
/*display: block;*/
width: 98%;
margin: 0 auto;
}
.ps-image-container::after {
content: "";
display: table;
clear: both;
}
.ps-responsive {
width: 49.99999%;
float: left;
}
#media only screen and (max-width: 500px){
.ps-responsive {
width: 100%;
}
}
There is some key concept that I'm missing.
If I understand your goal correctly, you want to do two things with your responsive layout:
Switch the image containers (.ps-responsive) between 50% and 100% widths so they go from being side-by-side to stacked (they can stay floated left)
Switch the text-align property of these containers between left/right and centred so the images inside them will go from the inner edges of these containers to the center.
It looks like you're close but you don't need so much code. See this fiddle for a working example: https://jsfiddle.net/ds2vuqng/26/
You can clear the float's in css by:
clear:both;
You can also use Bootstrap to fix this and using the container and text-center as a part of you class in ps-inner-image-container like:
<div class="row ps-image-container">
<div class="container text-center ps-inner-image-container">
<div class="ps-responsive">
<img src="https://passports. ... " class="alignleft" />
</div>
<div class="ps-responsive">
<img src="https://passports. ... " class="alignright" />
</div>
</div>
</div>
I'm not sure if this will fix your problem otherwise write again :-)
So the banner I made at the top of the page is too short horizontally.
I already tried adding "width: 200%;" to the CSS but it only made the space around the image bigger, not the image itself. Please help.
The banner is the giant purple one at the top of this page:
http://www.neopets.com/~ellenore
p.s. please don't make fun of my love for neopets. xD
}
h1 { .left
width: 200px;
margin-left:0px;
margin-right: 0px;
margin: -8;
letter-spacing: -1px;
}
<h1>
<img src="image is here">
</h1>
If you change your H1 tag to:
<h1 style="
width:100%;
height:288px;
background-image: url('http://i60.tinypic.com/rse735.png');
display: inline-block;">
</h1>
Then your image will automatically repeat. However, as it stands your image doesn't repeat too well. So, you'll probably want to edit in your photo editing s/w.
I'd recommend not stretching your image as it won't look very good.
Also, you may want to create your "Shaggy Little Lion" text as a separate graphic which can be centered on top of the image below.
I have an image thumbnail with text that is on the right side of the image. I have a hyperlink on the image that pops up the full size image.
Now the hyper link only works on the bottom half the image, (underneath where the text is inline to the image).
Oddly enough, it seems to work fine on jsfiddle, but not on the website.
Is there anything that could be causing this problem? The JSFIDDLE below is exactly how it is on the website.
http://jsfiddle.net/EJvm2/1/
CSS:
.content {
width: 500px;
padding: 10px;
overflow: hidden;
}
.content img, .content h3 {
float: left;
border-style:solid;
border-width:5px;
}
.content img {
padding-right: 10px;
}
.content p {
padding: 40px 0 0 20px;
}
HTML:
<div class="content"> <a id="image1" href="images/site_images/acorn-award.jpg" title="image title.">
<img src="images/site_images/thumb.jpg" alt="" width="200" height="120" />
</a>
<p>This is some text explaining the image</p>
</div>
There is something elsewhere on the page that is overlaying part of the link. You can find out what it is by right-clicking on the part that doesn't work and selecting "Inspect element" or its equivalent in whichever browser you are using.
I don't see any reason for the following declaration:
.content img, .content h3 {
float: left;
}
Randomly (at least it makes no sense in the fiddle on the img element) floating elements almost always causes problems. In your case most likely the image size does not fit the containing element, thus causing overflow and overlapping issues. Remove the float (move it to the containing anchor) or at least clear it.
I am implementing a carousel with images. The carousel is 960px wide, and contains 5 images in containers of width 960px/5 = 192px (and height 119px).
I want the images to be as large as possible inside their containers, without changing the aspect ratio of the images. I also want the images to be centered both horizontally and vertically within their container.
By hacking around for hours, and using the center tag, I have managed to construct what I describe above. Please see a fiddle here.
The problem is with the container of the second image (as shown by the black border). While the second image is centered horizontally, the container is shifted down a little.
I'm trying to implement an overlay on the images, and need the containers to all be at the same height. How can I have the containers all at the same height? Is there a better/cleaner approach that does not use the center tag?
You could add vertical-align:top; to your #carousel-images .image{} css
Or middle or bottom...
Uh? Why did I get downvoted on this?
http://jsfiddle.net/y2KV7/
I got it to work by doing the following:
HTML:
<div id="wrapper">
<div id="carousel-images">
<img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
<img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
<img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
</div>
</div>
CSS:
#wrapper
{
width: 100%;
text-align: center;
background: blue;
}
#carousel-images
{
width: 960px;
white-space: nowrap;
font-size: 0;
margin: 0 auto;
}
#carousel-images img
{
display: inline;
max-width: 192px;
max-height: 119px;
border: 1px solid black;
vertical-align: middle;
}
Click here to view working jsFiddle demo
First, don't make the world come back to 10 years ago. do not use tag for formating. I would also suggest you to get some reading about different between div and span as well as display attribute. you could easily find information on http://www.w3schools.com.
if you want a center container. you could use css margin auto trick.
like margin:5px auto; would center the container horizontally.
I have an image that should be positioned near the bottom of the screen. I have a main image that is the background image and will resize with the browser size. I need the image over the background image to be 20-30px from the bottom no matter what size screen or if the screen is resized. (Image also must be centered.)
I am not sure how to go about doing this. What is the best way to do this?
Here is the code I have tried:
.bottom{
position:absolute;
margin-left: -355px; /* Image is 710 in width */
left:50%;
bottom:-20px;
}
That code has the image centered on the page properly but not 20px from the bottom. Also I have content below the image and I want the content to stay below the image but it currently comes up over the image.
HTML:
<img class="bottom" src="src-path.png" alt="Text" />
<p style="clear:both;"> </p>
<!-- More Content here that consist of img and p tags. -->
I guess to position the image 20-30 px from the bottom you can use css property
margin-bottom:30px; or 20px what ever value suits you.
for aligning at the center use vertical-align:middle Please do share the code that the thing is more clear. Hope I answered it correctly.
CSS Together must look like:-
margin-bottom:30px;
vertical-align:middle;
You better use a CSS file, in which you declare a footer to be at the bottom of your page. Then put your image in your page, with class of that CSS and id of "footer". Clear enough?
Here is the way I finally did this:
CSS:
.image_block {
/* Size of image is where the width/height come from */
width: 710px;
height: 500px;
}
.image_block a {
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
}
.image_block img {
/*Nothing Specified */
}
HTML:
<div class="image_block">
<img src="src.png" alt="Alt Text" />
</div>