The next time someone asks for a critique...
in [CSS]
|
From: dorayme on 7 Apr 2010 18:09 In article <pk9pr5hcaus511qi4bunmursr96nqtqs32(a)4ax.com>, Albert Ross <spam(a)devnull.co.uk.invalid> wrote: > On Wed, 07 Apr 2010 05:08:56 +1000, dorayme <dorayme(a)optusnet.com.au> > wrote: > > >In article <qjpmr5d8js040mrl9l9vl59m4n91ag2e2c(a)4ax.com>, > > Albert Ross <spam(a)devnull.co.uk.invalid> wrote: > > > >> > >> There's something slightly freaky I don't quite understand here, I can > >> put anything except an ul in the header and get it centred. > >> > > > >I need to be reminded of the url and a more specific description > >of what you are finding freaky. > I started with Matthew James Taylor's otherwise excellent template and > tried to adjust it so the navbar was centred > > http://www.combines.org.uk/Combines/about.html > Ah yes, now I recall. > that was a much earlier failure > > I put the navbar into a separate div and toyed with adding his css > code a bit at a time, and blocking out lines with Firebug. > > Somewhere around here > > #header ul li a { > display:block; > float:left; > margin:0 0 0 1px; > padding:3px 10px; > text-align:center; > background:#eee; > color:#000; > text-decoration:none; > position:relative; > left:15px; > line-height:1.3em; > } > Was it not at this point that I recommended a minimum-interference solution for your problem that involved modifying the above? Did I not say to remove the float because it was shooting you in the foot here and to change the width so it could be centred and suggested a character count width, 50 or so em? What happened with this alleged pearl of wisdom of mine? Is this something that was not understood or did it seem plain wrong to you or did it not work when you tried it that you felt the need to go on and find a different solution? > everything snaps over to the left and stays there whatever I try to > undo the effect > > I ended up doing this > > http://www.combines.org.uk/Combines/trial.html > > much simpler and works. problem solved Essentially, you are relying on text-align: center here, all the rest is not doing anything I can see. ..navbar {text-align: center;} ..navbar ul li {display:inline;} with <div class="navbar"> <ul> <li><a href="intro.html" class="active">Home </a></li> <li><a href="history.html">History </a></li> <li><a href="bill.html">Bill's Story </a></li> <li><a href="chris.html">Chris's Story </a></li> <li><a href="about.html">About </a></li> <li><a href="help.html">How You Can Help</a></li> </ul> </div> Notice two relatively minor drawbacks with this: you have to use no breaking spaces in the HTML, the other is that there is a surely unsightly underlining overhang to the visible characters in the link text (the no breaking space is being underlined, and that is not something you would want to be drawing attention to in any way, its naughty presentational job should be confined to merely making a space. All this is fixable. -- dorayme
From: Albert Ross on 8 Apr 2010 08:08 On Thu, 08 Apr 2010 08:09:37 +1000, dorayme <dorayme(a)optusnet.com.au> wrote: >In article <pk9pr5hcaus511qi4bunmursr96nqtqs32(a)4ax.com>, > Albert Ross <spam(a)devnull.co.uk.invalid> wrote: > >> On Wed, 07 Apr 2010 05:08:56 +1000, dorayme <dorayme(a)optusnet.com.au> >> wrote: > > >> >> >In article <qjpmr5d8js040mrl9l9vl59m4n91ag2e2c(a)4ax.com>, >> > Albert Ross <spam(a)devnull.co.uk.invalid> wrote: >> > >> >> >> >> There's something slightly freaky I don't quite understand here, I can >> >> put anything except an ul in the header and get it centred. >> >> >> > >> >I need to be reminded of the url and a more specific description >> >of what you are finding freaky. >> I started with Matthew James Taylor's otherwise excellent template and >> tried to adjust it so the navbar was centred >> >> http://www.combines.org.uk/Combines/about.html >> > >Ah yes, now I recall. > >> that was a much earlier failure >> >> I put the navbar into a separate div and toyed with adding his css >> code a bit at a time, and blocking out lines with Firebug. >> >> Somewhere around here >> >> #header ul li a { >> display:block; >> float:left; >> margin:0 0 0 1px; >> padding:3px 10px; >> text-align:center; >> background:#eee; >> color:#000; >> text-decoration:none; >> position:relative; >> left:15px; >> line-height:1.3em; >> } >> > >Was it not at this point that I recommended a >minimum-interference solution for your problem that involved >modifying the above? Did I not say to remove the float because it >was shooting you in the foot here and to change the width so it >could be centred and suggested a character count width, 50 or so >em? What happened with this alleged pearl of wisdom of mine? Is >this something that was not understood or did it seem plain wrong >to you or did it not work when you tried it that you felt the >need to go on and find a different solution? I misunderstood, I was changing the css that referred to the ul in general. The whole code seems to hang together in that changing one part gets overridden by other parts. So I ended up removing the lot, it works well in his original concept but is too complicated for my New Thought. >> everything snaps over to the left and stays there whatever I try to >> undo the effect >> >> I ended up doing this >> >> http://www.combines.org.uk/Combines/trial.html >> >> much simpler and works. problem solved > >Essentially, you are relying on text-align: center here, all the >rest is not doing anything I can see. > >.navbar {text-align: center;} >.navbar ul li {display:inline;} > >with > ><div class="navbar"> ><ul> ><li><a href="intro.html" class="active">Home </a></li> ><li><a href="history.html">History </a></li> ><li><a href="bill.html">Bill's Story </a></li> ><li><a href="chris.html">Chris's Story </a></li> ><li><a href="about.html">About </a></li> ><li><a href="help.html">How You Can Help</a></li> ></ul> ></div> Pretty much yes, I hadn't finished yet! I might still need some of it later. I'm reusing the code with slight variations on a couple of other sites and the bits I don't need will vary. Essentially I like the way his columns work but I'm simplifying the header code a lot. >Notice two relatively minor drawbacks with this: you have to use >no breaking spaces in the HTML, the other is that there is a >surely unsightly underlining overhang to the visible characters >in the link text (the no breaking space is being underlined, and >that is not something you would want to be drawing attention to >in any way, its naughty presentational job should be confined to >merely making a space. All this is fixable. Careful or I will start putting Rounded Corners on everything! Yes the   was a quick and dirty fix to break up the underline which showed as an unbroken underline uner the whole lot in some browser. My first intention was to style the text into blocks/buttons but I thought I'd leave it as text (likewise the text in the side panels on the original design I was going to style with the manufacturers' logos but decided it looked simpler just as text) I haven't finally decided how to style it but I;m going with "less is more", probably some padding or margin or both?
First
|
Prev
|
Pages: 1 2 3 4 Prev: Print stylesheet Next: Is there a way to detect "unused" CSS entries? |