Friday Sep 26, 2008

About CSS, two column page

I noticed that my home page web site suffered from the same problem that the public blog used to, it didn't have a width constraint and as the browser grew to full screen size the content pane gets wider and wider making paragraphs harder to read. Like this, if you look hard.

my old site

In the article Fixing my blog theme..., on this blog I described how I implemented automatic margins using a fixed width and <CENTER> tag. davelevy.info does not use tables for formating its page and for some reason, the technique didn't work, although this may have been due to a fault in my code. Anyway, I now have a better answer.

Bluerobot, suggests using

margin: auto;

as the technique for centering the document object. From my previous work, I know I want to specify a fixed width and reckon that 1000px is a good fixed width for the document. I havn't explored if amending the <BODY> rule has the effect I want, since while I did apply the rules to the BODY tag, I need a whole page encapsulating DIVision for other reasons and my current solution is to apply the CSS sub-rules to that DIVISION's rule. The old page had three divisions, a banner/header, main content and the menu. Apart from the exterior automatic margins the second part of the problem is to ensure that the positional rules for the three divisions work correctly, most importantly that the positional rules inherit the page constraints we are defining.

This tutorial at http://www.barelyfitz.com, explains how to use relative and absolute position attributes to do what's required. I tested it with the following code,

.outer {
    position: relative;
    width: 500px;
    margin: auto;
}
.inner {
    position: absolute;
     top: 10px;
    right: 20px;
    width: 250px;
}

The BODY section contains,

<DIV STYLE="background-color: gray" CLASS="outer">
<P>Outer</P>
<BR><BR>
<DIV CLASS="inner" STYLE="background-color: #0080C0">
<P>Inner</P>
</DIV>
</DIV>

and this looks like this,

screenshot

the key thing I had to learn was that the encapsulating division needs to be defined as relative, and the interior object is then defined as absolute and the locational parameters in the .inner i.e. top & right are then absolute within the .outer division. Does this make sense? I have underlined the position attribute values above. The other key lesson is to learn that CLASS and ID attributes are different. On my home site, I use IDs throughout; I was advised to use them originally.

So I need a new DIVision, this is called #Page and associated with the division via the ID attribute

#Page {
    margin: 0px auto;
    width: 1000px;
    position: relative; }

I have moved the location breadcrumb into the Header/Banner division, but otherwise left the #Header division alone, it inherits the width from #Page; it is encapsulated bt tghe #Page DIVision. The #Content DIVision I have left alone, and is placed in the default location, which is within #Page.

The #Menu division rule has had the following lines added

position: absolute;
top: 75px;
right: 20px;

The page structure is as follows

<DIV ID="#Page">
    <DIV ID="#Header"></DIV>
    <DIV ID="#Content"></DIV>
    <DIV ID="#Menu"></DIV>
</DIV>

which is what's wanted, a nice list of html content, with all the look and feel held elsewhere, just paragraphs, links, and division statements. Actually the banner is a table still, but now I have a fixed width, I can work on making an image file. The outstanding job is to work out how to create and name a rule for the paragraph containing the breadcrumb trail.

davelevy.info

and this is what the index/home page looks like. You can see the two whaite space margins either side of the page. I have briefly tested it with Opewra, Firefox and Explorer.

tags:

Thursday Aug 07, 2008

Roller theme revision

The last article contained several javascripts and I discovered that the RTF editor on roller strips them out, so I am back to the raw text editor and writing in HTML.

Also it's the first article I have used sub-headings in for several years. I have amended the h1 and h2 css rules. I have assigned the h1 rule to the article title lines in the _day file and used the h2 tags in the article content fields. I am working on a major theme release which I'll contribute when finished.

tags:

Wednesday Jan 30, 2008

Mashing up with Snipsnap

Having run a personal snipsnap wiki for a number of months, I have got to the stage where I want to use it as a host for a couple of mashups. Fortunately there is a user contributed macro that allows for the use of HTML within a snipsnap page. Otherwise, because the page input screen interprets a markup language, all HTML is treated as text. This macro is installed by copying it i.e. the .jar file to the directory named in the Java CLASSPATH. It really is as simple as that, and then using snipsnap's macro syntax. You can also see what I have written at my bliki.

{html}
<SPAN STYLE="color:red">This font is Red caused by a Span tag pair</SPAN>
{html}

This has allowed me to embed a google map in one of my pages, the example below is about Brussels.

 

Snipsnap + Google Map

 

and the example below shows a del.icio.us tag roll.

 

Snipsnap + del.ico.us tag roll

 

In both cases, I have implemented then using <IFRAME> tags; in Google's case because they suggest it and in the del.icio.us case because it is a Javascript and the CSS wasn't working. It seemed easier to escape the CSS domain by using IFRAME as I have had difficulty with this problem before. I think its to do with the anchor rules I define in the CSS files. I have had this problem with roller as well, although not with the del.icio.us tag cloud as you can see my checking out My Links page at blogs.sun.com, although it remains marked as beta. You can also see what I have written at my bliki, but again, its not much more.

tags:

Wednesday Jan 31, 2007

Changing my version of the Currency theme

I have just made a few changes to my blog roller theme. I have moved the tag cloud into the banner; if like me you often look at the blog on a laptop, there's not much room for what I'm writing after the duck and tag cloud and all the navigation widgets.

This isn't ideal. I have played with the new opacity feature to see if I can get a better answer, but this is about as good as it gets. There is a text background on the the tags, so each one can be read as you move the mouse around the cloud. Ideally, I'd like to have a text background which was an opaque white for the tag cloud, or even declare the table cell in which the tag cloud was displayed as having a background of opaque white so that the text would stand out more. I suppose I could change the hyperlink colours, but I'm not sure what'd go well in front of my duck. Instant Color Schemes at http://www.gpeters.com may help, and I found cssplay.co.uk/opacity/  useful in experimenting with opacity.

tags:

About

DaveLevy

Search

Archives
« April 2014
MonTueWedThuFriSatSun
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    
       
Today