19 replies to this topic

[mrdee]

Thank you for mentioning this,Baniboy.

I had a look and noticed that a closing table tag had gone missing in the HTML code.
I have corrected this and now it looks normal to me.

About the padding, do you mean like this:

#therest{
float:right;
width:900px;
min-height:500px;
background:#eee;
border:2px dashed #ddd;
border-radius:5px;
margin-left:20px;
<div>padding:20px;</div>
}

as that does not seem to make any difference.

However, on second thoughts, I think you were referring to a new div within the code of my content box itself, something like:

<article><div>Blablablablablablab</div</article>

But where do I put the padding then?

Sorry my questions are probably incredibly stupid, but that's ignorance for you.

Edited by mrdee, 18 June 2011 - 02:06 PM.

[Baniboy]

I didn't quite understand what you added to the end of your code. I mean this:

<div>padding:20px;</div>
}

That looks like HTML code within CSS. The browser will probably throw an error there.

Yes, I meant that you should create a new div element inside the content. Then you add padding to that new div element.

<div id="therest"><div id="paddingstuff">My Content</div></div>

In the code above I have used paddingstuff as the div id. Then you add CSS to your CSS file/section.

#paddingstuff {
padding: 20px;
}

[mrdee]

Yes, that seems to be doing the trick.

However, in Firefox, some letters look a bit 'squashed' sometimes, but it does look much better with a bit of a margin on the left.
Thank you.

[Baniboy]

The firefox problem still remains.
Here's a screenshot
http://img225.images...vakaappaus1.png

Try removing float: right; from the "therest" div. It's not necessary, the div will automatically adjust to the right when the sidebar is floated to the left. It will also take up all available width unless you give it a value.

[mrdee]

Everything looks perfectly normal here in Firefox, IE and Opera.
Go and have a look now and see if there is any change.
You might have caught me during an upgrade or maintenance or something.

Edited by mrdee, 19 June 2011 - 11:20 AM.

[Baniboy]

It looks right now when I use Firefox 4 to view it so it may be that earlier firefoxes somehow mess it up. Remember to try your site out in a webkit browser when you test browser compatibility as well. Google Chrome, for example. I'd also recommend making the text background lighter gray or completely white.

[mrdee]

I have downloaded and installed the latest version of Google Chrome, and here too, the site seems to display flawlessly.

So, I can consider now (or at least, so I hope) step number 2 (maybe the final step): adding some cosmetic tweaks.

I am very grateful to everyone who put me on my way, and if you feel you hav missed out something, please do not hesitate to keep the advice coming.

Thank you again.

[darko100]

It looks very cool You can just change the font to Arial instead of the standard one (actually not defined).

And , you asked why there is no sign # in aside. That's because we want CSS to find the tag without id or class , but using its name. So to style all DIVs or EMBEDs you need to use div{style here...} or embed{style here...}

You can also set ID like <div id="mydivid" and style it with #mydivid{style here...} But that means only one element can use the ID (because it is identifier). While you can use class to group more elements , like <input class="inputelements" type="text"> <input class="inputelements" type="button">

Also you should check URL anchors. Let's say you have a big scrolling webpage , and you can add a empty div on the end with ID "end". That way you can make a link <a href="#end">Click here</a> which will go to the place where empty div is (the bottom).

Hope i helped you.

After you finish learning HTML/CSS you can start using JavaScript and experiment with document's DOM using frameworks as jQuery.

[Baniboy]

It's a good thing you mentioned typography, darko. Now I have an opportunity to shamelessly self-advertise. I have written an article about typography on websites. Well this is much better than mine are usually, so that's why I'll recommend it: Website Typography Tips. Look for the "Font" and "Manipulate" section in the article. The default that is used in browsers when no font is declared is usually the Times New Roman font, which is hard to read because it has all those little things coming out of the letters. That combined with a computer screen, and it won't be very reader-friendly. Arial, Helvetica and Tahoma would be all good for your site. Personally I would go with

html {
font-family: Tahoma, Arial, Helvetica;
}

The browser uses the first one in the list, if it's not installed, then it moves on to try the next one and so on. That was probably useless though, if you know how the font-family property works.

[mrdee]

Quote

That was probably useless though, if you know how the font-family property works.

Well, no, Baniboy, I wouldnt say that.
It is good that the people sending help my way are giving their explanations in some detail.

It either shows me things I didn't know, or sometimes, it is a good refresher too.

It also sometimes reminds me about things I used to know but that got pushed to the back of my mind over time.

But, yes, some valuable things that I have read about typography, at least I am learning every step of the way.

Thanks again.