I have a website that im working on and there is a box with some links it it. I want this box to be the same size as the images around it. Right now the problem is that when the window size gets smaller the images will scale smaller or larger but this div with these links does not scale the same way.
Here is a image (left box is the links, images are surrounding it):
Here is html for the download box and images:
<div class="appDownload">
<header class="downloadHeader"><span class="downloadTitle">Download</span></header>
<!--Apple App Store</br>
Google Play Store</br>
Amazon App Store</br> -->
<a href="https://itunes.apple.com/us/app/igun-pro-hd/id574123647?mt=8" target="_blank">
<div class="appStoreBadge"><img src="images/App_Store_Badge135x40.svg" width="100%"></div>
</a>
<a href="https://play.google.com/store/apps/details?id=com.avidionmedia.iGunHD" target="_blank">
<div class="appStoreBadge"><img
src="images/Google_Play_Badge564x168.png" width="100%"></div>
</a>
<a href="http://www.amazon.com/iGun-Pro-Original-Gun-App/dp/B00G4E1DOI" target="_blank">
<div class="appStoreBadge"><img
src="images/Amazon_Badge564x168.png" width="100%"></div>
</a>
</div>
The images:
<div class="appScreenshots">
<img id="screenshot1" width="100%" src="images/igp1_screenshot_1.png">
<img id="screenshot2" width="100%" src="images/igp1_screenshot_3.png">
<img id="screenshot2" width="100%" src="images/igp1_screenshot_5.png">
<img id="screenshot2" width="100%" src="images/igp1_screenshot_7.png">
</div>
This is the download box css:
.appDownload{
width: 100%;
margin: 0px 0px 3px 0px;
background: #333;
float: left;
}
And this is the css for the images:
.appScreenshots{
width: 100%;
margin: 0px;
background: transparent;
overflow: hidden;
}
.appScreenshots img{
float: none;
clear: none;
}
Related
This seems like a simple problem, but I can't crack it. I'm trying to set up a responsive image gallery much like the one demonstrated at W3Schools. That gallery looks fine--until you change the length of the captions. Then the height of the boxes starts to vary, and the arrangement of the gallery gets all screwed up. How can I set the height of those boxes so they line up neatly, even when the captions range from, say, 2-4 lines long?
One thing that you can do is, you can give a min-height and make it fixed height.
div.desc {
padding: 15px;
text-align: center;
min-height: 50px;
}
Snippet:
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
min-height: 50px;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
#media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
</div>
You can do 2 things. Put both of these on the class applied to each block.
overflow-y: hidden; //Or scroll if you want...
max-height: 400px;
I have two logos on my website which should go on top of my website.
One logo should be aligned to the left and the second logo to the right.
Now when the browser window gets pushed smaller, the space in between those two logos should get narrower and eventually when the two logos "hit" each other, both are supposed to scale smaller without breaking the line.
Right now only the left logo scales down and the right logo breaks the line and gets pushed lower without scaling down at all.
Can anybody help me?
My CSS:
.image-wrapper
{
position: relative;
white-space: nowrap;
}
.scale-image
{
display: block;
width: auto;
max-width: 55%;
white-space: nowrap;
}
Here is my HTML code:
<div class="image-wrapper">
<a href="#" ><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/Logo_oskar.jpg" align="left" class="scale-image"/></a>
<div />
<div class="image-wrapper">
<a href="#" target="_blank" ><img src="http://www.drogies-test.de/pics/Logo_theater_os.gif" align="right" class="scale-image"/></a>
<div />
Example link: http://www.drogies-test.de/header_show.html
I've adjusted the mark-up structure to nest elements correctly.
.image-wrapper:first-of-type,.image-wrapper:nth-child(1) {
float: left;
}
.image-wrapper:last-of-type,.image-wrapper:nth-child(2) {
float: right;
}
.image-wrapper {
max-width: 50%;
}
.scale-image {
width: 100%;
height: auto;
}
<body>
<div class="image-wrapper">
<img src="http://www.drogies-test.de/wp-content/uploads/2016/05/Logo_oskar.jpg" align="left" class="scale-image">
</div>
<div class="image-wrapper">
<img src="http://www.drogies-test.de/pics/Logo_theater_os.gif" align="right" class="scale-image">
</div>
</body>
Here's a flex solution:
.image-wrapper {
max-width: 50%;
}
.scale-image {
width: 100%;
height: auto;
}
.flex-wrapper {
display: flex;
justify-content: space-between;
}
<div class="flex-wrapper">
<div class="image-wrapper">
<img src="http://www.drogies-test.de/wp-content/uploads/2016/05/Logo_oskar.jpg" align="left" class="scale-image">
</div>
<div class="image-wrapper">
<img src="http://www.drogies-test.de/pics/Logo_theater_os.gif" align="right" class="scale-image">
</div>
</div>
Note that flex is not supported in legacy browsers like IE 8 and 9, and some older versions of webkit browsers like Safari and Firefox (a deprecated or hybrid syntax variation is supported instead).
Learn more: caniuse.com
Hi I'm trying to center the 4 images in the div. As you can see they're stuck on the left.
I would like them to be perfectly centre justified with at least a 5-10px margin surrounding them (moved slightly to the right).
It's only this section I'm concerned about...not the rest of the HTML site. Thanks.
My html is:
<section id="slide-6" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<!-- <div class="hsContent">-->
<div class="img">
<a target="_blank" href="">
<img src="http://fieldtelecommunications.com/images/telecommunications_equipment.jpg" alt="Klematis" width="280" height="280">
</a>
</div>
<div class="img">
<a target="_blank" href="">
<img src="http://fieldtelecommunications.com/images/telecommunications_equipment.jpg" alt="Klematis" width="280" height="280">
</a>
</div>
<div class="img">
<a target="_blank" href="">
<img src="http://fieldtelecommunications.com/images/telecommunications_equipment.jpg" alt="Klematis" width="280" height="280">
</a>
</div>
<div class="img">
<a target="_blank" href="">
<img src="http://fieldtelecommunications.com/images/telecommunications_equipment.jpg" alt="Klematis" width="280" height="280">
</a>
</div>
</div>
</div>
</div>
</section>
Css is:
#slide-6 .bcg {
position: relative;
background-color: #efefef;
height:50%;
}
slide-6 .hsContent {
position: relative;
}
slide-6 .hscontainer {
width: 100%;
height: 100%;
display:inline;
overflow: hidden;
margin: 0 auto; position: relative;
}
div.img {
margin: 20px;
/*padding: 5px;*/
/*border: 1px solid #0000ff;*/
/*height: auto;
width: auto;*/
/*float: left;*/
display:inline;
}
add text-align: center to this div #slide-6
div.img {
display: inline-block;
margin: 20px;
}
and on parent div
text-align: center
Using a grid system like 960gs will make your life easier.
Otherwise you'll have to put the images in containers with width: 25%, 0 margin and 0 padding. You can set margins and paddings on the contents of the containers though. OR make the hsContainer fixed width and give it margin: auto;
Your wrapper needs a width with margin:0 auto in order for the inner content to be aligned center.
section {margin:0 auto;width:1290px;}
JsFiddle Example
one way to just encapsulate everything within
<center></center>
heres a fiddle :)
https://jsfiddle.net/qcoavm5r/
Provide text-align:center to the parent element 'hsContainer'. This property will center align the elements inside it.
Try display: inline-block: instead only block.
In action:
http://jsfiddle.net/paulius_m/1xq2gn9s/4/
In details:
I have a big container for group of pictures.
In that container, I have 100x100 px containers floating to the left one beside another.
In each of those containers I have two images surrounded by anchor tags (both looks close to like that: <img src="/thumbnail.jpg" /><img src="download_button.jpg" />).
The first image/link is the thumbnail. The size of the thumbnail could vary, but will never exceed 100px in height and 100px in width. This is know from the server side. Basically, link of the thumbnail is for invoking a lightbox feature (I am skipping describing lightbox feature here, just know it is).
The second image/link is kind of download button. The button is always 20x20px. This is for downloading the biggest version of the same picture.
The thumbnail must be in the middle/center of floating 100x100 px div.
The download button (a/img tags) must be in the left bottom corner of the thumbnail.
The problem:
The problem is that I cannot figure out how to align the main image inside of middle/center of the 100x100 container and place the 20x20 download button on the left bottom corner of the image. The best version of what I have achieved so far could be seen in the jsfiddle link mentioned above.
Edit:
- The download button must always be on top of the image.
Markup (same as in jsfiddle link):
(HTML)
<div class="images">
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/100/67/" class="uploaded_image">
<img src="http://lorempixel.com/100/67/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/100/67/" class="uploaded_image">
<img src="http://lorempixel.com/100/67/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/60/100/" class="uploaded_image">
<img src="http://lorempixel.com/60/100/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/100/67/" class="uploaded_image">
<img src="http://lorempixel.com/100/67/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<span class="clear_left"></span>
</div>
(CSS)
.image_container_outer {
display: block;
float: left;
height: 105px;
padding-top: 5px;
text-align: center;
vertical-align: middle;
width: 110px;
background-color: #000;
border: 1px solid #ffff00;
}
.image_container_inner {
display: inline-block;
height: 100px;
position: relative;
width: 100px;
background-color: #999;
}
a.uploaded_image {
bottom: 0;
display: inline-block;
left: 0;
position: absolute;
}
img.uploaded_image {
border: 0 none;
border-radius: 2px 0;
bottom: 0;
box-shadow: 5px 5px 50px -6px rgba(50, 50, 50, 0.3);
display: inline-block;
left: 0;
position: absolute;
}
a.download_button {
bottom: 0;
display: inline-block;
left: 0;
position: absolute;
}
img.download_button {
background-color: #fff;
border-radius: 2px;
bottom: 0;
display: inline-block;
left: 0;
position: absolute;
width: 20px;
}
Here's a JSFIDDLE to explain how this works.
And here is a JSFIDDLE from your code
To place something to absolute center use css like so:
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
and to place in the bottom left corner use css like:
position:absolute;
bottom:0;
left:0;
And to make the button on top of the image you can use:
z-index: 9999;
In your div create figure element, and then figcaption, this figcaption always on the bottom left side. in this figcaption create your button. may be its helpful.
<figure>
<img src="abcsd" alt="dsaer" width="304" height="228">
<figcaption>Your Button</figcaption>
</figure>
I am trying to have a selection area at the top of the window where several different page links exist. This will include so many links that each page will have an image. They will not fit into the width of the page, so I would like them to display on one row and have a scrollbar to the right so that users can scroll through a horizontal list and click whichever link of a page a user would like to view. When users click the link it ought to appear in the content area below the selection area. Please refer to the image for a visual reference.
<div style="max-width: 680px; max-height: 200px; white-space: nowrap; overflow: AUTO;">
<div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;">
<center>Ford Thunderbird Gallery</center>
<a href="index.php?option=com_content&id=127&tmpl=component&TB_iframe=true&height=680&width=680" target="gallery">
<img src="images/InstallationGallery/FordThunderbird/IMG_0016.png" width="200" >
</a>
</div>
<div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;">
<center>2012 Ford Expedition Gallery</center>
<a href="index.php?option=com_content&id=128&tmpl=component&TB_iframe=true&height=680&width=680" target="gallery">
<img src="images/InstallationGallery/2012Expedition/P1040672.jpg" width="200" >
</a>
</div>
</div>
<iframe height="680" name="gallery" scrolling="no" width="680"></iframe>
Try working with display:table(-row)(-cell) instead of floating:
http://jsfiddle.net/DxZbV/1/
Oh and also try not to use inline styles - makes your code pretty messy and hard to handle...