[RESOLVED] Layout Control/Margins Question

@BobHFeb 10.2007

You folks have taught me a great deal about CSS and page layout. Once again, I need to tap the wisdom and good will of the group.

Recently, the threads on using a container to control horizontal and vertical placement, eliminating ‘position: absolute’ statements in CSS, motivated me to redo some of the pages on my site; however, I’m experiencing something I don’t understand and haven’t been able to figure out for myself. Is there a way to post a screenshot and code snippets to give examples?

I’ve got a boxed area that I reference as a <div id>. I can get the left alignment using a ‘margin-left: nnpx;’ statement, but the vertical alignment I seek eludes me. I tried to use the ‘margin-top: nnpx;’ statement (preceding the ‘margin-left’) without success. I can get it to appear perfectly on my local host, but when I upload it and and access it via a url, the area has slipped way down the page. I’ve been very careful to create a ‘build’ directory and to upload everything from it. There are several <div id>’s on the page, but I’m having trouble only with this one particular alignment/positioning issue.

If I knew how to post them, I’d attach code snippets and a screenshot. Code snippets would also allow you to critique my use of CSS statements.

TIA
bh

to post a comment

CSS

26 Comments(s) _↴

@CentauriFeb 10.2007 — #Bob,

When you write a post, select the "advanced" button - from there you have a choice of options in the menu above the writing area. Picking the # symbol puts code tags on the page, between which you can paste code [CODE]like this[/CODE].

There are other buttons for html tags and php tags, but I find that it is harder for others answering posts to copy and paste from these tags, so I always use the "code" tags.

From the advanced post page, you can also upload attachments such as screen shot pictures.

Cheers

Graeme

@BobHauthorFeb 10.2007 — #The code shown below doesn't seem to position the main rectangle area reliably in the same place. I don't [I]think [/I] I'm changing the CSS, but at my age, who knows? Likewise, I'm reasonably certain that I have the correct versions of the files in the correct directories, but I may have a mental block going on, too. Further, the 'inner' portion doesn't appear, and I can't understand why. It should be a narrow band of a gold color framing the main rectangle area.

Here is my PHP file:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>In Memory - Broughton Class of 1960
 </title>
 <style type="text/css">
 <!--  -->
 </style>
 <link rel="stylesheet" href="BasicBroughtonStyle.css" type="text/css">
 <?php include('broughton1960.php'); ?><!-- Inserts www.broughton1960.com as the base url-->
 
 </head>
 
 <body><!-- Inserts the background graphic-->
 <div id="container">
 <div id="headline">
 Needham B. Broughton High School, Raleigh, NC - Class of 1960
 </div>
 
  <div id="page_title">
   <b>In-Memory</b>
  </div>
 
  <div id="bldg_pic">
  </div>
 
 <!-- Content:  In Memory Page -->
 <div id="sub_title">
 Honoring Deceased Classmates
 </div>
 
  <?php include('MenuButtons.php'); ?><!-- Inserts links menu -->
 
  <div id="deceased_classmates_outer"> <!-- Inserts outer purple band -->
   <div id="deceased_classmates-mid"> <!-- Inserts middle gold band -->
   <div id="deceased_classmates_inner"> <!-- Inserts inner gray backgound -->
   <table cellpadding="0" cellspacing="0">
   <tr>
   <td><div style="overflow:auto; height:175px; width:785px">
   <img src="/graphics/latipacpics/barefoot_jim_29.jpg" width="85" height="105"><br>
   John Doe
   <br><br><br>
   </td>
   </tr>
   </table>
   </div> <!-- Ends 'deceased_classmates_inner' -->
  </div> <!-- Ends 'deceased_classmates_mid' -->
 </div> <!-- Ends 'deceased_classmates_outer' -->
 </div>
 </body>
 </html>[/CODE]

And here is the relevant bits of CSS:

[CODE]#deceased_classmates_inner
 {
 margin-top: 15px;
 margin-left: 15px;
 border: 15px;
 border-style: solid;
 border-color: black;
 font-family: comic sans ms, sans-serif;
 font-size: 12pt;
 font: small-caps;
 background-color: #D3D3D3;
 color: black;
 width: 795px;
 height: 222px;
 padding-top: 45px;
 padding-bottom: 2px;
 padding-left: 75px;
 }
 
 #deceased_classmates_mid
 {
 margin-top: 20px;
 margin-left: 20px;
 border: 2px;
 border-style: ridge;
 border-color: black;
 background-color: #D9B05E;
 width: 815px;
 height: 320px;
 }
 #deceased_classmates_outer
 {
 border: 2px;
 border-style: ridge;
 border-color: black;
 background-color: #70009F;
 margin-top: 30px;
 margin-left: 215px;
 width: 930px;
 height: 335px;
 
 }
 [/CODE]

A screenshot is attached to show how the page displays on my localhost server. It is not the entire page, just the part that displays without scrolling. The top of the purple band with the gray inner background (see the deceased_... CSS statements) [B]should[/B] appear in line with the top of the menu buttons but appears far down the page.

The problem probably lies in my inadequate understanding of CSS and its proper usage. I took the absolute positioning statements out of the CSS based on reading posts from Centauri (Graeme) and learning that it is bad coding practice. Perhaps my use of 'margin' statements to position elements is equally bad form. In any case, I would really appreciate help with this problem and would appreciate even more, a critique of my CSS and PHP code.

TIA

bh

@BobHauthorFeb 10.2007 — #Let's see if this posts the screenshot showing the partial page.

[upl-file uuid=9d7ddf83-94e3-47fb-9f89-0b2f98d428b8 size=30kB]InMemory.jpg[/upl-file]

@CentauriFeb 10.2007 — #I found the page on the net, and comparing your php code to the resultant html code reveals quite a number of problems, which MAY have a bearing on your problem (am yet to investigate further) - the MenuButtons.php should only contain the info between the body tags, and NOT the body tags, head tags and contents , or doctype etc, as all this is being included in your page, resulting in mutiple head, body, style tags etc. There is also an error message generated within the MenuButtons.php (maybe this includes another file?)(it also references PurpleAndGoldStyle.css which doesn't seem to exist).

Will set up the page locally here and look more at it.

Cheers

Graeme

@CentauriFeb 11.2007 — #Bob,

