I hope I use the right terminology (im a very amateur coder)
I have 2 images and I want to apply the same css on them but with minimum work, like when using:
h1, h2 {bla bla code}
So I tried
.btn-app img .btn-app2 img {
margin-left: 10px;
width: auto;
height: 50px;}
but it doesnt work.
can it be done?
Mega thanks and nice to meet you all! =)
You're missing a comma there. The comma needs to be applied between each selector.
Your selectors are
.btn-app img
which selects all child img elements of .btn-app and
.btn-app2 img
which selects all child img elements of .btn-app2.
So your code should be:
.btn-app img, .btn-app2 img {
margin-left: 10px;
width: auto;
height: 50px;
}
If you're completely new to CSS and that wasn't just a typo, I'd also suggest having a read here.
A missing comma. You already showed that in the example you are following
.btn-app img, .btn-app2 img {
margin-left: 10px;
width: auto;
height: 50px;
}
Use this:
/* you were missing some commas and > here */
.btn-app>img, .btn-app2>img
{
position:relative;
float:left;
margin-left: 100px;
height: 50px;
border:10px solid #09f;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Works for images inside containers -->
<div class="btn-app">
<img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img1" height="70" width="70" />
</div>
<div class="btn-app2">
<img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img2" height="70" width="70" />
</div>
<br style="clear:both" />
<br/>
<!-- But it won't work for them -->
<!-- Images with class names -->
<img class="btn-app" src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img3" height="70" width="70" />
<img class="btn-app2" src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img4" height="70" width="70" />
<br/>
<!-- Images without class names -->
<img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img5" height="70" width="70" />
<img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="img6" height="70" width="70" />
</body>
</html>
Related
I have the below HTML/CSS, which is then followed by media queries in the file for the various max/min pixel sizes.
<div class="header-flags-wrapper">
<div class="flagbox1">
<img src="https://**********.blob.core.windows.net/flags/014-UK.png" />
<img src="https://**********.blob.core.windows.net/flags/015-spain.png" />
<img src="https://**********.blob.core.windows.net/flags/006-portugal.png" />
<img src="https://**********.blob.core.windows.net/flags/007-brazil.png" />
</div>
<div class="flagbox2">
<img src="https://**********.blob.core.windows.net/flags/002-cuba.png" />
<img src="https://**********.blob.core.windows.net/flags/003-venezuela.png" />
<img src="https://**********.blob.core.windows.net/flags/004-bolivia.png" />
<img src="https://**********.blob.core.windows.net/flags/005-paraguay.png" />
</div>
<div class="flagbox3">
<img src="https://**********.blob.core.windows.net/flags/001-uruguay.png" />
<img src="https://**********.blob.core.windows.net/flags/008-argentina.png" />
<img src="https://**********.blob.core.windows.net/flags/009-colombia.png" />
<img src="https://**********.blob.core.windows.net/flags/010-chile.png" />
</div>
<div class="flagbox4">
<img src="https://**********.blob.core.windows.net/flags/011-peru.png" />
<img src="https://********.blob.core.windows.net/flags/012-ecuador.png" />
<img src="https://*********.blob.core.windows.net/flags/017-angola.png" />
<img src="https://**********.blob.core.windows.net/flags/018-european-union.png" />
</div>
<span class="flagstretch"></span>
</div>
The default view on a screen 1200px wide looks good. What I can't get my head around is how to make this responsive. All other elements shrink closer together until they hit a boundary and then they change shape or wrap etc. What is the best approach to achieve this please? What I would like is that the margin on the flagboxes decreases bringing them closer together until they are touching each other then I hide the wrapper all together. Every attempt to do so has failed and like most things is probably easy when you know how.
.header-flags-wrapper {
float: left;
height: 50px;
width: 1500px;
}
.flagbox1, .flagbox2, .flagbox3, .flagbox4 {
width: 310px;
/*height: 30px;*/
/*vertical-align: top;*/
display: inline-block;
*display: inline;
zoom: 1
}
.flagbox1, .flagbox2, .flagbox3, .flagbox4 a {
float: left;
/*width: 30px;*/
padding: 2px;
margin-top: 5px;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
Example of code can be seen at http://globaleyes.azurewebsites.net
I'm creating a row with a number of images of a specific height and width in HTML and CSS. An example of what I'm doing can be seen here on Imgur.
Each image is simply an <img> tag floated to the left to remove whitespace and overall, it works successfully. However, when the browser is minimised, the end image disappears due to there being inadequate space to display it. An example of this can be seen on the above Imgur link.
Is there a way, in CSS, to crop the overflow so that a cropped version of the image (while maintaining the same height) is shown rather than no image?
Update: My code, at present, is as follows:
<div class="userbar">
<a href="#">
<img src="img.jpg" alt="Image">
</a>
... and so on, about 60 times
</div>
CSS (written in SASS then compiled):
.userbar {
max-height: 64px;
}
.userbar a {
float: left;
}
.userbar a img {
display: inline-block;
height: 64px;
width: 64px;
}
Use a container to wrap your images and make the container flex and hide the overflow-x. Is this you're looking for?
.image-container {
width: 100%;
display: flex;
overflow-x: hidden;
}
<div class="image-container">
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
</div>
I want to align an image in the right side of a span element.
I had this working fine inside a td element but it is not working now that I've moved it into a a span. Would appreciate any suggestions.
<div style="width:400px;">
<span style="display:inline-block;width:50%;" onclick="location.href='http://www.google.com'">Go to Google</span><span style="display:inline-block;width:50%;float:right;weight:bold;" onclick="location.href='http://www.yahoo.com';><img src="test.gif" width=40 height=40 border=0>Go to Yahoo</span>
</div>
http://jsfiddle.net/sVdE3/
How about this?
<div>
<span onclick="location.href='http://www.google.com';">Go to Google
<img src="https://www.google.com/images/srpr/logo11w.png" width="40" height="40" border="0" />
</span>
<span onclick="location.href='http://www.yahoo.com';">Go to Yahoo
<img src="https://www.google.com/images/srpr/logo11w.png" width="40" height="40" border="0" />
</span>
</div>
And the following for the CSS:
div {
width: 400px;
}
span {
display: inline-block;
width: 50%;
float: left;
}
img {
float: right;
}
http://jsfiddle.net/grim/sVdE3/2/
Note that you have some errors in your markup such as quotes (") that you didn't close.
I'm running into an issue where center aligning a set of images works in the first div I use it in but then doesn't in subsequent calls.
Here's my CSS:
.writingsText {
width: 750px;
margin-left: 50px;
text-align: justify;
}
.floatImageLeft {
float: left;
padding: 10px;
}
.centerImage {
display: block;
width: 80%;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
And my html:
<div class="writingsText">
Text, text, blah, blah
<br /><br />
<div class="centerImage">
<img src="goldengrid.png" width="270" height="170" />
<img src="spacer.png" width="10px"/>
<img src="goldenspiral.png" width="270" height="170" />
</div>
<br />
<div class="floatImageLeft"><img src="kochiteration.png" /></div>
Text, text, blah, blah
<br /><br />
<div class="centerImage">
<img src="mandelbrotgif.gif" width="200" height="200" />
<img src="spacer.png" width="10px"/>
<img src="kochgif.gif" width="200" height="100" />
</div>
<br />
</div>
So the first set of centered images look great, my text wraps beautifully around my left floating image, and then on the second call to the centerImage class (and third, etc) the images do a partial indent (to what looks like the left edge of the first set of centered images) but are not centered. I've also tried using
<div style="clear:both"></div>
above the additional centered divs (this fixed alignment issues for me in a separate project) but it doesn't do anything. What am I missing?
Have you tried adding “clear: both” to your .centerImage CSS declaration?
I want to create a photo album with rows of images. Currently all my images are appearing in one row. Say if I upload 15 images, what is the CSS code to break them into 3 rows .. 5 images on each row? Sorry this probably is really easy but I am a beginner in CSS. This is the code I am currently using.
EDIT: Here is another part of the code I am not sure if it is a container.
.flickr-photoset-img{
float: left;
}
.flickr-photoset-box {
padding: 10px;
float: left;
text-align: center;
width: 130px;
height: 130px;
}
The easiest way would be to restrict the container size.
.container {
width: 500px; /* look i'm now showing 5 images per line */
}
.img {
/* height: 100px; width: 100px; */
float: left;
}
<div class="container">
...
<img ...>
<img ...>
<img ...>
<img ...>
<img ...>
<img ...> <!-- I will wrap to a new line -->
...
</div>
Example here
After reading briefly about Flicker and Drupal - I think the css class you want to edit is flickr-photoset
.flickr-photoset {
width: 500px; /* really you can set this to whatever */
}
First of all you should probably have a div wrapping your images.
The important thing to know is that your images will automatically skip to the next row if the sum of your images widths exceeds the with of their wrapping div.
For example if you have a 600px wide wrapping div and four images each measuring 250px in width they will be listed in two rows.
Here you can find a tutorial which explains exactly what you need to do for your gallery.
You can do it with placing <br /> tag after fifth image. With CSS you can add style like this
CSS
.images{
float:left
}
.clear{
clear:both
}
HTML
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=clear ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=clear ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />