Lozbo

The validation of your xhtml does not have to do with the layout. Well it does but not the way you are thinking, you can have a valid xhtml document and the layout a mess, while being a fine and professional design.And you can have a document that does not validate for a simple mistake, but that will not change the layout itself, the validation is for knowing that you did a good code and that it will be easier to stick to cross-browser solutions and help a cross-browser layout too. But that does not affect the way its shown, becouse if your document does not validate it means that something is wrong in your markup and that will be the trouble itself, apart from the validation.But an error like this is will not affect the markup becouse the error would be about an anchor, not an actual div position or something. In fact, this is not an error, the ampersand used in links must be like that, you cannot use a & entity in links becouse its code. The entitys are used for writting the text itself, not the markup rules, so you can have "&" in the href attribute becouse its part of the code, so things like this produces a text output only, not the code itself:ó produces a text output= ?ñ produces a text output = ?" produces a text output = "And so on, but you can not, for example, write &quot in the markup like this:<a href="location/&quot>Text output for the actual link</a>That above is wrong, but this is correct:<a href="location/">Text output for the "Actual Link"</a>Hope this helps you...

There is a simple rule that will get your list done as you want (a drop down on roll over). It is the simplest code, its as simple you would never have thought it! It is really cool, the only problem with it (yeah, it has a little problem, but as you must be figuring it out, its all about that hated non-standars-compliant nasty browser which happens to be, by the way, the most used browser around hehe). But dont panic, it all solves with a little javascript (lets hope users allow js do the magic). Well the trick is basically about this: you do your xhtml markup of lists, and sublists, so you will have something like this (ill borrow the code of a page im developing): <ul id="menu_nav"> <li><a href="/pmic/presentacion.php" accesskey="N">Presentación</a> <ul> <li><a href="/pmic/misionvision.php">Misión y Visión</a></li> <li><a href="/pmic/objetivos.php">Objetivos</a></li> <li><a href="/pmic/metas.php">Metas</a></li> </ul> </li> <li><a href="/pmic/pmic/" accesskey="P">PMIC</a> <ul> <li><a href="javascript:;">Materiales</a></li> <li><a href="javascript:;">Chapala</a></li> <li><a href="javascript:;">Arcediano</a></li> <li><a href="javascript:;">Humor</a></li> <li><a href="javascript:;">Fotos</a></li> <li><a href="javascript:;">Notichapala</a></li> <li><a href="javascript:;">Staff</a></li> <li><a href="javascript:;">Eventos y Actividades</a></li> <li><a href="javascript:;">Páginas Relevantes </a></li> </ul> </li> <li><a href="/pmic/excit.php" accesskey="E">Excit</a></li> <li><a href="/pmic/claseEA/" accesskey="C">Clase de Economía Ambiental </a> <ul> <li><a href="javascript:;">Programa Académico</a></li> <li><a href="javascript:;">Pizarra de Mensajes</a></li> <li><a href="javascript:;">Materiales de Lectura </a></li> </ul> </li> <li><a href="/pmic/investigadores/" accesskey="R">Red de Investigadores</a> <ul> <li><a href="javascript:;">Investigadores</a></li> <li><a href="javascript:;">Proyectos</a></li> </ul> </li> <li><a href="/pmic/publicaciones.php" accesskey="U">Publicaciones</a></li> </ul> And the glorious, yet as simple as hell css is all about this: hide the sub lists with display: none and show it again with :hover. However, the problem with IE consists that the pseudo class :hover is only supported for anchors, and what we are using is a li:hover pseudo class so will have to fix it with another code. the basic code will be something like this: li ul {display:none} li:hover ul {display:block} That's it. You tell the ul child of the list item to keep hidden, and then you tell that ul (on the rollover of the li) to show. A more fancy css code (whill i'll also borrow from my other site) will be like this: div#main_menu {width:200px;background:#0b3a6a;color:white;font-size:.9em;float:left;text-align:left;clear:both;}div#main_menu p {margin:0;padding:10px;font-size:1em;background:#74a7cd;text-align:center;}div#main_menu ul {margin: 0;padding: 0;list-style:none;width: 200px;vertical-align:top;}div#main_menu ul li {position: relative;}div#main_menu li ul {position:absolute;left:200px;top:0;display: none;}/* quitar absolute para otro tipo de men� */div#main_menu ul li a {display: block;text-decoration: none;background:#0b3a6a;color:white;padding:5px 0 5px 5px; /*border: 1px solid #ccc;border-bottom: 0;*/}div#main_menu ul li a:hover{color:white;background:#11589F;border-right:5px solid #BF0D0D;padding-left:10px;}/* Fix IE. Hide from IE Mac \*/* html #main_menu ul li {float: left; height:1%;}* html #main_menu ul li a {height: 1%;}/* End */div#main_menu li:hover ul, #main_menu li.sfhover ul {display: block;}div#main_menu li ul li a {padding: 2px 5px;border-bottom:1px solid #28516F;} That's it, it comes with IE fix hacks and everything hehe. Note that the markup the main ul had an id? its for the js fix. You can change it but youll have to do it in the javascript. The code i posted, the css, its an already formatted horizontal menu with dropdowns on the right, got it from a tutorial on alistapart and its valid xhtml and css. This is the IE JS FIX: sfHover = function() { var sfEls = document.getElementById("menu_nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } }}if (window.attachEvent) window.attachEvent("onload", sfHover); Hope this worx for ya.

