View Full Version : Setting sidebar links without <li>

11-24-2011, 05:04 AM
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:

#links a {font-family: Impact; font-size: 27px; color: #777;}

The links themselves look like this:

<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></li><!-- close header -->

Thanks in advance.

11-24-2011, 05:15 AM
You could just place a <br /> after "random" link to keep within sidebar width.

11-24-2011, 05:23 AM
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.

11-24-2011, 05:32 AM
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.

#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!

#links a {
font-family: Impact;
font-size: 27px; /* = 34px height */
color: #777;

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) */

11-24-2011, 05:41 AM
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?

11-24-2011, 05:43 AM
PS: I suggest you choose a nifty doctype!


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

11-24-2011, 05:46 AM
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

11-24-2011, 05:58 AM
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??

11-24-2011, 06:05 AM
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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Title of the document</title>

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 :)

11-24-2011, 06:10 AM
Sorry, I'm not getting anything in the right hand pane??? I don't really know what I'm supposed to be doing.

11-24-2011, 06:12 AM
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

11-24-2011, 06:24 AM
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?

11-24-2011, 06:31 AM
Haha it's fine man :thumbsup:

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

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

<!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)

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 :(

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

11-24-2011, 06:36 AM
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.

11-24-2011, 06:39 AM
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.

11-24-2011, 06:42 AM
But what if you're like me and you don't understand css and html well enough to be able to fix those errors??

I'll take a look at the validator - see if it makes any sense at all.

11-24-2011, 06:43 AM

did you code this website all yourself?

11-24-2011, 06:46 AM
No. Sorry. It's a ready made template.

Anyway, I've just stuck:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

at the top of my code. Now I'm off to use the validator.

11-24-2011, 06:47 AM
As for browser consistency, a doctype also helps older browsers.

take the "white-space:" css for example

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

11-24-2011, 06:48 AM
OHHHHHHHHHHHH ok, yeah there's no need to try to fix your errors then, they probably won't make any sense to you!

Yeah unfortunately, your site will continue to look different in different browsers because of whoever originally coded it wasn't very good :)
Stick the doctype up there just since it's a good idea. It will not have any harmful effect, only good!

11-24-2011, 06:53 AM
You're right. I just used the validator and it made absolutely no sense at all!

Why can't someone just make a program that lets you put your code in, then you click 'fix' and it fixes all the errors for you??

11-24-2011, 06:56 AM
HAHA that's a good idea!

Unfortunately a program does not have our brains, it cannot truly understand the problem at hand! It would take an endless amount of code to make a program that understands various situations and reasoning :cool: Furthermore, fixing our errors helps us understand why we made them, making us better coders!

Adobe Dreamweaver automatically adds code to help browser consistency as you code - the closest program to "fix" your mistakes!

I code everything myself in a regular notepad, so I can say I truly know all my errors!

11-24-2011, 07:17 AM
But it's difficult, because if you don't fully understand html and css then those validators are pretty much useless. For instance, what the hell does this mean:

Line 32, Column 43: NET-enabling start-tag requires SHORTTAG YES

<meta name="color:Links" content="#8D8D8D"/>

The sequence <FOO /> can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML

What the hell is a <FOO /> ??