Forum Moderators: not2easy
For example, one page has a list of 15opx-wide images with a small, linked caption. In order to get these lined up, I have had to resort to using tables everywhere (also to restrict the width as the content area is approximately 570px wide. Is there a better way? (I have used DreamWeaver to create tables, then convert to layers when I publish, but this is ungainly and means that you have to re-arrange layers to add new content above)
Thanks all,
-ZBeauvais
First you need to know about the CSS box model...
[w3.org...]
border + magin + padding + width = total width
border + margin + padding + height = total height
In CSS3 there will be an option to reverse this (so if you set the width to 500px the other properties will not add to the 500px but this isn't the case now.
You'll also need to make use of float and clear.
Here is an idea of potential values for the following properties...
border: 0-?px, solid-dotted-dashed, #000-#fff
clear: left-right-both-none
float: left-right-center-none
height: 0-?px, 0-100%
margin: negative values allowed, -10px, -10%, 10%, 10px
padding: 0-?px, 0-100%
width: 0-?px, 0-100%
When you float a divisible element it's width is no longer 100%. When a divisible element is not floated it automatically takes up 100% of the available width.
When you float say a #main div but want a sidebar on the right you can give the #main div 200px of right padding. You'd give it 100% width to compensate for the float's width removing effect. That will push it's content from going all the way to the right. Float the #side divisible element to the left. I use background colors to make it easier to see where everything is.
You can also use negative margins to position things when you need to fix it here or there but really can't use normal positioning.
Keep in mind that you also need to understand each element's display. Most elements are displayed as block or inline elements. A div (divisible element) is a block element and the span is it's counterpart inline element. Think of block elements as structural elements in a sense and inline elements as the content of the page the visitor will see. Using the same CSS properties on an inline element will have differing effects then using them on block elements.
I'm not sure exactly what you're looking for though I hope this helps your basic understanding.
If all else fails just post a table version of what you want to do tableless and we can help translate it for you. Best of luck and have fun!
- John
As far as I am aware, whenever I update the content, it places it within a div tag, and I don't have access to the whole site except through this interface. The source of the page I modify looks like:
<div>
<div id="ContentDIV" style="position: relative; width: 581px; left: 165px; top: 316px; z-index: 100;">
I then have content I update (which I usually place within my own layer divs for layout)
My problem is that the entire site's content is within these divs, so if I then use tables to arrange my content within the 582px I have to play with, it is buried within the source so far as to make SEO potentially bad. So if I have content which needs laid out in columns, the only thing I can do is create a table in DreamWeaver, convert tables to layers and post the html into PageBuilder... which takes ages and sometimes has less-than desirable outcomes (layers everywhere in IE6 sometimes!) not to mention that converting layers to tables in order to add new content is frighteningly bad!
Also, does anyone know why .NET sites seem to have very long source code? The source of my site is 2347 lines long, just for the default.aspx! Is this excessive?
If I get you right.. I would say that your best option is to stick with tables for alignment but keep them as simple as is humanly possible (no nests) just work with single 580px wide tables. That content div sounds like it's nested so deep that it's not going to matter for SEO purposes what you do inside it.
As you say even if you try to convert to a CSS version (of your content) using floats and positioning could potentially be a nightmare - you would need to somehow isolate/insulate your content - nest your own wrapper div? - first off (position relative; so you can base your own positioning) - and then insert your own CSS? can you use your own stylesheet or would it have to be inline, then you'd have to watch for conflicts with existing CSS .
I can imagine if you're working with 2000+ lines of source to debug any actual layout errors (within your content div) would potentially be a nightmare and even if found might relate back to the original layout or tag soup code errors? (not saying they're there just trying to envisage what might be) - run some of the existing pages through the HTML validator [validator.w3.org] if there is loads of errors I wouldn't even try to inject CSS into the content area, you could be fighting the machine, you could instead keep a copy of your projects and CSS them as a learning exercise for a future date?
Any chance of you getting to work with the Dev team, perhaps your knowledge of how things could be better might help them slim down their application code. You don't have to know ASP and the don't have to know CSS/SEO ;)
Sorry, this sounds like a bit of minefield for you
Suzy
We're not on the best of terms with our developers, unfortunately. And, I am not enough of a developer to tell them what's wrong. None of our pages validate (with the default.aspx returning 281 errors!) though I don't know if any .NET site will validate.
I wanted to get away from tables because the site loads slowly enough as is, and I don't know if it is SEO optimised. It's hard to tell, because we got the jump in our area of industry because we're one of the few in our area with a decent (ish) site, so we come out fairly high on Google (but we would, as it's a fairy niche industry of not-very-web-savvy supporters.
Thanks, though. I guess I will use tables where I need.
-Zbeauvis
