I am excited to complete this project, i'm getting close but need help.
I want the width on the download now button equal the width of the book?
http://www.orcaaccounting.com/freeStuff.html |
Then make the image size be mobile friendly. Right now the page isn't mobile friendly.
Any other pointers are greatly appreciated.
Here is a url to my source code.
I couldn't figure out how to insert the code here.
If these are fixed images (i.e. they will not change), then all you need to do is manually set the width of the download button to be the same as the width of the book's image:
<img src="downloadnowOrange.png" style="width:182px">
Note that the above is considered bad code, but it works perfectly and since the rest of your site uses that same style, we'll leave it like that.
How did I discover the correct width for the button? If you are using Google Chrome browser, you can right-click on the book image and choose "Inspect Element". This opens Chrome's "DevTools" window and shows you the underlying HTML. If you hover over the img src, Chrome will display the image and the width/height sizes.
A few points:
You are using inline styling. This means that you have style attributes on each div/etc that style the element. For many reasons, this is not optimal. It is pretty easy to fix this. Give each DIV a unique className, and create a style tag in the document's head with the styles, like this:
Inline-styling (Bad):
<div style="width:50px;height:80px;background:red;">
<img src="healthyCooking.png" style="border:1px solid green;"/>
</div>
Using a style tag:
<head>
<style>
.redDiv{width:50px;height:80px;background:red;}
.cookImg{border:1px solid green;}
</style>
</head>
<body>
<div class="redDiv">
<img src="cookingBooking.png" class="cookImg" />
</div>
That's what people mean by inline styling. Try not to do it. Use the 2nd method, or, better yet, use an external style sheet. To turn the style tag example into an external style sheet, you just move the lines between the <style> and </style> tags - exactly as they are into an external text file (for e.g. mystyle.css), then the head becomes:
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" >
</head>
The file mystyle.css looks like this:
.redDiv{width:50px;height:80px;background:red;}
.cookImg{border:1px solid green;}
Related
I am making a website, but for some odd reason I can't move or resize the text. I do not want to use CSS because it is really hard for me to understand.
Here is an example of what i'm talking about in the image:
CSS is a very important part of front-end developing, so you shouldn't be afraid to use and learn it. You can start to link your css to your html like this :
<head>
<link rel="stylesheet" href="myfile.css">
<!-- Or specify the directory C:/User/...
but it's more efficient if you only specify the file created into a folder so if you move that folder changes will apply along with the html-->
</head>
Then open the created css and use these rules : (Only {})
Resizing Text:
p(or the part of html that you are using){
font-size: 40px;
}
Move Text :
(Consider that you are moving the object FROM the direction
to the opposite one:
example left:80px means that it will be 80px away from the left side.
p{
position:absolute;
left:80px;
top:20px;
}
I know three ways to change the size of the text, which are:
Use css
Or
Make changes using the Style tag inside the Head tag
Or
Using the Style tag inside the desired used tag, such as:
<p Style="font-size:10px;">hello</p>
use the font tag
<font size="3">I want the size to be small.</font>
I read an article online for tips using CSS and one of the pointers was:
Use a master stylesheet. “One of the most common mistakes I see
beginners and intermediates fall victim to when it comes to CSS is not
removing the default browser styling. This leads to inconsistencies in
the appearance of your design across browsers, and ultimately leaves a
lot of designers blaming the browser. It is a misplaced blame, of
course. Before you do anything else when coding a website, you should
reset the styling.”
Could anyone point me to any tutorials (or even help on here) as to how I can setup a Master CSS Page for my website, and also how I can call classes from the Master CSS Page to objects in my webpages.
For example if I set some styles in my Master CSS page,
I could set class on a div to class="main-header-blue" and it would call that style from my Master CSS Page and apply it to my div (and I could call this class from any of my web page)
Any help or advice is appreciated. Thank you in advance.
I think what you're looking for is Normalize.css. By including this asset prior to your own custom styles, it will help to remove browser inconsistencies with things like margins and padding on the document.
Otherwise, just style as you would normally and you should just be fine. Let me know if you have any other questions!
I hope my interpretation is your answer:
CSS is applying styles from a top-down perspective. This means, if you insert two stylesheets, the top one is applied first and then the second one overrides the first stylesheet
That means that:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="mystyle2.css"> // this one overrides the first
That applies to styles too:
div {
background-color:green;
}
div {
background-color:red;
}
// the background color is red.
That could mean that the first stylesheet is the master stylesheet. That one is containing the 'master styles' and the second one is for 'overriding the defaults'. This is useful when you import a stylesheet from 3rth parties (e.g. Bootstrap).
A second interpretation is SASS. Within SASS you can create a master stylesheet containing the variables that will be applied in the other stylesheets. So, in the master stylesheet you say this:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
Then in your other stylesheets you use those:
body {
font: 100% $font-stack;
color: $primary-color;
}
The basic way of setting a "master" stylesheet is the following:
Assume you have a folder structure like this:
webpage (folder)
css (folder)
style.css (file)
index.html (file)
Lets say you have a file called index.html at the root of your project folder. You need to include/reference the stylesheet (style.css) in the index.html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="mydiv">Your content</div>
</body>
</html>
Then you can have this in your style.css file:
.mydiv {
width: 300px;
height: 300px;
background-color: red;
}
This will make the <div>inside the <body>to have a width and height of 300 pixels and a background-color of red. And you can call this style anywhere inside the webpage by giving a <div> the class mydiv.
That is it simply put.
I couldn't figure out Why below page doesn't show image when define id to get image data from css where it shows image when I give data directly in src attribute of img tag.
img.html
<html>
<head><title>img.css</title>
<link rel="stylesheet" type="text/css" href="img.css">
</head>
<body>
<img id="t"></img>
</body>
</html>
img.css
#t { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAyADIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCABNAGQDASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAAcDBAUB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAaoAAAAAAAAAAA526ZAAJxR+cRVXkshV4SFXhDdGteHFq+PbsAAAAAAAAAAAAAAA/8QAIBAAAQQCAgMBAAAAAAAAAAAABAACAwUVFgZQEBITIP/aAAgBAQABBQLryzYA1HIyVn45RZlAk7DZLYbJbDZLYbJbDZLYbJHWRRzRiZhn13JSvaCT6xeCQhinYivWIr1iK9YivWIr1iK9XVC2doXFh40MNCM3tv/EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQMBAT8BD//EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQIBAT8BD//EACsQAAEDAAcGBwAAAAAAAAAAAAEAAgMEERIzNJGSFCEiMVBiBRAgQUJRcv/aAAgBAQAGPwLp7NpksB5qBKtRua9p92mv0wto0lkObWeEFX40BX40BX40BX40BX40BX40BNbSZLQbvHCArVHlfGe0oRzQbR+BU5B5jfHX8X8/MOpELJCNwrWEiyWEiyWEiyWEiyWEiyWEiyULfD4YozXxO5IGlSOlP0NwVmjxMjHaOr//xAAjEAACAQMDBAMAAAAAAAAAAAABEQAhwfBRcYEQIDFQYaGx/9oACAEBAAE/IfXmlDAQp2gh45KDz2hzHQGofyJndpndpndpndpndpndoN0bQQPAnDoR76w16mjccCh+oY0AeAAN+oxJsFod8IQhCDgK1kSmAz/X8nDwR76+3//aAAwDAQACAAMAAAAQ888888888884888CCCaF888888888888888//8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERMED/2gAIAQMBAT8Q2RUVFRVw/wD/xAAUEQEAAAAAAAAAAAAAAAAAAABQ/9oACAECAQE/EA//xAAhEAEBAAAFBQEBAAAAAAAAAAABEQAhMWFxIFBRgZEQQf/aAAgBAQABPxDt9pNIGAUUH+tWGMwaBHCDHppP6gBlqTLr169evXrfX0aAR0LjyQhUbBoNm4P5kyt1B4A5Yrc167hQ+/udySdSw99d73ve4iurRSllXO6DiQ/zflKN8jwx5LQCty1W7e7/AP/Z"); }
The main problem is that you haven't provided a width and height for the image. HTML elements never resize themselves to fit the size of the background image, so you'll have to do that yourself.
And you have markup errors in the source: first of all, an img MUST have a src attribute. And img elements don't have end tags. So it's best to use another element, perhaps a div or a span with the proper styling.
#t {
width:100px; height:77px;
display:inline-block;
background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAyADIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCABNAGQDASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAAcDBAUB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAaoAAAAAAAAAAA526ZAAJxR+cRVXkshV4SFXhDdGteHFq+PbsAAAAAAAAAAAAAAA/8QAIBAAAQQCAgMBAAAAAAAAAAAABAACAwUVFgZQEBITIP/aAAgBAQABBQLryzYA1HIyVn45RZlAk7DZLYbJbDZLYbJbDZLYbJHWRRzRiZhn13JSvaCT6xeCQhinYivWIr1iK9YivWIr1iK9XVC2doXFh40MNCM3tv/EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQMBAT8BD//EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQIBAT8BD//EACsQAAEDAAcGBwAAAAAAAAAAAAEAAgMEERIzNJGSFCEiMVBiBRAgQUJRcv/aAAgBAQAGPwLp7NpksB5qBKtRua9p92mv0wto0lkObWeEFX40BX40BX40BX40BX40BX40BNbSZLQbvHCArVHlfGe0oRzQbR+BU5B5jfHX8X8/MOpELJCNwrWEiyWEiyWEiyWEiyWEiyWEiyULfD4YozXxO5IGlSOlP0NwVmjxMjHaOr//xAAjEAACAQMDBAMAAAAAAAAAAAABEQAhwfBRcYEQIDFQYaGx/9oACAEBAAE/IfXmlDAQp2gh45KDz2hzHQGofyJndpndpndpndpndpndoN0bQQPAnDoR76w16mjccCh+oY0AeAAN+oxJsFod8IQhCDgK1kSmAz/X8nDwR76+3//aAAwDAQACAAMAAAAQ888888888884888CCCaF888888888888888//8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERMED/2gAIAQMBAT8Q2RUVFRVw/wD/xAAUEQEAAAAAAAAAAAAAAAAAAABQ/9oACAECAQE/EA//xAAhEAEBAAAFBQEBAAAAAAAAAAABEQAhMWFxIFBRgZEQQf/aAAgBAQABPxDt9pNIGAUUH+tWGMwaBHCDHppP6gBlqTLr169evXrfX0aAR0LjyQhUbBoNm4P5kyt1B4A5Yrc167hQ+/udySdSw99d73ve4iurRSllXO6DiQ/zflKN8jwx5LQCty1W7e7/AP/Z"); }
<div id="t"></div>
(Note that I took the size 100×77 from the size of the background image itself; you may have different requirements, so adjust as you need.)
However, you may feel that an img is the proper element here, because the picture is part of the document rather than just decoration. In that case, you have the option of putting the content in the src attribute. Then you won't have to set the width and height manually.
<img id="t" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAyADIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCABNAGQDASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAAcDBAUB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAaoAAAAAAAAAAA526ZAAJxR+cRVXkshV4SFXhDdGteHFq+PbsAAAAAAAAAAAAAAA/8QAIBAAAQQCAgMBAAAAAAAAAAAABAACAwUVFgZQEBITIP/aAAgBAQABBQLryzYA1HIyVn45RZlAk7DZLYbJbDZLYbJbDZLYbJHWRRzRiZhn13JSvaCT6xeCQhinYivWIr1iK9YivWIr1iK9XVC2doXFh40MNCM3tv/EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQMBAT8BD//EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQIBAT8BD//EACsQAAEDAAcGBwAAAAAAAAAAAAEAAgMEERIzNJGSFCEiMVBiBRAgQUJRcv/aAAgBAQAGPwLp7NpksB5qBKtRua9p92mv0wto0lkObWeEFX40BX40BX40BX40BX40BX40BNbSZLQbvHCArVHlfGe0oRzQbR+BU5B5jfHX8X8/MOpELJCNwrWEiyWEiyWEiyWEiyWEiyWEiyULfD4YozXxO5IGlSOlP0NwVmjxMjHaOr//xAAjEAACAQMDBAMAAAAAAAAAAAABEQAhwfBRcYEQIDFQYaGx/9oACAEBAAE/IfXmlDAQp2gh45KDz2hzHQGofyJndpndpndpndpndpndoN0bQQPAnDoR76w16mjccCh+oY0AeAAN+oxJsFod8IQhCDgK1kSmAz/X8nDwR76+3//aAAwDAQACAAMAAAAQ888888888884888CCCaF888888888888888//8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERMED/2gAIAQMBAT8Q2RUVFRVw/wD/xAAUEQEAAAAAAAAAAAAAAAAAAABQ/9oACAECAQE/EA//xAAhEAEBAAAFBQEBAAAAAAAAAAABEQAhMWFxIFBRgZEQQf/aAAgBAQABPxDt9pNIGAUUH+tWGMwaBHCDHppP6gBlqTLr169evXrfX0aAR0LjyQhUbBoNm4P5kyt1B4A5Yrc167hQ+/udySdSw99d73ve4iurRSllXO6DiQ/zflKN8jwx5LQCty1W7e7/AP/Z" alt="→">
(Of course this solution is not as efficient in cases where you need the image more than once in the document.)
I am currently making a website for my college project and I want to make it as good as possible. I basically want to have several HTML pages for my website which I have setup but I want to use only the one CSS page. So basically if I edit one page, for example my second page, how do I change the look of it without editing any of the CSS for my first page. I have tried several things but I honestly have no idea.
Any help is appreciated and thank you in advance.
You cannot just change the layout of each page in CSS, CSS is not aware of what the page you are at.
Either do you change the layout by changing the whole CSS file. Or you try to put the CSS special functions for that page inside the page elements.
Otherwise you can't do that!
For example:
You can create a single CSS file and link it as:
<link rel="stylesheet" href="site.css" type="text/css">
Then in each page, where you want the style to be different you can change the style inline:
<element style="property: value; property_2: value_2;"></element>
Like this!
How about adding a class to the body tag on the second page, then specifying the style that are just for that page by using the class.
Page one:
<body>
<p>This page is boring</p>
</body>
Page two:
<body class="page-two">
<p>That's a mighty fine body</p>
</body>
Then your CSS could be
p {
background: white;
}
.page-two p {
background: red;
}
If you have a lot of extra CSS to apply to the second page, then you might consider using LESS or something similar to make your life easier.
Your best method is to have an app.css file that has global settings like height, width... and then have specific page files index.css, portfolio.css.. that have specific styles like colors.
You can specify your button general style in your app.css, and then more specific styles in each page css file.
app.css:
button{
height: 30px;
width: 150px;
border: 1px solid purple;
color: purple;
}
index.css:
button{
border: 1px solid black;
color: black;
}
Add the app.css to each html file, and then only the specific page css file to each html file. This will make it easy to expand in the future.
You need to create a template for your HTML pages and then link an external style sheet in your <head> section of each page like this:
<link rel="stylesheet" href="mystyle.css" type="text/css">
Then for any special cases that are not part of the template, you can link additional style sheets. Just a side note, embedding styles in elements directly is harder to maintain than linking multiple CSS files.
If you are allowed to use JavaScript, you might like to use a JavaScript template engine like Handlebar.js.
The beauty of template engines is that you can define sections and create dynamic HTML. This may be more complex than what you're wanting here, but it is very cool.
A large list of template engines can be found here: http://garann.github.io/template-chooser/
I'm breaking my head with this simple? problem. I know its not a bug nor a cross browser issue, tested on firefox and internet explorer. Simply I don't understand why its resolving this way.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.red_class { color: red; }
.blue_class {color: blue;}
</style>
</head>
<body>
<div class="red_class">
<a class="blue_class" href="http://somesite.com">Somesite</a>
</div>
</body>
</html>
In my humble opinion both rules have the same specificity so I expected the link to show in BLUE because the blue_class rule is closer, but the link is shown in RED. I actually changed the order so that the ".blue_class" rule was written first, but it didn't change the result
I have found some ways to make the code work, like making 2nd rule more specific, for example:
.red_class a.blue_class {color: blue;}
But I would really like to understand why this is not working as I expected, that is, if the link has a class blue_class it should be shown in blue.
Really appreciate the help. Thanks in advance.
Actually I don't see how you're getting a red colored link...
Anchor elements with defined href doesn't inherits attributes like color or text-decoration, so the result you're getting it's a little odd.
http://www.w3.org/TR/html401/struct/links.html#h-12.2
User agents generally render links in such a way as to make them obvious to users (underlining, reverse video, etc.). The exact rendering depends on the user agent. Rendering may vary according to whether the user has already visited the link or not.
So, this results in a default styled anchor:
.red_class{color:red;}
<div class="red_class">
Something
</div>
In this case the anchor inherits the red color:
.red_class{color:red;}
<div class="red_class">
<a>Something</a>
</div>
I really don't get the problem, but at least this is an explanation of how anchor styling works.
#Luxfer This is just a simple thing that I do. Download Firebug Addon for your Firefox. Inspect the element to which you want to give style. On the right side of Firebug, there is a box where you can see the CSS used. Simply Right Click on the CSS pane, there you will find an option as Add Rule. As you Click on that, it will take the selectors that will target the required element perfectly.
Are you certain it's not working? Blue is not a good color to test with because most browser default to a blue for hrefs.
<div class="red_class">
<a class="green_class" href="http://somesite.com">Somesite</a>
<p>More Text</p>
</div>
with
.red_class { color: red; }
.green_class {color: green;}
Seems to work fine in Chrome here.
----Demo-----