Notice you have fixed up some of those errors, but there is major rendering discrepencies between browsers due to the overall positioning scheme - I am playing with it at the moment and will post something shortly.

I also note you used a graphic for the panel border - this seems to have caused other problems, and the original border didn't display correctly due to a syntax error in the css. A grsphic is not needed here, and emulating your graphic gets rid of a div anyway.

A BIG problem is the horizontal scrolling - having to do this WILL piss off the site viewers. It is quite easy to make this site fluid so that it works properly from 800x600 up to large resolutions.

Another question, as there does not appear to be any links on the classmate photo thumbnails to open up larger versions of the pics, why are the photos so large and then pulled down to size for the thumbnails? - this makes the page VERY slow to load (poor dialup users). Making the graphics the correct size first will speed up the page.

Cheers

Graeme

@CentauriFeb 12.2007 — #Back again, Bob

This will be spread over several posts (and there may be delays between each while I type ? )

To address the specific positioning problem, we need to look at the page (and site) overall, as there apears to be a number of other issues causing discrepencies between browsers.

As the menu is a php include, and it's positioning and style will have a bearing on its surrounds, we can start there. Visually, the menu looks amateurish due to the white surrouning the buttons not blending with the background, and it looks static due to lack of any rollover. Code-wise it is just a bunch of <a> tags within a <ul>, so is not really a list. If it is changed to a list with text links, and the graphics applied as backgrounds, it can be styled to provide the visual appeal as well as accessibility for screen readers etc. The use of graphics on the background makes it easy to do rollovers, and a good method is to combine both the normal graphic and rollover graphic in one file and shift background position on rollover (I have quickly done a set of revised graphics to suit and have provided them attached here in a zip file, as well as a single one so you can see how they were done). Position-wise, the whole menu can be given a set size and floated left, with a margin to position it away from the page edge.

As the menu file only contains the code that needs to be inserted, and does not contain any php commands in itself, it does not need to be parsed by php and hence does not need the php file extension - I have called the menu file "menu.html" and the code for this is

[CODE]<ul id="menu_col1">
 <li><a href="index.php" style="background-image:url(graphics/button_home.gif)">Home</a></li>
 <li><a href="http://www.broughton1960.com//smf" style="background-image:url(graphics/button_forum.gif)">Forum</a></li>
 <li><a href="Music/wimpy.php" style="background-image:url(graphics/button_jukebox.gif)">Jukebox</a></li>
 <li><a href="latipacAC.php" style="background-image:url(graphics/button_latipac.gif)">Latipac</a></li>
 <li><a href="inmemory.php" style="background-image:url(graphics/button_memory.gif)">In Memory</a></li>
 <li><a href="missing.php" style="background-image:url(graphics/button_missing.gif)">Missing</a></li> 

 <li><a href="links.php" style="background-image:url(graphics/button_links.gif)">Links</a></li>
 </ul>[/CODE]

Note that this is a straight text list. The css for this (in the BasicBroughtonStyle.css file) is

[CODE]#menu_col1 {
 background-color:  #FFFFCC;
 font-family: comic sans ms, sans-serif;
 width: 105px;
 float: left;
 margin-left: 20px;
 display: inline;
 list-style-position: outside;
 list-style: none;
 }
 #menu_col1 li {
 line-height: 1px;
 font-size: 1px;
 }
 #menu_col1 a {
 display: block;
 width: 100px;
 height: 25px;
 background-position: left top;
 text-indent: -1000px;
 text-decoration: none;
 }
 #menu_col1 a:hover {
 background-position: left bottom;
 }
 [/CODE]

The text is made small and indented off the page, whilst the <a> elements are displayed as blocks to reveal the background graphics (which change position on hover). The line height and font size on the <li> styling prevents IE from inserting additional space. As the list <ul> itself is given the ID and positioning, no other container is reqired for this.

Next we look at page and heading structure.

[upl-file uuid=9d9260e5-9877-4c6d-ab2f-a3fe9e1e4a4b size=3kB]button_home.gif[/upl-file]

[upl-file uuid=4733ca01-1a94-4a5e-a141-e38c23c89128 size=22kB]buttonpics.zip[/upl-file]

@CentauriFeb 12.2007 — #As there seems to be some common problems between the pages on the site, I will start with the index.php file and address the current issue in the memorial page shortly.

When designing a site, try to think of natural "stacking" with gravity operating into the top left corner, and let everything naturally sit as much as possible. Any page elements can be styled and positioned without having to enclose them in unnecessary divs, and the top section of your site pages don't require any divs at all.

The school picture in the top corner can be applied as a background graphic of the body, positioned top right - it will therefore allways be in this position regardless of screen size. The 3 lines of text are best represented as heading elements, and I have made them <h2>, <h1>, and <h3> elements respectively. These can be placed one obove the other and centred with a right padding of 200px - this then centres these text lines between the left screen edge and the school graphic, again no matter what the screen size is (this is what is referred to as "fluid").

Following the top section, we have the included menu file, which is floated left in the css. The current position on the page is thus still at the bottom of the heading texts. The #bulletins div containing the text can come next, and is allowed to sit in position under the heading texts, and visually behind the menu. Margins space it down from the texts, far enough from the left so it isn't hidden behind the menu (140px), and spaces it away from the right hand edge of the screen. No width has been set here, so this div will expand or contract depending on screen size, and will always keep its distance from the menu and right screen edge.

Following this is the submission form, which again is identified, styled and positioned without an additional container. It is given a width in ems to allow for text resizing, and auto side margins so that it is centred on the page.

