Sent by Peter Hyde-Smith on 14 May 2007 00:12
----- Original Message -----
From: "Lauri Pantos" [EMAIL-REMOVED]>
To: "Reed Underwood" [EMAIL-REMOVED]>
Cc: [EMAIL-REMOVED]>
Sent: Sunday, May 13, 2007 4:00 PM
Subject: Re: [css-d] A few problems
> Hi. Although a couple of you have attempted to help, I'm still lost.
> http://www.somtndesign.com
>
> Each page will have a diff. graphic on the left and right as the next
> page. But all pages need to have the word Home (which will link home) at
> the bottom of the page. Can someone please dumb this down for me a bit so
> i can understand how to do it?
> Thanks!
>
> ----- Original Message ----
> From: Reed Underwood [EMAIL-REMOVED]>
> To: Lauri Pantos [EMAIL-REMOVED]>
> Cc: [EMAIL-REMOVED]
> Sent: Tuesday, May 8, 2007 10:28:08 PM
> Subject: Re: [css-d] A few problems
>
> On 5/7/07, Lauri Pantos [EMAIL-REMOVED]> wrote:
>> Hi. This is my first attempt at tableless css - I've taken an example and
>> modified it - I'm almost there, but have a few problems.
>> URL is
>> http://www.somtndesign.com/portfoliocopy.php
>>
>> I need to put the word 'HOME' (which is on the bottom right now) below
>> the sun and mountain graphic - not where it is now
>>
>> Graphics were made by my partner on a mac - even though I'm using his
>> specs, I still have too much gap on the left side and bottom of the page
>>
>> Is it better to insert an image in a div or make it a background for the
>> div?
>>
>> Thanks for all the help
>>
>> Lauri Pantos
>>
>>
>> ----- Original Message ----
>> From: Steve LaBadie [EMAIL-REMOVED]>
>> To: [EMAIL-REMOVED]
>> Sent: Monday, May 7, 2007 3:06:01 PM
>> Subject: [css-d] Image Placement
>>
>>
>> I have an image set to align="middle", but aligns on the bottom of the
>> cell in Firefox. How can I correct this?
>>
>>
>>
>> Steve LaBadie, Web Manager
>> East Stroudsburg University
>> 200 Prospect St.
>> East Stroudsburg, Pa 18301
>> 570-422-3999
>> [EMAIL-REMOVED] [EMAIL-REMOVED]>
>> http://www.esu.edu <http://www3.esu.edu>
>>
>>
>
> Lauri,
>
> With regard to your question about using an inline image versus a
> background image, it really depends on the situation. I like to use
> background images with CSS selectors when possible if I'll have
> different pages with similar elements but different images. Other
> times, particularly when I'm doing a lot of dynamic or data-driven
> stuff, I'll tend toward img tags. Really, for things like banners
> that are fairly consistent across a site, background images are
> awesome because you can change everything in one file - an important
> thing to think about when deciding which to use: will I want/need to
> make changes to this the way I change a font or color? To me,
> backgrounds are really presentational (embellishments like a drop
> shadow or purely decorative texture in a banner) while img tags are
> oriented more toward actual content (like photos in a news story,
> diagrams in a how-to, charts in a prospectus, etc.).
>
> The answer to your question about the 'Home' text depends on whether
> this is destined to be a link. If so, I'd first make it an <a> with a
> class or id that fits and set it to display: block. Put that element
> inside your div.feature and position it as necessary. You could set
> that image as the background and set the size for that div, or leave
> it as an inline image and lay the 'Home' text on top.
>
> I personally don't see any problem with the spacing on the page.
>
> Hope that helps a little,
> Reed
05/13/2007
Lauri:
List etiquette is to bottom post.
body{
font-family: Arial,sans-serif;
line-height: 1.166;
width: 100%
color: black;
background-color: #d8cfae;
text-align: center;
}
div#wrapper {
margin: 26px auto;
padding: 0;
width: 640px;
background-color: inherit;
}
body#pageone div#home {
position: relative;
height: 425px;
width: 194px;
background: #d8cfae url(images/IndexLeftBox_bodytxt.jpg) 0 0 no-repeat;
text-align: center;
}
div#home h1 {
height: 25px;
position: relative;
top: 400px;
}
img {
border: none;
}
Here's the relevant CSS. I made some other changes to it, and to the HTML.
Basically, I assigned the image as a background to the #home div, gave the
h1 a height, and set its position to relative and offset from the top the
difference between its height and that of the containing div. To get images
specific to a page, give the body a unique ID for each individual page, and
style the background image via child selectors. Give this a whack. You also
need to do some validating and general code optimization.
I'll send you the files off-list.
Cheers,
Peter
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
