Re: [css-d] Noob with float/div problems
On Feb 2, 2008, at 12:53 PM, Ken Davies wrote:
I will be trying to see what this does with some adjustments,
thanks but please clarify
you show #banner each line. Is there a reason other than MY future
reference?
Specificity. I wanted to only affect an img in the div id'ed as banner:
img [ float: left }
applies float left to every img in the entire document.
#banner img {float:left}
applies float left to every img in a container with the ID of banner.
#banner img#logo {float: right}
applies float right to the img ID'ed as logo in the container id'ed
as banner.
On this subject, if you're ever interested in knowing precisely what
a bit of CSS means, don't forget the Selectoracle at http://
gallery.theopalgroup.com/selectoracle/
Also if reference in a stylesheet is to an img should that preface
the #name-ie img#name.
img#name selects the img with the ID of name
#name img selects all images inside a container with the ID of name.
Have Fun,
Arlen
--
In God we trust, all others must supply data
__
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-d] Noob with float/div problems
It just sunk in, thanks Ken __ 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-d] Noob with float/div problems
Hello Arlen.
You wrote CSS for what I was hoping to accomplish
#banner { padding: 3px; text-align: center; width: 858px; height:
53px; border: 3px double black;}
#banner img { float: right; }
#banner img#logo { float: left; }
#banner p { margin: 0; padding: 0; font-weight: bold; font-size: 110%;}
I will be trying to see what this does with some adjustments, thanks but please
clarify
you show #banner each line. Is there a reason other than MY future reference?
Also if reference in a stylesheet is to an img should that preface the #name-ie
img#name.
Thanks
Ken
__
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-d] Noob with float/div problems
Hello and thanks for letting me join your group, although it's very intimidating for a novice.I am definitely not a hand coder, but I sure have changed a lot of code by hand. I built a table oriented image heavy website no CSS. I struggle to get to first base with CSS on my top banner, it should be simple- changing the text between my logo and a gif one of my rings. It is presently a fixed size table that I think should expand to the browser. Original site http://www.equestrian-jewelry.com/index.htm - Right now I am just worried about the top banner. http://www.equestrian-jewelry.com/stylesheets/horsejewelry.css Visually what works best is http://www.equestrian-jewelry.com/test1.htm http://www.equestrian-jewelry.com/stylesheets/test.css This is what I want, the two large images are spacers for now till I get the top working. This code isn't good but displays well on IE5,6, Opera7,9 and Mozilla, even on old Netscape. I think http://www.equestrian-jewelry.com/jewelry_horse.htm is as close to proper as I can see. It even validates-but the banner doesn't layout properly. http://www.equestrian-jewelry.com/stylesheets/test.css http://www.equestrian-jewelry.com/test2.htm looks good (alternate text only shows) but the right image is dropped to low. http://www.equestrian-jewelry.com/stylesheets/banner.css I tried to keep this short but I keep wanting to cry. Can you please take a look at what I have done and offer some advise? Thanks Ken __ 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] Noob with float/div problems
On Feb 1, 2008, at 6:11 AM, Ken Davies wrote:
Original site http://www.equestrian-jewelry.com/index.htm -
Right now
I am just worried about the top banner.
Off the cuff, here's the approach I'd take to the banner. I've done
no testing on it, apart from Safari and Firefox, so it's not
presented as a final solution, but rather as a place for you to start
from:
HTML
div id=banner
img src=Animation11.gif alt= width=80 height=56 /
img src=BCG100.gif alt=Logo id=logo width=94 height=53 /
pHorse jewelry for equestrians and horse lovers./p
pBreeds of horses, barrel racing, rodeo, dressage, jumping and
polo/p
/div
CSS
#banner { padding: 3px; text-align: center; width: 858px; height:
53px; border: 3px double black;}
#banner img { float: right; }
#banner img#logo { float: left; }
#banner p { margin: 0; padding: 0; font-weight: bold; font-size: 110%;}
Commentary:
I don't like CSS class names that are tied to the presentation,
especially during development. During development, many aspects of
the design are likely to change, and then I'll have to go back
through all the pages and change the class name. I think it's a much
better practice to create class and ID names related to the meaning/
function of the object being styled. Hence logo instead of
floatleft.
I also don't like using any more semantically empty tags (div, span)
than I absolutely have to, hence only one. It junks up the document
to use multiples, and while I'm not against doing so if I have to for
a desired effect, I never do it needlessly.
With CSS on the scene, tags like b and i become redundant. Forget
they even exist is my advice. That's what CSS is for.
The p for the title text is probably non-optimal. I'm not sure
where you;re going with this, but replacing them with any sort of
header tag would work as well, though you'll have to change the font-
size to do so.
At a guess, I'd say you're overthinking it, and that's why you're
stressed. The process is simple:
1. Content first. Write the text and select the images.
2. Break the document into logical sections, if possible.
3. Decide what the function of each element is. Is it a heading? then
mark it with an h tag of the appropriate level. If it's an image/
description pair you could put it in a table (image in one column,
description in the other) or a definition list (dt for image, dd for
description).
Only now do we get to CSS
Notice to this point we haven't given a single thought to appearance.
They're off-topic for the list, so I avoided detail, and won't
discuss them further on list. But here we start with CSS, so I'll
walk you through what I did to get the above code
I wanted two images, one at each end. One was the logo, so the logo
ID would be enough to call it out. Since there isn't another img in
the banner, a general img style could float it to the other side. You
can reverse the two images n the HTML file, if you want. The greater
specificity of the logo styling will always pre-empt the general
float right to send it left.
Next, the original had two lines of text, centered, so I centered all
the text in the banner. I killed the margins and padding because the
browser defaults vary, and they all pretty much suck (browsers are
lousy at typography). You can tinker farther with this by playing
with line-height as well as padding and margin.
That gave me the images and the text, but the border wasn't there.
The old site looked like a double border, so that's what I loaded
here. Then I adjusted the height of the banner div (when the images
floated, they were removed from the flow of the document, so the
banner container shrank to the height of the text. You *could* play
with the text size until the box was the right size, but that's open
to being clobbered by someone using a strange text size (Yes, that's
you, Felix ;{} )
Now if you wanted to make it bulletproof (for modern browsers) you
might want to recast the div and image sizes in ems, so they would
grow along with the text. That would probably mean recreating the
images at a larger size, then forcing the browser to shrink them down
to normal, but it's possible. Then as text size grows, the design
elements grow with it. (Like implementing Opera's zoom feature in
CSS for the other browsers.) But that's just personal quirks.
You might want to take a look at Eric Meyer on CSS, where he walks
through the process of taking a site from a table into pure CSS. (And
I'd recommend it even if he wasn't the founder of our feast, so to
speak.)
Or, if you're wanting to work a bit harder, pick up Transcending
CSS (Andy Clarke's absolutely wondrous volume which epitomizes the
ideal that a book on design should be a thing of beauty). The latter
assumes a basic knowledge of CSS, though, so if you don't get it
first, you may find parts of it hard slogging.
Have
Re: [css-d] Noob with float/div problems
Ken, That helps. Did you see Arlen's response? I think you will find it extremely helpful and probably won't need any more help after reading through it all! If you still do, let us know. Thanks and good luck, On Feb 1, 2008 12:40 PM, Ken Davies [EMAIL PROTECTED] wrote: Hello Valerie and wow I sent that 5 hours ago. I want to end up with a very similar look but expanding to fit the window, not fixed width. Thats what I wanted originally, and I still do. I have been working on all the areas I need to improve it too, first things first. Also should I send this email to the original list address. and thank you Ken Valerie Wininger wrote: Ken, I'm not entirely sure what you want the site to look like. On the current home page, you have a fixed width table, but it looks like you want to end up with a page that expands to fit the browser window. Is that right? Or do you just want the banner to expand? A little more info about what you want the finished product to look like would be helpful. Then we can go from there. On Feb 1, 2008 7:11 AM, Ken Davies [EMAIL PROTECTED] wrote: Hello and thanks for letting me join your group, although it's very intimidating for a novice.I am definitely not a hand coder, but I sure have changed a lot of code by hand. I built a table oriented image heavy website no CSS. I struggle to get to first base with CSS on my top banner, it should be simple- changing the text between my logo and a gif one of my rings. It is presently a fixed size table that I think should expand to the browser. Original site http://www.equestrian-jewelry.com/index.htm - Right now I am just worried about the top banner. http://www.equestrian-jewelry.com/stylesheets/horsejewelry.css Visually what works best is http://www.equestrian-jewelry.com/test1.htm http://www.equestrian-jewelry.com/stylesheets/test.css This is what I want, the two large images are spacers for now till I get the top working. This code isn't good but displays well on IE5,6, Opera7,9 and Mozilla, even on old Netscape. I think http://www.equestrian-jewelry.com/jewelry_horse.htm is as close to proper as I can see. It even validates-but the banner doesn't layout properly. http://www.equestrian-jewelry.com/stylesheets/test.css http://www.equestrian-jewelry.com/test2.htm looks good (alternate text only shows) but the right image is dropped to low. http://www.equestrian-jewelry.com/stylesheets/banner.css I tried to keep this short but I keep wanting to cry. Can you please take a look at what I have done and offer some advise? Thanks Ken __ 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/ -- Valerie Wininger www.valeriewininger.com -- Valerie Wininger www.valeriewininger.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] Noob with float/div problems
I sent that 5 hours ago. I want to end up with a very similar look but expanding to fit the window, not fixed width. Then change the CSS I posted. Maybe something like width:100% or width:95% and add some margins. Whatever you want to see. Have Fun, Arlen -- In God we trust, all others must supply data __ 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-d] Noob with float/div problems
Thank you for not laughing at me and for the very constructive advise. I will get back at it tonight. Re -using h1,h2 tags. I tried that a few times but couldn't get the text to stay inside the images. Maybe with other corrections it will work. Also the borders showing originally is because I was even more of a noob then. I will persevere. I even over thought asking for help. It is less painful than I had been thinking. Thanks again Ken __ 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] Noob with float/div problems
On Fri, 01 Feb 2008 04:11:15 -0800
Ken Davies wrote:
Hello and thanks for letting me join your group, although it's very
intimidating for a novice.I am definitely not a hand coder, but I sure
have changed a lot of code by hand. I built a table oriented image
heavy website no CSS. I struggle to get to first base with CSS on my
top banner, it should be simple- changing the text between my logo and
a gif one of my rings. It is presently a fixed size table that I think
should expand to the browser.
In addition to Arlen's words of wisdom. If the image isn't vital to the
page content then put it in the background. The jewellery item at the
right could be in the background.
#banner {
background: url(/images/Animation11.gif) right center no-repeat;
}
#banner p {
padding-right: 83px; /* leaves Animation11.gif uncovered */
}
Putting it in the background makes it part of the template and releases
it from the requirement to have alt text. The background center is
optional as vertical centering is the default, i put it in, but you
could change it to top, bottom or delete it if you choose.
Also it looks like that image is meant to be an animation but my browser
reports an error in the image and no animation takes place.
--
Michael
All shall be well, and all shall be well, and all manner of things shall
be well
- Julian of Norwich 1342 - 1416
__
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] Noob with float/div problems
Ken Davies wrote: Original site http://www.equestrian-jewelry.com/index.htm - Right now I am just worried about the top banner. Visually what works best is http://www.equestrian-jewelry.com/test1.htm I think http://www.equestrian-jewelry.com/jewelry_horse.htm is as close to proper as I can see. It even validates-but the banner doesn't layout properly. http://www.equestrian-jewelry.com/test2.htm looks good (alternate text only shows) but the right image is dropped to low. Ken Ken, I think I'd go for broke and do the whole thing with CSS. If you are anything like me, it helps to have an example. If so, this is in keeping with that [1]. If you want it to run rail to rail, simply change the 776px widths to 100%. Quick checked in IE/6 an 7; and FF, Opera. [1] http://www.chelseacreekstudio.com/ca/cssd/horse.html Regards, ~dL -- http://chelseacreekstudio.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/
