Hey there Sign in to join this conversationNew here? Join for free

CSS and HTML help

Announcements Posted on
TSR wants you: get involved with Power Hour. 10-04-2014
    • Thread Starter
    • 3 followers
    Offline

    ReputationRep:
    i 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">
    • 0 followers
    Offline

    ReputationRep:
    What 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.
    • 0 followers
    Offline

    ReputationRep:
    Hi 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:

    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>
    Notice how that I have split the border into a different divider to stop it from having a top padding itself.

    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
    • Thread Starter
    • 3 followers
    Offline

    ReputationRep:
    (Original post by Jake9)
    ,
    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.

    (Original post by tamimi)
    ,
    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.
    • 0 followers
    Offline

    ReputationRep:
    (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.
    The fairies tell me that you've been blindly copying code without knowing what it's doing, non.

    Anyway, you have a typo.

    You wrote
    Code:
    <style type="text/css">
    div {border:2px solid red;
    position:absolute;
    width:300px;
    top:40x;
    left:35px;
    }
    It should be
    Code:
    <style type="text/css">
    div {border:2px solid red;
    position:absolute;
    width:300px;
    top:40px;
    left:35px;
    }
    • Thread Starter
    • 3 followers
    Offline

    ReputationRep:
    (Original post by tamimi)
    ,
    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?
    • 0 followers
    Offline

    ReputationRep:
    (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?
    Most 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.

    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:
    HTML Code:
    <div id="nameofdiv2">
    Lots of important content here.
    </div>
    The point of this is to shorten the index file, and organise your styles.

    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
    • 0 followers
    Offline

    ReputationRep:
    good tutorials on w3schools.org
    • 7 followers
    Offline

    ReputationRep:
    (Original post by Sparrow_Squire)
    good tutorials on w3schools.org
    Agreed. I was also going to suggest this. Have a link: http://www.w3schools.com/html/default.asp
    • 1 follower
    Offline

    ReputationRep:
    As 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.

Reply

Submit reply

Register

Thanks for posting! You just need to create an account in order to submit the post
  1. this can't be left blank
    that username has been taken, please choose another Forgotten your password?

    this is what you'll be called on TSR

  2. this can't be left blank
    this email is already registered. Forgotten your password?

    never shared and never spammed

  3. this can't be left blank

    6 characters or longer with both numbers and letters is safer

  4. this can't be left empty
    your full birthday is required
  1. By completing the slider below you agree to The Student Room's terms & conditions and site rules

  2. Slide the button to the right to create your account

    Slide to join now Processing…

    You don't slide that way? No problem.

Updated: October 20, 2012
Article updates
Useful resources
Reputation gems:
You get these gems as you gain rep from other members for making good contributions and giving helpful advice.