The index.php file then looks like

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Class of 1960 Home Page</title>
 <link rel="stylesheet" href="BasicBroughtonStyle.css" type="text/css">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 
 <body>
 <h2>Needham B. Broughton High School - Raleigh, North Carolina</h2>
 <h1>Class of 1960</h1>
 <h3>Home Page of the "B60's"</h3>
 
 <?php include('menu.html'); ?><!-- Inserts links menu -->
 
 <div id="bulletins">
 <p>We made a few changes to make the site a little easier to read. When we started, a year ago, we knew nothing about building web pages - still don't know much. We planned for things then that the Forum now handles better. The Student Lounge, Hi Times and other pages went away. The Jukebox (now on the main menu) should be a little easier to find. Latipac pages have a new look. The list of deceased classmates includes their Latipac pics. We increased page resolution; so if you're having to scroll left and right to see everything, that's why.  There are only five different Latipac pages (A-C, D-H, I-M, N-S, T-Z) making fairly large files. Fewer pages means you don't have to click as often to find what you want, but larger files take longer to load.  It's a trade-off.  Let us know if it's the wrong trade-off (use the form below).</p>
 <p>Thanks for your patience.  The pages were messed up for a while; but life intervenes. and we don't get as much time to work on things as we'd like.  (We also break things when we don't mean to.)</p>
 </div>
 <form id="comments" action="mailto:[email protected]" method="post" enctype="text/plain">
 <input type="text" name="comment" value="Comments Here" size="60" class="text">
 <input type="submit" value="Send">
 <input type="reset" value="Reset">
 </form>
 </html>[/CODE]

Note the strict doctype which should be used for new pages, and which promotes cleaner code.

The relevant part of the BasicBroughtonStyle.css file (including the above menu styles) is

[CODE]/*  Broughton1960 Stylesheet 'BasicBroughtonStyle*/
 * {
 margin: 0;
 padding: 0;
 }
 body {
 font-family: "comic sans ms", sans-serif;
 background-color: #FFFFCC;
 background-image: url(graphics/nbhscolorinset.jpg);
 background-position: right top;
 background-repeat: no-repeat;
 font-size: 14px;
 }
 p {
 margin: 10px 0;
 }
 h3 {
 color: #70009F;
 font-size: 14px;
 text-align: center;
 font-weight: normal;
 padding-right: 200px;
 }
 
 h2 {
 color: #70009F;
 font-size: 18px;
 text-align: center;
 font-weight: normal;
 padding-right: 200px;
 }
 h1 {
 color: #70009F;
 font-size: 40px;
 text-align: center;
 padding-right: 200px;
 }
 #menu_col1 {
 background-color:  #FFFFCC;
 font-family: comic sans ms, sans-serif;
 width: 105px;
 float: left;
 margin-left: 20px;
 display: inline;
 list-style-position: outside;
 list-style: none;
 }
 #menu_col1 li {
 line-height: 1px;
 font-size: 1px;
 }
 #menu_col1 a {
 display: block;
 width: 100px;
 height: 25px;
 background-position: left top;
 text-indent: -1000px;
 text-decoration: none;
 }
 #menu_col1 a:hover {
 background-position: left bottom;
 }
 #bulletins {
 border-width: thick;
 border-style: ridge;
 padding-top: 1px;
 border-color: #70009F;
 background-color: #FFD897;
 margin: 20px 20px 0 140px;
 padding: 10px;
 font-size: 16px;
 }
 #comments {
 margin: 20px auto 0;
 width: 40em;
 }
 #comments input {
 padding: 2px;
 }[/CODE]

Note the css starts by zeroing out browser default margins and paddings (which were causing the white edge gaps and misalignment on your pages), and the subsequent setting of default paragraph margins. The basic font style and size is set in the body style, as well as the top-right background graphic. Note the way the heading texts are styled and positioned without containers (they are block level anyway).

Next we takle the memorial page positioning.

@CentauriFeb 12.2007 — #The In-Memory page is virtually identical top and menu-wise to the index page, and the display panel will be handled similarly to the #bulletins div on the index page.

Starting with the contents of the panel, I marked up your list of classmates as .... a list! with <li> elements containing each entry. The classmate's name can be treated as a heading, so marking it up as a <h3> gives us standard text, <h3> heading, and an image which can be styled individually across all the listed classmates. Visually, I thought it looked better with the graphic floated left and the name and particulars spaced beside it. This is easily styled using appropriate margins and padding. The size of each graphic also does not need to be specified inline, but is done globally in the css. The height of each <li> determines spacing between each classmate. Note that the list itself is given the id, height and overflow properties. Also not there is no width defined - it will stretch as wide as the container will allow.

The container is two nested divs, #border_colors and an unnamed internal one (only the outer one needs to be named as the internal one is identified by reference). The inner div does to grey background and the black border, whilst the outer div has an orange interior and purple border. Note that again, there are no sizes set here - the height depends on the <ul> height and accumualated paddings / borders, and the width depends on the overall container width less accumulated paddind / margins. The outer #border_colors div is given appropriate margins to space it from the menu, top texts, and right screen like the previous #bulletins div, thus the "frame" will adjust according to screen size.

