Notices
Results 1 to 29 of 29
Like Tree1Likes
  • 1 Post By seagypsy

Thread: Whats wrong with this css HTML code?

  1. #1 Whats wrong with this css HTML code? 
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    So, basically i want the words "Hi" to be centred.
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title>Homepage</title>
    <style>
    span#Hello{text-align:center}
    </style>
    </head>
    <body>
    <hr/>
    <hr/>
    <h1><span id="Hello">Hello! Welcome to my first ever website! This is the HomePage!</span></h1>
    <hr/>
    <hr/>
    </body>
    </html>
    it just wont be centerd, i checked for hours and i dont know whats wrong, any help appreciated


    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  2.  
     

  3. #2  
    Brassica oleracea Strange's Avatar
    Join Date
    Oct 2011
    Location
    喫茶店
    Posts
    16,602
    tex-align doesn't do anything to "inline" elements like span. You need to apply it to the h1 element (which is a block element).

    Code:
    <style>
      h1#Hello{text-align:center}
    </style>
    ...
    <h1 id="Hello">Hello! W...


    Without wishing to overstate my case, everything in the observable universe definitely has its origins in Northamptonshire -- Alan Moore
    Reply With Quote  
     

  4. #3  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    anyway this is the full code.. i just removed the 2nd part earlier, because i didnt want to put my name this is the code.
    <!DOCTYPE html><html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title>Homepage</title>
    <style>
    #thetitle{text-align: center;}
    </style>
    </head>
    <body>
    <hr/>
    <hr/>
    <h1><span id="thetitle">Hello! Welcome to my first ever website! This is the HomePage!</span></h1>
    </br>
    <h2><span id="thetitle">This is Done By: mynamethatidontmentionhere.</span></h2>
    <hr/>
    <hr/>
    </body>
    </html>
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  5. #4  
    has lost interest seagypsy's Avatar
    Join Date
    Nov 2012
    Posts
    3,107
    I'm a little bit rusty on my html but unless for some reason you are especially attached to using the span tag, removing it works. try this

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title>Homepage</title>
    <style>
    #Hello {text-align:center;}
    #thetitle {text-align:center;}
    </style>
    </head>
    <body>
    <hr/>
    <hr/>
    <h1 id="Hello">Hello! Welcome to my first ever website! This is the HomePage!</h1>
    </br>
    <h2 id="thetitle">This is Done By: mynamethatidontmentionhere.</h2>
    <hr/>
    <hr/>
    </body>
    </html>
    Reply With Quote  
     

  6. #5  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  7. #6  
    has lost interest seagypsy's Avatar
    Join Date
    Nov 2012
    Posts
    3,107
    What are you using to create your code? Just your basic text editor or some fancy application like dreamweaver?

    If you don't already know about it, I'd recommend Notepad++. It does all the fancy high lighting that dreamweaver would do but without a million distracting buttons that get you flustered when you are new to html. AND ITS FREE.
    Reply With Quote  
     

  8. #7  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    i cant make assign spans to be in the center?
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  9. #8  
    Brassica oleracea Strange's Avatar
    Join Date
    Oct 2011
    Location
    喫茶店
    Posts
    16,602
    Quote Originally Posted by ryanawe123 View Post
    The problem that text-align doesn't apply to inline elements? It can't be "solved". You need to understand the difference between block and inline elements. It is a very important and fundamental part of the CSS model.
    Without wishing to overstate my case, everything in the observable universe definitely has its origins in Northamptonshire -- Alan Moore
    Reply With Quote  
     

  10. #9  
    Brassica oleracea Strange's Avatar
    Join Date
    Oct 2011
    Location
    喫茶店
    Posts
    16,602
    Quote Originally Posted by ryanawe123 View Post
    i cant make assign spans to be in the center?
    No. They take up the amount of space within a line required by their content. The content entirely fills an inline element (by definition) so centering it doesn't mean anything.
    Without wishing to overstate my case, everything in the observable universe definitely has its origins in Northamptonshire -- Alan Moore
    Reply With Quote  
     

  11. #10  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    im using Notepad++
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  12. #11  
    has lost interest seagypsy's Avatar
    Join Date
    Nov 2012
    Posts
    3,107
    span is intended for use in things like sentences within paragraphs. maybe you want to add some fancy formatting to an entire sentence within a paragraph but you don't want spacing added to separate the sentence from the paragraph. You encapsulate the sentence in a span tag and then add the features you want that sentence to have, but it won't cause it to leave the alignment of the paragraph it is in.

    for instance, try this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title>Homepage</title>
    <style>
    #Hello {text-align:center;}
    #thetitle {text-align:center;}
    p {width:80%;
    	margin-right: 10%;
    	margin-left: 10%;}
    #awesome {color:red;
    		font-size:2em;
    		font-weight: heavy;
    		}
    </style>
    </head>
    <body>
    <hr/>
    <hr/>
    <h1 id="Hello">Hello! Welcome to my first ever website! This is the HomePage!</h1>
    </br>
    <h2 id="thetitle">This is Done By: mynamethatidontmentionhere.</h2>
    <hr/>
    <hr/>
    <p>This is just a lame old boring paragraph.This is just a lame old boring paragraph.This is just a lame old boring paragraph.
    This is just a lame old boring paragraph.This is just a lame old boring paragraph.This is just a lame old boring paragraph.
    <span id="awesome"> And this is one awesome sentence in the middle.</span>This is just a lame old boring paragraph.This is just a lame old boring paragraph.This is just a lame old boring paragraph.
    </body>
    </html>
    Strange likes this.
    Reply With Quote  
     

  13. #12  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    it doesnt work...
    And this is one awesome sentence in the middle.
    its not in the middle.

    cant i make span centralized?
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  14. #13  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    can ids be linked to lines?

    e.g.
    <hr/ id="thisisanid">
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  15. #14  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    what i want to do now, is
    have a border in the middle of
    Hello! Welcome to my first ever website! This is the HomePage!
    and
    This is Done By: mynamethatidontmentionhere.
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  16. #15  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    will this work?
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title>Homepage</title>
    <style>
    #aBorder{
    border-color:#00ffff;
    border-style:sold;
    border-width:10px;
    }
    </style>
    </head>
    <body>
    </br id="aBorder">
    </body>
    </html>
    why or why not?
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  17. #16  
    has lost interest seagypsy's Avatar
    Join Date
    Nov 2012
    Posts
    3,107
    Quote Originally Posted by ryanawe123 View Post
    will this work?
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title>Homepage</title>
    <style>
    #aBorder{
    border-color:#00ffff;
    border-style:sold;
    border-width:10px;
    }
    </style>
    </head>
    <body>
    </br id="aBorder">
    </body>
    </html>
    why or why not?

    It won't, because you have applied the features to a line break. the br tag is just used to create the effect of a carriage return in text.

    It forces the next element to the next line. Nothing more. putting several of these together can create white space. if you want to make it thicker, I think you can adjust the lineheight of it but thats about it.

    I have to run to class, where I will likely be doing nothing but being bored since our teacher doesn't teach and I have all hte homework done. so once I'm there I can will show you how to create a border around something.

    Otherwise, google up w3schools. they are the best resource for up to date methods of using html and css.
    Last edited by seagypsy; April 30th, 2013 at 12:33 PM.
    Reply With Quote  
     

  18. #17  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    i know how to create a border around something, but how do i make a border around nothing? (the border by itself)
    https://www.google.com.sg/search?q=html+css+border&aq=f&oq=html+css+border&a qs=chrome.0.57j0l3j62l2.15753j0&sourceid=chrome&ie =UTF-8#sclient=psy-ab&q=html+css+border&oq=html+css+border&gs_l=serp. 3..0l4.11612.11769.1.12917.2.2.0.0.0.1.182.320.0j2 .2.0...0.0...1c.1.11.psy-ab.pmufjPyMagg&pbx=1&bav=on.2,or.r_qf.&bvm=bv.4592 1128,d.bmk&fp=6253e8817b303ede&biw=1366&bih=705

    too mant results in google; cant find it detailedly.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title>Homepage</title>
    <style>
    #aBorder{
    border-color:#00ffff;
    border-style:solid;
    border-width:10px;
    }
    </style>
    </head>
    <body>
    <id="aBorder">
    </body>
    </html>
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  19. #18  
    has lost interest seagypsy's Avatar
    Join Date
    Nov 2012
    Posts
    3,107
    Quote Originally Posted by ryanawe123 View Post
    it doesnt work...
    And this is one awesome sentence in the middle.
    its not in the middle.

    cant i make span centralized?
    I didn't mean that it was in the middle of hte page. I meant that it was in the middle of the paragraph but still part of it.
    Reply With Quote  
     

  20. #19  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    ok i got it, but how do i simply make a border by itself?
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  21. #20  
    has lost interest seagypsy's Avatar
    Join Date
    Nov 2012
    Posts
    3,107
    Ok you need to define the height and width of the border. and it needs to apply to a block element. So you can use a section tag or a div tag. Section is from html5 which is the latest version of html. div, I'm told is going to be deprecated soon.

    Code:
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title>Homepage</title>
    <style>
    
    #aBorder{
    width: 120px;
    height: 120px;
    margin: 50px 120px 50px 120px;
    border-width:10px;
    border-color:#00ffff;
    border-style:solid;
    }
    </style>
    </head>
    <body>
    <section id="aBorder"></section>
    </br >
    </body>
    </html>
    Reply With Quote  
     

  22. #21  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    okay thank you,

    but is the only way using a
    <tag id="aBorder"></tag>
    ?
    is there a simpler way? (shorter code, but using css)

    like
    <id="aBorder>
    or any shorter code?



    anyway i got a question, whats the difference between <head></head> and <header></header>?
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  23. #22  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    And what should i do if i want
    &#haha60;head&#haha62;
    (ignore the 'haha's inside the quotes) these symbols to appear in my website? isnt it a code used by html?
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  24. #23  
    has lost interest seagypsy's Avatar
    Join Date
    Nov 2012
    Posts
    3,107
    Quote Originally Posted by ryanawe123 View Post
    okay thank you,

    but is the only way using a
    <tag id="aBorder"></tag>
    ?
    is there a simpler way? (shorter code, but using css)

    like
    <id="aBorder">
    or any shorter code?



    anyway i got a question, whats the difference between <head></head> and <header></header>?
    Using id is useful if you want to attribute the features to just one object on your screen, but if you want it to apply to all elements of the same type, you can just use the element that it is, such as section or img tags.

    now difference between head and header. The head section contains information about your web page, such as the title of the page that you want to appear on a browser tab, also any meta content, Google analytics code (webcrawler info). For now you will likely just put the title and any links to outside sources like javascript and style sheets. So far you have been using imbedded styles. But you can also code the css within the body of the html or in a separate file all together, called external style sheets. These files will have a .css extension.

    The header section is actually viewable in your page. You can put content here and treat it just like you would a header/footer type of thing on a typed document. It is a block element that spans the width of the page and it makes it easier to remember what tag element to style particularly for banners or title images that cross the top of your page. before html5 came out you would normally use div containers. now divs are being phased out for language that is closer to how we speak. so now we have header footer and section tags.

    I used to use divs and would id them as header footer and section....

    tables are also rarely being used anymore. That was the norm before divs. but don't let me get you confused in a history lesson. I probably have the details of it wrong anyway, I was never good at history.

    If you want several web pages within a site to have similar style theme then external style sheets are the way to go.



    Quote Originally Posted by ryanawe123 View Post
    And what should i do if i want
    &#haha60;head&#haha62;
    (ignore the 'haha's inside the quotes) these symbols to appear in my website? isnt it a code used by html?
    I'm not sure exactly which special characters you are asking for but I will list what I can find for you

    are you trying to get greater than and less than symbols or ampersand and pound signs?

    < is "& # 60;"

    > is "& # 62;"

    & is "& # 38;"

    # is "& # 35;"

    just omit the spaces, and the quotes.... this is the first time I have seen this board allow html... even using the noparse bb tags didn't stop it from parsing the html. weird.
    Last edited by seagypsy; May 1st, 2013 at 12:28 AM.
    Reply With Quote  
     

  25. #24  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    how can i have
    "& # 38;"
    appear without spaces and quotes in html?
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  26. #25  
    has lost interest seagypsy's Avatar
    Join Date
    Nov 2012
    Posts
    3,107
    "& # 38;& # 35;38"

    but leave out the spaces.
    Reply With Quote  
     

  27. #26  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    can i also type

    "& # 38;& # 35;38"

    without the " and spaces?
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  28. #27  
    has lost interest seagypsy's Avatar
    Join Date
    Nov 2012
    Posts
    3,107
    you should but it depends on how it is being used in your code. my methods have always been to just try something. so far i haven't inadvertantly blown anything up. if it doesn't work then you just delete your last change and try something else.
    Reply With Quote  
     

  29. #28  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    i want a picture background, so i do this
    Code:
    body{color:silver;
        background:url(images/backg.PNG) no-repeat center fixed;
        background-size:cover;
        background-color:black;
    now, i want a translucent content background set a parent with
    Code:
    #content {opacity:0.8;
            border-color:darkgrey;
            border-style:groove;
            border-width:5px;
            border-left-color:transparent;
            border-right-color:transparent;
            background:black;
            font-size:17pt;}
    and i have some images in the content, which i want it to be opaque.

    so i insert this
    Code:
    #content img{opacity:1;}
    and it still remains at 0.8opacity..

    i tried setting it to a higher number (like 2) to "counter" the parent's 0.8 opacity.
    But the image still stays at 0.8 opacity.

    any idea to help me?
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

  30. #29  
    Forum Ph.D.
    Join Date
    Jan 2013
    Posts
    911
    I tried this too, but it wont work.
    Code:
    #content:not(img) {opacity:0.8;
            border-color:darkgrey;
            border-style:groove;
            border-width:5px;
            border-left-color:transparent;
            border-right-color:transparent;
            background:black;
            font-size:17pt;}
    #content img{opacity:1;}
    Quote Originally Posted by jocular View Post
    If thy right nipple offend thee, pluck it off! Goes for the other, too!
    Reply With Quote  
     

Similar Threads

  1. Replies: 0
    Last Post: February 2nd, 2012, 10:14 AM
  2. Chunks of text in HTML source code
    By CompGeek30 in forum Computer Science
    Replies: 2
    Last Post: May 12th, 2011, 08:23 AM
  3. Replies: 14
    Last Post: October 15th, 2009, 08:23 PM
  4. Whats wrong with me? HELP - Mental Illness.
    By Spiderman in forum Health & Medicine
    Replies: 2
    Last Post: February 10th, 2008, 12:22 PM
  5. Whats wrong with islam
    By captaincaveman in forum Scientific Study of Religion
    Replies: 52
    Last Post: October 5th, 2006, 12:39 PM
Bookmarks
Bookmarks
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •