M
midori0x
Sorry about that, you remember the thread that had this page linked?
http://www.cpart.co.cc/calendars/index.html
Indeed, as soon as I posted I saw what happened, ouch!
http://www.cpart.co.cc/calendars/index.html
D
dorayme
You maybe should therefore try
#holder{... overflow: hidden;}
Yes, ok, it is a bit tricky. That centering bit relies on some js, look
at the line:
<script src="bootnic7.js" type="text/javascript"></script>
and then go to that URL to grab the js and put it on your server so that
this script reference can fetch the script.
There is no normal HTML/CSS way of getting a block of floats centred so
that they look exactly centred unless you rig the conditions tightly.
The solution, if you are not confident is to make a png or gif and post
it on a server.
M
midori0x
That link and site is just great, thank you so much.
It's going to take me a while to comb through this whole
thing.
like a charm, but now the dropdown menus aren't showing.
In IE and Opera they still do, but in Mozilla/Firefox the
menus aren't dropping down.
driving
me crazy wondering how you got the centering working. I linked in the
js file, but I didn't see any change. Thank you so much for the help,
that
overflow tip was a life saver!
but I
went all text and just winged it.
It's going to take me a while to comb through this whole
thing.
I used the overflow tag on my menu and it worked
like a charm, but now the dropdown menus aren't showing.
In IE and Opera they still do, but in Mozilla/Firefox the
menus aren't dropping down.
Wow, I did not know that. I was looking at your code and it was
driving
me crazy wondering how you got the centering working. I linked in the
js file, but I didn't see any change. Thank you so much for the help,
that
overflow tip was a life saver!
Right, I started to make a real diagram and throw it on photobucket
but I
went all text and just winged it.
D
dorayme
I took a quick look at that menu of yours and decided not to go there. I
suggest, at your level of skill, just for now, to avoid all dropdown
menus. There are many problems associated with them even when done by
generally experienced people. Consider getting rid of all the associated
markup for the drop and concentrate instead on making the menu that is
visible, nicer looking. There is no padding at the moment and it looks
so squashed. Forget dropdowns and instead have either more standing
links or (better) have what you have but let the rest of the site do the
talking. In other words, when people click on calendars, let them go to
calendars where everything is clear there.
It is a mistake to try to give more information on one page than is
conveniently absorbed by the average human or that can confuse folk or
that can be a technical nuisance cross browser. If you *really* must
have a dropdown menu, look at
<http://www.htmldog.com/articles/suckerfish/dropdowns/>
and do not think about more than one level down for now!
Perhaps the attitude that needs to be taken here is that exact centring
is not so important. Near enough will do. And there are certainly ways
to do that in particular circumstances.
For example, turn off the javascript completely for centring (Bootnic's
Device) and simply do something like style the main wrapper to be 90%
wide and auto margined and all the thumbnails in the thumbnail gallery I
gave you as an example will appear pretty centred... not perfect at all
browser window sizes but not bad at most. And no js and nothing fancy.
Rock solid. Rock solid and functional is a thing of great beauty in
itself. Trapeze walking is only beautiful when you stay on the wire and
do not plunge hundreds of feet to a gory death...
In particular circumstances there are some rather easy ways to centre
groups of things rather perfectly and without fuss.
For example:
<http://netweaver.com.au/alt/midor.html>
yes, I admit, it gets more complicated as your requirements get so...
M
midori0x
That's sort of what I'm doing, when the user clicks calendars it takes
them to the main section for calendars where they can pick the
different sizes and varieties size, type etc. We really were going
for each type having it's own page, but are you thinking it's better
to have every single type on one main page and link each section
with # locations?
That's where I got most of the dropdown code from and this
site. http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
I did sort of adapt it to my needs a little, but it seems pretty
straight forward. I tried an overflow: visible
on the child menus, but I guess this problem isn't going down without
a fight.
I've been using that text-align tag to center the oval medals and
bar.
http://www.cpart.co.cc/calendars/8x12/index.html
Do you know what might be pushing the second row
to the right, in IE again everything is normal, but FF
is floating the next row to the left.
D
dorayme
If you follow my suggestion, you win the fight the moment you cease
doing a dropdown. Leave it for later. Just try to make the horizontal
menu (with no dropdown at all) look good. You can surely see how
squashed up it is?
....
I was just making a simple point, that instead of a drop down on the
home page, have a simple link and at that page the link goes to, exhibit
the info you resisted from putting in the dropdown.
Let me put it even more plainly. On a home page a dropdown menu might
have as a main item, 'pets'. This item might drop down on mouse hover a
list with 'cats', 'dogs', 'birds' and 'snakes'. But you can avoid the
dropdown by simply putting the local menu list of 'cats', 'dogs',
'birds' and 'snakes' on the 'pets' page. The technology for this is rock
solid and user friendly. if someone is interested inpets they will click
on pets to see what you have there. They won't likely leave your site
because they do not see 'cats', 'dogs', 'birds' and 'snakes' right there
and then.
You have lost me. You seem to be saying that some second row is being
pushed to the right while at the same time FF is floating it to the
left? What row? I am looking but see nothing that fits this description,
sorry.
btw, after all this, I notice your url comes up as invalid?
M
midori0x
You mean how the boxes are wrapped tightly around the text? I thought
it looked sort of neat and concise, but you think added some padding
inside of there would look better? Most of the drop down menus I've
seen are so bare bones. I didn't give it much thought, but any tips
you
have will be much appreciated.
Sorry about that, what I meant is on the 8x12 page I linked, in the
main
#holder div it's supposed to break to a new row after every four divs.
So,
after the div with the picture 'flight framed' inside it's supposed
to start
a new row. In IE it's working just right with 'impressions framed'
being
the first pic to the left, but in Firefox the that same div is being
shoved
all the way to the right side. I just checked the url, it should be
working.
M
midori0x
I think I fixed it, turns out I accidently forgot to close some <a
tags.
*smacks head*
D
dorayme
OK, if it looks ok to you, what can I say? I guess my taste is for a
little bit of grace when borders are around text. Ask other folks and
see what they say, perhaps I am the odd one out here. <g>
M
midori0x
Okay, so I should just go on and do I padding around the text, what
would you
recommend?
Also there's a new naughty bug it seems, just when everything was
going okay and
I could get some work in I noticed if I add enough text the the image
descriptions to
break to a new line I get either a really large bottom gap. I
reproduced the error so you
could see. http://www.cpart.co.cc/calendars/8x12/index.html
R
rf
That is to be expected. It also happens when I increase my font size so I
can read your white on black text (which is quite hard for me to read,
expecially with serifs).
Fragile design.
M
midori0x
So what's causing this, and while I'd consider changing the color I
think she was aiming
for white on the greyish black. What color text do you think might
contrast better on that
dark grey?
R
rf
It's quite simple but totally unobvious. You have to understand exactly what
float: left means in this situation.
It's all explained in sectino 9.5.1 of the CSS reccomendation, particularly
rule 2:
"If the current box is left-floating, and there are any left-floating boxes
generated by elements earlier in the source document, then for each such
earlier box, either the left outer edge of the current box must be to the
right of the right outer edge of the earlier box, or its top must be lower
than the bottom of the earlier box."
Consider how those floated left containers (your class=select divs) are
layed out.
The first one (the slightly longer one) is easy as there are no prior
floated boxes, just float it left to the border of its container.
The second one is almost as easy, just float it left until it hits container
1.
Similarly for three and four.
Now, container 5 does not fit to the right of container 4 so the second part
of rule 2 comes into effect, its top must be below the earlier box,
container 4.So, drop it down to just below container 4.
But, it still needs to be floated left so it is, it is slid left until it
hits something, namely the right side of container 1 (which is protuding
down below 2, 3 and 4). It doesn't hit containers 2 and 3 because it is
already below their bottoms (refer again to the rule above). It doesn't
slide over to the left side of the outer container (as you might wish it
would) because, as per the above rule, it must be to the right of the prior
box (container 1) *before* we consider if it must be below that box
(container 1).
We proceed with containers 6 and 7 which go where you see them. Then
container 8, it can't fit to the right of 7 so it gets dropped down below
the bottom of 7, and then slid left until it hits something, the edge of its
container.
Temporarily switch borders on for those <div class=select>s (using firebug
perhaps) and you will see exactly what is happening.
Bottom line: If you wish to use this technique to lay out a rectangular grid
of things then you must make absolutely sure that each one of them is the
same height. this generally means images only, no text. You can't ensure
that somebody might not up their font size and cause a line wrap. I suppose
you could use white-space: nowrap to ensure no line wraps but then you are
faced with text that may escape out the right hand side of those containers.
If it were me I would simply put the whole lot in a table (probably a CSS
one) and be done with it. While this could be labled as "abusing tables for
layout" we *know* it will work, whereas we *know* your method will fail
under certain conditions (font size, amount of text). Fiddling with left
floated divs just doesn't work in your case.
My preference is very dark black on white.
D
dorayme
Enough padding to make it easy to read, enough to make it look nice. I
don't understand your menu CSS or what you are doing, floating and
relative positioning. It all is too complicated. My point is that there
is no padding at all around the menu item words and there should be at
least some left and right, perhaps 0.2em or, if you use pixels, 3 or 4.
You can use padding above or below if you want, or you can allow
line-height to provide some or all of it. If unsure, just put a bit of
padding in. I agree with rf that white on black is harder to read and
this makes it even more important to remove the crowding.
Your floats are snagging. Here is snag in slow motion:
<http://netweaver.com.au/floatHouse/anim/page4anim.html>
I suggested originally to you - with url - to look at a thumbnail set up
that worked well as long as the captions were short and you controlled
the parameters tightly. In your case all your pics are the same size and
the captions are pretty short so you *could* make a go of it.
If you intend to have a lot more pic/caption pairs, this is a pretty
good way to go because it adjusts nicely to window browser width.
What has in fact happened, as far as I can tell, is you have not
followed the much simpler scheme at
<http://tinyurl.com/6fnfon>
where there is a simple identifiable box that floats, it is dimensioned
to suit the purpose and works fine within acceptable limits. Your schema
seems to me to be more complicated. I have reconstructed for you the
sort of thing I had in mind for you, using some of your images and text:
<http://netweaver.com.au/alt/midor2.html>
The idea here is essentially simple, if you try to add and change it too
much, you might get quite unexpected results. The centring of the whole
block of floats is another matter and I have addressed it elsewhere but
for now I have used the following simple device:
#holder {width: 90%; margin: auto;}
There are up and down sides to this but it gives a rough and acceptable
centring effect imo.
M
midori0x
I just followed your method as best as I could although, I'm sure I
probably missed
something, but it's working nicely now across the different browsers.
I had it set to
em for height, but it was causing a problem in an older version of IE
so I switched to px
and gap is gone I think. Thank you for taking the time to make those
great mockup
pages for me, that code has been infinitely helpful to me! I will run
the color change
by her to see what she thinks, thanks guys.
D
dorayme
I was wondering how IE would react to em heighting... Of course, in
theory, if you use px and a user increases font-size a real lot, the
text will break out and problems will ensue. But in this particular case
this is unlikely. But I mention to advise you to rally test the layout
by a good range of text sizes (control + on many browsers on Windows I
think?).
You can also keep the em but deliver, for IE's eyes only, px using
conditional comments. Anyway, good luck.
M
midori0x
I will do a little bit more testing, but yeah I was never planning to
have whole
blocks of text under the images. Just simple one sentence descriptions
for
each image. Maybe I could just do one of those single overlay windows
I see
all the time and have the larger versions of the images inside that
with
text, do you know what I mean and where I could find a good tutorial
on
this?
Also, do you know of any good code formatting guides, I remember you
mentioned the code was a little hard to read, outside of the editor I
use,
it does look a little crazy and I'd like thing to be more readable.
R
rf
dorayme said:
Is this supposed to show something? All I get is a big white area in the
middle of one of your notebook style pages.
Try changing your font size on this one
D
dorayme
"rf said:I am sorry that is all you get.dorayme said:Try changing your font size on this one
I am sorry you suppose I did not. At my end even after going down three
clicks and up 4 clicks it looked acceptable on FF, on Safari, more
clicks down and up to 7 clicks up, still ok. In Opera, finer still.
OP might play more with height spec. I am not quite happy with the em
height I chose as it tends to be too much as one clicks up. I have not
checked in WinIE and I will perhaps tomorrow.
R
rf
dorayme said:Try changing your font size on this one
I am sorry you suppose I did not. At my end even after going down three
clicks and up 4 clicks it looked acceptable on FF, on Safari, more
clicks down and up to 7 clicks up, still ok. In Opera, finer still.[/QUOTE]
What I mean is that clicks up cause a very wide black area between the rows
of images.Clicks down can actually cause the images to overlap.
It appears that the height of the whole container is in ems.