Im actually trying to develop two different things about this same issue. One of them can actually have the same background, but for the other I was thinking more like an individual ID for each div that will have a different image, but i wanted to avoid that.As this is the only content of the page (except for the heading and a 15k background image) i think i can afford a little bit of extra size if you have a solution.

How will the correct markup be for a list that has big images (different images each) next to it? Like a list of places you can go and each one with a picture of the destination (but not just a bullet, and aligned to the right, AND IE compatible)....So that i can use a heading, a little description and a floated img to the right, and avoid pasting the img itself in the document, but through a css background rule in the given div or whatever...Thanks in advance!

Wait, what do you mean full standards-compliant css? isnt "!important" standard? I'll try the * thing, thanks... And what are those css browser filters?

Theres my page. Theres my headings, my paragraphs and my lists. But then, i want everybody to drop their default margin and padding, so that i can assign them other. Actually there wont be any margin, so the backgrounds of sucesive adjacent elements wont look odd. The only one giving trouble is the Definition list, i dont know how to tell it not to have that margin, or padding or whatevers messing around. Here, have my code: <h3>Escolaridad</h3> <dl> <dt>Carrera</dt> <dd>Licenciatura en Sistemas de Información por la Universidad de Guadalajara; CUCEA Agosto 2001 - Junio 2005 <br /> Titulación por Excelencia<br /> Mejor promedio de la Generación saliente en el ciclo 2005 A<br /> Constancia en la XXX Ceremonia de Reconocimiento y Estímulo a Estudiantes Sobresalientes - CREES 2005 </dd> And its respective css: div#container h1,div#container h2,div#container h3,div#container h4,div#container h5, div#container p, div#container ul, div#container ol, div#container dl, div#container li,div#container dt, div#container dd, {margin:0 !important;} What should i do? its still showing this darn white space between the h3 and the dl... Thanks in advance! - 10730

I believe that the property overflow is for adding a vertical scroll bar for navigation or am i wrong?

The errors are a little bit self explicative, and they point out the very line where the error has been found.If you are using an editor such as dreamweaver, you can take advantage of the 'help' code (while you are in code view) that pops up when you start writting (dreamweaver tries to gues what you want to type, given the position of the cursor, wheter its a specific tag attribute, or a particular css property or the fixed values of those, etc), and theres an additional help in dreamweaver that examines the code in search for particular browser errors, right to the left of the file managment (get or put file into server or local site), theres the browser check errors, where you can tell what browser are you designing for and dreamweaver underlines wrong code (as if it was ms office winword), and then you can debug your html...But that is IF you do have dreamweaver.. hehe anyway, why dont you post the link to the page or the errors themselves so we know what to advice exactly... cheers and good luck -10730

Not completely get what you are saying, dont understand what you want, but if i think that you want what i think you want.. (to get a logical markup code that shows your table and image in the right order and both floated to the right) i have a link with a tutorial about it, but its just a mess of divs and its aimed to the main look and layout itself of a site, not for a particular situation like this, let me get the link... Well im sorry i didnt find the link of the article i read, but i found this one: http://www.manisheriar.com/holygrail/ Its not about your exact issue, but i think you can take advantage of the wrapping principles used here to achieve this look, hope it works for you... -10730

