PDA

View Full Version : How to Adjusting column width and height?


youdw
05-30-2010, 01:33 AM
Can you please tell me where in either the HTML or CSS to adjust the width of the right column so that it is narrower? Please be specific because everytime I adjust the left or right columns in the CSS whether with the .em or px, it shifts the whole cell over and I liked to keep the cells the lined up with the logo width but only the right column be narrower.

I am new to all this so am having trouble. Thanks


HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="file:///C|/Users/HP/Desktop/WIP/delete.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="container">
<div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="180" height="90" id="Insert_logo" style="background: #C6D580; display:block;" /></a>
<!-- end .header --></div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.</p>
<p>If you would like the navigation along the top, simply move the ul.nav to the top of the page and recreate the styling.</p>
<!-- end .sidebar1 --></div>
<div class="content">
<h1>Instructions</h1>
<p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
<h2>Clearing Method</h2>
<p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a &lt;br class=&quot;clearfloat&quot; /&gt; or &lt;div class=&quot;clearfloat&quot;&gt;&lt;/div&gt; after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
<h3>Logo Replacement</h3>
<p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
<p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
<p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
<h4>Backgrounds</h4>
<p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
<!-- end .content --></div>
<div class="footer">
<p>This .footer contains the declaration position:relative; to give Internet Explorer 6 hasLayout for the .footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
CSS
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}

/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background: #ADB96E;
}

/* ~~ These are the columns for the layout. ~~

1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.

3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.

4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.

*/
.sidebar1 {
float: right;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {

padding: 10px 0;
width: 780px;
float: right;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #ADB96E;
color: #FFF;
}

/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

gentleone
05-30-2010, 08:10 AM
The total width of your container is 960px, so if you adjust the widths of your sidebar and/or content columns their widths together should be always 960px.

.container {
width: 960px;
background: #FFF;
margin: 0 auto;
}

The right column is the #content div, so if you want to make that narrower with for example 100px, than you'll have to add up that 100px to your left column, the #sidebar div.
.sidebar1 {
float: right;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: right;
}

youdw
05-30-2010, 04:43 PM
Sorry to ask you for help on another code, but how about here? Where do I adjust the column widths only while keeping the size of the entire table and how? How do I adjust the entire table size and how. Thank you so much in helping me understand. If you need the HTML too, let me know.

THE CSS



/* ===== global styles ===== */

body {
font-family: "Trebuchet MS", sans-serif;
background: #bbb url(../images/page_background.jpg);
margin: 0; /* shorthand for all margins = 0 */
padding: 0;
}

p, h1, h2, h3, h4, h5, h6, li {
margin: 1ex 1em;
}

table {
margin: 0;
padding: 0;
border-spacing: 0;
text-align: left;
}

td, tr {
margin: 0;
padding: 0;
vertical-align: top;
}

/* ===== outer table ===== */

#outerTable {
margin: 0 auto; /* shortcut for top & bottom = 0, left & right = auto (center) */
width: 770px;
background: url(../images/banner.jpg) no-repeat;
}

#outerTable a:link,
#outerTable a:visited {
text-decoration: none;
color: #b36b00;
}
#outerTable a:hover {
color: #566440;
border-bottom: 1px dashed #566440;
}

/* ===== contact button ==== */

td#contactButton {
height: 55px;
}

#contactButton div {
height: 30px;
margin: 0 0 0 650px;
padding: 0;
}

#contactButton img {
margin: 0;
border: none;
}

#contactButton a:hover {
border-bottom: none;
}

/* ===== main menu ===== */

td#mainMenu {
height: 55px;
vertical-align: bottom;
}

#mainMenu div {
height: 30px;
margin-left: 300px;
padding: 0;
}

#mainMenu img {
margin: 0 5px;
border: none;
}

/* ===== main (left) content ===== */

td#contentLeft {
background: #fff;
width: 505px;
}

div#mainContent {
padding: 0 15px;
margin: 0;
}

#mainContent p {
font-family: Georgia, serif;
font-size: .9em;
line-height: 1.4em;
margin-left: 0;
}

#mainContent h1, #mainContent h2, #mainContent h3, #mainContent h4 {
font-family: "Trebuchet MS", sans-serif;
}

#mainContent h1 {
font-family: "Trebuchet MS", sans-serif;
font-size: 1.6em;
font-weight: bold;
color: #1B9D95;
margin: 0 0 .4em 0;
}

#mainContent h2 {
font-family: "Trebuchet MS", sans-serif;
font-size: 1.2em;
color: #3C3809;
margin: 0 0 .4em 0;
}

#mainContent h4 {
font-family: "Trebuchet MS", sans-serif;
font-size: 1.1em;
font-weight: bold;
color: #666;
margin: 0 0 -.2em 0;
}

