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>
Related
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;}
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 am actually making a small website for my company, but i'm not good into HTML.
I am placing an image in background.
But i want some think special.
When someone is reading the site and go down, the image doesn't move.
But when we hit the end of this image's background, the image's background follow the user to the down.
I know the code for making it fixe, and making it following.
But i don't know how to
IMG go Fixe;
IF (End of IMG) {IMG go Follow;}.
If I understand your question correctly, you want a background of an image that has text over it and scrolls/moves with the page when the user scrolls down. If this is what you are asking, and please correct me if I am wrong, then some CSS will do the trick!
Since you are new to HTML, I will assume that you don't know CSS but you know HTML. So create a new file called 'stylesheet.css' inside of the same folder as your webpage. Between the head tags in your HTML, add the following line of code:
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Now, in your HTML body, put the image inside and give it an id of "background". Do this by writing:
<div id="background">
<code for image>
</div>
Now open your .css file and add the following code:
#background{
opacity: 0.7;
position:fixed;
}
The opacity property makes sure people can see the text in front of it, and the position property anchors it to a position on the browser window.
For future reference, W3Schools.com is a great site for beginner web programmers.
Hope I helped, Justin
Hello all I am trying to work through (learn) MVC3 and I was playing aroudn with formatting my view using CSS. When using html / webforms have been able to use div tags and apply to that div teh approiate css style.
When using MVC adn creating the layout in my view I have found that multiple CSS styles are not being inheritted.
for example: (sorry for the image but razor syntax seemed to fail on the code cut/paste
In the above I had a div tag for certain sections. however when I used the class property
<div class="myfirststyle" >some content</div>
for each of these div tags only the first one would be detected. The remaining div tags seemed to inherit from the main body style. also defined in the main CSS file.
Can anyone point me to some information on how to setup and style div tags within a view using CSS instead of the stylel property as shown in the above image OR is this correct as you cannot directly call CSS styles from a view as they are only recognized by the page layout.cshtml or masterpage?
Thanks in advance
Update: to help troubleshoot what is happening please refer to the following
Code within the view (using razor engine)
code within the CSS
output from developer toolbar notice how first div layer attributes are detected
output from developer toolbar notice now how image div does not have a style applied
What is interesting is that when viewing the source in html you can still see the CSS tags within the DIV tags they are just not being picked up or inherited for some reason after the first node/div tag
Thanks again for any pointers
Definitely not the case. Something else is going on.
Did you include your CSS file in the view or it's master page?
<link href="#Url.Content("~/Content/YourCSS.css")" rel="stylesheet" type="text/css" />
Or manually add the CSS to your view?
<style type="text/css">
div.myfirststyle { ... }
</style>
If so, have you confirmed the spelling of classes? Typos happen, and we can't see from your image whether or not you added classes to divs. Add some of your code even if you can't format it well enough :)
There is definitely something else funky going on... it has nothing to do with MVC*, it occurs when the browser tries to render it, so the problem must lie with the html & css.
If would recommend validating your HTML and CSS, this will show errors with missing closing tags or anything of the likes that can cause these sorts of errors.
I would recommend using Firefox or Chrome with the Web Developer Toolbar to make html & css validation easier.
*nothing to do with MVC directly... indirectly, sure.
Unfortunantly the error was all on my part. While I did have an error withiin my CSS file regarding the use of the position attribute within my styles. below is the updated style:
.resultController
{
position:static;
width:90%;
border: 1px solid #7C90BE;
margin:5px;
}
.resultImage
{
display:table-cell;
color:Green;
height:36px;
width:36px;
}
.resultContext
{
display:table-cell;
padding:3px;
left:50px;
color:Red;
}
.resultButtons
{
top:5px;
}
The larger problem (all my fault) was the browser was not purging teh cache on close. After dumping the cache and reloading the page the styles began to render correctly. Thanks to all for taking the time to look at this and offer your input.
I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).
body{
background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
line-height:20px; font-size:14px;
font-family:"Trebuchet MS";
margin:0
}
EDIT: Now there's whitespace on the top and bottom (created by the new div class?)
You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.
Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:
<img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" />
But, if you must use it as a background image, than creating an additional class is the way to go.
You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.
You'd have to do something like:
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
Also, add cursor: pointer to the css for the background div so people know it's a link.
OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.
Make clear gif's the same size as your cream boxes
Put those images in something like this <img src="blank.gif" alt="Link Location" />
Use CSS to make the a tag a block element and place it over the cream boxes in the background image
I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.
This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.
You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the <body> tag, obviously.
** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
The issue with setting up an onClick method, is that you remove the anchor hint at the bottom left of the browser window, as well as any SEO that might be associated with the link.
You can accomplish this with just HTML/CSS:
<style>
.background-div {
background-image:url("/path/to/image.jpg");
position:relative;
}
.href:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
}
</style>
<body>
<div class="background-div">
</div>
</body>
In this case, the relative positioning on background-div will keep the link contained to only that div, and by adding a pseudo element to the link, you have the freedom to still add text to the link (if necessary), while expanding the click radius to the entire background div.