But how am i suposed to tell the tool bars menu to stay 130 pixels away from the top? mmm ill try some margins and padding but think that is going to mess up a little bit the code...I didnt have all the time this floats but as i was debuging and trying to get firefox do what i want, i coded it into my style sheet but dont know how to make firefox display it to the right, anyway let me do it on monday as that website is being developed at job...

Right, anytime pal! glad to know i could help the good people of this forum

heres a hack that fixes ie and leavs all browsers normal (suposedly, but im having my doubts with opera): /* Fix IE. Hide from IE Mac \*/* html div#tools_menu {text-align:right !important;}/* End */ * Is used to select all elements of the current level, but apparently, only Ie believes that theres an invisible element surrounding the root element (html) so the only browser that will read this as valid css is IE, and the coment lines before it work this way: \ is used to scape a character so the browser doesnt take it as normal code but a chain of text, so its suposed to scape the * so the browser will believe that the next lines are still a comment, so this: \*/ is not actually a comment end for the current rule, its suposed to fix ie for mac, but im not totally sure i made some tests and some things work and somethings didnt, any way im not totally sure but it does work for ie 6 at least:D

Yes i believe there are a lot of sites that can help you out with that, for example: alistapart.com pixel2life.com w3schools.com Those pages are for tutorials, and tips, but specially the first one, you can find yourself lost with tons of tips and tutorials that make your standar web programmer's life a lot easier =D... It happensa lot to me, im reading an article from a list a part, and it comes with several links to other articles and i middle click all and discover things i wasnt even looking for but need for my site... But here you go, and its also a good idea to post the link to your site... If this works for you, heres the way i work: 1. Get the site documentation 2. Do a few design proposals in fireworks and show it to the client till he accepts one 3. Start coding it (the main structure) into html (i used to export fireworks html right into dreamweaver, but fireworks design can only export tables, and thats what we are trying to get rid of) 4. Do the heavy part: css 5. Once its all together, i divide the content into separate files to use them as server side includes (like the meta tags, the main navigation and the footer for example) 6. Copy and paste babe... and change the main content area Also a good thing ive learn if youre just diving into this w3c standars and css mania, you can achieve very basic but effective layout without tables is to put margin:0; into your divs, p's or h's, for example: div, h1,h2,h3, p, ul, ol, dl {margin:0} And then assign each of these elements a different background and padding, so youll get a layout that looks like cell tables but its actually the very basic html just without margin... You can also look into other guy's pages and learn from their code, the most difficoult part (leaving client and server scripting apart) in standar web design is the css, for the html has to be pure, eliminate all formatting attributes from your code, like font, color, align, etc and leave the positioning and color to the magic of the css... Hope this helps... Good luck and good coding =D -10730

yes im very sorry! i changed the link to its actual finishing place:http://www.cucea.udg.mx/ pmicHad lot of trouble but here i am again, and theres the link that works

I did it all in fireworks html, it generates the code, the images and the scripts, i made it there becouse i ran out of time, but i put all the code into a single file which i will include in all the other files, so that i could update it later... yes i know... fireworks html is fast and cheap but not standard

Wait wait! im not complaining about firefox! i couldnt ever do it, but the fact is that for the very darn first time IE is actually showing the thing as i want it... I have a table inside a div, and i want the table to be right aligned, and IE6 does so (not the same for ie for mac though) but firefox keeps it to the left, the best thing i've achieved with this is a fixed position which does not look good while resizing...... ive also tried floating and even adding a wrapper... so i dont know what to do... this is the site: http://forums.xisto.com/no_longer_exists/ I think you should figure it out the way i want it, if you look it in Firefox and then in Internet Explorer... Also, as i have the time on my shoulders, i couldnt do a "more standars compliant and accesible" tools menu, so if you could also help me with a compliant menu made of these icons only, with a list markup (or whatever is most apropiate)... Thanks in advance!

Alright then... im trying it here: http://forums.xisto.com/no_longer_exists/ Thanks... here's the whole deal.. -10730

What exacly are you planning to do?

