I ran a gtmetrix.com analysis on my website and it said that I needed to specify image dimensions on some of the images. The link to that is: http://gtmetrix.com/reports/whiztoy.com/IxSgh6L2 How do I use css to do that? I checked the css file but can't locate the exact tags.
If you html is:
<img src="./myimage.png" id="eximg">
Then your css to specify the size should be:
#eximg{
width: 100px;
height: 100px;
}
Of course, adjusting the numbers accordingly.
If the id attribute is not available and there are surrounding divs, then you can try the following.
html:
<div id="eximg-container">
<img src="./myimage.png" id="eximg">
</div>
css:
#eximg-container img{
width: 100px;
height: 100px;
}
Related
I am working on a WordPress theme. Initially its bootstrap template has been created. Currently I have an issue in its slider for the testimonials section.
I am using Owl Carousel to create the slider. I have included the following shortcode inside the div in my index.php file:
<?php
echo do_shortcode('[owl-carousel category="testimonial" singleItem="true" autoPlay="true"]');
?>
The slider includes a statement given by the client with the client's image at the bottom in a circle. For the image, I have its CSS looking like:
.img-circle {
margin-top: 20px;
height: auto;
width: 100px;
}
Though the width of the image has been specified but the image picks up the entire width of the div of which it is a part. I want to display only one client in one slide, so I have used singleItem="true" in the short-code. Have been unable to get the required image dimensions. How to contain the image to the required dimensions?
You have to give the width and height attributes to the img markup. Also, it will need to be display: block in order to ignores owl-carousel's 100% width.
You could also include a wrapper around it, will work better.
CSS
.wrapper-circle {
width: 100px;
height: 100px;
}
HTML
<div class="wrapper-circle">
<img src="" alt="">
</div>
If you can`t edit HTML, try applying CSS to your img tag instead:
display: block;
width: 50px;
height: auto;
Check this for more details: http://owlgraphic.com/owlcarousel/demos/one.html
How do I make a large image smaller via CSS, with the image located on a JSP page?
I have tried different height, width, size and-so-on keywords, but nothing seems to work.
It is possible though to move the image around, but can't figure out how to make it smaller.
The picture is saved in my project (it's not from an url).
HTML:
<div id="AUlogo">
<img src="aarhus-university.png">
</div>
CSS:
#AUlogo{
margin-left: 23%;
}
Hope my question is clear!
Try like this: Demo
#AUlogo img {
max-width:100px;
}
Specify the value in max-width as you need.. Hope this helps!!
try using
max-width: 90%;
and
max-height: 90%;
that should work, and when you did just height did you change the width or vice versa because if you dont change it with the same ratio as the img had it might mess up so try
height: 55px;
width: auto;
Simple way is to use CSS Resize Property
#AUlogo {
resize: both;
overflow: auto;
}
For resize Property you can use different values like
resize:both,horizontal,vertical,initial;
You can have any one of the property values to resize your image
I am confused about using CSS to display an image using the an empty <a> element.
<a class="header" href="#"></a>
does create the clickable area as specified in the following css:
.header { width: 50px; height 50px; background-image:url('images/picture.png') }
however, will not display the picture. If I also include:
.header:hover { background-image:url('images/picture.png'); }
then it will display the picture. My aim is to use the CSS to employ this method of image-to-image replacement, but I don't have the basics understood yet it would seem.
Your on the right track with your css. You must add display:block to allow the anchor tag to pick up the hight.
.header { width: 50px;
height 50px;
background:url('images/picture.png');
display:block;
}
I have a website and in the main page a I have a div with an image where with a very nice design says "contact us by calling 1 800 blabla..". so I was thinking if the only place where the phone number of my company, is on a div with an image background, how the search engines are going to recognize or find my company's number,
so my question is basically how can I add information to this div which is :
<div id="phone"></div>
and any other div that i need to put information for robots and stuff
It's pretty easy using an image replacement technique.
<div id="phone"><span>11-1111-1111</span></div>
And the CSS.
(change your phone div to be whatever you need it to be, but you'll need to define a width and overflow: hidden to hide the text.
#phone
{
position: relative;
width: 200px;
height: 100px;
overflow: hidden;
}
#phone span
{
position: absolute;
left: -999em;
}
Alternatively, without using extra markup (I read somewhere that google disapproved of using text-indent in this way which is why I didn't use this first, but I can't find the source for that).
<div id="phone">11-1111-1111</div>
And the CSS.
#phone
{
width: 200px;
height: 100px;
overflow: hidden;
text-indent: -999em;
}
Additionally: http://css-tricks.com/css-image-replacement/ looks like a fairly decent resource.
You might want to look into hCard microformat specification and create an HTML code something like this:
<div class="call-us vcard">
<span class="tel">
<span class="type">business</span>
<span class="value">+1.800.blabla</span>
</span>
</div>
Where the call-us classname formats the div by setting its dimensions, visually hiding the span.tel tag and adding the image as a background. Search engines would recognize that this is a contact card (note the vcard classname), and they would correctly parse the phone number.
You have to use this approach
#ContactInformation {/* your image and restof padding */}
#ContactInformation h2 { display: none; visibility: hidden; }
<div id="ContactInformation">
<h2>Phone:</h2>
<label>1 800 blah blah</label>
</div>
Actually Search Engines See and check h2 tag and it's value but your user wont see the h2 text.
I have an issue with a site I am working on where the right wrapper keeps dropping down below the site. Obviously I want it to stay on the right hand side.
I've coded up a test case which shows my issue (I think) and I'm wondering if there is a better way to do things.
The website url is http://www.musicworkshop.co.nz/
Below is the test case which (I think) is the cause of my issue, however it may not be. The pink box drops down if it does not fit within the page width.
I've also included a diagram of what I'm trying to achieve along with a screenshot of the right wrapper not where it should be.
Is there a better way to do this?
John
<html>
<head>
<title> Test page </title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div id="superbox">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
<div id="box5">
</div>
<div id="box6">
</div>
</div>
</body>
</html>
#superbox{
width: 1000px;
height: 100px;
margin: 0 auto;
}
#box1{
height: 100px;
width: 200px;
background: red;
float: left;
}
#box2{
height: 100px;
width: 200px;
background: yellow;
float: left;
}
#box3{
height: 100px;
width: 200px;
background: blue;
float: left;
}
#box4{
height: 100px;
width: 200px;
background: green;
float: left;
}
#box5{
height: 100px;
width: 200px;
background: grey;
float: left;
}
#box6{
height: 100px;
width: 200px;
background: pink;
float: left;
}
alt text http://www.musicworkshop.co.nz/website.png
alt text http://www.musicworkshop.co.nz/website_right-wrap-missing.png
Since all your boxes are 200px wide go for a %.
if it doesn't fit into the page width, this is the way float works... if you want to have the boxes in one line whatever happens, set your superbox with to the with of all boxes (which is 200*6 = 1200 / not 1000).
EDITS:
Looking at your example site I think you mean when the viewwindow is small that you want the div to go off-screen. In your case the best solution is to make that repeating image the background-image of your body.
Something like:
body { background: #6593aa url('http://www.musicworkshop.co.nz/templates/musicworkshop/images/right_repeater.png') repeat-x; }
And make sure to take the backgrounds off your other divs. You'll probably want to pick a different image to repeat with too rather than just the right segment. I can see you were trying to get it to match up with the header nicely but the way you are going about it just won't work. My best solution is to use a transparent background on your leftwrap and rightwrap near header (use a .gif or .png with transparency for your rounded corner rather than the current image with the bit of "amplitude wave" in the background).
Summary:
Remove all wrapper etc. backgrounds.
Change the "rounded corner" images to have a transparent background.
Remove your "repeating" divs.
Apply that CSS above to the body.
Original:
What's your desired behaviour? For superbox to go 1200px? Unfortunately you can't have fixed sizes and "auto-grow".
If you want 'superbox' to grow to fit its children then don't specify a width (i.e. leave it width:auto).
If you instead want the children to resize if they are too large for 'superbox' use percentage widths on them.
It sounds like you want your boxes to stay their current size and not wrap. Well try and imagine what would happen if you put a new div under 'superbox' and wrapping your 'box_'es that had a width of 1200px. It's going to make 'superbox' grow to wrap around it so at the end of the day you might as well just make 'superbox' this larger width in the first place!