Op zo, 05-03-2006 te 23:27 +0100, schreef Lourens Veen: [snip] > As for the image, I might just make it fixed-size and be done with it. A > lot more simple, and it doesn't matter all that much.
> > The logo should not have an alt text [snip] > I was under the impression that the standard forbade that, but I can't > find the relevant text. The 'alt'-attribute is required as per xhtml1-strict.dtd. I solved dolphinlings issue by moving #header (containing #heading and #logo) to the top of the file; this way it makes sense for every body/browser. > > And finally, get rid of the images directory. Put images in the > > folder with the files they belong with, or if it belongs with many > > files, put it in the deepest common folder. ? [snip] > > Oh, one other thing... I'm not sure why you put the header last in > > the source... I think I'd put it first. right! I changed some of the HTML and a lot of the CSS. The page now displays properly on most browsers (including IE>5.0, excluding Amaya ;). See the attached ChangeLog and sources for the changes and reasons. TODO: - define content-types - define page-types - add alternate media-selectors (print!) Regards, Ronald
2006-03-06 Ronald van Engelen <[EMAIL PROTECTED]>
* screen.css
- file added; contains layout-rules based on three-column 'holy grail'
template form ala: 2 fixed side-columns with one expanded center column
- imports ogp1.css for styling-rules (ie: fonts, colors)
- applied 2 IE-box model hacks; displays properly in IE 6
* ogp1.css
- moved all layout-rules (ie: borders, margin, positioning) to
screen.css
- did some re-indentation ;(
* template.html
- changed DTD form 'XHTML 1.0' Strict to 'XHTML 1.1'
- added xmlns-declaration
- added http-equiv meta-tag
- changed link-element to style-element containing media-selector
- moved #header (containing logo) towards beginning of file
- moved #navbar (containing site navigation) out of #contents
- changed
<hx><a name="y">..</a></hx>
to
<hx id="y">..</hx>
- did some re-indentation ;(
html
{ background-color: white;
color: #224;
font: normal 14pt "Times New Roman", serif; }
h1, h2
{ color: #0040ac; }
a:link, a:visited
{ color: #4189ff;
text-decoration: none; }
a:hover, a:active
{ color: #4189ff;
text-decoration: underline; }
/* #heading */
#o
{ font-weight: bold;
color: #d50014; }
#g
{ font-weight: bold;
color: #00ad25; }
#p
{ font-weight: bold;
color: #005df7; }
#navbar a:link, #navbar a:visited
{ text-decoration: none;
color: #0040ac; }
#navbar a:active, #navbar a:hover
{ text-decoration: underline;
color: #0040ac; }
#content h2
{ margin-bottom: 0; }
p.newsdate
{ margin: 0;
font-size: 80%; }
/* layout.css for http://nova.student.utwente.nl/~lourens/ogp/template.html */ /* $Author$ $Date$ $Rev$ */ /* based on http://www.alistapart.com/articles/holygrail lc = left-column = #projects cc = centr column = #content rc = right-column = n.a. container = main css-selector ie hacks applied. first apply hacked value then overrule it with a CSS2-selector, ie: child { rule: value-ie } parent>child { rule: value-compliant ) */ @import url("ogp1.css"); body { margin: 0; padding: 0; min-width: 440px; /* 2x (LC fullwidth + CC padding) + RC fullwidth */ } #main { padding-left: 210px; /* LC fullwidth */ padding-right: 40px; /* RC fullwidth + CC padding */ } #content, #projects { position: relative; float: left; } #content { padding: 0 20px; width: 100%; } #projects { width: 190px; /* LC width */ padding: 0 10px; /* LC padding */ right: 251px; /* LC fullwidth + CC padding */ margin-left: -100%; border: 1px solid #4189ff; border-width: 0 1px 2px 0; } /* ie hack */ * html #projects { left: 0; /* RC width */ } #projects h1 { overflow: hidden; } #navbar { position: absolute; top: 119px; left: 220px; right: 0; } body>#navbar { top: 120px; } #navbar ul { background: red; list-style-type: none; margin: 0; text-align: left; } #navbar ul li { background: #4189ff; float: right; margin: -3px 0 0 -1px; padding: 0 0 0 1px; border-bottom: 2px solid #4189ff; } #navbar ul li a { background: #fff; padding: 0 .5em; white-space: nowrap; overflow: hidden; display: block; line-height: 38px; } #header { clear: both; overflow:hidden; padding: 0; margin: 0; } #heading { margin-left: 210px; height: 117px; border-bottom: 2px solid #4189ff; } #heading p { margin: 0; padding: 0; overflow: hidden; font: normal 24pt/119px "Times New Roman", serif; } #logo { position: absolute; height: 119px; left: 0; width: 208px; text-align: center; top: 0;} #footer { clear: both; }Title: Open Graphics Project
Open Graphics Project
News
Website layout
Saturday, March 4th, 2006
Lourens made a layout for the web site! Yay!
Here is some more text. It says something about the Open Graphics Project, but most importantly, it shows how the layout deals with large amounts of text and varying window sizes. Here is a link.
Comments
Saturday, March 4th, 2006
This layout looks a bit empty though. Comments, suggestions, flames, breakages in IE...post them to the mailing list!
_______________________________________________ Open-graphics mailing list [email protected] http://lists.duskglow.com/mailman/listinfo/open-graphics List service provided by Duskglow Consulting, LLC (www.duskglow.com)
