Re: [css-d] Float a link inside a header

[Matthew Taylor]

Sorry that sould be padding not margin:

h1 {
position:relative;
padding-right:11em;
}

h1 a {
position:absolute;
top:0;
right:0;
width:10em;
}

- Matt =)


Matthew James Taylor
http://matthewjamestaylor.com



> Hi Nikos,
>
> Try positioning the a tag to the absolute top right corner of the heading
> block instead. Here's how that's done:
>
> h1 {
> position:relative;
> }
>
> h1 a {
> position:absolute;
> top:0;
> right:0;
> }
>
> Of course if your heading is long or your page is narrow then the two
> headings may run into each other. If that's a problem then perhaps try
> giving the a tag an em width then limit the width of the main heading with 
> a
> right padding like this:
>
> h1 {
> position:relative;
> margin-right:11em;
> }
>
> h1 a {
> position:absolute;
> top:0;
> right:0;
> width:10em;
> }
>
> You may have to fiddle with the widths to get it to look right. I hope 
> that
> helps.
>
>
> - Matt =)
>
>
> Matthew James Taylor
> http://matthewjamestaylor.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Float a link inside a header

[Matthew Taylor]

Hi Nikos,

Try positioning the a tag to the absolute top right corner of the heading 
block instead. Here's how that's done:

h1 {
position:relative;
}

h1 a {
position:absolute;
top:0;
right:0;
}

Of course if your heading is long or your page is narrow then the two 
headings may run into each other. If that's a problem then perhaps try 
giving the a tag an em width then limit the width of the main heading with a 
right padding like this:

h1 {
position:relative;
margin-right:11em;
}

h1 a {
position:absolute;
top:0;
right:0;
width:10em;
}

You may have to fiddle with the widths to get it to look right. I hope that 
helps.


- Matt =)


Matthew James Taylor
http://matthewjamestaylor.com


> Hi,
>
> the html is this :
>
> Title subtitle
>
> I want the Title to be left aligned and the subtitle to right
> aligned. But I want them to be in the same line.
>
> When I float: right the  it goes to the right but it falls below the
> line. So I need to put a negative margin to get it to the same line with
> the "Title".
> This works in FF and IE
>
> In Opera and Safari doesn't work. If I remove the negative margin it
> works fine with just the float: right;
>
> Can anybody help?
>
> Nikos Mavros

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] left sidebar float problems

[Matthew Taylor]

Hi Lisa,

The layout you are working from may not be ideal. The idea of using 
extremely long side columns and then chopping them off to make them equal is 
neat but it fails if you use anchor links within the content. May I suggest 
my 3 column layout instead:

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

It is a more robust design, has equal height columns, the main column comes 
first in the source,  it works in all the common web browsers and it doesn't 
use any CSS hacks. Check out this link for browser compatibility 
screenshots:

http://browsershots.org/http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

I hope that helps

- Matt =)


Matthew James Taylor
http://matthewjamestaylor.com




>I have a website I'm working on.  What I am trying to do is to have the
> sidebar carry down with the content so that it appears seamless. I've been
> reading http://www.alistapart.com/articles/holygrail  and trying to follow
> instructions. Now it seems I have too much sidebar carrying down..I'm so
> beyond frustrated, please advise.I need HELP!
>
> The site link is as follows:
>
> http://www.webgirlwebdesigns.com/testing/TriBeam/index.html

> I've tried adjusting the em variables and can't make it work.
>
> Any help would be appreciated.
>
> Thanks
>
> Lisa

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] to center a fixed width website

[Matthew Taylor]

Hi Lee,

The best way to center a website is to center the body then add a left and 
right auto margin on your wrapper div. In the wrapper div you should set the 
text-align back to left otherwise all your text will be centered:

body {
text-align:center;
}

#wrapper {
margin:0 auto;
width:800px;
text-align:left;
}

Simply put everything inside the wrapper and you're done!

- Matt =)


Matthew James Taylor
http://matthewjamestaylor.com



> Hello,
>
> I have a quick n easy CSS question.
>
> I want to make a website that is fixed to 800px width.
> What is the best, cross browser compatible way, to center it ?

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Where does the large gap come from please?

[Matthew Taylor]

Hi Rich,

In both cases it appears that a  is the problem. This  is adding 
more than one line of space because it is between two block-level elements 
(a heading and a parragraph) that have vertical margins. The total space 
created is one line break from the  plus the bottom margin of the above 
heading, plus the top margin of the parragraph below. This adds up to about 
3 lines not the expected 1. Without the  the upper and lower margins 
collapse together leaving about 1 line of space.

If you want to add an extra line of space below the heading then just 
increase the bottom margin on this heading instead of adding the , that 
should do it.

I hope that helps.

- Matt =)


Matthew James Taylor
http://matthewjamestaylor.com



