SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    display: table Layout/Grid

    Hi Guys,

    Ok this is my design currently...

    http://modocom.ca/miller/category/products/

    Now how difficult would it be to change it using same way the tables to this...

    http://modocom.ca/miller/newlayout.jpg

    Most of it I know I can do but the thing that throws me off is the black navigation area since in previous layout which I had already coded everything had row. Is this layout change something rather simple to do Paul O'B please let me know what you think, you helped me out last time.

    Thanks,

    Mike

  2. #2
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Ok I got most of it solved but need some help with a few things. Not sure if it is the most efficient way to solve it but here it is....

    http://modocom.ca/miller/versiontwo/

    As you will see the red continues much to far down doesnt line up with the grey border on the right. Whats best way to solve this?

    Also on Firefox you dont even see the red continue to the bottom of the website but do on Chrome and Safari not sure on IE but need that solved. OTherwise almost there.

    Thanks,

    Mike

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Mike,

    That basically looks like a single column page and a much simpler design than your other page. I would start again with a new basic structure and port your content into the new structure.

    The orange bar on the left could simply be a thick border on the wrapper; no need to do anything special for that.

    The black nav could be floated in the main section and dragged out to the side. It does depend on the dynamic and what the page is supposed to look like and wide and small widths and whether that black nav has to stay attached to the left browser edge and also overlap the orange segment at all widths. You could probably do that by just using :after and absolutely placing a black stripe out to the left and off into the distance.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Very roughly like this (6 minutes work):

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    #outer {
    	margin:0 100px;
    	border-right:1px solid #ef3125;
    	border-left:100px solid #ef3125;
    	min-height:100%;
    }
    #header {
    	min-height:150px;
    	background:#fff;
    	margin:0 -1px 0 -100px;
    	padding:1px 0;
    	position:relative;
    	text-align:center;
    }
    .top {
    	min-height:150px;
    	background:#ccc;
    	padding:1px 0;
    }
    .nav {
    	width:300px;
    	margin:0 0 0 -200px;
    	min-height:200px;
    	background:#000;
    	color:#fff;
    	float:left;
    }
    .content { margin-left:125px; }
    .inner {
    	width:100%;
    	float:right;
    }
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<div id="header">
    				<h1>Miller</h1>
    		</div>
    		<div class="top">
    				<p>Some more text</p>
    		</div>
    		<div class="nav">nav stuff</div>
    		<div class="content">
    				<div class="inner">
    						<p>Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum Lorem ispum </p>
    				</div>
    		</div>
    </div>
    </body>
    </html>

  5. #5
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I just updated it and got the red bar to go even with the bottom now.

    But still doesnt show on Firefox.

    If I start over again dont I need to record majority of it to get the similar structure. Which unfortunately don't have time right now as I'm presenting it to client this afternoon. I could however record afterwards I suppose but just need this working in firefox. Also in Future we may end up using those columns for stuff.

    So if you could give me hand on how to get it towork in Firefox with red bar going all way down that would be great. I got set nav to absolute and it got rid of the long red bar so that part is done just need it to work correctly in Firefox.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    You have the heights set to 200px and they should be 100%.

    Code:
    .table-mid .table-cell {
        height: 100%;
    }
    However, as I said above that structure is wasted on that layout as it can be so simple now. It will cause you problems later when you have to manage it because there are so many redundant elements now.

  7. #7
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    I will begin to implement that over the weekend, but would you be able to help me with just getting other one working in firefox just so dont have to restyle a bunch lol

    Ooops you already replied. Thanks, yes I'll change it over to the simplier one over the weekend and just use this one for presentation.

    The red in Firefox still doesnt seem to go to the bottom though.

  8. #8
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    So I deleted the old one and implemented the new one, the simplier solution which you provided...

    http://modocom.ca/miller/versiontwo/

    Much easier to work with only issue is that now the red bar and the grey border doesnt extend if the viewer is scrolling.

    How can I resolve this?
    Thanks,

    Mike

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Did you contain the floats

    Code:
    #outer:after{
    clear:both;
    content:" ";
    display:block;
    height:0;
    visibility:hidden;
    }


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
  •