Below is the test page I've been playing with. What I am trying to do is
* have a header block at the top of the page/screen
* have a footer block at the bottom of the page/screen
* have a menu side bar on the right with links that does not scroll with the
main content
* have the content block scrollable only
* keep it as simple as possible for repeated use
I am close, but I have a few problems that I need some pointers on.
* The footer div overlays on top of the scroll bar on the content area. I
couldn't get the pad3 or padding-right to work right.
* On my work safari browser the footer information is partially hidden
behind the right menu. On my personal mac (safari and opera) it appears fine.
* Only some of the internal links work. The top does not work, I have to
remove the # from the URL to get back to the starting point.
* I had to add multiple to the bottom of the page to see the last of
the text hidden behind the footer.
* I had tried to get sizes set to 'em', but couldn't get them to work right
so have some 'px'. Any idea how to get to just one standard?
* and anything ya'll might find that I missed
Future Plans:
* figure a print CSS from all this
* ???
Thanks for any insight and help you can give. Sorry, I do not have a public
web site to host this test case on, my apologies for including such a long
example. Note, this is *NOT* for school work. I've not been in a classroom in
many years. Just a personal attempt to make something I like, without all the
extraneous junk most blog sites and other software include.
Eric
http://www.w3.org/TR/html4/strict.dtd";>
Some sort of title goes here
html {
background : #FF -18px 0 no-repeat;
border : 0;
font-family : "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
font-size : 80%;
height : 100%;
margin : 0;
max-height : 100%;
overflow: hidden;
padding : 0;
}
body {
border : 0;
height : 100%;
margin : 0;
max-height : 100%;
overflow: hidden;
padding : 0;
}
div#content {
background-color: #FFF9DA;
display : block;
height : 100%;
margin-right: 12em;
margin-top : 5em;
max-height : 100%;
overflow: auto;
padding-bottom : 3em;
padding-left: 1em;
padding-right : 1em;
position: relative;
}
div#head {
background-color: #ECE097;
color : #FF6600;
display : block;
font-size : 4em;
height : 1.25em;
margin : 0;
position: fixed;
right : 0;
top : 0;
width : 100%;
z-index : 3;
}
div#foot {
background : #CC9966;
bottom : -1px;
color : #FF;
display : block;
font-size : 1em;
height : 3em;
left: 0;
margin : 0;
padding-right : 3em;
position: fixed;
text-align : right;
width : 100%;
z-index : 1;
}
div#right {
background-color: #CDDBFF;
background-position : 0 100px;
font-size : 1em;
height : 100%;
position: fixed;
right : 0;
width : 12em;
z-index : 2;
}
/* Not sure what this does for me, */
/* not the position, but the asterisks */
* html #head, * html #foot, * html #right {
position : absolute;
}
div#pad1, div#pad2, div#pad3 {
display : block;
}
/* To give some padding to the left heading text since I can't do
padding-left */
div#pad1 {
float : left;
height : 1.25em; /* same as header */
width : 18px;
}
/* Used to put space above right section */
div#pad2 {
height : 6em; /* same as header? */
}
/* Used to put space to the right of the footer */
div#pad3 {
float : right;
width : 13em; /* same as right */
}
/* make bolding a wee bit larger */
p.bold {
color : #0040A9;
font-size : 1.2em;
font-weight : bold;
}
/* block of text on left or right side, ex: */
/* some text, up to about 307 characters. */
div#blockleft {
background : #EEFFDD;
border : 1px solid #00;
color : #006633;
float : left;
font-family : Arial, sans-serif;
height : 200px;
left: 150
>> Brian M. Curran wrote:
>> Well, it's a beautiful evening here in NYC.
>> http://www.draftingservices.com/Copy%20of%20index.html
>>
>> Sincerely,
>> Brian
>>
>>
>
>
>
>
>
> Nuke the heavy curly quotes, the top/bottom rules, and use a thin-rule
> left :-) . None of that stuff is in keeping with your site. Or, is it?
>
>
> Best,
> Jay-Z and Alicia Keys
oh, wow, that was so funny! ...i'll check-out the css too.
Brian
__
css-discuss [cs...@lists.css-discuss.org]
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/
> >
> > Thanks Tim, however it looks pretty wacky in Explorer. ...I'll have to
> > give this some thought. I'm still new to CSS, so off the top of my head
> > I'm seeing a work around how to format the curly quotes for all the
> > different browsers.
> >
> > Brian
>
> i meant to say: *not* seeing
>
My guess is that if it looks okay in the other browsers, it looks okay in IE8
too, which means you just need to grab IE<7.
If you put this in your HTML header (NOT you CSS)
and your IE specific css in ie.css, it should help you out.
Check here for more info about this magic (called IE Conditional Comments):
http://www.quirksmode.org/css/condcom.html
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
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/
Brian M. Curran wrote:
> Well, it's a beautiful evening here in NYC.
> http://www.draftingservices.com/Copy%20of%20index.html
>
> Sincerely,
> Brian
>
>
Nuke the heavy curly quotes, the top/bottom rules, and use a thin-rule
left :-) . None of that stuff is in keeping with your site. Or, is it?
Best,
Jay-Z and Alicia Keys
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
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/
>>>Tim wrote:
>>> ...So, in Explorer they look about
>>> how I'd like them.
>>
>> I'm on Linux, so I don't have access to Explorer, but in the spirit of
>>
>>> large quotes somewhere reasonably placed at the start and end of each
>>> one of
>>> my quotes
>>
>> how about this?
>>
>>
>> add to this:
>> blockquote p {
>> position: relative;
>> }
>>
>> and replace these with:
>>
>> .bqstart {
>> color: #666;
>> font-size: 700%;
>> position: relative;
>> top: -0.2em;
>> left: -0.1em;
>> }
>>
>> .bqend {
>> color: #666;
>> font-size: 700%;
>> position: absolute;
>> bottom: -0.8em;
>> right: -0.2em;
>> }
>>
>> ---Tim
>
>
> Thanks Tim, however it looks pretty wacky in Explorer. ...I'll have to
> give this some thought. I'm still new to CSS, so off the top of my head
> I'm seeing a work around how to format the curly quotes for all the
> different browsers.
>
> Brian
i meant to say: *not* seeing
__
css-discuss [cs...@lists.css-discuss.org]
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/
>>Tim wrote:
>> ...So, in Explorer they look about
>> how I'd like them.
>
> I'm on Linux, so I don't have access to Explorer, but in the spirit of
>
>> large quotes somewhere reasonably placed at the start and end of each one
>> of
>> my quotes
>
> how about this?
>
>
> add to this:
> blockquote p {
> position: relative;
> }
>
> and replace these with:
>
> .bqstart {
> color: #666;
> font-size: 700%;
> position: relative;
> top: -0.2em;
> left: -0.1em;
> }
>
> .bqend {
> color: #666;
> font-size: 700%;
> position: absolute;
> bottom: -0.8em;
> right: -0.2em;
> }
>
> ---Tim
Thanks Tim, however it looks pretty wacky in Explorer. ...I'll have to give
this some thought. I'm still new to CSS, so off the top of my head I'm
seeing a work around how to format the curly quotes for all the different
browsers.
Brian
__
css-discuss [cs...@lists.css-discuss.org]
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/
>> On 6/26/2010 7:54 PM, Brian M. Curran wrote:
>> Hello,
>> Well, it's a beautiful evening here in NYC. It's quite hot, and it looks
>> like a thunderstorm might break the heat. It's good weather to work on my
>> website. ...So... Am I chasing a fantasy in trying to get these curly
>> quotes to work in all the browsers? Here's my test page:
>>
>> http://www.draftingservices.com/Copy%20of%20index.html
>>
>> Sincerely,
>> Brian
>Kevin wrote:
>
> Might need some work, but maybe you can use background images?
>
> http://kevin.rodenhofer.com/quotes/
Thanks Kevin. If I can't get the CSS based quotes to work, then it looks
like I'll be following your code. ;-)
Brian
__
css-discuss [cs...@lists.css-discuss.org]
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/
>> Brian M. Curran wrote:
>>> Hello,
>>> Well, it's a beautiful evening here in NYC. It's quite hot, and it looks
>>> like a thunderstorm might break the heat. It's good weather to work on
>>> my
>>> website. ...So... Am I chasing a fantasy in trying to get these curly
>>> quotes to work in all the browsers? Here's my test page:
>>>
>
>
>> It's a similarly "beautiful" day in Indiana, and I've been working on my
>> website all day, so I'll take a crack at yours for a change of pace.
>>
>> Is there a browser currently doing this "right," so I can tell what
>> you're
>> after? I think it's wrong in Chrome.
>>
>> ---Tim
Thanks if you have a minute Tim. I had to run to the store for a second,
hence the delay on this email. ...I just started doing the curly quotes in
Explorer, and they were coming out good when I realized that they may not
look the same in the other browsers. ...So, in Explorer they look about how
I'd like them. I was just going for the look of large quotes somewhere
reasonably placed at the start and end of each one of my quotes. Nothing
complicated. I'd prefer to use CSS instead of an image. ...I need to take a
look at David's response now.
Brian
__
css-discuss [cs...@lists.css-discuss.org]
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/
This is how I would do:
Check the source of above page and let me know if you have any questions. I
have taken two paragraphs from your page and quoted above.
hth
--- On Sun, 27/6/10, Brian M. Curran wrote:
> Well, it's a beautiful evening here in NYC. It's quite hot,
> and it looks like a thunderstorm might break the heat. It's
> good weather to work on my website. ...So... Am I chasing a
> fantasy in trying to get these curly quotes to work in all
> the browsers? Here's my test page:
>
> http://www.draftingservices.com/Copy%20of%20index.html
>
__
css-discuss [cs...@lists.css-discuss.org]
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/
Brian M. Curran wrote:
> Hello,
> Well, it's a beautiful evening here in NYC. It's quite hot, and it looks like
> a thunderstorm might break the heat. It's good weather to work on my website.
> ...So... Am I chasing a fantasy in trying to get these curly quotes to work
> in all the browsers? Here's my test page:
>
> http://www.draftingservices.com/Copy%20of%20index.html
>
> Sincerely,
> Brian
>
>
How do others handle it..?
Best,
~d
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
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/
Hello,
Well, it's a beautiful evening here in NYC. It's quite hot, and it looks like a
thunderstorm might break the heat. It's good weather to work on my website.
...So... Am I chasing a fantasy in trying to get these curly quotes to work in
all the browsers? Here's my test page:
http://www.draftingservices.com/Copy%20of%20index.html
Sincerely,
Brian
__
css-discuss [cs...@lists.css-discuss.org]
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/
Hoyd Breton wrote:
>
> Two questions:
>
> • Could any of you guys recommend the most active/helpful html/css forum?
> This is my first all-html project and know that I have a bucket load of
> learning ahead.
>
> • I'm working off safari/chrome; and I realize that I need to do something
> to address the wonkiness that firefox is having; however, this is the link
> to my site [note: it is far from completed + i know that horizontal sites
> have a special place in most people's well of unusability] that being said
> constructively crit away:
> http://starkshumble.com/test/
>
>
> Cheers,
> Hoyd
>
>
>
1/ See the list wiki
re: Webdesign-L
Read and adhere to his list policies before posting.
2/ Keep it simple: easy to read; easy to use. Hold the horizontals. Hit
the verticals.
Fwiw,
Best,
~d
PS Please bottom post. Thanks.
--
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
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/
You really should check out the CSS-based (a little bit of JavaScript)
slideshows (and menus, among other things) at Project VII. See if there's
anything there that would meet your needs. I have their menu builder, and the
code validates. The customer service there is also awesome. I've gotten
responses on the weekends and later at night. I don't EXPECT it, but I often
get it.
http://www.projectseven.com/index.htm
Theresa
On Jun 26, 2010, at 9:07 AM, Hoyd Breton wrote:
> Thanks for all the pennies, nickels and dimes. Cashing it all in. = ]
>
> I wanted to avoid the SWF route, not because all the hoopla but more as an
> exercise to learn the javascript ropes a bit.
> The "solution" that I opted with, and I'm using solution loosely here guys.
> Is that I used a slideshow that handles divs and within each individual div,
> I'm embedding the given project's slideshow.
>
> Two questions:
>
> • Could any of you guys recommend the most active/helpful html/css forum?
> This is my first all-html project and know that I have a bucket load of
> learning ahead.
>
> • I'm working off safari/chrome; and I realize that I need to do something
> to address the wonkiness that firefox is having; however, this is the link
> to my site [note: it is far from completed + i know that horizontal sites
> have a special place in most people's well of unusability] that being said
> constructively crit away:
> http://starkshumble.com/test/
>
>
> Cheers,
> Hoyd
>
__
css-discuss [cs...@lists.css-discuss.org]
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/
Hoyd Breton wrote:
> Thanks for all the pennies, nickels and dimes. Cashing it all in. = ]
>
> I wanted to avoid the SWF route, not because all the hoopla but more as an
> exercise to learn the javascript ropes a bit.
Good man : "Flash ? Just say 'NO !'" :-)
> http://starkshumble.com/test/
I like it, in many ways, but I would like it even more
if the slides overshot a little and then glided back.
Think of the animation as an application of mass,
spring and dashpot -- at the moment, it is critically
damped, and I think it would be aæsthetically more
pleasing if it were to err on the under-damped side.
My two (real) penn'orth :-)
Philip Taylor
__
css-discuss [cs...@lists.css-discuss.org]
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/
John Franks wrote:
> Got a strange one here my friends. Go to the following page to view my
> problem.
> http://www.mrskibbles.co.uk/virtuemart/sweet-categories/chews/black-jacks-chews/
>
>
> Thanks, John.
>
>
Not exactly up for looking for a needle in a haystack myself, but you'll make
it easier by pointing to what you think may be the relevant stylesheet and the
relevant lines. Thanks.
Best,
~d
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
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/
Thanks for all the pennies, nickels and dimes. Cashing it all in. = ]
I wanted to avoid the SWF route, not because all the hoopla but more as an
exercise to learn the javascript ropes a bit.
The "solution" that I opted with, and I'm using solution loosely here guys.
Is that I used a slideshow that handles divs and within each individual div,
I'm embedding the given project's slideshow.
Two questions:
• Could any of you guys recommend the most active/helpful html/css forum?
This is my first all-html project and know that I have a bucket load of
learning ahead.
• I'm working off safari/chrome; and I realize that I need to do something
to address the wonkiness that firefox is having; however, this is the link
to my site [note: it is far from completed + i know that horizontal sites
have a special place in most people's well of unusability] that being said
constructively crit away:
http://starkshumble.com/test/
Cheers,
Hoyd
On Sat, Jun 26, 2010 at 11:17 AM, Dougie McGilvray <
dougie.mcgilv...@googlemail.com> wrote:
>
> Hello to everyone on the list, been lurking for a while enjoying the
> discussions. Thanks and respect to everyone.
>
> Hello Hoyd,
>
> I have recently been investigating javascript slideshows for a site. I
> think the main difference is whether you intend to use just images, or if
> you plan to have html content in the slides. A carousel / marqueee / gallery
> may also give you the effect you are looking for.
>
> A Javascript solution will make your content more available to search
> engines.
>
> My 2 pennies,
> Doug
>
>
>
>
> On 25/06/10 21:12, Hoyd Breton wrote:
>
>> Top of the evening!
>>
>> Noob here. I'm trying to display the work section on my page by having the
>> given project's slideshow appear sliding in to the center of the work
>> section.
>> If the user selects a different project from the list on the left, the
>> current project's slideshow slides away for the newly selected project's
>> slideshow to appear.
>>
>> What technique is recommended here? A parent slider to house all the
>> projects and then individual sliders for each project?
>>
>> I've danced around google, css3 animation& jquery tutorials with little
>> luck. Any help would be kindly appreciated.
>>
>> Cheers,
>> Hoyd B.
>> __
>> css-discuss [cs...@lists.css-discuss.org]
>> 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 [cs...@lists.css-discuss.org]
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/
Got a strange one here my friends. Go to the following page to view my problem.
http://www.mrskibbles.co.uk/virtuemart/sweet-categories/chews/black-jacks-chews/
My problem is with the order table that sits half way down the page in the main
donut, where the user adds a sweet to their shopping cart. Everything works
great in all five main browsers except for the background-color not working
correctly when I test in IE7. In all the other browsers (including IE8) the
rows alternate with white-pink-white-pink, but when in IE7, earlier in the
table the background-color remains white on all rows. Can you please take a
look in the diferent browsers and highlight any comments you may have as to why
it is not working in IE7.
P.S. Don't worry about IE6 or earlier, right from the start of the project IE6
compatibility was not considered.
Thanks, John.
_
http://clk.atdmt.com/UKM/go/19780/direct/01/
We want to hear all your funny, exciting and crazy Hotmail stories. Tell us now
__
css-discuss [cs...@lists.css-discuss.org]
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/
Michael Adams wrote:
> A few years back i dropped conditional comments in favour of the CSS IE
> @import hack[1][2][3]. Now i find myself in a position where i want to send
> one thing to ie7 & ie8 and another to all other browsers.
>
> What i want to do is give CSS rounded corners and opacity to all browsers
> that
> support it. All current versions of IE do not support rounded corners -
> though ie9 may in the future.
IE9 will have support for rounded corners.
> I will pass alpha PNG images to ie7 & ie8.
Or you could send invalid CSS (like the import hacks) that IE8 only sees.
I myself just do the best with IE8 without rounded corners. Some may
not have that option.
[snip]
> IE @import hack:
> I first found here
> [1] http://annevankesteren.nl/2005/10/ie-import-hack
> more
> [2] http://imfo.ru/csstest/css_hacks/import.php
> good reasons
> [3] http://www.gunlaug.no/contents/wd_additions_12.html
>
> Grr... conditional comments first sentence:
> [4] http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
>
1.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
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/
Hoyd,
I would look to use Flash for this kind of thing. And there are some excellent
tools out there which do all the coding for you. One fantastic one would be
http://www.slideshowbox.com/ from JumpeyeComponents. They provide both a
non-Adobe-Flash HTML version as well as an Adobe Flash add-on. Have a good look
at it. It is awesome and will do a fantatic job.
John
_
http://clk.atdmt.com/UKM/go/19780/direct/01/
Do you have a story that started on Hotmail? Tell us now
__
css-discuss [cs...@lists.css-discuss.org]
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/
Hoyd Breton wrote:
> Matthew + Chris: Thank you for the quick replies. Yeap, I agree that in most
> cases animations tend to be on the annoying/ pointless side of things;
> however, I feel like slideshows have become a bit commonplace on portfolio
> sites, going to give it a try and nix if it's poorly received.
Hoyd : Nil illegitimi carborundom :-) Animation for the sake of
animation is (and always was) annoying. But animation for (e.g.)
a slide show is a perfectly good (and, IMHO, non-annoying) use
of the technique. I would say "Go for it".
Philip Taylor
__
css-discuss [cs...@lists.css-discuss.org]
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/
21 matches
Mail list logo