> Hi
>
> I have puzzled over the css for days and tried experimenting with
> different layouts and still find a large gap appearing. See this site:
> 
> CSS:
> 
>
> The gap exists between the header "Beatiful2: and the description. I
> have tried varying the styling here:
> 
> CSS:
> 
>
> But even though it doesn't look like it, the gap is still there.
>
> Any ideas please? Thanks.
> -- 
> Kind regards
> Rich
> http://www.cregy.co.uk

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Three column variable width columns with padding

[Matthew Taylor]

Hi Aaron,

> The CSS it totally weird, how did you derive it ?

It's hard to explain how I came up with the CSS for my layouts, but here 
goes... Basically there were two important things that needed to work. I 
needed full height column background colours and I wanted the main column to 
come first in the source even though it is second on the page (this was 
needed for good SEO).

To make equal height columns work I had to make sure that the column 
background divs always stretched to the height of the longest column 
content. I did this by nesting the column background divs and I put the 3 
divs of content in the centre, side by side. From here the position of each 
background div and content div is simply moved horizontally with relative 
positioning to the right place. Any overhang is cut off by an 
overflow:hidden on the outermost div.

It took me a few weeks of experimenting before I came up with the final 
method that works in all browsers. My notebook now has pages and pages of 
weird boxes drawn all over the place along with lists of measurements and 
calculations. My friends must have thought I was going mad!

- Matt =)


Matthew James Taylor
http://matthewjamestaylor.com



> Hi Matthew,
>
>> Hi Aaron,
>>
>> I have made a quick layout for you based on my 'Perfect 3 column liquid
>> layout'. Here is the link:
>>
>> http://matthewjamestaylor.com/blog/perfect-3-column-thirds.htm
>>
>> Let me know how you go.
>
> Thanks, okay I have whitled it down a bit to the essentials :-
>
> 
> http://www.aarongray.org/Examples/CSS/ThreeColumnVariableWidthColumns.html
>
> The CSS it totally weird, how did you derive it ?
>
> Aaron

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Trouble with table cell/row heights, rowspans & IE.

[Matthew Taylor]

Hi Emil,

I think the problem is due to the way you are laying out this design. In my 
view it's not semantically correct to be using tables. Instead, for each 
product model I would make two columns using divs, one for the pictures the 
other for the info. The info could be better marked up in a definition list 
(see below) and it will sit nicely at the top of the column if the images 
are longer:


Model name
blah blah
Article no.
xxx
Finish
Blah blah
123
Blah blah
234
Blah blah


I hope that makes sense

- Matt =)


Matthew James Taylor
http://matthewjamestaylor.com



- Original Message - 
From: "Emil Björklund" <[EMAIL PROTECTED]>
To: 
Sent: Sunday, February 03, 2008 11:44 AM
Subject: spam: [css-d] Trouble with table cell/row heights, rowspans & IE.


> Hi folks,
>
> I'm having major problems with applying height rules to a table. I know
> setting heights for table cells or rows is tricky at best, but I so need
> this to work, soon *losing hair*
>
> An example page is up at http://ebdesign.se/table_problem.html, with an
> accompaying sketch of what it's supposed to look like (if you use IE) at
> http://ebdesign.se/table_problem.gif
> Take a look at it and see if you can follow along.
>
> The problem is with IE - surprise! I have a table of data for product
> models. Each model has one to many articles. The model also has a
> drawing/blueprint. The drawing is in a table cell spanning the number of
> rows of articles plus one - this is for allowing some space under the
> articles .
>
> Most browsers I've tested in so far (FF2 Mac/Win, Safari 3 Mac, Opera 9 
> Mac)
> shows the intended layout. IE6-7 though, shows the article no./finish
> columns expanded to fill the height of the space to the right of the 
> image.
> I cannot for the life of me get them to respect any height measurement. 
> I've
> tried reading specs, googling for similar problems etc... I haven't found
> anything that helps, trying tons of solutions (different measurements,
> putting the height on the row element instead, using visibility rules on 
> the
> fillcol-cell...)
>
> I need a fresh pair of eyes on this. My last resort is putting a 
> definition
> list within a single cell, containing the articles, but that would
> completely break the semantics and lead to a number of ad hoc solutions 
> for
> the rest of the elements - after all, I interpret this as very much being
> tabular data.
>
> Any suggestions?
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Three column variable width columns with padding

[Matthew Taylor]

Hi Aaron,

I have made a quick layout for you based on my 'Perfect 3 column liquid 
layout'. Here is the link:

http://matthewjamestaylor.com/blog/perfect-3-column-thirds.htm

Let me know how you go.

- Matt =)

Matthew James Taylor
http://matthewjamestaylor.com



- Original Message - 
From: "Aaron Gray" <[EMAIL PROTECTED]>
To: 
Sent: Saturday, February 02, 2008 7:30 AM
Subject: spam: [css-d] Three column variable width columns with padding


> Hi,
>
> I am after a format that has three variable with columns of 33% with 
> padding on either side of each column.
>
> Many thanks in advance,
>
> Aaron
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/