The inmemory.php file is therefore

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>In Memory - Broughton Class of 1960</title>
 <link rel="stylesheet" href="BasicBroughtonStyle.css" type="text/css">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 
 <body><!-- Inserts the background graphic-->
 <h2>Needham B. Broughton High School, Raleigh, NC - Class of 1960</h2>
 <h1>In-Memory</h1>
 <h3>Honoring Deceased Classmates</h3>
 
 
 <?php include('menu.html'); ?><!-- Inserts links menu -->
 
 <div id="border_colors"> <!-- Inserts gold / purple band -->
 <div> <!-- Inserts inner gray and black band -->
 <ul id="deceased_classmates"> 
 <li><img src="graphics/latipacpics/barefoot_jim_29.jpg" alt=""><h3>
 James Grover "Jimmy" Barefoot</h3>27 January 2004, Charlotte, NC</li>
 <li><img src="graphics/latipacpics/barnes_becky_29.jpg" alt=""><h3>
 Rebecca Sue "Becky" Barnes</h3>1962</li> 
 <li><img src="graphics/latipacpics/billingsley_paula_30.jpg" alt=""><h3>
 Paula Billingsley Earp</h3>2000</li>
 <li><img src="graphics/latipacpics/bland_donald_31.jpg" alt=""><h3>
 Donald Edwin "Don" Bland</h3>1982</li> 
 <li><img src="graphics/latipacpics/bogle_johnny_31.jpg" alt=""><h3>
 Johnny Lamberth "Johnny" Bogle</h3></li>
 <li><img src="graphics/latipacpics/brewer_linney_32.jpg" alt=""><h3>
 Olivia Linney "Linney" Brewer</h3>1995</li>
 <li><img src="graphics/latipacpics/cash_carole_35.jpg" alt=""><h3>
 Carolyn Raye "Carol" Cash</h3></li>
 <li><img src="graphics/latipacpics/cherry_ray_35.jpg" alt=""><h3>
 Ray Albert "Ray" Cherry</h3></li>
 <li><img src="graphics/latipacpics/costner_jenny_37.jpg" alt=""><h3>
 Virginia Ruth Costner "Jenny" Carver</h3>1989</li>
 <li><img src="graphics/latipacpics/dailey_jim_38.jpg" alt=""><h3>
 James Edward "Jim" Dailey</h3>1999</li>
 <li><img src="graphics/latipacpics/ellen_tommy_40.jpg" alt=""><h3>
 Thomas Joel "Tommy" Ellen</h3>1965 or 66</li>
 <li><img src="graphics/latipacpics/elrod_grace_41.jpg" alt=""><h3>
 Ella Grace Elrod "Gracie" Murray</h3></li>
 <li><img src="graphics/latipacpics/falker_ann_42.jpg" alt=""><h3>
 Ann Louise Fakler Clemmer</h3></li>
 <li><img src="graphics/latipacpics/finch_bobbie_42.jpg" alt=""><h3>
 Barabara A. "Bobbie" Finch</h3></li>
 <li><img src="graphics/latipacpics/flint_margaret_42.jpg" alt=""><h3>
 Margaret Wilkerson Flint Brown</h3></li>
 <li><img src="graphics/latipacpics/gray_judy_45.jpg" alt=""><h3>
 Judith Rose "Judy" Gray</h3></li>
 <li><img src="graphics/latipacpics/harris_raymond_46.jpg" alt=""><h3>
 Willam Raymond "Peanut" Harris</h3></li>
 <li><img src="graphics/latipacpics/harvey_lois_47.jpg" alt=""><h3>
 Lois Faye Harvey "Lois" Jacobson</h3>1996</li>
 <li><img src="graphics/latipacpics/james_sam_50.jpg" alt=""><h3>
 Samuel Adams "Sam" James, Jr.</h3>
 Killed in Action, Vietnam, 4 December 1966</li>
 <li><img src="graphics/latipacpics/kimrey_tim_52.jpg" alt=""><h3>
 Timothy Hooper "Tim" Kimrey</h3>2006</li>
 <li><img src="graphics/latipacpics/learoyd_brad_53.jpg" alt=""><h3>
 Bradford Calvin "Brad" Learoyd</h3>1959</li>
 <li><img src="graphics/latipacpics/lee_pat_54.jpg" alt=""><h3>
 Patricia Antoinette Lee "Pat" Lewis</h3>1987</li>
 <li><img src="graphics/latipacpics/lewis_gary_54.jpg" alt=""><h3>
 John Gary "Gary" Lewis</h3>1993</li>
 <li><img src="graphics/latipacpics/lorbacher_fred_55.jpg" alt=""><h3>
 Frederick Gustav "Fred" Lorbacher</h3>1994</li>
 <li><img src="graphics/latipacpics/luther_ray_55.jpg" alt=""><h3>
 Vernon Ray "Raymond" Luther</h3>1987</li>
 <li><img src="graphics/latipacpics/mayton_ruth_ann_58.jpg" alt=""><h3>
 Ruth Anne Mayton "Ruth" Long</h3>1998</li>
 <li><img src="graphics/latipacpics/mcneill_robert_56.jpg" alt=""><h3>
 Robert Neal "Robert" McNeill</h3></li>
 <li><img src="graphics/latipacpics/moore_akers_58.jpg" alt=""><h3>
 George Akers "Akers" Moore, III</h3></li>
 <li><img src="graphics/latipacpics/murray_ayden_59.jpg" alt=""><h3>
 Jesse Ayden "Ayden" Murray</h3></li>
 <li><img src="graphics/latipacpics/murray_connor_59.jpg" alt=""><h3>
 Thomas Connor "Connor" Murray</h3>1999</li>
 <li><img src="graphics/latipacpics/peabody_billy_62.jpg" alt=""><h3>
 William Rossiter "Billy"  Peabody</h3>1995 or 96</li>
 <li><img src="graphics/latipacpics/poe_buck_63.jpg" alt=""><h3>
 Lacy Benjamin "Buck" Poe</h3></li>
 <li><img src="graphics/latipacpics/powledge_pat_64.jpg" alt=""><h3>
 Patrick William "Pat" Powledge</h3>2005</li>
 <li><img src="graphics/latipacpics/sanders_rosa_lee_67.jpg" alt=""><h3>
 Rosa Lee "Rosa" Sanders</h3></li>
 <li><img src="graphics/latipacpics/stephens_david_70.jpg" alt=""><h3>
 David Stephens</h3></li>
 <li><img src="graphics/latipacpics/straughan_fleming_70.jpg" alt=""><h3>
 James Fleming "Bud" Straughan</h3></li>
 <li><img src="graphics/latipacpics/teel_phippie_71.jpg" alt=""><h3>
 Phippie Ann Teel "Phip"  Purdee</h3>2003</li>
 <li><img src="graphics/latipacpics/watkins_nancy_74.jpg" alt=""><h3>
 Nancy Carolyn Watkins "Nancy" Roebuck</h3></li>
 <li><img src="graphics/latipacpics/zeigler_nan_77.jpg" alt=""><h3>
 Nan Lynn Zeigler "Zig" Mobley</h3>1998</li>
 <li><img src="graphics/latipacpics/ziglar_frank_77.jpg" alt=""><h3>
 Frank Conder "Zig" Ziglar</h3></li>
 </ul>
 <!-- Ends pictures and names-->
 </div> 
 </div> <!-- Ends 'border_colors' -->
 
 </body>
 </html>
 [/CODE]

The additional css for the BasicBroughtonStyle.css file is

[CODE]#border_colors
 {
 background-color: #FF9620;
 border: 8px solid #70009F;
 padding: 4px;
 margin: 20px 20px 0 140px;
 }
 #border_colors div
 {
 font-size: 12pt;
 background-color: #D3D3D3;
 color: black;
 padding: 20px 0 20px 75px;
 border: 20px solid black;
 }
 #deceased_classmates {
 overflow: auto;
 height: 250px;
 list-style: none;
 font-size: 14px;
 }
 #deceased_classmates li {
 display: block;
 height: 130px;
 }
 #deceased_classmates img {
 width: 85px;
 height: 105px;
 float: left;
 margin-right: 10px;
 }
 #deceased_classmates h3 {
 font-weight: normal;
 padding: 15px 0;
 font-size: 18px;
 text-align: left;
 color: #000000;
 }
 [/CODE]

