« There is a sweet moment | Main | What else do I do? »

October 03, 2003

CSS and TypePad

A couple of days back Daisy asked on her blog

Now all I need is figure out which bits of TypePad /Movable Type code to avoid buggering up and I can settle down for a good study and tinker... "

So I took a quick look at the CSS for her blog, and made a couple of comments.

Which gave me an idea - how about a short tutorial about safely using CSS with typepad sites.

That will be coming soon, but in the meantime, here are my comments on the CSS.

Daisy,

I've taken the liberty to take a look at your style sheet, and make a few comments about what to touch and what probably to leave alone.

Probably the only things I'd really not mess with are absolutely positioned elements, and be careful with margins, as often layouts lie these use absolute positioning in conjunction with margins to work, and when something is changed, then it all goes pear shaped.

#left {
position: absolute;
left: 0px;
top: 101px;
width: 200px;
background-color: #F04766;
border: 1px dotted #FFCCCC;
overflow: hidden;
}

#right {
position: absolute;
right: 0px;
top: 101px;
width: 200px;
background-color: #F04766;
border: 1px dotted #FFCCCC;
overflow: hidden;
}

These statements apply to the <div id="left"> and <div id="right"> elements on the page.

You could change the colors and the border of course, just leave all the positioning. I've got a couple more notes a bit below about playing with that.

The banner element is a div across the top.
The following statements only affect elements inside this div.

#banner a {
color: #003366;
text-decoration: none;
}

applies to any links in the banner

#banner h1 {
font-size: small;
font-weight: bold;
display: none;
}

#banner h2 {
font-size: small;
display: none;
}

applies to the headings of level 1 and 2 in the banner.

#center {
margin-right: 200px;
margin-left: 200px;
overflow: hidden;
}

I'd probably leave that. The 200px left and right margins would be to make way for the left and right divs we saw earlier. You could play with the width of those and these by adjusting both in sync. Of course, always keep a backup so you can revert to that if things go awry.

.content {
padding: 15px 15px 5px 15px;
background-color: #FFFFFF;
color: #003366;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: small;
}

all should be fine to play with here.

The following apply to elements inside elements of class content. You should be able to play with these to your hearts content

.content p {
color: #003366;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

For example, this applies only to paragraphs inside elements with a class of "content", such as which in your case, is in the center.

Hope that is a good start, and fire away with more questions.

October 3, 2003 | Permalink

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341cbf7d53ef00e5502107818833

Listed below are links to weblogs that reference CSS and TypePad:

» More CSS Tips and Help from Brainstorms and Raves
Lots going on to help with CSS: The Latest WPDFD, new tutorials, new weblogs devoted to CSS, standards, and web design, and more. Read on for the details. [Read More]

Tracked on Oct 6, 2003 4:02:11 PM

Comments

css Font examples , Properties , Attribute - - //
http://www.css-lessons.ucoz.com/font-css-examples.htm

Posted by: Örgü Modelleri | Jun 29, 2008 10:56:46 PM

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

Posted by: JavaScript Örnekelri | Jul 6, 2008 12:44:25 AM

Just in case anyone is interested I set up a site showing examples of the different CSS font families Makes it easy to determine what fonts you want to choose Check out the different CSS fonts styles

Posted by: Eli | May 3, 2009 10:47:47 AM

Excellent Blog every one can get lots of information for any topics from this blog nice work keep it up.

Posted by: dissertation writing help | Jun 5, 2009 11:48:38 PM

Blogs are so interactive where we get lots o informative on any topics nice job keep it up !!

Posted by: Dissertation Writing Help | Jun 25, 2009 10:15:40 PM


This is extremely helpful info!!! Especially since you guys are offering it for free!! Very good listing. Everything is true. Thanx.

Posted by: UK thesis | Aug 10, 2009 7:52:22 PM

I find this information very useful. Great work! We study this article on the regular basis :-). And we recommend this to every body.

Posted by: dissertation writing service | Aug 10, 2009 9:14:15 PM

I find this information very useful. Great work! We study this article on the regular basis :-). And we recommend this to every body.

Posted by: dissertation writing | Aug 13, 2009 3:01:32 PM

I find this information very useful. Great work! We study this article on the regular basis :-). And we recommend this to every body.

Posted by: dissertation writing service | Aug 13, 2009 7:00:45 PM

I find this information very useful. Great work! We study this article on the regular basis :-). And we recommend this to every body.

Posted by: dissertation writing service | Aug 15, 2009 6:48:06 PM


It's always nice when you can not only be informed, but also entertained! I'm sure you had fun writing this article. Excellent entry! I'm been looking for topics as interesting as this. Looking forward to your next post.

Posted by: essay writing | Aug 18, 2009 1:49:20 PM

Nice post keeps on posting this type of interesting and informative articles.

Posted by: dissertation writing | Aug 19, 2009 8:05:57 PM

Excellent post and wonderful blog, I really like this type of interesting articles keep it up.

Nice work keeps on posting thanks

Posted by: UK dissertation | Aug 28, 2009 4:34:06 PM

Wonderful piece of information. Its great to find a guy like this who posts such useful info.
I will be here again couple times every day

Posted by: Dissertation Help | Sep 18, 2009 3:57:00 AM

Thanks for your efforts! its really hard to achieved the target, but your posted experience help me a lot, that how to make it more simple and manageable, Thank you for very helpful tips.

Posted by: dissertation | Dec 5, 2009 5:55:14 PM

well its soo good to see this information in your post, i was looking the same but there was not any proper resource, thanx now i have the thing which i was looking for my research.

Posted by: Dissertation Proposal | Dec 29, 2009 11:04:43 PM

interesting and informative articles. I really like this, Nice blog

Posted by: write term paper | Jan 5, 2010 12:56:53 AM

Thanks a lot for a bunch of good tips. I look forward to reading more on the topic in the future. Keep up the good work! This blog is going to be great resource. Love reading it

Posted by: dissertation sample | Jan 22, 2010 9:04:15 PM

Great blog! The information you provide is quiet helpful, why I was not able to

find it earlier. Anyways I’ve subscribed to your feeds, keep the good work up.

Posted by: dissertations blog | Feb 3, 2010 10:54:56 PM

Many articles read, your article is very useful, occasionally there are so few pictures looks very interesting ~ is also very cute, so I learned a lot. Thanks!

Posted by: mbt shoes sale | Mar 22, 2010 2:51:33 PM

Ok I have an obsession with shoes (lol) and i need to know the best online...

Posted by: transparent laptop | Apr 21, 2010 6:40:06 AM

I was wondering if anyone knows a good website with nice shoes that you can order online. Thanks
Oh i'm 14 so not really old shoes but like thongs, high heels, vans etc.

Posted by: cigarette smoking fetish | Apr 21, 2010 10:31:39 AM

I found this a bit too late. :( I really needed it few days ago. But now it will be in my list.

Posted by: home remedies for acne scars | Jul 4, 2010 2:09:36 AM

I was wondering if anyone knows a good website with nice shoes that you can order online. Thanks
Oh i'm 14 so not really old shoes but like thongs, high heels, vans etc.

Posted by: ugg bags | Aug 15, 2010 8:04:44 PM

Not everyone likes you.

Posted by: gift cards | Sep 1, 2010 4:25:07 PM