Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    139
    Thanks
    29
    Thanked 1 Time in 1 Post

    footer questions

    Hey guys,

    I want to add this line under the title but not underline the title itself, just add a line below it. Just like in the picture here:



    But how? Is that part of the border or a background image?
    Attached Thumbnails Attached Thumbnails footer questions-footer.jpg  
    Last edited by OGGordon; 11-15-2009 at 03:33 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    But how? Is that part of the border or a background image?
    How can we give help on your code without seeing it? Can we have a link?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    139
    Thanks
    29
    Thanked 1 Time in 1 Post
    http://derderder.cwsurf.de/

    this is how my footer looks right now. this is the code

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    title>Unbenanntes Dokument</title>
    </
    head>
    <
    style>

    #footer { width: 960px; height: 219px; padding-top: 7px; font-family: verdana; font-size: 12px; color: #fff; } 

    #menu1 { width: 200px; float: left; padding-left: 0px; padding-right: 10px; padding-bottom: 10px; margin-left: 20px; text-decoration: underline;  }
    #menu2 { width: 200px; float: left; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; margin-left: 20px; text-decoration: underline;  }
    #menu3 { width: 200px; float: left; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; margin-left: 20px; }
    #menu4 { width: 200px; border: 1px: solid; float: left; padding-left: 10px; margin-left: 20px; }

    t1 color#fff; font-family: times new roman; font-size: 20px; text-decoration: unterline; } 

    </style>
    <
    body>
    <
    div id="footer">
        <
    div id="menu1">
            <
    t1>Community</t1><br>
            <
    br>
            
    Hilfe<br>
            
    Tipps<br>
            
    FAQ<br>
            
    Forum
        
    </div>
        <
    div id="menu2">
            <
    t1>Heute schon gephugt?</t1><br>
            <
    br>
            
    Wer oder was<br>
            
    Gaestebuch<br>
            
    Kontakt
            
    <br>
            
    Feedback<br>
        </
    div>
        <
    div id="menu3">
            <
    t1>Folge uns!</t1>
            <
    br>
            <
    br>
            <
    img border="0" src="images/facebook.png" width="48" height="48">
            <
    img border="0" src="images/myspace.png" width="48" height="48">
            <
    img border="0" src="images/twitter.png" width="48" height="48"><br>
        </
    div>
        <
    div style="clear:both;"></div>
    </
    div>
    </
    body>
    </
    html

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    this is the code
    That might be the expected code, but not actual. Take the page source from your browsers and check it. It doesn't follow the structure of a valid document. I think I had told you about this before at problem inserting external php file

    PS: Please always validate your code and try to fix the errors before asking for help.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    OGGordon (11-14-2009)

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    To create this effect you add a border-bottom, as an underline would just underline the text and not go all the way across.

    But this piece of text must also reside in a block element, say a heading tag, or a div, or a span set to display block e.g

    Code:
    CSS:
    h3{ border-bottom: 2px solid #000; }
    
    HTML:
    <h3>This text will have a line underneath it going all the way across!! </h3>
    Oh and you seem to have invented your own element, t1 ? You can only invent your own elements in XML I think. See here for a list of HTML elements (don't use the ones that say "depreceated" next to them"). As explained earlier, instead use a heading tag (<h1>,<h2>..<h7>) or a <div> or a <span> set to display:block.

  • Users who have thanked Scriptet for this post:

    OGGordon (11-14-2009)

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    139
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Scriptet View Post
    To create this effect you add a border-bottom, as an underline would just underline the text and not go all the way across.

    But this piece of text must also reside in a block element, say a heading tag, or a div, or a span set to display block e.g

    Code:
    CSS:
    h3{ border-bottom: 2px solid #000; }
    
    HTML:
    <h3>This text will have a line underneath it going all the way across!! </h3>
    Oh and you seem to have invented your own element, t1 ? You can only invent your own elements in XML I think. See here for a list of HTML elements (don't use the ones that say "depreceated" next to them"). As explained earlier, instead use a heading tag (<h1>,<h2>..<h7>) or a <div> or a <span> set to display:block.
    I was just trying something out with t1, didn't know that some browsers don't accept that haha. But thanks for your post, exactly what I wanted. However, I know the heading tag makes everything bold, is there any way to get rid of that?

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Yea for sure, by default all headings are bold, and have different font sizes.

    They also have default margins and paddings applied to them, if you haven't reset them already at the top of your stylesheet.

    Anyhow to change bold, you use:

    h1{ font-weight:normal ;}

    Obviously change h1 to the heading you used.

  • #8
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    139
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    That might be the expected code, but not actual. Take the page source from your browsers and check it. It doesn't follow the structure of a valid document. I think I had told you about this before at problem inserting external php file

    PS: Please always validate your code and try to fix the errors before asking for help.
    I now got what you meant on that previous post. Finally. I'll have to let the website run through a validator and fix all the errors. Sorry about that, I'm new to coding and still learning thanks for pointing that out tho!

  • #9
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    139
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Scriptet View Post
    Yea for sure, by default all headings are bold, and have different font sizes.

    They also have default margins and paddings applied to them, if you haven't reset them already at the top of your stylesheet.

    Anyhow to change bold, you use:

    h1{ font-weight:normal ;}

    Obviously change h1 to the heading you used.
    aah that's what i thought, everything was in different places once I put on the h3 tag. Thanks a bunch!

  • #10
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    139
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Scriptet View Post
    Yea for sure, by default all headings are bold, and have different font sizes.

    They also have default margins and paddings applied to them, if you haven't reset them already at the top of your stylesheet.

    Anyhow to change bold, you use:

    h1{ font-weight:normal ;}

    Obviously change h1 to the heading you used.
    just one more thing, how do you reset the margins and paddings?

  • #11
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Well to reset all default margins and paddings for all elements e.g headings, ul's and forms you add the following to the very top of your stylesheet:

    Code:
    *{ margin:0; padding:0; }
    * basically selects all elements. This is called the universal css reset.

    But there are occassions where you wouldn't want to use this universal css reset, e.g if you are happy with browser defaults, or on some pages where you use forms, because the defaults here are pretty handy.

    If you didn't use the universal reset you can do it using:

    Code:
    h1{ margin:0; padding:0; }
    Obviously replace h1 with the heading you have used again.

  • #12
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    139
    Thanks
    29
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Scriptet View Post
    Well to reset all default margins and paddings for all elements e.g headings, ul's and forms you add the following to the very top of your stylesheet:

    Code:
    *{ margin:0; padding:0; }
    * basically selects all elements. This is called the universal css reset.

    But there are occassions where you wouldn't want to use this universal css reset, e.g if you are happy with browser defaults, or on some pages where you use forms, because the defaults here are pretty handy.

    If you didn't use the universal reset you can do it using:

    Code:
    h1{ margin:0; padding:0; }
    Obviously replace h1 with the heading you have used again.

    great, thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •