Something is preventing my logo from being responsive. I have all the correct tags I think...
<div id="row" class="image-responsive">
<img src="images/logo.png" alt="Top Jocks" border="0">
</div>
In overstyle.css:
#logo {
max-width:100%;
}
#logo img {
display: block;
margin: 0 auto;
padding: 0px;
}
Page with the problem.
Thanks in advance.
Dave
As mentioned in the comments, the .img-responsive class should be applied to the image itself.
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
The bootstrap.css already contains the instruction img { border: 0; }.
So try to use
<img class="img-responsive" src="images/logo.png" alt="Top Jocks">
instead of
<div id="row" class="image-responsive">
<img src="images/logo.png" alt="Top Jocks" border="0">
</div>
If my solution works as it should, you can remove this code from overstyle.css:
#logo {
max-width:100%;
}
#logo img {
display: block;
margin: 0 auto;
padding: 0px;
}
If you use Bootstrap then use class
img-responsive
Or else give css property to your logo image or class,
img {
width:100%;
max-width:100%;
}
You need to add class img-responsive in img tag.
<img src="images/logo.png" class="img-responsive" alt="Top Jocks" border="0">
Related
I am limited to use only html and css for this project. I try extending the width but that leaves me having horizontal scroll and I don't want to do that. I also try using px as a measurement but that doesn't work either.
<img src="img/gallery.jpg" style="width:100%;height:90%;white-space:nowrap">
https://i.stack.imgur.com/wsxrk.png
use width:100% as shown below:
img{
width:100%
}
You need to use object-fit property on your image. Here is a demo:
.container {
width: 500px;
height: 500px;
border: 1px solid #000;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="container">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
There are a few known way of removing white spacing. Here are a the best two, IMO:
Set the font size of the parent to be 0px:
div {
background-color: orange;
margin-bottom: 20px;
}
.nows {
font-size: 0px;
}
<div>
<img src="https://via.placeholder.com/150x150">
<img src="https://via.placeholder.com/150x150">
</div>
<div class="nows">
<img src="https://via.placeholder.com/150x150">
<img src="https://via.placeholder.com/150x150">
</div>
Use comments to mitigate the white space in the code
div {
background: orange;
margin-bottom: 20px;
}
<div>
<img src="https://via.placeholder.com/150x150">
<img src="https://via.placeholder.com/150x150">
</div>
<div><!--
--><img src="https://via.placeholder.com/150x150"><!--
--><img src="https://via.placeholder.com/150x150"><!--
--></div>
body {
margin:0px;
padding:0px;
}
I posted the same problem on other forum and this works. Thanks for the help.
Need help centering these images in CSS
I have been trying to center them by using a div id tag
<div id="centerLeftAboutPic">
<div class="single-about-detail clearfix">
<div class="about-img">
<img src="img/AttyRLev.jpg" alt="">
</div>
<div class="about-details">
<div class="pentagon-text">
<h1>R</h1>
</div>
<h3>Atty Rob Lev</h3>
<p>Click here to learn more about robert lev</p>
</div>
</div>
</div>
I also created a separate div ID for the second picture. Here is the CSS for one of the images. Both images have similar css.
#centerLeftAboutPic {
float: right;
width: 320px;
padding-left: 30px;
position: relative;
}
I am new to web developing so I am still confused on positioning. Thank you.
You can use the below in your css
text-align:center
snippet
#centerLeftAboutPic {
text-align:center;
padding-left:30px;
position: relative;
border:solid black;
}
img{
width:50px;
height:50px;
margin-left:70px;
}
<div id="centerLeftAboutPic">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<div>
</div>
If you want to center the image relative to its container then all you need to do is add this to its CSS.
#centerLeftAboutPic img {
margin-left: auto;
margin-right: auto;
display: block;
}
However it's only going to center it within the 320px container you gave it in #centerLeftAboutPic. If you adjusted that property to width: 100%; it will center it on the page.
Here's a fiddle for you. I set the width to 100% in the example, play around with it and you'll see what I mean: https://jsfiddle.net/v5k8rjy2/2/
If you want to center the entire #centerLeftAboutPic div you'll need to put the margins on the div its self and remove the float: right property. Here's a fiddle of that: https://jsfiddle.net/v5k8rjy2/5/
#centerLeftAboutPic {
width: 320px;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
}
I'm designing a web page which has links to several sites.
I'm using the a href tag with the image of the logo of the website.
When I tried to re-size the images in the CSS file, nothing worked.
Any ideas of what I'm doing wrong (e.g using the wrong tag in CSS etc.)?
HTML Code:
<div id="main">
<div class="container page">
<h1>Useful Links</h1>
<img class="links" src="/pictures/external%20links/images%20(1).jpg" alt= "PC Part Picker">
<img class="links" src="/pictures/external%20links/reddit.png" alt="Reddit Build a PC">
<img class="links" src="/pictures/external%20links/tomshardwre.png" alt="Tom's Hardware">
<img class="links" src="/pictures/external%20links/CNET-Logo.png" alt="Cnet">
<img class="links" src="/pictures/external%20links/pcper.jpg" alt="PC Perspective">
</div>
</div>
CSS Code:
.container a img{
width: 200;
height: 200;
display: block;
margin-right: auto;
margin-left: auto;
}
.container{
width: 960px;
height: auto;
margin: 0 auto;
}
Add px to the measures of img at first.
You haven't specific the unit of measurement for your images width/height ie, px, %, etc.
If you were adding the value to the image tag itself then that 200 would automatically translate in the browser as 200px but not in the css.
So this would work as 200px by 200px
<img class="links" src="/pictures/external%20links/images%20(1).jpg" alt= "PC Part Picker" width="200" height="200">
but in css it has to be:
.container a img{
width: 200px;
height: 200px;
display: block;
margin-right: auto;
margin-left: auto;
}
Now if you want them to display in one row, remove the "display:block" property.
And they wont all fit on the same row so try reducing it to around 188px (or 19% - margin will fill the remaining space) if that is what you are trying to achieve.
In your html, you can just specify a custom height and width
For example,
<img class="links" src="/pictures/external%20links/images%20(1).jpg" height="200" width="200" alt= "PC Part Picker"></a>
Use the following CSS code:
.container a img{
width: 200;
height: 200;
display: block;
margin-right: auto;
margin-left: auto;
}
.container{
width: 960px;
height: auto;
margin: 0 auto;
}
Be so kind as to look at this theme here. Look at that block of people's faces in the footer, faded, behind the 'create a nice banner like this with a few simple clicks' text. Can this effect be achieved with multiple img tags?
Now, the way they've done it is simple. They literally have one image of all of those cropped faces which they've set to 20% opacity in photoshop and simply set that as the background image of the div. I want to do the same effect, but with database-derived images, so that approach is useless to me.
So can I do the exact same effect, but through multiple img tags? Something that will work in IE 7,8,9? Something to do with z-indexes, perhaps?
Just use multiple image tags with CSS's opacity to do it. Something like this:
HTML
<img src="..." />
<img src="..." />
...
CSS
img {
opacity: 0.5;
vertical-align: middle;
}
http://jsfiddle.net/6Y5Qg/
You might have to use some tricks for older versions of IE, but all modern browsers will support this just fine.
Stacking divs would be the easiest... here's and example:
<style>
#wrap {}
#imgWrap {
padding: 0;
overflow: hidden;
height: 200px;
width: 500px;
z-index:1;
}
#imgWrap img {
float: left;
}
#container {
color: white;
margin-top: -200px;
width: 500px;
height: 200px;
z-index: 20;
background-color: black}
#container h1 {
margin: 0;
color: white;
padding-top: 50px;
text-align: center;
opacity: 1;
}
</style>
<div id="wrap">
<div id="imgWrap">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
</div>
<div id="container">
<h1>TEST</h1>
</div>
</div>
I'm currently skinning site for a virtual airline and I need help as to how to get
two images to show up on the same line instead of one breaking onto the next line.
It should be displayed as:
LOGO ICON
But instead it turns into:
ICON
LOGO
Does anyone know how to fix this in the CSS?
Thanks!
Check this jsfiddle
You can make a div for each LOGO and ICON and float them.
<div class="head">
<div class="logo">LOGO</div>
<div class="logo">ICON</div>
</div>
and CSS:
.head { width:100%;}
.logo {float:left; padding:10px;}
First, I have to admit your HTML is screwed up - inline style declarations, incorrect image links, etc.
Replace the #top div with the following in your layout.tpl file:
<!-- Logo + Search + Navigation -->
<div id="top">
<a id="logo" href="<?php echo SITE_URL?>" target="_blank">
<img src="/lib/skins/klm/img/logo.png" alt="Home">
</a>
<img id="fb" src="http://fc04.deviantart.net/fs71/f/2012/295/0/a/facebook_icon_by_x_1337_x-d5ikwkm.png" alt="Facebook">
</div>
Replace the following CSS style declarations with this:
#fb {
float: left;
position: absolute;
display: inline;
width: 50px;
bottom: 0;
right: 0;
}
#logo {
bottom: 0;
display: inline;
left: 0;
position: absolute;
}
#top {
height: 58px;
margin: 0;
padding: 10px 0;
position: relative;
}
try using links instead of using image tags ,,
HTML:
<div class="container">
<a class="one"><a class="two"></a></a>
</div>
CSS:
.one {float:left; background-image: url(../img/logo.png);}
.two {float:right; background-image: url(../img/ico.png);}
or if you still want to use the image tag, you can also use this ..
HTML:
<div class="container">
<img class="one" alt scr="bla">
<img class="two" alt scr="bla">
</div>
CSS:
.container {display:table;}
.one, .two {display:table-column;} -or- .one, .two {display:table-cell;}
if you're going to change the container's size, sure it must fit both of the images.