PDA

View Full Version : I'm losing my navbar!


Rosie
01-20-2012, 05:13 PM
Hi there,
I'm very much a novice, and am trying to get my head around floating rather than using ap divs which I've been doing up until now. I thought a good way to start would be to use the Dreamweaver layouts, but I'm struggling with a vanishing nav bar.

To simplify the issue here, I've recreated the site with just the key elements. I would like to position a nav bar at the bottom right of the header, so that its base is in line with the base of the logo. (For this demo I've just created an orange div in place of the navbar.) This I can do, but as soon as I replace the image-place-holder in the custom layout with my own logo, the navbar div vanishes in Live View and Preview, although it's still visible in ordinary Design view. (I did remove the display:block, as instructed in the comments.)

The page can be seen here http://www.andthecat.co.uk/gill/test_2/logo_and_nav.html

The code is
<div class="header"><a href="#"><img src="images/logo1.jpg" width="416" height="183" /></a>
<div id="navbox">Content for id "navbox" Goes Here</div>
<!-- end .header --></div>

and css
#navbox {
background-color: #F60;
height: 50px;
width: 300px;
float: right;
margin-top: -50px;
}

If you need to see any more it will all be on the full page.

Please tell me what I'm doing wrong, as this has driven me to distraction all day! I've tried various floats, margins etc, I've tried removing the navbar from the header then positioning it with a negative top margin, but that displayed totally differently in live view from normal view so I decided to go back to basics.

Thanks so much for your help, in advance!
R

Ricky55
01-20-2012, 07:50 PM
Floats are not always the best way to achieve something. Truth is if you want your navigation to be fixed to the bottom right hand corner of the header then absolutely positioning your navigation is the best way to achieve this.

See if this is more like what you want.


<!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=ISO-8859-1">
<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: 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;
position: relative;
}

/* ~~ 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;
}



/* ~~ 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;
}

#main-nav {
background-color: #F60;
height: 50px;
position: absolute;
right: 0;
bottom: 0;
}

#main-nav li {
float: left;
font-size: 14px;
line-height: 50px;
list-style-type: none;
border-right: 1px solid black;
}

#main-nav li a {
display: block;
width: 135px;
height: 50px;
text-align: center;
text-decoration: none;
}

#main-nav li.last {
border-right: none;
}

#main-nav li a:hover {
background: red;
color: white;
}

-->
</style></head>

<body>

<div class="container">
<div class="header"><a href="#"><img src="logo_and_nav_files/logo1.jpg" height="183" width="416"></a>

<ul id="main-nav">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li class="last"><a href="#">Link four</a></li>
</ul>

<!-- end .header --></div>
<div class="sidebar1">
<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="clearfloat" /&gt; or &lt;div
class="clearfloat"&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>

Rosie
01-21-2012, 09:13 AM
Perfect Ricky, thank you so much! The reason I was moving away from absolute positioning was that I couldn't find a way to make my containers grow with my content when I had any elements absolutely positioned in them. But your 'hybrid' approach seems to work. So that's the way I'll go!

Thanks again!
R

Rosie
01-21-2012, 11:36 AM
So. sorry, Ricky but actually that still doesn't seem to be working. I copied your code and posted it, but there is a problem in Firefox in that we lose the whole header. (This also happened when I previewed locally in Firefox.) I may well have copied something wrong so have a look at http://www.andthecat.co.uk/gill/dwclub/absolut_menu.html

Also I tried to copy the appropriate code into my existing document and
a) the positioning was miles away from where I would expect it to be, and
b) when I preview/post it, it moves by about another 2 inches
c) on Firefox is is positioned about 2 inches away from where it is in Chrome.

See http://www.andthecat.co.uk/gill/dwclub/1.html

I'm probably just missing a bit of code or doing something daft so please let me know what!
Thanks
R
This one is at

Rosie
01-21-2012, 11:52 AM
I've now just tried bunging in an ap div in the correct position, but again this is displaying differently in Chrome than Firefox. http://www.andthecat.co.uk/gill/dwclub/1test.html

Would it be some coding in the DW template that's affecting it? I really should be able to position absolute-positioned divs without a problem!

Ricky55
01-21-2012, 07:43 PM
Hi Rosie

You are right in wasn't viewing correctly in FFox. These pages have that many comments its hard to see whats going.

You are nearly there though.

All you needed to do was give the header a height and a position relative.

Heres the revised version.


<!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;
margin: 0;
padding: 0;
color: #000;
background-color: #667c89;
background-image: url(images/1bg1.jpg);
}

/* ~~ 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. */
}
h1 {
font-size: 26px;
color: #333;
}
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;
}

