I am making a site that will give some code examples . So, I wish to show with proper indentation and also with different colors if possible.
Can anyone suggest me some way to do it ??
Thanks :)
You can use the SyntaxHighlighter script.
You can use it in this way directly.Also you can change it however you want
<div style="height: 200px; width: 300px; overflow: auto;"><pre>CODE
GOES HERE</pre></div>
Related
I really like the style background color of the Microsoft Sign In page and I kinda want to learn about that also apply to my project for school. But when I inspect it, I can't see any style codes. Does CSS or SCSS can do that? I'm not really sure. Thanks
Here is the page that I'm talking about: Microsoft Sign In
You can see my fiddle to get Idea how to do this.
https://jsfiddle.net/rkm1994/0ewnsu7h/
- For Login
source:- https://speckyboy.com/login-pages-html5-css/
div{
height: 500px;
width: 500px;
background-image: linear-gradient(120deg,#f0c9f8,#f7eff6);
}
<div></div>
here is the thing i tried to make it for you hope it will help for the background...
The image doesn't come up on the stylesheet, I've tried so many different things (changing to background
.vegeta {
height: 300px;
width: 300px;
padding: 10px;
background: url("images/vegeta.jpg");
}
However when I put it in the tags on the html page the image shows. The stylesheet is definitely being called by the html document because the other changes show on the page, its just the image that isn't showing up.
Any help would be appreciated, thank you.
First of all you should check all the directory location and spelling, these are the basic problems which we don't notice many time.
Use can use background-image instead of just background because CSS is updated, maybe this can help.
I hope this may help you! Otherwise you can tell me again with all the directory properly.
Since I can't use margin-bottom in html email. What is another positioning thing I could use. I have already uses margin-top, padding-bottom, and padding-top.These all haven't been useful at any in getting what I want to happen.
So I have 2 images. I want to place a buy now button on the bottom right hand corner of an image in order to only be able click on the buy button. What should I do? Any help is appreciated.
You can try with this:
Html:
<div class="box">
<img src="your-image.jpg" alt="">
Click here
</div>
Css:
.box{
position: relative;
}
.box a{
position: absolute;
right: 0;
bottom: 0;
}
I hope it helps you
Use
<body margintop="0" marginleft="0" marginright="0">
A reliable way to create vertical padding/margin in HTML email is to use the following:
<div style="mso-line-height-rule:exactly; line-height:15px; font-size:15px;"> </div>
This will give you a vertical space of 15 pixels; adjust and duplicate as necessary.
I can't tell how this works in the context of the rest of your question, but I'll trust you will know what to do with it.
Can you post the code that you currently have to help take the guess work out of what you need. Because the answer could be as simple as what Radavel mentioned or it might just need something like
align="right"
or
style="float:right"
But that depends on how your code is setup to determine what might be the right answer for you.
Also researching into what code to use and not to use would be helpful as well since not all email providers have the same setup when it comes to viewing a email. What might look great in one might not look that grand in another.
First, the website - http://www.channeltraveldeal.co.uk/blog
Now - That's out the way so lets go... Hi, I'm currently tinkering with a friends WP powered business page. Sadly, I'm not all that experienced with web design, I just know more than my friend and so I'm in need of some assistance if anyone is able to help.
I'm trying to make sure it's viewed correctly across as many platforms as possible, the theme that has been used has responsiveness settings built in which has obviously helped with this, but unfortunately the header image isn't playing ball and is too big (on tablet only).
I read that the best way to sort this out would be to add this to the CSS for the header image -
width: 100%;
height: auto;
... This is the confusing part (for me), I used Firebug to locate the HTML and CSS for the image and this is what I found -
HTML - <img width="1010" height="220" alt="Channel Travel Deal" src="http://channeltraveldeal.co.uk/blog/wp-content/uploads/2014/02/ctdlogotrue.jpg" class="preload-me">
CSS (from the right pane when the linked HTML is clicked on) - http://pastebin.com/6hyN7yTr
I assumed that the "preload.me" img class is the one I needed to amend. I googled for a bit and came up with a few different snippets to try but none of them worked. Here are the ones I tried.
.preload.me {
width: 100%;
height: auto;
}
preload.me {
width: 100%;
height: auto;
}
I tried those two variations with [style] added after the class name (with no space) and/or !important after the CSS values.
Nothing worked. Would someone let me know if I'm doing something wrong, or if there is something stopping me from overriding this inline style. Also, if my method is on completely the wrong track, if I can do it some other way.
If class="preload-me"
then you need to use the css as preload-me not preload.me
and it should be:
.preload-me{}
I'd like to make an image the background of one of my html pages.
I tried
body
{
background-image:url('./images/backgroundimage.gif');
}
But this wouldn't make it appear as the background image. I feel like this should be working, but it isn't. Anyone have better ideas, or see what I have wrong with this idea?
Drop the single quotes and the ./
Also, make sure that file actually exists relative to the that css file's url.
Edit: also search.
Try using this background-image:url(../Images/backgroundimage.gif); and as bkconrd suggestion, make sure your image file located in correct path(I assume you ain't newbie in HTML, hope you check your directory structure). you can Use inline css too <body STYLE="background-image: url(../images/backgroundimage.gif)"></body>(for testing purpose, But usage of Inline Style generally not recommended style of coding).
Hope this helps you, If not let us know .... Happy coding
How about trying this. I think this will work because I have tested it.
body {
background:url('./images/backgroundimage.gif') no-repeat 0 0;
}