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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Setting sidebar links without <li>

    On my tumblr test blog here: http://testblognumber1.tumblr.com/ I'm trying to set the grey links underneath the header so that they sit inside the width of the sidebar, but as you can see, they stretch beyond it. I know I can rectify this by wrapping each link in <li> but that will give me a simple list of left-aligned links.

    I would like them laid out as they are, but so that they stay within the width of the sidebar.

    I've wrapped the links in a div named links, for which the styling is:

    Code:
    #links a {font-family: Impact; font-size: 27px; color: #777;}
    The links themselves look like this:

    Code:
    <div id="header"><!-- open header -->
    <div id="head_wrap">
    <div class="blogtitle"><a href="/"></a></div>
    <div id="sidebar">
    {block:IfShowIcon}<ul><li class="portrait"><img src="{PortraitURL-128}"></li></ul>{/block:IfShowIcon}
    <img src="http://3.bp.blogspot.com/-nOy4eY4SfRQ/Ts2sjIq5WtI/AAAAAAAACPE/UNZQxzh88b8/s1600/ueducation.png"></img>
    <div id="links"><li><a href="/">main|</a><a href="/aboutenglandgazette">about|</a><a href="/archive">archive|</a>
    <a href="{RSS}">rss|</a>{block:AskEnabled}<a href="/ask">ask|</a>{/block:AskEnabled}<a href="/random">random|</a><a href="http://www.facebook.com/share.php?u=http://englandgazette.tumblr.com/">facebook|</a><a href="http://twitter.com/home?status=England Gazette - the good the bad and the ugly – http://englandgazette.tumblr.com/”">twitter</a><br>
    {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a></ul>{/block:Pages}{/block:HasPages}
    <ul><h1 class="sidebar"></h1>
    {block:NextPage}<a href="{NextPage}">next page</a>{/block:NextPage}
    {block:PreviousPage}<a href="{PreviousPage}">previous page</a>{/block:PreviousPage}</div>
     </div>
      </div>
    </div></li><!-- close header -->
    Thanks in advance.
    Last edited by OurJud; 11-24-2011 at 04:27 AM.

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    You could just place a <br /> after "random" link to keep within sidebar width.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    I did think about this, optimus, but it's that old problem of different screen settings and resolutions. If there was some way of containing the links within the sidebar width, I know it would look correct on all screens.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    All those <a>s are just continuations of each other (inline). Essentially, you have written main|about|archive|rss|ask|random|facebook|twitter. There were no breaks ever, so by the word-break: normal; default property, it will continue on and never break to a new line. Try using floats, they will collapse.

    Code:
    #links a {
       float: left;
    }
    After that, you need to clear all your floats with either clear: both; or clear: all;, I noticed that you had a <br> in there, so you could just add it to that



    Finally, you've given the <a> tag font-size: 27px, (height 34px) that is much greater than your line height. I suggest removing the line-height!

    Code:
    #links a {
      font-family: Impact;
      font-size: 27px; /* = 34px height */
      color: #777;
    }
    Code:
    li {
      list-style-type: none;
      margin-bottom: 4px;
      padding: 0;
      line-height: 12px; /* take this out or make it 34px (I suggest taking it out) */
    }
    Last edited by Sammy12; 11-24-2011 at 04:42 AM.

  • Users who have thanked Sammy12 for this post:

    OurJud (11-24-2011)

  • #5
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thank you very much, Sammy. That did the trick. The only thing now is that the space between each line is much wider than I'd like. Would I use a line-height to resolve this?

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    PS: I suggest you choose a nifty doctype!

    http://www.w3schools.com/TAGS/tag_doctype.asp

    doctypes ensure that your html parses similarly in different browsers, and is not an optional thing

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by OurJud View Post
    The only thing now is that the space between each line is much wider than I'd like. Would I use a line-height to resolve this?
    Yes, that will work. From your live link, you have not yet cleared your floats, take a look at my first post. Clearing floats isn't optional, it's required

  • #8
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    Yes, that will work. From your live link, you have not yet cleared your floats, take a look at my first post. Clearing floats isn't optional, it's required
    Sorry, I've now added <br clear="both"> at the end of the last link where it was previously just <br>

    Is this what you're referring to?

    As for the doc checker you link to, I'm afraid I find that a little daunting. Do I simply paste my template code into it and then replace it with the translation??

    Mmm, doesn't seem to work for me anyway. I paste my doc into the left-hand pane, and then click 'Edit and click me' - then I just get a blank pane on the right??
    Last edited by OurJud; 11-24-2011 at 05:05 AM.

  • #9
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    yep, the clear is in place now. If you don't clear, all the content below it will be pushed up, as if everything floated isn't there. That's what floating and position: absolute; do, they take content out of the flow of the page, essentially they are no longer a part of the page. Clearing gives their space back.

    Doctype is required Just stick it up there before the <html> tag

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
      <head>
         <title>Title of the document</title>
      </head>
      <body>
      </body>
    </html>
    A doctype also enables you to use the w3c validator! http://validator.w3.org/
    I don't believe in validation (bunch of baloney for me now - still don't know why zoom:1; isn't ever valid) but for beginning developers, it helps them code CONSISTENTLY throughout all browsers. Check your website link with the validator, and you will be surprised! Once you truly understand each error, you can have the freedom of saying BALONEY! like me
    Last edited by Sammy12; 11-24-2011 at 05:10 AM.

  • #10
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Sorry, I'm not getting anything in the right hand pane??? I don't really know what I'm supposed to be doing.

  • #11
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    A doctype is not visible.

    A doctype is not anything, it simply allows for greater browser consistency. If you use "transitional" you can use deprecated tags and old material. If you view your website in i6, i7, or even i8, as well as other old browsers, you will see the difference with a doctype.

    Transitional (the one I used in my example above) is the most flexible.
    Strict is a little more uptight
    HTML5 I would consider the most strict, the newest doctype.

    Clients these days pressure you to use an html5 doctype with valid coding (from w3c validator). Html5 doctype does not allow for any deprecated material or old stuff, you need to be uptight with your coding. This is what clients want - you to be using only valid and good code. If you submit your website for approval from the w3c validator with a transitional doctype, not much errors. If you submit with a Html5 doctype, it will be a great mess of red errors

    as of now, your website has 77 errors and 15 warnings. all of these may cause browser inconsistency
    http://validator.w3.org/check?uri=ht...Inline&group=0
    Last edited by Sammy12; 11-24-2011 at 05:22 AM.

  • #12
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Sammy, I know I'm probably testing your patience by now, but I don't understand what it is you're telling me to do??

    I use FF and the design is centered. I've just checked it on IE8 and it's all left-aligned with some top alignment slightly out to. Clicking 'compatibility view' makes no difference in IE.

    What is it I'm supposed to do with that doctype link so that my blog will look the same in all browsers?

  • #13
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Haha it's fine man

    Let me try to explain this as well as I can.

    Placement
    You place a doctype at the very beginning, before the <html> tag

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- Your website code here -->
    if you right click on a website in chrome, or if you have "firebug" in FF, you can view any page's html/css/javascript. You will see that every website uses one (strict or not)

    GOOD/BAD Debate
    Some old website still use "bad" code, we can't just make people rewrite their entire website. So what do we do?
    In the beginning, there were <font size="14">, <div align="left">, and many other "bad" html and css.

    Now, there is font-size: 14px;, float: left;, and many "good" html and css.

    Essentially, web developers agreed that some things in html are "good" and others are "bad".

    A doctype defines a list of html and css that are acceptable (depending on the doctype).
    - Transitional Doctype - allows for a great range of "bad" html and css to be allowed.
    - Strict Doctype - not so much.
    - HTML5 Doctype - good css only, bad will not work anymore

    By using a stricter doctype, you are saying to the world "I only use good code". Doesn't do much other than that. If you end up using deprecated (bad) html and css with say an HTML5 doctype, it will not work

    BROWSER CONSISTENCY
    However, it's not just a debate about good/bad, some things REQUIRE a doctype to work in all browsers.

    Let me find some examples
    Last edited by Sammy12; 11-24-2011 at 05:36 AM.

  • #14
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    But I still don't understand what is it I'm supposed to do in order to make sure I have only 'good' code and that there are no cross-browser issues (which there are coz it looks crap in IE??

    You're not explaining what it is that I need to physically do to fix my website.

  • #15
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    haha placing a doctype won't make your code "good"

    The reason your website does not look the same in ie, is because of errors in your actual coding. You are not coding "good".

    A doctype will help you start coding GOOD
    By submitting your website to w3c and looking at the errors, you will learn what you can do to FIX your code to make it good

    By fixing the 77 errors and 15 warnings, your site will look the same, and you will remember to code "good" the first time around next time.

    That's why I no longer submit my code to w3c, because I don't have any errors. That was the effect I had after half a year of fixing my mistakes and trying to understand why they were wrong.
    Last edited by Sammy12; 11-24-2011 at 05:42 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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