SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot ShinoKage's Avatar
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with "cell" widths

    Okay, so I am finally working on my portfolio (and I'm having issues, how ironic); in any case, I am using divs as tables (I have no idea how to word that properly), and everything was going smoothly until I added an image to one of the cells....

    http://www.twilightmisfit.com/Problem.jpg

    I had to insert the wooden spoon handle in the next col as an image to get it to appear how I want, which worked fine except now the col that it's in became way too wide and I don't know why or how to fix it....

    Help please!
    Code HTML4Strict:
    <body>
    <div id="mainwrapper">
    	<div id="maincontentrow">
    		<div id="leftcol">
    			&nbsp;
    		</div>
     
    		<div id="maincontentcell">
            	<img src="images/backgrounds/mixingbowl_handle.png" alt="" id="woodenspoon" />
     
            	<div id="maincontent">
    				<h1>Welcome</h1>
    				<p>Main content here</p>
                </div>
     
    		</div>
     
    		<div class="nav">
    			<ul class="nav">
    			<li><a href="#">Home - block style</a></li>
    			</ul>
    		</div>
     
    		<div id="rightcol">
    			&nbsp;
    		</div>
     
    	</div>
    </div>

    Code CSS:
    #mainwrapper
    {
    	display: table;
    	background-image: url(../images/backgrounds/countertop.png);
    	background-repeat: repeat;
    	width: 100%;
    	height: 680px;
    	max-height: 680px;
    }
     
    #maincontentrow
    {
    	display: table-row;
    }
     
     
    #leftcol
    {
    	display: table-cell;
    	background-image: url(../images/backgrounds/mixingbowl.png);
    	background-repeat: no-repeat;
    	width: 250px;
    }
     
    #woodenspoon
    {
    	padding-top: 30px;
    }
     
    #maincontentcell
    {
    	width: 300px;
    }
     
    #maincontent
    {
    	display: table-cell;
    	width: 248px;
    	max-width: 300px;
    	height: 296px;
    	padding-left: 19px;
    	padding-right: 22px;
    	padding-top: 21px;
    	padding-bottom: 55px;
    	background-image: url(../images/backgrounds/papersheet.png);
    	background-repeat: no-repeat;
    	overflow: auto;
    }
     
     
    /* NAVIGATION STUFF */
     
    div.nav
    {
    	display: table-cell;
    	width: /* fixed width to be determined - padding */;
    	padding: 5px;
    	background-image: url(recipiecard-image-here);
    	background-repeat: no repeat;
    }
     
    ul.nav
    {
    	list-style-image: url(LInav-image-here);
    }
     
    ul.nav a
    {
    	display: block;
    	width: /* fixed */
    	text-align: left;
    }

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,269
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Welcome to the wonderful world of "using tables for layout".

    Simply changing table tags to other elements and using CSS to render them as table elements isn't going to avoid the layout issues associated with using tables for layout (although it may be better for accessibilty I suppose).

    I know you can use nested tables, colspan and rowspan with tables.
    And I guess you could use CSS to mimic the effect here.

    But why? IMHO you should consider scrapping the "display as table" stuff and go with an elastic/fluid design instead.

  3. #3
    SitePoint Zealot ShinoKage's Avatar
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay....

    1 - not helpful
    2 - I'm doing it this way because this is how I want it to look. If you have an actual suggestion for getting this to display how I want it to, that would be great.

    This is what it's suppose to look like: http://www.twilightmisfit.com/comp.jpg

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,269
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Sorry, because you posted in Web Page Design I thought you were looking for alternatives to using tables for layout.

    Hence my helpful suggestion - don't!

    Personally I have very little patience with using tables for anything other than tabular data. Perhaps mainly because of problems similar to what you're experiencing.

    But if you're set on this technique, I can help by moving the thread to the CSS forum. Hopefully someone with more experience with banging tables into shape will be able to help get things straightened out for you.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hi, the problem is that you are trying to do this as tables correct? Thus meaning these 3 elements need display:table-cell
    #leftcol
    #maincontentcell
    .nav
    (and I guess #rightcol)

    Now, exclusing #rightcol (to make my point ) which element doesn't have display:table-cell set? See spoiler below
    #maincontentcell

    Just set display:table-cell and it should patch up (I don't know if there was anything else you wanted )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Zealot ShinoKage's Avatar
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    But if you're set on this technique, I can help by moving the thread to the CSS forum. Hopefully someone with more experience with banging tables into shape will be able to help get things straightened out for you.
    Thank you -- that was very much appreciated ^_^ I'm new here (obviously) so I wasn't exactly sure where this thread should go x.x

  7. #7
    SitePoint Zealot ShinoKage's Avatar
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan -- thank you. Now I just feel like an idiot.... I was changing the properties of one of the divs and adding another and totally forgot to change that display: table-cell to the correct div.

    Well, at least it was an easy fix.

    Thanks.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Don't feel like an idiot-it's easy to overspot something like that .

    You're welcome.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

Bookmarks

Posting Permissions

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