Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Replace table with div error

    So I've scanned many of the posts in this forum, and I've done some searching, but I've not run across the answer to this problem. I am reasonably sure it is something incredibly simple, but I am not able to see it!

    Here's the situation:
    I have a header that's contained within a div. It used to be a table, but i've gone through the typical process of converting everything to CSS.
    Here is the page as I want it to look: http://resweek.tamu.edu/index-play2s.html
    Here is the page with the div: http://resweek.tamu.edu/index-play3s.html
    As you can see, with page using the div, the image pokes out the bottom of the header. I've explicitly set the height and width of the replaced element as I am supposed to do. I have also set an alignment so that the img and text will fit on one line.
    Please note that I am not an artist, someone else will come in and fix that, so comments on color choices will be useless to me. Also note that the gray background is only to make it easy to see the mistake.
    So here's the relevant parts of my HTML code (condensed):
    Code:
    <table id="titlebackground">
    	<tr>
    		<td><img src="/pics/r.gif" alt="Resweek logo" height="75" width="75"></td>
    		<td width="100%">
    			<div id="titleheading">Welcome</div>
    		</td>
    	</tr>
    </table>
    
    <div id="titlebackground">
    	<img src="/pics/r.gif" alt="Resweek logo" height="75" width="75" align="left">
    	<div id="titleheading">Welcome</div>
    </div>
    And here's my css code:
    Code:
    /*	Title Bar  */
    #titlebackground {
    	background-color: #98c3fe;
    	margin: 6px 6px 3px;
    	border: 1px solid #3a6ea5;
    }
    
    #titleheading {
    	text-align: center;
    	font-size: 40px;
    	color: #104e8b;
    }
    Clearly I am forgetting something important on the div. The table renders exactly as I would like it to do. What must I do to get the div to look like the table?

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your problem is with floating, though you don't know it because you're not properly seperating your presentation from your structure.

    On your <img /> you have the align attribute set to "left". This is, to my understanding, effectively equivalent to using the CSS property "float" and setting its value to "left". Remove the align attribute from your <img /> element and apply the float property with your CSS.

    Then, I believe you'll find that your issue lies with *clearing* the float. The sidebar and your main content area need to clear the floated image instead of wrap around it like they should in the absence of any declaration of the "clear" property.

    This is one of the trickier notions in CSS, but it's really not that complex. I believe many have found this an excellent resource regarding floats: http://css.maxdesign.com.au/floatutorial/

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ]|V|[agnus
    Your problem is with floating, though you don't know it because you're not properly seperating your presentation from your structure.
    First, thank you for your extremely quick response (<10 min! ).
    I don't understand what you mean by seperating presentation from structure. I've heard it mentioned before, but I don't understand why that's important, especially dealing with a medium like the web. Disregarding the table down below in the content area (I've yet to fix it), what can I do to seperate the two?

    Ok so I've put float: left on the image, but it moved the title down to the next line. Do I need to float that as well? The tutorial says I have to explictly declare a width (which I don't want to do so it will scale out to the end of the browser width).
    See: http://resweek.tamu.edu/index-play4s.html
    Code:
    <div id="titlebackground">
            <img src="/pics/r.gif" alt="Resweek logo" id="titlelogo" />
            <div id="titleheading">Welcome</div>
    </div>
    
    /*	Title Bar  */
    #titlebackground {
    	background-color: #98c3fe;
    	margin: 6px 6px 3px;
    	border: 1px solid #3a6ea5;
    }
    
    #titlelogo {
    	float: left
    	height: 75px;
    	width: 75px;
    }
    
    #titleheading {
    	text-align: center;
    	font-size: 40px;
    	color: #104e8b;
    }

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Seperating structure and presentation is fairly simple, really. Consider your initial example using the align attribute on your <img />. What does that attribute specify? A visual rendering. That falls under the umbrella of presentation.

    The <img /> tag itself is a part of the structure. This refers to the markup which is saying "this data is a heading, this data is a paragraph, this data is a list, etc."

    Seperating the two has many benefits which it'd take more than this brief response to adequately cover, but I can lay it out generally and leave it up to you to pursue it further. First off, when you start removing all of those presentational attributes and tags from your markup, what happens to the size of that file? It of course gets smaller. Furthermore, that code is a lot more mangeable and understandable now. It's very clear at a glance what the *structure* of the document is.

    So, let's then say that you've got all your presentation seperated into stylesheets. Now that layer is also much more manageable, but also remember the power of stylesheets: if you wanted to change how that image in your banner behaves, for example, you'll now only have to change that preference in ONE spot: your stylesheet. The way you had it, you would have had to change it on every page.

    That is not the best example, because something like a page banner would do well to be put in a server-side include which would make that area updateable sitewide through a single file, but... hopefully you can understand the concept and extrapolate it to other instnaces.

    I should probably have used a better example though... I gotta get back to work however, but I'm sure some others will chime in on this topic throughout the rest of the day.

    ***

    As for your specific problem here, again I am busy so I only glanced at it, but I'm not sure why that title is going to a new line either. You shouldn't have to float it.

    Again, I'm sure somebody else will come to your aid. If not, I will check back later.

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Separating presentation from content:

    This is essentially removing all presentational attributes from tags (i.e. color, bgcolor, height, width, background images, alignment, borders, ....) and not using tables for an easy-to-create layout (forums are an example of appropriate table use).

    Basically, you should only use tables for a list of data, such as an order form where you see several people's names, products they ordered, how many of each product they ordered, etc. You should NOT use tables for positioning items on your site, unless you have way too many areas to position via CSS. An example:

    You have 5 small boxes on the left, 3 areas in the center, and 3 medium boxes on the right.

    That would be quite difficult to position using CSS (if you are concerned about other resolutions, operating systems, and browsers). Tables would be acceptable in such a case.

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    One quick thing: content and structure are *not* interchangeable terms.

    Structure *structures* the content.
    Presentation *presents* or *transforms* the content in a certain form.

    <h1>Primary Heading</h1>

    The <h1> tags are the structure, "Primary Heading" is the content.

    ***

    Also, it is debateable whether or not tables are ever acceptable for layouts. Some, myself included, would argue that a web design that requires a table-based layout is actually a *bad* and *inappropriate* web design because it violates the tenets of seperation. This is a situation which we don't really need to create at this point in the game. CSS support is still far from universal, but it is such that table-based layouts can be discarded. It may require an adjustment in your thinking about web design, but it can and should be done.

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's true. Sorry about that.

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://offtone.com/scripts/resweek.html

    I was bored...

    Fairly straightforward, really. And it's more structural.

    Let me know if there's anything about you'd like explained. I realise it's a terrible way to teach, just to do it for you... But I reckon you'll learn by reading the source.

  • #9
    New Coder
    Join Date
    Oct 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for your help, and no I am not like many other people that would just take and use what you're done. I am trying to learn and the best way is to look at code that works and works well.
    Regarding your fixings of my page (and please keep in mind I'm not fluent in CSS yet):

    1. Why replace the anchors with an unordered list? Is it just cleaner/more semantic in meaning? Or is it because they are already block elements? I imagine you saw me cast the anchors into block elements.

    2. I can't remember what the h1, #sidebar rule will do, I'm thinking it is "a #sidebar following an h1." If so, why did you not just put them all into #sidebar so they won't be fragmented? Why split it up?

    3. What are letter-spacing and list-style-type and are they completely cross-browser? Forgive my suspicion, but I am desperately trying to avoid using hacks of any kind.

    4. The logo looks good, and it solves the previous issue completely, so thank you for that. It also has the benefit of properly centering the title, not having it offset a tiny bit by 1/2 the width of the logo.

    In addition to previous issues, I now have yet another issue. I noticed that several of my tables under IE 6 (all I've tested so far) are improperly formatted. It appears that IE adds space in the table until it is below the left sidebar. Take a look at http://resweek.tamu.edu/login.php. Now compare to http://resweek.tamu.edu/schedule.php, which is formatted properly (on my browser). The difference is that the login has tags before the table begins in the content div, and the schedule does not. Is this a bug I can go look up a fix (argh!) somewhere? The places I've looked I've not found this particular bug.

    Thank you guys so much for your help, where would we be without it? (up a creek )

  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    1. You got it: the unordered list is more semantic.

    2. The h1,#sidebar {...} rule basically says "apply these properties to each item in this comma delimited list." So, all properties will be applied to both h1 and #sidebar. For "h1 followed by #sidebar", well, you can't really say that with CSS selectors. You *could* say "#sidebar that follows h1" which would look like this: h1+#sidebar {...}

    3. Letter-spacing adjusts the space between individual letters. Note that the space is always inserted after each letter, not before or on both side. List-style-type controls the type of bullet the list's items will have.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •