I have this CSS, however the elements need a unique class, or they interfere with the CSS used to create the website I'm using it on.
img{
display:inline-block;
width:211px;
height:146px;
border:1px solid white;
vertical-align:top;
margin-right:10px;
}
div{
display:inline-block;
width:311px;
}
I need to make them unique classes like:
img.example{
display:inline-block;
width:211px;
height:146px;
border:1px solid white;
vertical-align:top;
margin-right:10px;
}
div.example2{
display:inline-block;
width:311px;
}
So to start with, is that the correct way to make them classes?
If it is, how do I then apply them to the "**" sections of this HTML? The div becomes div.example2 ? How about using the img.example ?
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="css/style.css" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="accordion vertical">
<section id="vertabout">
<h2>Tutor-Led Course</h2>
**<img src="http://bathnes.learningpool.com/draftfile.php/2592/user/draft/826412532/TutorLedCourse.jpg" height="134" width="208" />**
**<div>To view the tutor-led course information, please click here</div>**
<p><strong>IT Courses - Excel 2010 Basic</strong></p>
</section>
<section id="vertservices">
<h2>E-Learning Module</h2>
<p><p><img src="http://bathnes.learningpool.com/draftfile.php/2592/user/draft/826412532/RelatedELearning.jpg" height="146" width="211" /> </p></p>
</section>
</div>
</body>
</html>
Apologies, but I am terrible with CSS and HTML :)
That is the proper way to select a tag with a class, but you need to add the classes.
<img src="http://bathnes.learningpool.com/draftfile.php/2592/user/draft/826412532/TutorLedCourse.jpg"
height="134" width="208" class="example"/>
<div class="example2">To view the tutor-led course information, please click here</div>
Related
I am working on a mail template for an inventory confirmation email and the mail I have to do contains something that I am struggling to find resources on so any resource about it if you know is helpful.
I am trying to make a responsive mail template that also looks good on outlook/microsoft mail and making circle for item colour presents the most trouble to me.
Here’s an example on how to do this with HTML, CSS, and a dedicated VML fallback for The Outlooks on Windows.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question regarding CSS in Outlook mail temp</title>
<!-- https://stackoverflow.com/questions/70364018/question-regarding-css-in-outlook-mail-temp?noredirect=1#comment124384406_70364018 -->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</head>
<body>
<!--[if !mso]><!-->
<div style="width:24px;" role="img" aria-label="Pink color">
<div style="border:4px solid #000; border-radius:50%;">
<div style="padding:2px;">
<div style="width:12px; height:12px;background-color:#f587d8; border-radius:50%;"></div>
</div>
</div>
</div>
<!--<![endif]-->
<!--[if mso]>
<v:group style="position:relative; width:24px; height:24px;" coordsize="24,24">
<v:oval style="position:absolute; left:0; top:0; width:24px; height:24px; z-index:1;" stroked="false" fillcolor="#000000"></v:oval>
<v:oval style="position:absolute; left:4px; top:4px; width:16px; height:16px; z-index:2;" stroked="false" fillcolor="#ffffff"></v:oval>
<v:oval style="position:absolute; left:6px; top:6px; width:12px; height:12px; z-index:3;" stroked="false" fillcolor="#f587d8"></v:oval>
</v:group>
<![endif]-->
</body>
</html>
Here are test results of rendering on Email on Acid.
You can use the <style> tag in email to create something like this. Inline styles are also supported.
.circle{
height: 16px;
width: 16px;
border-radius: 50%;
outline: 2px solid;
outline-offset: 2px;
background-color: #f589d9;
}
<div class="circle"></div>
In my code class "slides" is working through external css link but class header is working through inline css only.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Site</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="slides">
<div class="header" style="width:100%; background-color:#630;"><img src="gz1.gif">
</div>
</div>
</body>
</html>
style.css
head,body{background-color:#CCC; margin:0; padding:0;;}
.slides{
overflow:hidden;
background:-moz-linear-gradient(bottom,red,white);
background:-ms-linear-gradient(bottom,red,white);
background:-o-linear-gradient(bottom,red,white);
background:-webkit-linear-gradient(bottom,red,white);
background:linear-gradient(bottom,red,white);
}
.header{position:fixed;}
I want to work class "header" code from external link instead of inline code...
To avoid inline css in your code, update your html and css like below:
Here we will remove inline styling from header div..
<div class="header"><img src="gz1.gif"></div>
And we will add the inline style of header div in the style.css like so...
head,body{
background-color:#CCC;
margin:0;
padding:0;
}
.slides{
overflow:hidden;
background:-moz-linear-gradient(bottom,red,white);
background:-ms-linear-gradient(bottom,red,white);
background:-o-linear-gradient(bottom,red,white);
background:-webkit-linear-gradient(bottom,red,white);
background:linear-gradient(bottom,red,white);
}
.header{
position:fixed;
width:100%;
background-color:#630;
}
Here's my code. I'm trying to add an image called lg.png into the HTML and be able to edit the length/width in the css file. The lg.png is located in the same folder as the index.html and styles.css
Tried looking online for this answer but can't seem to get any luck.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>yournetid</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<img id="my_image" src="lg.png" alt="image error"/>
<body>
<p>
Here's some awesome pictures!
</p>
</body>
CSS:
body {
}
img#lg background:url(lg.png);
width:200px;
height:100px;
You are trying to use CSS selector img#lg which makes no sense. You are telling CSS to look for an image with id of 'lg' but you did not set any id to your image.
Also, setting the background-image:ur(lg.png) is not the same as <img src='lg.png'>.
To fix it:
Add id to your image
Target the id in your CSS.
Change your HTML:
<img id="my_image" src="lg.png" alt="image error">
CSS:
#my_image {width:200px; height:100px; }
If you wanted to change CSS properties of ALL images, you'd use the following:
img {width:200px; height:100px; }
Hope this helps!
Use a div and set the background property:
HTML:
<div class="my_image"></div>
CSS:
.my_image
{
background:URL('path/to/img.png');
width:100px;
height:100px;
}
When i try to add a <img> tag, IE8 automatically add a 'Empty Text Node' after the image tag.
HTML :-
<html>
<head>
<title>Railway Services</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="img/icon.png" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="header">
<div id="wrapper">
<div class="logo">
<img src="img/logo.png"/>
</div>
</div>
</div>
<div id="page" class="homePage">
<div id="wrapper">
<h1>Home Page</h1>
</div>
</div>
<div id="footer">
<div id="wrapper">
<p class="copyRight">Copyright©2012 Railway Services. All rights reserved</p>
</div>
</div>
</body>
</html>
styles.css :-
#CHARSET "ISO-8859-1";
body{
margin:0px;
padding:0px;
font-size:12px;
color:#123456;
font-family:verdana,_sans,arial;
text-align:center;
}
#wrapper{
width:98%;
margin:0 auto;
}
#page{
float:left;
width:100%;
}
p{
margin:0px;
padding:0px;
}
/**********************HEADER*********************/
#header{
float:left;
width:100%;
}
.logo{
float:left;
width:20%;
height:150px;
cursor:pointer;
}
.logo img{
width:100%;
height:100%;
}
/************************HEADER END***************/
/************************FOOTER*******************/
#footer{
float:left;
width:100%;
}
/***********************FOOTER END****************/
See this image
In the above image you can see the IE generates Empty Text Node after the <img> tag.
I can't found why IE generate empty text node.Can anybody help me..?
IE shows this to any elements in the page that has a blank space between tags. This may not cause any problem.
The only consideration is when your content is inline and it adds a space between the elements. In this case, all you have to do is eliminate the blank space between the tags.
There is a line break and some whitespace for indentation after the image tag, which leads to creating an empty text node.
If you write your code like that:
<div class="logo"><img src="img/logo.png"/></div>
you will not have the empty text node any more.
Since it's really IE specific, I think it's just a bug of the parser.
I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
<html>
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
I said it was really simple. :)
Thank you,
Brett
Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>
</body>
</html>
The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center;}
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
I added a 1px border to the div so that you could see what was happening more clearly.
You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
Now you'll be able to see your 300 px div center on the page.
Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.
You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.
<html>
<head>
<title>Welcome</title>
<style>
#container {text-align:center;border:1px solid blue}
#pageContainer {width:300px; margin:0 auto; border:1px solid red}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="container">
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</div>
</body>
</html>
(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.
You probably want to change it to the following:
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center; }
#pageContainer {width:300px;margin:0 auto;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).
FOR BLUEPRINT USERS
This drove my nuts, until i found this post: problem with ie8 and blueprint
Long story short, in you html code change the
<!--[if IE]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
for
<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Regards
Alex
This works for me on IE6,7,8,FF 3.6.3:
#container
{
width:100%;
}
#centered
{
width:350px;
margin:0 auto;
}
and
<div id="container">
<div id="centered">content</div>
</div>