Re: [css-d] aligning left image with horizontal navigation
On Feb 17, 2011, at 6:41 AM, Alan Gresley wrote:
On 17/02/2011 9:08 AM, James Sheffer wrote:
On Feb 16, 2011, at 3:11 PM, Alan Gresley wrote:
[snip]
Ok, now that we have the img floating, we will un-float the #nav2
which now behave as a block in normal flow.
#nav2 {
/* float: left;DELETE */
list-style: none;
font-size: 12px;
background-image:url(http://new.thetoyz.com/graphics/nav_blue.jpg);
background-repeat: repeat-x;
color: #CC;
font-weight: bold;
background-position: left 32px;
margin:0; /* removing this causes both the img and nav2 to move down
10px ??? */
overflow:hidden; /* Add to contain the floats */
}
#header img {
float: left;
}
#nav2 li {
float: left;
margin-top: 32px;
}
Since the div#nav2 is in normal flow, it will now expand to the
full width of the viewport. This doesn't stop the list items
dropping when you narrow the viewport enough but it's one step
closer. There are way to stop this but it's time for my sleep.
Alan-
Thank you so much!
That lined up the nav as I was wanting!
As for the nav wrapping, I noticed that the entire nav wraps, not
just one part of it. I can see that this is because it is all in a
list.
It would happen to any set of sibling elements that are floated.
Right. That's what I figured!
I'll do some homework to see what can be done for this before
asking here on the list but if someone can point me in the right
direction that would be great. I'm thinking that either I need to
get it out of a list, or better yet there is a way to prevent the
entire list from wrapping. I'm going to go with the later so If I'm
wrong someone please stop me :-)
James
The later is the best option. I do not know if the original site and format
had a width declared. This is the common way to somewhat prevent float
dropping. If the layout is fluid then it never happens if zooming in. My own
site and menu just grows with zooming.
http://css-class.com/test/
It can tolerate a user text size setting of 26px without any wrapping. It can
tolerate a text size siting of 40px without any wrapping on my widescreen. My
container has this.
min-width:760px;
max-width:1300px;
I haven't learned about min/max sizing yet - Something I'll do some studying
about!
Now next stage in learning. We will remove the image from the HTML an use it
as a background-image and float the list again and also add some min-width.
Major parts of the CSS.
#nav2 {
float: left;
margin: 0; /* zero out default margin */
margin-left: 32%; /* see width below, keep it after the margin: 0 above
*/
width: 68%; /* see margin above */
background :url(http://new.thetoyz.com/graphics/nav_blue.jpg) left 32px
repeat-x;
}
#website {
min-width:1000px;
max-width:1600px;
}
And a test.
http://css-class.com/x/laaso.htm
Trying resizing the viewport now. A screenshot showing the rendering with a
user font-size setting of 20px.
http://css-class.com/x/laaso.png
Working in FF4b, IE9 RC, IE7 mode in IE9 RC, Opera 11 and Safari 5. Not game
to look in IE6 yet.
Alan-
Thanks so much for all the info!
I'm going to try to get to it in more depth today but you gave me a plethora of
great info to look over and learn from!
I'll post back (probably with more questions) once I've played around with
everything you have sent and I've done some more studying on the subjects!
Jim
__
css-discuss [css-d@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-d] How to replace tables?
Hi All, I'm at my wit's end. I've started putting together an AJAX-driven site (on local servers only right now) and one of my call-back scripts needs to update a few rows of a table. So I tried encapsulating the affected rows in a DIV, but when I update that the old table rows remain and the new table rows appear almost as running text above the table. This is HTML 4.01 Transitional and the W3C validator tells me that I'm doing it wrong as the DOM doesn't allow a structure like: /trdivtr/tr/divtr. Unfortunately, I can't update the entire table as it contains stuff that isn't known to the server-side script. So I'm hoping that CSS can come to the rescue. Presumably, I can nest one DIV inside another and it may be possible to create a set of paragraphs, divs, and spans to emulate a table. But how to create a tabular layout, i.e. where the column boundaries are vertically aligned and each column is the correct width to just fit the widest content with cell content wrapping if required? So far, all I've found is ways of creating fixed-width, fixed-height structures while I need both to be dynamic. All help, particularly pointers to good tutorials, will be gratefully received. -- Geoff __ css-discuss [css-d@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/
Re: [css-d] How to replace tables?
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Geoff Lane Sent: Friday, February 18, 2011 1:26 PM To: CSS Discussion Subject: [css-d] How to replace tables? Hi All, I'm at my wit's end. I've started putting together an AJAX-driven site (on local servers only right now) and one of my call-back scripts needs to update a few rows of a table. So I tried encapsulating the affected rows in a DIV, but when I update that the old table rows remain and the new table rows appear almost as running text above the table. This is HTML 4.01 Transitional and the W3C validator tells me that I'm doing it wrong as the DOM doesn't allow a structure like: /trdivtr/tr/divtr. Unfortunately, I can't update the entire table as it contains stuff that isn't known to the server-side script. While CSS might be able to come to the rescue, the thing that occurs to me immediately is tbody. tbody is the oft-ignored/forgotten row container element. You can have as many tbodys as you want in a table. so you'd have table tbodytr/trtr/tr/tbody tbody id=ajax_containertr/tr/tbody ... /table No need to go crazy with the divs and the table layout properties. ---Tim __ css-discuss [css-d@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/
Re: [css-d] How to replace tables?
Geoff Lane wrote: So I tried encapsulating the affected rows in a DIV, but when I update that the old table rows remain and the new table rows appear almost as running text above the table. That's more or less to be expected: DIV elements are invalid as children of TABLE and, worse, they typically get parsed as content preceding the table. So I'm hoping that CSS can come to the rescue. CSS should not be expected to fix issues caused by invalid markup. Tim Climis has suggested the use of TBODY in his reply, and this might indeed help, but maybe even more obviously, if you need some styling for some rows of the table, why don't you just style the relevant TR elements? Maybe with the help of CLASS attributes on them. If this does not help, please specify which styling you would need to apply to the rows. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [css-d@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/
Re: [css-d] How to replace tables?
On Friday, February 18, 2011, 9:18:38 PM, Jukka K. Korpela wrote: If this does not help, please specify which styling you would need to apply to the rows. --- I was thinking more in terms of some technique that would allow CSS positioning on various divs, spans, paragraphs, etc. to emulate a table. However, if I can manipulate the innerHTML of a tbody element then that would do the job. FWIW, Sarah Giles suggested another mechanism via pm, which is to get the server-side script to send XML which is then parsed by client-side Javascript to modify the table. That's probably the most flexible method, but means a steeper learning curve for me. In any case, both suggestions are probably outside the scope of this forum, so I'll offer thanks to all and carry out my own further research tomorrow. Many thanks to all - your help is much appreciated. -- Geoff __ css-discuss [css-d@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/
Re: [css-d] How to replace tables?
On Fri, Feb 18, 2011 at 1:43 PM, Geoff Lane ge...@gjctech.co.uk wrote: ...if I can manipulate the innerHTML of a tbody element then that would do the job. FWIW, Sarah Giles suggested another mechanism via pm, which is to get the server-side script to send XML which is then parsed by client-side Javascript to modify the table. That's probably the most flexible method, but means a steeper learning curve for me. I'd like to follow up on that suggestion, for the sake of anyone who runs across the archive of this thread in a web search: Whenever you have the option, use JSON instead of XML for a task like that. It's just as easy to generate in most server languages, and it's *much* simpler to work with on the client. The JSON data becomes native JavaScript objects and arrays, so you can access it with ordinary JavaScript code instead of a messy DOM API. The details would be outside the scope of this list, but there's plenty of information on JSON out there if you need it. Anyway, in your case, the multiple tbody elements should do the trick. -Mike __ css-discuss [css-d@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/