Note that the pages are now fully fluid down to 800x600 without the need for horizontal scrolling.

The rest of the site pages can be tackled in much the same way.

Cheers

Graeme

@BobHauthorFeb 16.2007 — #Thank you, Centauri, VERY MUCH INDEED !

I've read your posts and reviewed how your code differs from mine and learned a great deal already. My lack of proficiency - though advertised - is greater than I had hoped. Thanks to you, I will be more proficient now. Although, I'm sure to have more questions about some of the concepts you gave me, I'll reread my texts and do some online reading before bringing them to you.

Thank you again for your kindness, patience, and for sharing your knowledge and expertise. Give me a week or so and my pages should reflect the lessons you've taught so generously.

bh

@BobHauthorFeb 18.2007 — #Centauri et al,

Based on your generous feedback, I created a 'to do' list and have begun working through it.

The most easily done was resizing the yearbook pics. PIXresizer.exe even let me change them all at once. I tested first on my localhost server then uploaded a few to see if they displayed differently on my hosted site. Each file shrank from ~30KB to ~3KB and there are 500 of them. Dial up should be much faster.

Next I began trying to get the menu to work without using <DIV ID>. Using the code you gave me (and changing some capitalization to be consistent with actual files), I got a strange result but don't know why (see first attached jpg file). Part of the problem is due to having no "alt" text in the statements, I think. Also, I do not want the 'bullets' to appear; I want only to have the menu words appear in their separate 'pill' graphic. I changed the code to this:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <!-- This module defines a menu list of links to other pages.
 It is the 'short' menu list used by the broughton1960 pages but not on forum pages.
 It is referenced by ..... -->
 <html>
 
 <head>
 <title></title>
 </head>
 
 <body>
 <div class="menu_col1"><!--  Inserts the yellow background and the menu buttons-->
 <p><a href="http://www.broughton1960.com//"><img src="graphics/Home.GIF" alt="Home"></a></p>
 <p><a href="http://www.broughton1960.com//smf"><img src="graphics/Forum.GIF" alt="Forum Home"></a></p>
 <p><a href="http://www.broughton1960.com//Music/wimpy.php"><img src="graphics/Jukebox.GIF" alt="Jukebox"></a></p>
 <p><a href="http://www.broughton1960.com//latipacAC.php"><img src="graphics/Latipac.GIF" alt="Latipac"></a></p>
 <p><a href="http://www.broughton1960.com//Directory.php"><img src="graphics/Directory.GIF" alt="Directory"></a></p>
 <p><a href="http://www.broughton1960.com//missing.php"><img src="graphics/Missing.GIF" alt="Missing"></a></p>
 <p><a href="http://www.broughton1960.com//inmemory.php"><img src="graphics/In Memory.GIF" alt="In Memory"></a></p>
 <p><a href="http://www.broughton1960.com//links.php"><img src="graphics/Links.GIF" alt="Links"></a></p>
 </div><!-- End Navigation Panel -->
 </body>
 
 </html>[/CODE]

Giving the result in the second screenshot, attached. I changed the CSS to a style and used <DIV STYLE= > and dropped the list to get rid of the bullets. I inserted <p>'s replacing the <br>'s I'd used earlier to get them to appear vertically.

Before proceeding, I thought I'd ask for a reality check.

TIA

bh

[upl-file uuid=e9220b91-e7b0-46c8-8192-5302af5e92f9 size=11kB]gs menu.jpg[/upl-file]

[upl-file uuid=ef865b10-80ee-4074-a70c-e78474fe20bc size=13kB]buttons mod.jpg[/upl-file]

@CentauriFeb 18.2007 — #Bob,

Why are you inserting the doctype, html, head, body tags in the menu include file ???????? This is what is stuffing things up !

So all of this SHOULD NOT be in the file

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <!-- This module defines a menu list of links to other pages.
 It is the 'short' menu list used by the broughton1960 pages but not on forum pages.
 It is referenced by ..... -->
 <html>
 
 <head>
 <title></title>
 </head>
 
 <body>
 
 </body>
 
 </html>[/CODE]

In your example above, ONLY thisd should appear in the file

[CODE]
 <div class="menu_col1"><!--  Inserts the yellow background and the menu buttons-->
 <p><a href="http://www.broughton1960.com//"><img src="graphics/Home.GIF" alt="Home"></a></p>
 <p><a href="http://www.broughton1960.com//smf"><img src="graphics/Forum.GIF" alt="Forum Home"></a></p>
 <p><a href="http://www.broughton1960.com//Music/wimpy.php"><img src="graphics/Jukebox.GIF" alt="Jukebox"></a></p>
 <p><a href="http://www.broughton1960.com//latipacAC.php"><img src="graphics/Latipac.GIF" alt="Latipac"></a></p>
 <p><a href="http://www.broughton1960.com//Directory.php"><img src="graphics/Directory.GIF" alt="Directory"></a></p>
 <p><a href="http://www.broughton1960.com//missing.php"><img src="graphics/Missing.GIF" alt="Missing"></a></p>
 <p><a href="http://www.broughton1960.com//inmemory.php"><img src="graphics/In Memory.GIF" alt="In Memory"></a></p>
 <p><a href="http://www.broughton1960.com//links.php"><img src="graphics/Links.GIF" alt="Links"></a></p>
 </div><!-- End Navigation Panel -->
 [/CODE]

This is probably why my code didn't work when you tried it. The code I presented before DIDN'T display the text OR the bullets as defined in the css

Cheers

Graeme

@BobHauthorFeb 18.2007 — #Thanks, Graeme.

Sometimes I look at things so long that I can no longer see them. Actually, my editor (HTMLPad 2006) asks me what type of new file and preformats the inclusions. I just zoned out and forgot to delete them. I'll give it another go. Probably could have looked at this for a year and never noticed.

Thanks again.

bh

@BobHauthorFeb 18.2007 — #Another Question.