#mainContent ul {
font-family: Georgia, serif;
font-size: 0.9em;
margin-bottom: 1.4em;
}

#mainContent li {
margin-bottom: .6em;
}

#mainContent p.leftMenu {
font-family: "Trebuchet MS", sans-serif;
margin-bottom: 1.5ex;
}

#mainContent p.leftMenu a {
color: #566440;
}

#mainContent p.leftMenu a:hover {
color: #b36b00;
border: none;
}

/* ====== gearDesc ===== */

td#gearLeftImage {
padding: 25px;
}

td#gearDesc {
width: 290px;
}

td#gearDesc h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.2em;
color: #C47500;
border-bottom: 1px solid #344;
padding-bottom: 0.2em;
margin-left: 0;
}

td#gearDesc p {
font-family: "Trebuchet MS", sans-serif;
font-size: .8em;
}

td#gearDesc p.price {
text-align: right;
font-size: 1.2em;
}

/* ====== sidebar (right column) content ====== */

td#contentRight {
background: #fff;
width: 265px;
}

div#sideBar {
border-left: 1px solid #999;
padding: 0 10px;
}

#contentRight p {
font-family: "Trebuchet MS", sans-serif;
font-size: 0.8em;
line-height: 1.2em;
color: #666;
margin: 0 0 3ex 0;
}

#contentRight h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
color: #1B9D95;
text-align: left;
margin: 1ex 0 .5ex 0;
}

#contentRight img {
margin: 0 25px;
}

#contentRight img.photo {
padding: 5px;
border: 1px solid #999;
}

#contentRight ol {
margin: .5em 0 1.5em 1em ;
}

#contentRight li {
font-family: "Trebuchet MS", sans-serif;
font-size: 0.8em;
color: #666;
margin: .2em .5em;
}

/* ===== footer ===== */

#footer {
font-family: "Trebuchet MS", sans-serif;
font-size: 0.75em;
color: #fff;
text-align: center;
}
#footer a {
color: #1B9D95;
text-decoration: none;
}

/* ===== miscellaneous ===== */

div#youtubeVideo {
margin: 20px 0 20px 30px;
}

gentleone
05-30-2010, 06:58 PM
Sorry! Issues with tables for layout I can't help you, because tables were not meant for that. With your first post you were on the right track, so I'm more than willing to help you with that.

youdw
05-30-2010, 07:12 PM
Sorry! Issues with tables for layout I can't help you, because tables were not meant for that. With your first post you were on the right track, so I'm more than willing to help you with that.


Well actually the first post was just a Dreamweaver CS5 premade layout. I had thought it was the same as the HTML/CSS I was doing. My second post was another premade template but it has more content-wise in which I want to make my webpage for and am trying to learn off of. If not you, who may I ask?

I don't understand what you mean by Issues with tables for layout you can't help me with, but I just simply want the same concept. Where in the CSS for my second post do I adjust the column width without having it effect the table?

Because I cannot find the words "container" in this second post CSS/HTML document. And everytime I adjust either the right column or Left(middle) it just makes the columns stretch past the length of the banners. I want it all consistent, but only the columns inside to change.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Groundswell</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>

<table id="outerTable">
<tr><td id="contactButton">
<div>
<a href="mailto:contact@groundswell.com"
><img src="images/contact.png" width="86" height="29" name="contact" alt="contact us"
/></a>
</div>
</td></tr>
<tr><td id="mainMenu">
<div>
<a href="home.html"
><img src="images/home.png" width="80" height="25" alt="home"
/></a><img src="images/gear-current.png" width="73" height="30" alt="gear"
/><a href="lifestyle.html"
><img src="images/lifestyle.png" width="100" height="25" alt="lifestyle"
/></a><a href="videos.html"
><img src="images/videos.png" width="84" height="25" alt="videos"
/></a>
</div>
</td></tr>
<tr><td> <!-- page ID image -->
<img src="images/gear_banner.jpg" width="770" height="90" alt="welcome to surfing paradise" />
</td></tr>
<tr><td>
<table id="contentTable"><tr>
<td id="contentLeft">
<div id="mainContent">

<p class="leftMenu">
<a href="">Boards</a> |
<a href="">Swimwear</a> |
<a href="">Wetsuits</a> |
<a href="">Etc.</a>
</p>

<h1>Check out our Gear</h1>
<p>
Whether you're looking for the latest boards, the hottest swimwear, serious wetsuits, or anything else
related to the surfing lifestyle, you've come to the right place. Groundswell goes out and finds the best gear
available for your surfing needs. Everything we sell we've tested ourselves, so we know it works!
</p>

<h2>This months special:</h2>

