PDA

View Full Version : layout issue


flawlesstwins
09-20-2011, 09:08 PM
Hello everyone,

I have been having a hard time with layouts in dw (box method). I did a vid tute and followed the instructions to the T but my results were different than the instructors. I am using DW CS5 (same as the instructor). He taught a simple layout which I have posted instructions below. When I click on live view, the div.container has small space at the top of the page. He doesn't have any space on his results. He indicated 0 margins. everything is fine until I go to the box within the header (logo placeholder) and change it to 15px all the way around, then when I click on live view, it has the space at the top of the div container. The space should be within the header for the placeholder, not the div.container. Help please
new file, Choose html, 2 column fixed, left sidebar, header and footer; doctype xhtml 1.0 transitional
Customizing the layout
First change the overall width of the page. Need to change pixel measurement of the outside element which is called div.container. The width should be 960 px and change to 1040 and press tag twice and it will adjust.
The margin in css styles panel is set to center the fixed element on the page (if reduce the panels you will see it is centered on the page on the left and right). It is handled by changing the margins .the current margin is set for Top and bottom use 0 margin and left and right use auto setting which will automatically calculate the amount of margin left after you subtract the size of the container.
Let’s start adjusting design starting with the header. The height of the header is currently being driven by the logo placeholder. You can tell by going to header rule and will notice there is no height specified. Never let the header go with being controlled by an element in it (logo placeholder). So make it 173 px (typically logo Is that size). Click on the logo placeholder, go to css styles panel and choose new css rule. Choose compound type, and name the selector .header img ( so any image that’s in the header will be affected by this rule). Keep rule definition in this document only. Go to box category and add margin (15 px all the way around (choose same for all)
Now will work with additional width we got from expanding the layout. Will bring the sidebar up and expand it. Select sidebar and open up css styles panel. Go to properties and then css styles, change width to 220px. Change img placeholder to 220 px in width. Now the links are too short and don’t fill out the column. We need to adjust them. Open the css styles panel. Go to rules, don’t want to select the selected ul.nav. hover rule but the one above it the a.visited link. Then see the width in the properties diaglog box below it. Change the width to 200px instead of 220 which is what we changed the placeholder and left sidebar too. (can change to 220 if you wish)
Now we will change the content, cause if we go in liveview, we will see the extra space to the right. So select the div.content and go the css styles menu and change the width to 820px, because we already had the left nav bar at 220 and the entire div.container at 1040 px and 820px and 220px equals 1040px.
(http://www.wittkieffer.com/)

gentleone
09-20-2011, 10:25 PM
We really need to see some code (HTML & CSS) to figure out whats causing that gap. You can post your code within this thread. Just click the # or <> symbol in the advanced editor before you paste the code.

flawlesstwins
09-21-2011, 03:42 AM
Here is the code.
<!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>
<style type="text/css">
<!--
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: 1040px;
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;
height: 173px;
}

/* ~~ 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. 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 right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.

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

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

/* ~~ 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;
}
.header img {
margin: 15px;
}
-->
</style></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>

gentleone
09-21-2011, 12:22 PM
Add overflow: hidden to the CSS of .header.

.header {
background: #ADB96E;
height: 173px;
overflow: hidden;
}


Never let the header go with being controlled by an element in it (logo placeholder). So make it 173 px (typically logo Is that size).
This is bad advice by the author of the vid tut. It really depends on the situation wether to declare a height or not on a header or any other element.

flawlesstwins
09-21-2011, 03:25 PM
what do you suggest I do to fix this or to center and bring down the logo without bringing down the container? I am now leery of watching the rest of his tute.

flawlesstwins
09-21-2011, 03:26 PM
What is an overflow?

gentleone
09-21-2011, 04:37 PM
what do you suggest I do to fix this or to center and bring down the logo without bringing down the container?
Okay forget the overflow: hidden property. It was an easy fix by me, but it did not really solve the problem. I was just hiding the problem.

I had a better look what's causing that gap and it was the display: block in the a tag (inline css style). i'm talking about this part:

<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>
</div>When I changed it to display: inline-block the gap disappeared. So change it too and the gap is gone.
It's always best practise to keep all the styles in a stylesheet (CSS) seperate from your prserntation (HTML), but if you do this all for practising then you can change it just in that inline style.

I am now leery of watching the rest of his tute. I don't know where you following that tut from, but most of the time YouTube or similar sites are not the best places to learn.
For vid tuts better to learn from lynda.com or Layers Magazine.
http://www.lynda.com/Dreamweaver-training-tutorials/185-0.html
http://layersmagazine.com/category/dreamweaver

If you want to learn the basics of HTML and CSS in general or the meaning of all these tags then try these:
http://htmldog.com/
http://reference.sitepoint.com/html
http://reference.sitepoint.com/css

flawlesstwins
09-21-2011, 09:22 PM
Thank you so much! I will check when I get home.

flawlesstwins
09-22-2011, 03:24 AM
I use lynda.com. I have an account with them. the video is a newer one by James Lowery who wrote Dreamweaver bible. I am not sure that I understand how to change it to display inline-block. Can you show me the new code that you used instead?

gentleone
09-22-2011, 06:24 PM
I use lynda.com. I have an account with them. the video is a newer one by James Lowery who wrote Dreamweaver bible.
Good stuff, because that's a much better resource than you had before.
I am not sure that I understand how to change it to display inline-block. Can you show me the new code that you used instead?
Just have a good look to that piece of code I posted earlier. Now go into code view of your page and try to find it in your HTML code. You don't have so much code on that page, so it shouldn't be that hard for you.
Once you find it, change display: block to display: inline-block.