/* MAIN NAVIGATION STYLING IN SEPARATE SPRY CSS */

/* TOP NAVIGATION */
#nav1 {
width: 329px;
height:28px;
float: right;
margin-top: -40px;
}

#nav1 ul {list-style:none; margin:0; padding:0; }

#nav1 li { float:left;}

#nav1 li a:link, #nav1 li a:visited {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:16px;
background-color:#667C89;
text-decoration:none;
display:block;
color:#FFFFFF;
padding:2px 0 2px 4px;
}

#nav1 li a:hover {font-family:Geneva, Arial, Helvetica, sans-serif; font-size:16px; background-color:#6633CC; text-decoration:none; display:block; color:#FFCC33; padding:2px 0 2px 4px; }



/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px; /* the auto value on the sides, coupled with the width, centers the layout */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: medium;
background-color: #FFF;
background-image: url(images/1wrap_bg2.jpg);
margin-top: 40px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

/* ~~ 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 {
height: 183ox;
position: relative;
}

/* ~~ 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: 147px;
padding-bottom: 10px;
margin-left: 30px;
margin-top: 20px;
background-color: #667C89;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
height: 1000px;
}
.content {
width: 700px;
float: left;
margin-left: 20px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
margin-top: 20px;
}

/* ~~ 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;
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;
}



#main-nav {
background-color: #F60;
height: 50px;
position: absolute;
right: 0;
bottom: 0;
}

#main-nav li {
float: left;
font-size: 14px;
line-height: 50px;
list-style-type: none;
border-right: 1px solid black;
}

#main-nav li a {
display: block;
width: 135px;
height: 50px;
text-align: center;
text-decoration: none;
}

#main-nav li.last {
border-right: none;
}

#main-nav li a:hover {
background: red;
color: white;
}
-->
</style>
<script src="1_files/SpryMenuBar.js" type="text/javascript"></script>
<link href="1_files/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
</head>

<body>


<div class="container">


<div class="header"><img src="1_files/logo1.jpg" alt="Your Building Solutions logo" height="183" width="416">

<ul id="main-nav">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li class="last"><a href="#">Link four</a></li>
</ul>

</div><!-- end .header -->



<div class="sidebar1">

<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Home Page</a></li>

<li><a tabindex="-1" class="MenuBarItemSubmenu" href="#">Paths, Patios &amp; Driveways</a>
<ul>
<li><a tabindex="-1" href="#">Traditional Method</a></li>
<li><a tabindex="-1" href="#">Architectural Surfaces</a></li>
<li><a tabindex="-1" href="#">Tile</a></li>
</ul>
</li>

<li><a tabindex="-1" class="MenuBarItemSubmenu" href="#">Walls</a>
<ul>
<li><a tabindex="-1" href="#">Dry Stone</a></li>
<li><a tabindex="-1" href="#">Mortared Stone</a></li>
<li><a tabindex="-1" href="#">Brickwork</a></li>
</ul>
</li>

<li><a tabindex="-1" href="#">Garden Maintenance</a></li>

<li><a tabindex="-1" class="MenuBarItemSubmenu" href="#">Herbaceous Designs and Lawns</a>
<ul>
<li><a tabindex="-1" href="#">Herbaceous Design and Planting</a></li>
<li><a tabindex="-1" href="#">Lawns</a></li>
</ul>
</li>

<li><a tabindex="-1" class="MenuBarItemSubmenu" href="#">Residential Building and Remodelling</a>
<ul>
<li><a tabindex="-1" href="#">XXNameXX</a></li>
<li><a tabindex="-1" href="#">Concrete and Reinforced</a></li>
</ul>
</li>

<li><a tabindex="-1" href="#">Carpentry and Timber Construction</a>
</li>

<li><a tabindex="-1" href="#">Hand-Crafted Furniture</a></li>

</ul>

<!-- end .sidebar1 --></div>
<div class="content">
<h1>Your Building Solutions</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="clearfloat" /&gt; or &lt;div
class="clearfloat"&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>
<p>&nbsp;</p>
<p>&nbsp;</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>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>


</body></html>

Ricky55
01-21-2012, 07:44 PM
Sorry it should be


.header {
height: 183px;
position: relative;
}

Ricky55
01-21-2012, 08:38 PM
Rosie

I've recorded a short video for you to help explain the basics of CSS positioning.

Should help you, hopefully.

Thanks

Richard

Ricky55
01-21-2012, 08:38 PM
The link would probably help out too.

http://vimeo.com/35435777

Rosie
01-24-2012, 05:17 PM
Wow! Thanks so much and I'm so sorry I've been ignoring you! I'm new to the forum and naively thought it would email me if there was any new response. So I've just logged on and found all your hard work - including videos! What a star you are!

I'm afraid I won't be able to get to them now until probably Thursday as I'm flat out on something else, but I'll try it all out then, and get back to you and let you know how I get on.

Thanks so much. I really appreciate your time, and your patience!
R

Ricky55
01-24-2012, 09:11 PM
No worries, hope you get something out of them.

Rosie
01-26-2012, 09:23 AM
Ricky you're a star, and I feel famous now! (Sorry I couldn't do a 'like' on Vimeo, but my account is under my real name, and it might not be great to public that I was the idiot you were talking about!!)

Anyway, can I just confirm what I understood from the lesson, which is that when you position something absolutely, it will be positioned relative to a container that is given a 'position:relative.' (I'm not sure what happens if you have two elements that you want to position absolutely within two different containers, but I'll worry about that later!)

The other question though, is do you need to give a height to any div that contains an absolutely positioned element? Because if you do this, am I right in thinking that the container will not 'grow' with the content, and that the height of each page would have to be set manually? That would be a real pain in the backside for a site with lots of pages of varying lengths!

Ok, going away to practice now. May well be back with more questions!

And thanks so much, again, for your help

gentleone
01-26-2012, 11:42 AM
The other question though, is do you need to give a height to any div that contains an absolutely positioned element? Because if you do this, am I right in thinking that the container will not 'grow' with the content, and that the height of each page would have to be set manually? That would be a real pain in the backside for a site with lots of pages of varying lengths!
You're totally right and that's one of the reasons not to use absolute positioned divs/elements for your layout. Better to use the default position (which is static) and move/position the elements with margins, padding and/or floats where you want them to be and let the content dictates the height so that everything underneath gets pushed down by the content. This is what's called the normal flow of a document.

Rosie
01-26-2012, 12:22 PM
So, you use 'normal flow' where you can, but absolute positioning where you have to, being fully aware of its drawbacks?

I can see the sense in that.
Thanks for the comment, Gentle

Ricky55
01-26-2012, 04:45 PM
Well you generally don't use absolute positioning to position your main layout because of the reasons we have already discussed.

Don't view absolute positioning though as something that you only do when you have to.

I use absolute positioning in my website all the time. Its just a case of knowing when to use one over the other. If you are just positioning a logo for instance in the top left of your header and it will have no bearing on any other content it may as well be positioned absolutely.

You may for instance want a banner over the top of an image, in this case you'd probably have to use absolute positioning.

You then may have an image that you want some text to flow around, then you would choose to float.

With experience you quickly learn when and when not to use it.

Good Luck!