<table><tr>
<td id="gearLeftImage">
<img class="leftFloatImage" src="images/swell_suit.jpg" alt="swell suit" width="118" height="245" />
</td>
<td id="gearDesc">
<h3>Swell Suit by Grommett</h3>
<p>
Standard Neoprene stretch with a wind-resistant weave. The Swell suit was created by our own Garret Makinson.
Available in men's and women's styles.
</p>
<p class="price">$89.99</p>
<p>
Check out more suits on our <a href="">wetsuits</a> page
</p>
</td>
</table>

</div> <!-- mainContent -->
</td>
<td id="contentRight">
<div id="sideBar">

<h3>Top Sellers</h3>
<p>
Fresh off last month's killer reviews, our new Fearless board heads up our top sellers. All our gear is
top rate, but here's what people have been flocking to:
</p>
<img src="images/fearless_small.jpg" width="200" height="68" alt="new board" />
<h3>1. Fearless Board</h3>
<p>
Looking for a hot new board? Check out our new
<a href="">Fearless board</a>
from legendary shaper Carl Benson.
</p>
<img src="images/shirt_list.jpg" width="200" height="68" alt="blue hawaii shirt" />
<h3>2. Blue Hawaii Shirt</h3>
<p>
Take you back or move you forward? Doesn't really matter which way you're moving, the Blue Hawaii Shirt
will get you there in style.
<a href="">Comes in Blue...</a>
</p>
<img src="images/towel_list.jpg" width="200" height="68" alt="towel drawing" />
<h3>3. Groundswell Towels</h3>
<p>
What can we say? You guys like staying dry. We get it, which is why our terry-cloth Groundswell towels
are our number three seller.
<a href="">Go get 'em!</a>
</p>

</div> <!-- sideBar -->
</td>
</tr></table>
</td></tr>
</table>

<p id="footer">&copy; Groundswell Surf &nbsp;&nbsp; <a href="privacy.htm">Privacy Policy</a> | <a href="terms.htm">Terms and Conditions</a></p>

</body>
</html>

youdw
05-30-2010, 10:48 PM
..........

edbr
05-31-2010, 04:50 AM
d...o....n...t use tables for layout

urbanrays
05-31-2010, 12:33 PM
Stay well away from tables, when using CSS for layout dont get all wrapped up, all you have to do is go back to basics and think boxes.
If you were moving house you wouldnt try and get the table and chairs into a crisp(#container)box, you can try but it will split the sides, just like it does in CSS you are trying to fit things in that dont fit. So it will look messy.
I have just thrown this together it cant get any easier than this, it is the basic of basic 3col design


<style type="text/css">
<!--
#container { /*The container is your main stage everything
in here cannot exceed 900px*/
width: 900px;
margin-top: 0px;
margin-right: auto;/*this makes the container centre in
the browser*/
margin-left: auto;/*this makes the container centre in
the browser*/
margin-bottom: 0px;
}

.header {
background-color: #0CF;
margin: 0px;
height: 100px;
width: 900px;
}

.leftcol {
height: 400px;
width: 260px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #06F;
float: left;
}

.centrecol {
height: 400px;
width: 400px; /*this is the size of your column*/
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px; /*adding this margin now makes
your column cover 410px*/
background-color: #03F;
float: left;
}

.rightcol { /*If you dont want this column delete it
and delete the html code, remember to change centrcol/leftcol to make the magic containers 900px*/
float: left;
height: 400px;
width: 220px; /*If you change this you need to either alter
your margin or leftcol/centrecol width*/
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
background-color: #00F;
}
#footer {
margin: 0px;
clear: both;
height: 100px;
width: 900px;
background-color: #0FF;
}
/*You have to calculate all your widths and left/right margins together so in this case it would be
260px(leftcol width)+400px(centrecol width)
+10px(centrecol margin)+220px(rightcol width)+10px(rightcolmargin)=900px(container width)*/
-->
</style>
</head>
<body>
<div id="container">
<div class="header">Everything that goes in here cannot exceed a width of 900px or a height of 100px, unless you change the height of .header in CSS</div>
<div class="leftcol"></div>
<div class="centrecol"></div>
<div class="rightcol"></div>
<div id="footer"></div>
</div>
</body>
</html>


Just copy the code and play if the rightcol box dissappears below the leftcol you have miscalculated your margins/widths.
This works in design view....never take this for granted sites normally look broken in design view.

Hope this helps

youdw
05-31-2010, 02:54 PM
What should I use? Please tell me how to change this? Thank you!

gentleone
05-31-2010, 03:08 PM
The first thing you need to know is about the CSS box model:
http://www.w3schools.com/css/css_boxmodel.asp

Than you understand what paddings, margins and borders does to the initial widths and heights of your divs (boxes). First you learn to walk before you can run. That's what you wanna do... run!