SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: making columns

  1. #1
    SitePoint Addict BaptistKitty's Avatar
    Join Date
    Feb 2006
    Location
    North Idaho
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question making columns

    http://ld34.inmotionhosting.com/~blm...rock/tan3.html

    ok, before I start, I haven't checked this page in FF yet (I'm dreading it) since my work comp doesn't have it... I hope it looks ok in it...

    anyway, the two green boxes in the middle are supposed to be a right and left column... I can't seem to figure out how to get them side by side... What am I doing wrong

    Code:
    html, body { 
    	min-height: 100%; /*Sets the min height to the 
    	height of the viewport.*/ 
    	width: 100%; 
    	height: 100%; /*Effectively, this is min height 
    	 for IE5+/Win, since IE wrongly expands 
    	 an element to enclose its content. 
    	 This mis-behavior screws up modern  
    	 browsers*/ 
    	} 
    
    #wrapper { 
    	min-height: 100%; /*Sets the min height to the 
    	height of the viewport.*/ 
    
    	height: 100%; /*Effectively, this is min height 
    	 for IE5+/Win, since IE wrongly expands 
    	 an element to enclose its content. 
    	 This mis-behavior screws up modern  
    	 browsers*/ 
    	} 
    
    html>body, html>body #wrapper { 
    	height: auto; /*this undoes the IE hack, hiding it 
    	 from IE using the child selector*/ 
    	} 
    body{
    	background: url(greytanback2.bmp) repeat-y center;
    	background-color: #ffffff;
    	margin: 0px;
    	padding-bottom: 100px;
    	scrollbar-face-color: ffffff; 
    	scrollbar-track-color: ffffff; 
    	scrollbar-arrow-color: aaaaaa; 
    	scrollbar-shadow-color: ffffff; 
    	scrollbar-darkshadow-color: eeeeee; 
    	scrollbar-3dlight-color: ffffff; 
    	scrollbar-highlight-color: ffffff;
    	scrollbar-base-color: ffffff;
    	}
    
    #wrapper { 
    	position: absolute; 
    	top: 0; 
    	left: 50%;
    	border-width: 0px; 
    	border-style: solid; 
    	border-color: blue; 
    	width:714px;
    	margin-left: -358px; /*set to a negative number 1/2 of your width*/
    
    	} 
    
    #toppic{
    	background: url(greytantop2.bmp) center;
    	font-family: verdana;
    	font-size: 60%;
    	color: #ffffff;
    	text-transform: uppercase;
    	letter-spacing: 5px;
    	font-stretch: condensed;
    	font-variant: small-caps;
    	font-weight: bold;
    	text-align: center;
    	position:absolute;
    	top: 0px;
    	left: 50%;
    	width:714px;
    	height:35px;
    	margin-left: -358px; /*set to a negative number 1/2 of your width*/
    	border: 0px solid #ccc;
    	overflow: hidden;
    	}
    
    #bottompic{
    	background: url(greytanbottom2.bmp) center;
    	font-family: verdana;
    	font-size: 60%;
    	color: #ffffff;
    	text-transform: uppercase;
    	letter-spacing: 5px;
    	font-stretch: condensed;
    	font-variant: small-caps;
    	font-weight: bold;
    	text-align: center;
    	position:absolute;
    	bottom: -2px;
    	width:714px;
    	height:35px;
    	border: 0px solid #ccc;
    	overflow: hidden;
    	left: 50%;
    	margin-left: -357px; /*set to a negative number 1/2 of your width*/
    	border-width: 0px; 
    	border-style: solid; 
    	border-color: red; 
    	}
    
    #head{
    	background: url(redplaid.bmp);
    	font-family: verdana;
    	font-size: 60%;
    	color: #ffffff;
    	text-transform: uppercase;
    	letter-spacing: 5px;
    	font-stretch: condensed;
    	font-variant: small-caps;
    	font-weight: bold;
    	text-align: center;
    	position:absolute;
    	top: 40px;
    	left: 50%;
    	width:652px;
    	height:121px;
    	border: 0px solid #ccc;
    	overflow: hidden;
    	}
    
    #main { 
    	margin-bottom: 3em; /*Modify value as needed for footer height.*/ 
    	height: auto; 
    	padding: 1.5em 2.5em; 
    	text-align: center;
    	border-width: 0px; 
    	border-style: solid; 
    	border-color: green; 
    	} 
    
    #left { 
    	align: left;
    	margin-bottom: 3em; /*Modify value as needed for footer height.*/ 
    	height: auto;
    	width : 300px;
    	padding: .5em .5em; 
    	text-align: center;
    	border-width: 1px; 
    	border-style: solid; 
    	border-color: green;
    	position: relative;
    	} 
    
    #right { 
    	align: right;
    	margin-bottom: 3em; /*Modify value as needed for footer height.*/ 
    	height: auto; 
    	width : 300px;
    	padding: .5em .5em; 
    	text-align: center;
    	border-width: 1px; 
    	border-style: solid; 
    	border-color: green;
    	position: relative;
    	} 
    
    #menu{
    	font-family: verdana;
    	font-size: 100%;
    	overflow: auto;
    	position:absolute;
    	top: 161px;
    	left: 50%;
    	width:652px;
    	height:65px;
    	margin-bottom: 100px;
    	padding: 10px;
    	border: 0px solid #ccc;
    	background: url(back.bmp);
    	border-right: 0;
    	line-height: 1.0cm; 
    	}
    
    #text{
    	text-align: justify;
    	font-family: verdana;
    	font-size: 90%;
    	overflow: auto;
    	position:absolute;
    	top: 226px;
    	left: 50%;
    	width:652px;margin-bottom: 100px;
    	padding: 10px;
    	border: 0px solid #ccc;
    	background: url(back.bmp);
    	border-left: 0;
    	}
    
    .bottomlinks{
    	font-family: verdana;
    	font-size: 60%;
    	color: #cccccc;
    	text-transform: uppercase;
    	letter-spacing: 5px;
    	font-stretch: condensed;
    	font-variant: small-caps;
    	font-weight: bold;
    	text-align: center;
    	}
    
    .menutitle{
    	text-decoration: underline;
    	}
    HTML Code:
    <body>
    	<div id="toppic">
    		<img src="greytantop2.bmp" />
    	</div>
    
    	<div id="wrapper"> 
    		<div id="main"> 
    			<img src="logo.jpg"  />
    			<br />
    			<img src="sand2.gif" style="filter:alpha(opacity=100);-moz-opacity:1" onMouseover="makevisible(this,1)" onMouseout="makevisible(this,0)" />
    			<img src="rock2.jpg" style="filter:alpha(opacity=100);-moz-opacity:1" onMouseover="makevisible(this,1)" onMouseout="makevisible(this,0)" />
    			<img src="topsoil2.jpg" style="filter:alpha(opacity=100);-moz-opacity:1" onMouseover="makevisible(this,1)" onMouseout="makevisible(this,0)" />
    			<img src="gravel2.jpg" style="filter:alpha(opacity=100);-moz-opacity:1" onMouseover="makevisible(this,1)" onMouseout="makevisible(this,0)" />
    			<img src="sand.jpg" style="filter:alpha(opacity=100);-moz-opacity:1" onMouseover="makevisible(this,1)" onMouseout="makevisible(this,0)" />
    			<br />
    			<div id="left">
    				LLorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas fringilla posuere dolor. Praesent pulvinar orci a velit. Curabitur rhoncus erat non ante. Fusce congue, lacus venenatis porta vulputate, dui odio volutpat nulla, eget vehicula odio ante ut arcu. Aliquam erat volutpat. Etiam neque. Suspendisse potenti. Quisque ut lacus nec felis bibendum viverra. Duis sed lorem. Ut libero eros, faucibus eu, pellentesque non, aliquam ut, enim. Nulla lacinia massa id sapien. Proin viverra varius velit. Curabitur quis augue. Donec elementum. Proin vel quam sit amet neque congue ornare. Pellentesque odio risus, molestie ac, sagittis sed, condimentum a, est. Quisque suscipit lobortis ipsum. 
    			</div>
    			<div id="right">
    				RLorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas fringilla posuere dolor. Praesent pulvinar orci a velit. Curabitur rhoncus erat non ante. Fusce congue, lacus venenatis porta vulputate, dui odio volutpat nulla, eget vehicula odio ante ut arcu. Aliquam erat volutpat. Etiam neque. Suspendisse potenti. Quisque ut lacus nec felis bibendum viverra. Duis sed lorem. Ut libero eros, faucibus eu, pellentesque non, aliquam ut, enim. Nulla lacinia massa id sapien. Proin viverra varius velit. Curabitur quis augue. Donec elementum. Proin vel quam sit amet neque congue ornare. Pellentesque odio risus, molestie ac, sagittis sed, condimentum a, est. Quisque suscipit lobortis ipsum. 
    			</div>
    			<br />
    			<p class="bottomlinks">
    				<br />
    				<br />
    				link 1 ~ link 2 ~ link 3 ~ link 4 ~ link 5
    			</p>
    			<br />
    			
    		</div> <!-- end main --> 
    		<div id="bottompic"> 
    			<img src="greytanbottom2.bmp" />
    		</div> <!-- end footer --> 
    	</div> <!-- end wrapper --> 
    </body>

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    You don't want to use absolute positioning here, now the 'float' property is somewhat of a mystical voodoo thing when you are beginning with CSS but it's what's best here.

    Code:
    #left { 
    	float: left;
    	width : 300px;
    	padding: .5em .5em; /* This will break the layout when you increase the font size, you should apply padding to the things inside the column - not the column itself.  An extra div perhaps */
    	text-align: center;
    	border: 1px solid green; /* shorthand */
    } 
    
    #right { 
    float: right;
    	width : 290px;  /* The columns were two big, because of margins/padding so one was above the other. */ 
    	padding: .5em .5em; /* same as above */
    	text-align: center;
    	border: 1px solid green; /* shorthand */
    } 
    
    .bottomlinks{
    clear: both; /* This make the links appear below the floated content */  
    	font: bold 60% Verdana, Arial, Helvetica, sans-serif; /* shorthand */
    	color: #CCC;
    	text-transform: uppercase;
    	letter-spacing: 5px;
    	font-stretch: condensed;
    	font-variant: small-caps;
    	text-align: center;
    }

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I thought I would elaborate further on
    Code:
    padding: .5em .5em; /* This will break the layout when you increase the font size, you should apply padding to the things inside the column - not the column itself.  An extra div perhaps */
    Here's what I would have..
    Code:
    <div id="left">
      <div>
        <!-- content goes here -->
      </div>
    </div>
    You would remove all the margin and padding from #left and add it to #left div
    Code:
    #left div {
      padding: .5em;
    }

  4. #4
    SitePoint Addict BaptistKitty's Avatar
    Join Date
    Feb 2006
    Location
    North Idaho
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the help! I sorta understand the concept of the float, but the usuage is still kinda hard to figure out... the clear thing makes it make more sence though. I am wondering though, whats the reasoning for putting the padding on #left div instead of just #left since #left is on a div...?? Also you changed the #cccccc to #ccc... does that make any difference in anything? or is it just a shorter way of writing it?

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi there,

    Floats
    It might be best to read the FAQ at the top of the CSS forum for all the necessary info on floats. I understand them but I am having trouble describing them..

    The reason I said that the way you had the padding would break the layout was because -
    The width of an element is equal to it's width + padding + border
    So in your case because you were using ems as a unit for padding the width of padding would increase/decrease with the font size, hence the width of the columns would increase and decrease as well.
    Having an inner div means that anything stuffed in there will not effect the width of the column. You can add your padding to this inner div without effecting the parent column width.

    When the colors are in groups of 2 e.g. #2255AA, #EECCEE they can be shortened like #25A, #ECE

  6. #6
    SitePoint Addict BaptistKitty's Avatar
    Join Date
    Feb 2006
    Location
    North Idaho
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4
    Hi there,

    Floats
    It might be best to read the FAQ at the top of the CSS forum for all the necessary info on floats. I understand them but I am having trouble describing them..
    no prob
    Quote Originally Posted by markbrown4
    The reason I said that the way you had the padding would break the layout was because -
    The width of an element is equal to it's width + padding + border
    knew that
    Quote Originally Posted by markbrown4
    So in your case because you were using ems as a unit for padding the width of padding would increase/decrease with the font size, hence the width of the columns would increase and decrease as well.
    ummm ok, I'm not sure what an em is, I usually use pixels.. would pixles be better then? especially if em's change size
    Quote Originally Posted by markbrown4
    Having an inner div means that anything stuffed in there will not effect the width of the column. You can add your padding to this inner div without effecting the parent column width.
    so, the padding was supposed to be on the inner div? because its not... its on the div with the id left which is the outer one... thats why I was wondering why you said to take it out of #left and put it in #left div when its the same...
    Quote Originally Posted by markbrown4
    When the colors are in groups of 2 e.g. #2255AA, #EECCEE they can be shortened like #25A, #ECE
    right. any reason?

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    The em unit is usually only used for sizing text. 1em is equal to the height of the upercase m at the current font size. If you use pixels for the paddings there is no need for an inner div - you will just need to cater for the width by subtracting from the column width.

    so, the padding was supposed to be on the inner div? because its not... its on the div with the id left which is the outer one... thats why I was wondering why you said to take it out of #left and put it in #left div when its the same...
    #left div {} is not the same as #left {}
    #left div {} these styles will get applied to any div within an element with the id="left"

    right. any reason?
    That's 3 whole bytes man!

  8. #8
    SitePoint Addict BaptistKitty's Avatar
    Join Date
    Feb 2006
    Location
    North Idaho
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4
    Hi,

    The em unit is usually only used for sizing text. 1em is equal to the height of the upercase m at the current font size. If you use pixels for the paddings there is no need for an inner div - you will just need to cater for the width by subtracting from the column width.
    hmmm... ok....
    Quote Originally Posted by markbrown4
    #left div {} is not the same as #left {}
    #left div {} these styles will get applied to any div within an element with the id="left"
    it is?!?! ok... I'll have to remember that.... #left.div might have been what I was thinking then.... where it only is applied to a div that has the id of left...
    Quote Originally Posted by markbrown4
    That's 3 whole bytes man!

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    it is?!?! ok... I'll have to remember that.... #left.div might have been what I was thinking then.... where it only is applied to a div that has the id of left...
    That's not quite right either..

    #left div ul li a {}.. the part before the curly braces is the selector
    Now when there are spaces in between the words then it is inherited.

    e.g. the styles would apply to any links within a li within a ul within a div within another element with id="#left"
    if a word has a dot in front it is a class,
    so..
    ul#nav li.selected a {}
    Styles would apply to all anchors within a li IF the li has a class="selected" AND it is within an unordered list with id="nav"

    yeah ?

  10. #10
    SitePoint Addict BaptistKitty's Avatar
    Join Date
    Feb 2006
    Location
    North Idaho
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow... thats kinda confusing!

    so with the second one it would have to look like this:

    Code:
    <ul id="nav">
    <li class="selected">
    <a...>
    </li>
    </ul>
    so, and anchor is what you call an a? I always just called it an 'a href' lol

    thats kinda crazy but could be useful....

    I know I've seen something else though that connects them in some way.... I guess it doesn't matter....

  11. #11
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    yep, correct.
    Code:
    <ul id="nav">
      <li class="selected"><a href="">text</a></li>
    </ul>
    It's very useful to be able to specify your CSS in this way, you can really target the elements you want to specifically style. Though, it can be confusing at first.

  12. #12
    SitePoint Addict BaptistKitty's Avatar
    Join Date
    Feb 2006
    Location
    North Idaho
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for real!

    Thank you so much for all the help! you've been awesome!

  13. #13
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Cheers,


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
  •