Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
My jpeg is a pixelated obese shell of its former self... Is it possible to actually override html img height/width code with a css stylesheet instead of just streching an already adjusted image? The reason I ask is that a client has me working with godaddy's quick shopping cart (evil). The code it generates changes the size of the image in the html. Godaddy only allows css alterations, which is how I've managed to at least stretch the image back to original size. Unfortunately, it seems the html is applied to the image first despite the img css I've written, and then the css expands the image to nasty pixels. It's possible that, in addition to the height and width specifications in the html, godaddy has actually already converted the image to the smaller size on their server, though their techs deny this and the code would then be redundant. The CSS I'm using is pasted below, as is the unchangeable code that GoDaddy generates.
//FROM CSS
td.imageRow {
padding: 10px 0 5px;
vertical-align: middle;
width:192px;
height:250px;
}
.productTable img {
border: 0 none;
width:192px;
height:250px;
}
.productTable a {
width:192px;
height:250px;
}
//FROM HTML
<tbody>
<tr><td class="imageRow"><a href="/Logo.htm">
<img width="122" height="160" alt="Logo" src="/images/13129490572471789450105.jpeg">
</a></td><td class="noBorder"></td><td class="noBorder"></td></tr>
<tr><td class="titleRow">Logo</td><td></td><td></td></tr>
<tr><td class="priceRow"></td><td></td><td></td></tr>
<tr><td class="spacer"> </td></tr>
You can use the !important override:
.productTable img {
border: 0 none;
width:192px !important;
height:250px!important;
}
See http://jsfiddle.net/GDVXw/ for an example.
Just to illustrate, I've stretched the image a bunch here so you can see more clearly that the overrides works: http://jsfiddle.net/GDVXw/1/.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed last year.
Improve this question
This is an example of what my problem is. When I type for example the
section on html then go to CSS to style it, it does work fine, but
then when I add another style in the CSS file it doesn't seem to work
and only styles the first part so in this case the .header img and the
h1 part doesn't get styled at all. When I put the h1 part in front of
the .header only h1 gets styled and not the .header img. Inline CSS
works but its very inconvenient to use. This happens even when I try
using the inside the html document. I have tried it on
other text editors and it's the same problem. When I try someone
else's code it works fine, it's only when I do it on a project that
does this.
.header {
min-height: 100vh;
width: 100%;
background-position: center;
background-size: cover;
position: relative;
}
;
h1 {
color: aqua;
}
;
<section class="header">
<img src="/download.png">
</section>
<h1>asdad</h1>
Syntax of your css code is wrong. There cannot be semicolons outside .class{}
You should remove semicolons before and after your h1{} style.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
This is what I have so far:
body {
padding: none;
background: green;
}
.layoutTable {
width: 100%;
height: 100%;
border: 2px solid black;
position: fixed;
background: red;
margin: 0;
padding: 0;
}
.bodyStyle,
html,
.layoutTable {
margin: 0px;
padding: 0px;
}
<table class="layoutTable">
<tr>
<td>
<!-- japaneseclass Schedule -->
</td>
</tr>
</table>
The output:
I ran this code in IE11 and there is a gap between body and table, I don't know how to remove this, and the design breaks on zoom.
All HTML document by default have a margin surrounding all four corners of it. As desirable as margins are in most cases, sometimes they with your design, such as a header bar that spans the entire page horizontally. In this tutorial I'll show you the two techniques most commonly used to remove the document's margins, so content presses right against the edge of the window.
<body bgcolor="green" style="padding:0;margin:0">
Codepen http://codepen.io/noobskie/pen/avVQQy?editors=110
This seems to remove the gap between your elements all you need to do was add padding:0; & margin:0; to the body tag i'm not sure what you mean when you say the design breaks whenever you zoom though can you explain?
Also it seems redundant to have a separate class for body ie bodystyle(assuming thats what your using that for) when you can just use body as a selector itself
I think you just forgot to attach your bodyStyle class in your CSS to the body tag in your HTML...
<body bgcolor="green" style="padding:none;" class="bodyStyle">
It's always a good idea to do a 'browser reset' as all browsers treat this gap differently. That's why you should add the following css:
* {
margin: 0;
padding: 0;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I am trying to align my frame into center of my website, which doesn't seem to work with the align attribute. Does anyone have a better idea. Here is my following fragment of code.
<iframe id="9MS89fgJMj" width="600" height="350" align="middle" margin:0px;border-width:0px;overflow:hidden;" scrolling="no" src="http://www.embeddedanalytics.com/reports/displayreport?reportcode=9MS89fgJMj&chckcode=gaqMuciIGQGzvVXXQQJfxM" title="Google Analytics Dashboard"></iframe>
You can just use css, first with margin, 2nd with transform, 3rd with negative margin. Target your iframe instead of the classes I listed:
//this should work everywhere, but depending on you page structure might not
iframe{
margin: 0 auto;
}
//this is not ie8 friendly or older versions of ff/chrome etc
iframe{
position: relative;
left: 50%;
transform: translateX(-50%);
}
//this is IE8 friendly, but requires a hardcoded margin that is half the width
iframe{
position: relative;
left: 50%;
margin-left: -300px;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Hi there I was wondering how I would make an image appear when I hover over another one.
I have some code but it just isn't working I think it should be something like this;
CSS-
a bikeq
{
display: none;
}
a:hover bikeq {
display: block;
}
HTML-
<section class="r_img">
<img src="img/bike.png" class="bike">
<img src="bikeq_3.png" class="bikeq">
</section>
I fell like I am doing something wrong with the html part but I don't know what else to do.
Any help will be great thanks,
Zack
Keeping the HTML you have provided is not possible, as the elements are sibling. You can "fake" this effect with the following code:
<section class="r_img">
<img src="img/bike.png" class="bike">
<img src="bikeq_3.png" class="bikeq">
</section>
.bikeq {
display: none;
}
.r_img:hover .bikeq
{
display: block;
}
When hovering the container of the two images, the image with .bikeq class will show up..
Try this:
html
<section class="r_img">
<a href="" class=”bike_img”></a>
</section>
css
a.bike_img { width: ?px; height: ?px; display: inline-block; background: url("img/bike.png"); }
a.bike_img:hover { background: url("img/bikeq_3.png"); }
Where ?px are the width and height of your image. You will also need to make sure that your image urls are corrrect, I just had a guess.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I am not familiar with html.I want to show formulas in my blogs.But there is blank between my two lines if I put a picture in one line.Please look at my page my_web_page.There is so big blank between the 3 lines than others.I try to change the height of the picture but it was useless.Please tell me where I was wrong or tell me how to show formulas easily in my web pages.Thanks very much!
use this style for your img tags
padding: 0px;
border: none;
margin: 0px;
vertical-align: bottom;
Ex:
<img src="your img source here" style="padding:0px;border: none; margin: 0px; vertical-align: bottom;">
It is blogspot adding padding around your images.
The default style of an image within an article seems to have 8 pixels padding.
If you can edit the html you could try overriding this inline, i.e adding padding:0px; to the style part of the img tag. Please note you will probably also need to remove the margin-bottom: -12px too.
i.e. rather than
<img src="http://chart.googleapis.com/chart?cht=tx&chl=p%5Ei*q" style="border: none; margin-bottom: -12px;">
try:
<img src="http://chart.googleapis.com/chart?cht=tx&chl=p%5Ei*q" style="border: none; padding:0px">