Going back up this thread to where you gave me the revised menu (copied here):

[CODE]<ul id="menu_col1">
 <li><a href="index.php" style="background-image:url(graphics/button_home.gif)">Home</a></li>
 <li><a href="http://www.broughton1960.com//smf" style="background-image:url(graphics/button_forum.gif)">Forum</a></li>
 <li><a href="Music/wimpy.php" style="background-image:url(graphics/button_jukebox.gif)">Jukebox</a></li>
 <li><a href="latipacAC.php" style="background-image:url(graphics/button_latipac.gif)">Latipac</a></li>
 <li><a href="inmemory.php" style="background-image:url(graphics/button_memory.gif)">In Memory</a></li>
 <li><a href="missing.php" style="background-image:url(graphics/button_missing.gif)">Missing</a></li> 

 <li><a href="links.php" style="background-image:url(graphics/button_links.gif)">Links</a></li>
 </ul>[/CODE]

Shouldn't the ">Home</a>" - and its conterparts in the following statements - be alternate text since the graphic already contains the text?

Copying your code exactly - without the extraneous garbage - and changing only the capitalization of the filenames and extensions to agree with my versions, I get the same result as in the first attached image in my prior post.

bh

@CentauriFeb 18.2007 — #Are you using the css also shown in that post? (copied here)

[CODE]#menu_col1 {
 background-color:  #FFFFCC;
 font-family: comic sans ms, sans-serif;
 width: 105px;
 float: left;
 margin-left: 20px;
 display: inline;
 list-style-position: outside;
 list-style: none;
 }
 #menu_col1 li {
 line-height: 1px;
 font-size: 1px;
 }
 #menu_col1 a {
 display: block;
 width: 100px;
 height: 25px;
 background-position: left top;
 text-indent: -1000px;
 text-decoration: none;
 }
 #menu_col1 a:hover {
 background-position: left bottom;
 }[/CODE]

The list-style:none removes the bullets, and the text-indent:-1000px shifts the text off the graphics. The reason to have the text is for the benefit of screen readers and serach engines, and any other browser that does not display graphics. alt is no use here as the graphics are backgrounds.

Can you show EXACTLY what you tried - what is the "extraneous garbage" you did not copy?

Cheers

Graeme

@BobHauthorFeb 18.2007 — #Uncovered a problem in my typing in the CSS. Fixed it and the menu 'pills' appear correctly now.

Thanks again.

@BobHauthorFeb 18.2007 — #Had a typo in my CSS.

The extraneous garbage was the "!DOCTYPE" and duplicated HTML that you pointed out. The CSS and the code are now working on my localhost. The 'In Memory' pill is not displaying but I suspect that is another typing faux pas that I must find.

It's going on for midnight Saturday night here, and I'm a bit tuckered out; so I'll just leave it for tonight and come back fresh tomorrow.

Thanks again for the help, Graeme.

bh

@CentauriFeb 18.2007 — #In case you are actually using the rollover graphics I did (not sure whether you are going to or not), attached is rollover for the Directory button to match the others.

Cheers

Graeme

[upl-file uuid=846abb66-253c-4b3b-a2a2-37e2d925c3f5 size=3kB]button_direct.gif[/upl-file]

@BobHauthorFeb 19.2007 — #Well Graeme and All -

There is a mystery afoot that I don't ken.

Check out the 4 attached files. The first is a screenshot of the way the page displays on my localhost server; the second - with the scale - the way it appears on 'preview' in HTML Pad 2006; the third - ss of my php directory; the fourth - ss of my graphics directory (both directories in my localhost).

I've tried moving the lines around to see if the problem followed the 'In Memory' list item. It did. I tried deleting that <li> and copying one of the others, displaying to prove that I had a duplicate, then changing the duplicate for the .php, . GIF and text. It mysteriously doesn't appear. Finally, I went back into Photoshop LE and made an entirely different .GIF file and tried again. This time I got the graphic to appear in the editor preview but can't see it on localhost - with either Fx or IE. If the problem is staring me in the face, I can't - for the life of me - see it.

Here's the HTML:

[CODE]<!-- gmenu.html -->
 <ul id="menu_col1">
 <li><a href="index.php" style="background-image:url(graphics/Home.GIF)">Home</a></li>
 <li><a href="http://www.broughton1960.com//smf" style="background-image:url(graphics/Forum.GIF)">Forum</a></li>
 <li><a href="Music/wimpy.php" style="background-image:url(graphics/Jukebox.GIF)">Jukebox</a></li>
 <li><a href="latipacAC.php" style="background-image:url(graphics/Latipac.GIF)">Latipac</a></li>
 <li><a href="Directory.php" style="background-image:url(graphics/Directory.GIF)">Directory</a></li>
 <li><a href="missing.php" style="background-image:url(graphics/Missing.GIF)">Missing</a></li>
 <li><a href="inmemory.php" style="background-image:url(graphics/In Memory.GIF)">In Memory</a></li>
 <li><a href="links.php" style="background-image:url(graphics/Links.GIF)">Links</a></li>
 </ul>[/CODE]

I put the comment in the first line so I could be sure what was coming thru on "view source".

And here's the CSS:

[CODE]body {
 font-family: "comic sans ms", sans-serif;
 background-color: #FFFFCC;
 background-image: url(graphics/nbhscolorinset.jpg);
 background-position: 93% 5%;
 background-repeat: no-repeat;
 font-size: 14px;
 }
 p {
 margin: 10px 0;
 }
 #menu_col1 {
 background-color:  #FFFFCC;
 font-family: comic sans ms, sans-serif;
 width: 105px;
 float: left;
 margin-left: 40px;
 padding-top: 10px;
 display: inline;
 list-style-position: outside;
 list-style: none;
 }
 #menu_col1 li {
 line-height: 1px;
 font-size: 1px;
 }
 #menu_col1 a {
 display: block;
 width: 100px;
 height: 25px;
 background-position: left top;
 text-indent: -1000px;
 text-decoration: none;
 }
 #menu_col1 a:hover {
 background-position: left bottom;
 }[/CODE]

My best guess is a typo somewhere, but I cannnot find it.

[upl-file uuid=13b060cd-b3e7-4cba-90f6-b827f356c827 size=62kB]mystery.jpg[/upl-file]

