CSS and HTML help
From C++ to PHP, debugging to webhosting; help and discussion about writing your latest program to running your website. NOT for help when your PC won't work.
| Announcements | Posted on | |
|---|---|---|
| Please change your TSR password | 23-05-2013 | |
-
- Reputation:
- Thread Starter
- Peer Of The TSR Realm
- Posts: 1,606
CSS and HTML helpi am really new to programming and i am struggling with using the "div" comand.
<!doctype html PUBLIC "-//WEC//DTD XHTML 1.0 Transactional//EN"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>
this is the title
</title>
<style type="text/css">
div {border:2px solid red;
position:absolute;
width:300px;
top:40x;
left:35px;}
</style>
</head>
<body>
<div>rhiejrbeirbeojjreb
breurbehrebnreb
brenirbenirbenir
nirbeinrbenrib</div>
</body>
</html>
here's the code, do you know why my text doesn't move down.
also, what does this mean and do?
<!doctype html PUBLIC "-//WEC//DTD XHTML 1.0 Transactional//EN"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> -
- Reputation:
- Adored and Respected Member
- Posts: 505
Re: CSS and HTML helpWhat do you mean by "text doesn't move down"?
Code:<!doctype html PUBLIC "-//WEC//DTD XHTML 1.0 Transactional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
This is describing the doctype of your html document, basically the rules the you will follow when writing your html markup. You have said you are using XHTML 1.0 Transitional, and will follow the rules set out by W3C. -
- Reputation:
- Peer Of The TSR Realm
- Posts: 1,568
Re: CSS and HTML helpHi Non.
Not entirely sure what you mean by "Move down".
I assume you meant you want a padding so the text doesn't start at the top of the page?
In which case, here's a sample of the code you can use:
Notice how that I have split the border into a different divider to stop it from having a top padding itself.HTML Code:<!doctype html PUBLIC "-//WEC//DTD XHTML 1.0 Transactional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <title> this is the title </title> <style type="text/css"> DivName { position:absolute; padding-top:200px; } DivName2 { border:2px solid red; } </style> </head> <body> <DivName> <DivName2> rhiejrbeirbeojjreb breurbehrebnreb brenirbenirbenir nirbeinrbenrib </div> </div> </body> </html>
Very loosely speaking, Doctype is a declaration. It tells the browser what version of HTML you are using. That's all.
It's a bit like walking up to someone and saying "English" to declare that you speak English. Whilst another person might walk up and say "French" to declare that they speak French.
You really don't need to know about this, just include it for the sake of good practice.
Sin Cera
Tamimi -
- Reputation:
- Thread Starter
- Peer Of The TSR Realm
- Posts: 1,606
Re: CSS and HTML helpwhat i meant was, i wrote this:(Original post by Jake9)
,
<style type="text/css">
div {border:2px solid red;
position:absolute;
width:300px;
top:40x;
left:35px;}
</style>
this shows that i wanted something to be mover down and left but when i tried it didn't move down.
i have been practising coding by watching this video
http://www.youtube.com/watch?v=e0ONA...322B5A0180C946
please cna you tell me why my code isn't doing what is happening in the video at roughly 3minutes.
sorry but i haven't come across the corrections that you've made to my code, can you look above at what i would like the code to do please.(Original post by tamimi)
,
i have been practising coding by watching this video
http://www.youtube.com/watch?v=e0ONA...322B5A0180C946
please cna you tell me why my code isn't doing what is happening in the video at roughly 3minutes. -
- Reputation:
- Peer Of The TSR Realm
- Posts: 1,568
Re: CSS and HTML helpThe fairies tell me that you've been blindly copying code without knowing what it's doing, non.(Original post by non)
what i meant was, i wrote this:
<style type="text/css">
div {border:2px solid red;
position:absolute;
width:300px;
top:40x;
left:35px;}
</style>
this shows that i wanted something to be mover down and left but when i tried it didn't move down.
i have been practising coding by watching this video
http://www.youtube.com/watch?v=e0ONA...322B5A0180C946
please cna you tell me why my code isn't doing what is happening in the video at roughly 3minutes.
sorry but i haven't come across the corrections that you've made to my code, can you look above at what i would like the code to do please.
i have been practising coding by watching this video
http://www.youtube.com/watch?v=e0ONA...322B5A0180C946
please cna you tell me why my code isn't doing what is happening in the video at roughly 3minutes.
Anyway, you have a typo.
You wrote
It should beCode:<style type="text/css"> div {border:2px solid red; position:absolute; width:300px; top:40x; left:35px; }
Code:<style type="text/css"> div {border:2px solid red; position:absolute; width:300px; top:40px; left:35px; } -
- Reputation:
- Thread Starter
- Peer Of The TSR Realm
- Posts: 1,606
Re: CSS and HTML helpthank you so much!(Original post by tamimi)
,
i can't believe i missed that.
i daven't been blindly copying code just learn what the tags do and how to use them. i find watching these tutorials on youtube to be the best way to learn.
EDIT: the problem is that i find it difficult to remeber the tags and how to use them. have you got any tips on how to do this?Last edited by non; 23-06-2012 at 22:57. -
- Reputation:
- Peer Of The TSR Realm
- Posts: 1,568
Re: CSS and HTML helpMost people pick up tags as they go along. They're not difficult to remember if you use them for elongated periods of time. So seeing as you just started, don't worry, it'll come to you.(Original post by non)
thank you so much!
i can't believe i missed that.
i daven't been blindly copying code just learn what the tags do and how to use them. i find watching these tutorials on youtube to be the best way to learn.
EDIT: the problem is that i find it difficult to remeber the tags and how to use them. have you got any tips on how to do this?
Me personally, I have a dire memory, I still look some things up now after years of practice. Nothing wrong with that at all.
Don't get out of your comfort zone in order to remember tags and methods. Coding should be smooth and most importantly, it should be fun.
One last thing, you should look up how to have a seperate file with the css in it to the file with the html in it.
What happens there is that you dump all your css in one file like so:
nameofdiv1 {
codehere:value;
}
nameofdiv2 {
codehere2:value;
}
nameofdiv3 {
codehere3:value;
}
so on and so forth. And then in html, you simply "Call" divs wherever you need them
For example:
The point of this is to shorten the index file, and organise your styles.HTML Code:<div id="nameofdiv2"> Lots of important content here. </div>
Also, this is beneficial for say for example you had a 3 page website, and you needed to call a particular div style in all 3, you wouldn't have to copy and paste the code in all 3 pages, you'd simple have the following file structure:
file1.html
file2.html
file3.html
stylesheet.css
and then you can call values from stylesheet.css into all three pages in the directory which makes life much easier.
This isn't vital, but the earlier you pick it up, the more time you save later.
Sin Cera -
- Reputation:
- Benevolent Member
- Location: Cambridge
- Posts: 832
Re: CSS and HTML helpAgreed. I was also going to suggest this. Have a link: http://www.w3schools.com/html/default.asp(Original post by Sparrow_Squire)
good tutorials on w3schools.org -
- Reputation:
- Overlord in Training
- Location: Southampton
- Posts: 2,121
Re: CSS and HTML helpAs others have said the best way to learn and remember is to make use of the html and css you've learnt. It's like any language if you use it it becomes second nature.
some of the styling with tags like div can get interesting with all the rules of what works and when (styles like top and left may only make sense in certain ways of positioning the box).
One thing Ive found useful is a diagram of the "box model" http://www.w3schools.com/css/css_boxmodel.asp which shows how padding, margins, border and content are related.
Don't get out of your comfort zone in order to remember tags and methods. Coding should be smooth and most importantly, it should be fun.