hehe... this is not a tutorial but good that it works for you, ill post all the css as Tyssen sugested me for you guys to know what im doing... CSS: div#main_menu {border-bottom:1px solid white;margin:0;font-size:1.1em;background:#2C4554;width:100%;padding:0 20px;}div#main_menu ul {padding:0;margin:0;list-style:none;}div#main_menu li {background:#2C4554;}div#main_menu ul a {width:100%;display:block;}div#main_menu ul a:link {color:white;text-decoration:none;padding:5px 0;}div#main_menu ul a:hover {background:#296081;}div#main_menu ul li {float:left;position:relative;width:10em;}div#main_menu li ul {display:none;position:absolute;top:1em;left:0;color:white;text-align:left;margin:0;font-size:.9em;}div#main_menu li ul a {color:white;width:100%}div#main_menu li ul a:link {padding:0;}div#main_menu li>ul {top:auto;left:auto;}div#main_menu li:hover ul {display:block;} The html is just a ul with several sub lists, but i know its good becouse its xhtml valid, besides i made it up with dreamweaver so the markup is good, the problem is that i want a background in this color behind ul... and the css is also good, i checked it with the validator... Thanks!

jlhaslip, im sorry i meant no offense, i am all the way working, i mean, while working in the file itself, i was seeking questions i was trying different things, just wanted to make clear that i did not see a pattern or something that i didnt know that actually helped me, not saying that you dont know, what i meant is that that particular thing didnt helped me to fix the particular issue, but i do apreciate everyones help and i know that im not only meant to sit back while some one does the job for me (though some people are willing to do so, and even i would offer that help if i can for other member)...I do apreciate your help and everyone elses, meant no offense... Im still working in it, just having difficoulties and sharing them here... Your other post about the span tags was also helpful, thanks ^_^Im not as good as id like to be, im trying and actually im learning.. and i thank you for helping me, i would only ask not to desperate with my questions ^_^Now i have a new topic with the same trouble, at least the 'pattern' and i havent figured it out...-10730

i dont know what happened, i did posted my content, anyway if a mod sees this can it be fixed? heres what i wanted to post: --> Hope you guys dont mind hehe, i now have another problem (as i did happen to solve the last one about floating)... This one is about a horizontal menu (based on sucker fish menu from ala (a list apart), inside a containing div... the html is like this: <div id="main_menu"> <ul> <li>Menu Item <ul> <li>...</li> <li>...</li> <li>...</li> </ul> </li> </ul> Basically, (of course, with aditional items) this is my menu... and the css: div#main_menu ul li {float:left;position:relative;width:10em;} And other stuff that sets the menu, but what i want is to add a consistent color for all the menu and of course, as some one told me in the last tread about the floating trouble, the floats are not in the normal flow of the document, so they dont have a reference of where to show its background... So unless i add a background to each li (becouse even the ul wont show a background), i cant have a color... And what i need is that the containing div (in this case, div#main_menu) shows a background for all the horizontal block where it displays the menu, so that it fits the wide window where its laid... Aditionally, i notice that by resizing the browser, this particular structure of menu, stops showing the content of the submenu if the window gets too small (horizontally), and the content is fit to the window, so its always showing all of the first menu items, dont know if you understand me, but i dont want the content to stay within the visual part of the browser, i want it to overflow vertically so that it can always show the submenu, if some one has done this tutorial or read it on the above link from a list apart i would apreciate... Thanks a lot!

No, one is floated left and the other is floated right, well that was before, now i changed the p for div, and only left the p#breadcrumb floated left and the other div just aligned right (text-align:right).And now it shows the background, and it does expands to contain them... In other words it got fixed, but by adding adicional divs, though i wanted to avoid it...Tyssen what i meant is that i had the next div with a rule that set it to "clear:both" so that it wont float anymore, and the normal flow of the document continues without floating...

My floats are cleared beyond this, its only floated for the element itself, whatever is under it is cleared so it doesnt stay floated...

Alright... I changed the p for div and it still doesnt work (and i left those paragraphs as anonymous, without living inside a p and its still valid...strict xhtml) But i dont know... i think it has to do with the floating...Yes, if i remove the second div the float:right, it shows my background color, let me see what i can do about this, ill try changing the alignment, the text-align property... Thanks! I will have to use divs anyway... but at least it workx ^_^ADDITION: But id like still to know if anyone could help me out with this... if some one knows how to achieve the background issue without using more divs, its most welcome... Thanks! Notice from BuffaloHELP: Edited as reported.

Does not help, either clearing cache and coding the solution, which dont has to do a lot with what i was doing:A div with two paragraphs inside, one is floated to the left and the other to the right. The solution you propose has only one div and floated to the right, not sure what principle can i apply that differs from what i already have, becouse that div should have the background, but the other div that is floated against it? And its not actually a div, its a p, i would like to do this with as less of divs as i can...Thanks!-10730