[upl-file uuid=157ec37e-f2f2-45e2-b15b-709a42d13278 size=55kB]Mystery2.jpg[/upl-file]

[upl-file uuid=b8bcfb9c-90ed-4c13-aae2-46d8854d4d0f size=80kB]broughton.jpg[/upl-file]

[upl-file uuid=9291b0e8-ad26-41c0-8af0-ba0384f93227 size=80kB]graphics.jpg[/upl-file]

@CentauriFeb 19.2007 — #The In Memory button is the only graphic that has a space in the filename, and this may be causing the problem. Try renaming the graphic (and the references in your page) to In_Memory.GIF or something like that so there are no spaces.

Cheers

Graeme

@BobHauthorFeb 19.2007 — #Also tried copying the file names from the directory listings and pasting them into to the <li>. It MUST be something to do with spelling, capitalization, or ??

I'm going to try naming both the PHP and graphics files 'moses' and see if that will work.

One step forward and two steps back,

How in the world will I ever hack!

The floating components are working as they should now - in both Fx and IE.

@BobHauthorFeb 22.2007 — #Thanks to you guys - especially Graeme - I've learned a great deal recently about CSS and realize that I've only scratched the surface. But, I still have a [B]major [/B] problem with my menu buttons in IE 6. They don't work as links. They work as designed in Fx and Opera (haven't tried a rollover, yet). Here's the url: "http://www.broughton1960.com"

Here's the relevant CSS and HTML/PHP

First the CSS:

[CODE] 
 ul#menu_col1 {
 background-color: #FFFFCC;
 font-family: comic sans ms, sans-serif;
 float: left;
 padding: 10px 0 0 0;
 margin: 40px 0 0 0;
 width: 105px;
 display: inline;
 list-style-position: outside;
 list-style: none;
 }
 #menu_col1 li {
 line-height: 1px;
 font-size: 1px;
 }
 #menu_col1 a {
 display: block;
 width: 100px;
 height: 25px;
 background-position: left top;
 text-indent: -1000px;
 text-decoration: none;
 }
 #menu_col1 a:hover {
 background-position: left bottom;
 }
 [/CODE]

And now the HTML/PHP

First the entire index.php file followed by MenuButtons.html (included in index.php):

[CODE]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Class of 1960 Home Page
 </title>
 <link rel="stylesheet" href="BasicBroughtonStyle.css" type="text/css">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <!--  THIS NEEDS TO GO IN EACH HTML FILE -->
 <?php include("broughton1960.php"); ?><!-- Sets the base url to www.broughton1960.com-->
 </head>
 
 <body><!-- Inserts the background graphic-->
 <h2>Needham B. Broughton High School - Raleigh, North Carolina</h2><!-- Headline -->
 <h1>Class of 1960</h1><!--  Page title -->
 <h4>Home Page of the "B60s"</h4> <!-- Subtitle -->
 <!-- Next we insert a menu  -->
 <?php include("MenuButtons.html"); ?>
 <div id="bulletins"><!-- Inserts the contents du jour -->
 <?php include("contents.php"); ?>
 </div><!--  Ends the contents du jour -->
 
  <a href="http://getfirefox.com/"
   title="Get Firefox - Web browsing redefined.">
   <img src="http://www.mozilla.org/products/firefox/buttons/getfirefox_large2.png"
   width="138" height="43" border="0" alt="Get Firefox"></a>
 
 </body>
 </html>
 
 And the MenuButtons.html file:
 
 <!-- MenuButtons.html 20 Feb 2007 -->
 <ul class="menu_col1"><!--  List of Menu Choices -->
 <li><a href="http://www.broughton1960.com//"><img src="graphics/Home.GIF" alt="Home"></a></li>
 <li><a href="http://www.broughton1960.com//smf"><img src="graphics/Forum.GIF" alt="Forum Home"></a></li>
 <li><a href="/Music/wimpy.php"><img src="graphics/Jukebox.GIF" alt="Jukebox"></a></li>
 <li><a href="latipacAC.php"><img src="graphics/Latipac.GIF" alt="Latipac"></a></li>
 <li><a href="Directory.php"><img src="graphics/Directory.GIF" alt="Directory"></a></li>
 <li><a href="missing.php"><img src="graphics/Missing.GIF" alt="Missing"></a></li>
 <li><a href="inmemory.php"><img src="graphics/In Memory.GIF" alt="In Memory"></a></li>
 <li><a href="links.php"><img src="graphics/Links.GIF" alt="Links"></a></li>
 </ul> <!-- Ends List of Menu Choices -->
 [/CODE]

At one point the menu worked - even had an annoying 'jump' on hovering - but it quit and I lack the skills or experience to discover why. I've looked at it for days and read countless web pages but cannot find it. I would really appreciate your help. Perhaps fresh eyes will detect the issue more quickly.

Graeme, please note that I tried to take what you gave me and make it my own by experimenting after doing more reading. You will note that I put "ul" prefixes before all selectors that contain <ul>'s and modified them to include 'list-style' qualifiers. This corrected the problem of one of the buttons not appearing (don't know why it worked) that we discussed.

Thank you, kind friends! Your help is most highly valued.

bh

@CentauriFeb 22.2007 — #Hi Bob,

The need for negative margins should tell you something is not quite right, and in this case the negative top margin on the #bulletins div is due to the menu NOT being floated, and this is due to mixup between class and id. In the css, the menu is referenced by menu_col1 [B]ID[/B], but in the MenuButtons.html file, the ul is given a [B]class[/B] of menu_col1. Therefore, amend the include file to give the ul an [B]ID[/B]

[CODE]<ul [COLOR="Red"]id[/COLOR]="menu_col1"><!--  List of Menu Choices -->
 <li><a href="http://www.broughton1960.com//"><img src="graphics/Home.GIF" alt="Home"></a></li>
 [/CODE]

This now causes other problems...... ?

In the previous code I posted, I used background graphics for the menu buttons, and link text which was indented off the page - however, as you are using <img> elements for your buttons, that text indent is indenting the graphics off the page as well, so get rid of the text indent from the #menu_col1 a css. To centre and reposition the menu, you may need to adjust some margins. Try

[CODE]ul#menu_col1 {
 background-color: #FFFFCC;
 font-family: comic sans ms, sans-serif;
 float: left;
 margin: 10px 0 0 40px;
 width: 105px;
 display: inline;
 list-style-position: outside;
 list-style: none;
 }
 #menu_col1 li {
 line-height: 1px;
 font-size: 1px;
 }
 #menu_col1 a {
 display: block;
 width: 100px;
 height: 25px;
 background-position: left top;
 text-decoration: none;
 }
 [/CODE]

You will find that IE will still display the #bulletins div in the wrong place, and the best way to solve that is to NOT specify a width for it. Instead, just specify left and right margins, and IE will sit it in the correct place - it also avoids that unnecessary horixontal scrolling I went on about before. So try

[CODE]#bulletins {
 border: thick ridge #70009F;
 padding: 10px 24px 3px 24px;
 background-color: #FFD897;
 margin: 10px 20px 0 180px;
 padding: 10px 24px 3px 24px;
 font-size: 10pt;
 }
 [/CODE]

I also noticed the way you positioned the school pic background image using percentages to space it away from the edges. Using a percentage for the vertical position positions it a percentage of the [B]horizontal[/B] dimension, meaning the graphic moves up and down when page width is varied... You can mix measurement uits, so you can specify a pixel vertical position. Try

[CODE]body {
 font-family: comic sans ms, sans-serif;
 background: #FFC url(graphics/nbhscolorinset.jpg) no-repeat 92.8% 35px;
 font-size: 12px;
 }
 [/CODE]

Cheers

Graeme

@BobHauthorFeb 23.2007 — #Thanks Graeme,

There remains one problem in all browsers and several with the way IE displays things. Again, I'm not looking for code solutions so much as seeking to understand what CSS is doing and how I should adjust my techniques.

First, I cannot make the menu buttons shift to the right nor control their vertical placement relative to other screen elements. I've changed the margin to no avail. There is obviously more that I haven't grasped about the techniques you've shown me. I want to move the menu buttons to the right to keep them from being so near the edge of the screen. I don't want to move the bordered areas, just position the buttons away from the edge a little more. What is controlling the positioning?

AFA IE goes, there are many things that don't work in IE in the same manner as they do in Fx. Perhaps the most annoying is that my mouse scroll button looses its feedback feel and scrolling doesn't have the same effect. But, there are numerous positioning, text size and other annoyances. Is there a way to code in HTML or PHP to detect that the current browser is IE so that I can make it use different CSS or in some manner make IE behave like I want it to? What techniques for making adjustments based on browser do you pro's use? (I assume that because browsers behave differently that the CSS must be different. Perhaps that assumption is incorrect.)

Thanks again for all the help. I am forever in your debt.

bh

@CentauriFeb 23.2007 — #Bob,

I think you are trying to vary the wrong parameter regarding the margin. When "margin:" is specified, the values that follow are for margin-top, margin-right, margin-bottom, and margin-left in that order. In my example above, on ul#menu_col1 I had "margin: 10px 0 0 40px;" set, which gives a top margin of 10px and a left margin of 40px (which puts the menu in the middle of the left space) - currently you have "margin: 80px 0 0 0;" which gives a top margin of 80px and no left margin, so menu is hard against left edge.

Are you checking things in IE6 as you go ? At the moment the #bulletins div is at the bottom of the menu as I pointed out above, and the fix is in the third code panel in my last post.

I find that if you use techniques such as zeroing out default margins and padding at the start of the css, and setting base font sizes in pixels, that most other rendering innaccuracies by IE can be sorted easily without the use of conditional css files (which make the site harder to maintain) - sometimes just takes a little time to realise what is happening.

Attached is a partial screenshot with the last lot of coding I posted applied - the only difference with IE is the rendering of the #bulletins border.

Cheers

Graeme

[upl-file uuid=b6df00b6-d8c7-47e0-bd5f-fe81b6e47c62 size=9kB]PartialScreen.jpg[/upl-file]

@BobHauthorFeb 24.2007 — #Hello Graeme !

You are indeed a patient and generous man !

What an idiot you must think I am ! I must have a dozen or more places in my stylesheet where I have defined margins and padding using the TRBL designations (I even choose to declare all 4 variables so as not to confuse myself) and <b>still </b> I get it wrong. I think that I've had so much difficulty with the menu that I'm now gun shy. Thank you for pointing out my failure so gently.

As for the #bulletins panel, it displays more or less where I wish it to in IE6 for me; so I apparently don't see the same layout as you do.

Taking your advice to heart, I went back to verify that I've zeroed out the margins and paddings. This is the first part of my stylesheet:

[CODE]/*  Broughton1960 Stylesheet 'BasicBroughtonStyle*/
 
 *{
 margin: 0;
 padding: 0;
 }
 
 body {
 font-family: comic sans ms, sans-serif;
 font-size: 13px;
 color: #70009F;
 background: #FFC url(graphics/nbhscolorinset.jpg) no-repeat 92.8% 25px;
 }[/CODE]

I also went through searching and replacing all 'pt' declarations with equivalent sized 'px' declarations. This has given me a quite different display in virtually every panel; however I will endeavo(u)r to adjust with line-height and other variables to achieve the effects that I want.

I am checking my pages in Fx2, IE6, and Op9. Fx and Op seem to display more closely alike, but IE is driving me nuts. There seem to be as many differences as similarities, although I know this cannot be the case. If you have any web tutorials or books you would suggest, I'd be very grateful.

As I hope I've said before, "Thank you, very much!" for all the help.

@CentauriFeb 24.2007 — #Bob,

Attached is a (resized) screen shot of what I see in IE6 - note the #bulletins panel is way too low. Also note the horizontal scrollbar. The cause of both these problems is the excessive defined width of #bulletins....

Cheers

Graeme

[upl-file uuid=b81a27de-0fca-4b53-80bd-ef0337afc6f1 size=29kB]ScreenGrabIE.jpg[/upl-file]

Also in #CSS _↴

CSS Validation "Opera Only" hacks...Dreamweaver Layered menus MacOs/Wintel

Success!

Help @BobH spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Layout Control/Margins Question

26 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] Layout Control/Margins Question

26 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

26 Comments(s) _↴

Also in #CSS _↴