Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Arranging buttons within a header

    I'm building a site that will have a header that is 960px wide and 186px tall/high. I have a logo that sits to the left side of this which takes up 443px of the width, leaving 517px to its right of blank space that currently only has a background color.

    I'd like to use the remaining header to its right - the 517 x 186 area for buttons to navigate around the site, with buttons split in two rows - meaning either 3-4 buttons across the top 517 x 93 px portion of this, and another 3 or 4 buttons across the bottom 517 x 93 in this part of the header

    I'm not sure how to go about arranging the placement for these. I tried a search, but may not be using the correct terms as I really didn't find what I am looking for, or I couldn't quite absorb the results.

    This is the first site I've ever created, and I'm doing it for a business that I'm launching. Someone else was already helpful with the first question I've had. Hopefully this and any others I may have won't be seen as a nuisance. I'm putting it together in a trial of Dreamweaver.

    See the code below for what I have currently. Some content specific to the business has been replaced with generic terms.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <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-color: #C9D6A0;
    	margin: 0;
    	padding: 0;
    	color: #000;
    	font-family: "Century Gothic";
    }
    
    /* ~~ 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. */
    	text-shadow: #A2C8CA 0 0 1px;
    	-webkit-text-stroke: 0.65px
    	-webkit-font-smoothing: antialiased;
    	color: #AED6D9;
    	font-weight: 525;
    	font-size: 11pt;
    	line-height: 150%;
    }
    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;
    overflow: auto;
    	background-color: #603B3D;
    	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 {
    height: 186px;
    width: 960px;
    	background-color: #603B3D;
    	text-align: left;
    	font-size: 0pt;
    	position: fixed;
    }
    
    
    /* ~~ This is the layout information. ~~ 
    
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div 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.
    
    */
    
    .content {
    margin: 186px 0 0;
    	padding: 10px 0;
    	font-family: "Century Gothic";
    	font-size: 12pt;
    }
    
    /* ~~ The footer ~~ */
    .footer {
    	padding: 10px 0;
    	background-color: #CCC49F;
    }
    
    /* ~~ 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;
    }
    body,td,th {
    	color: #AED6D9;
    }
    -->
    </style><script type="text/javascript">
     <!--//--><![CDATA[//><!--
     
      //
      // CSS Photo Shuffler v1.0 by
      //   Carl Camera
      //   http://iamacamera.org 
      //
      // SetOpacity Function and inpiration from Photo Fade by
      //   Richard Rutter
      //   http://clagnut.com
      //
      // License: Creative Commons Attribution 2.5  License
      //   http://creativecommons.org/licenses/by/2.5/
      //
    
      // Customize your photo shuffle settings
      // 
      // * Surround the target < img /> with a < div >. specify id= in both
      // * The first and final photo displayed is in the html <img> tag
      // * The array contains paths to photos you want in the rotation. 
      //   If you want the first photo in the rotation, then it's best to
      //   put it as the final array image.  All photos must be same dimension
      // * The rotations variable specifies how many times to repeat array.
      //   images. zero is a valid rotation value.
    
      
    
    var gblPhotoShufflerDivId = "photodiv";
      var gblPhotoShufflerImgId = "photoimg"; 
      var gblImg = new Array(
            "scene 97 WM.jpg",
      "scene 98 WM.jpg",
      "scene 20 WM.jpg",
      "scene 43 WM.jpg",
      "scene 39 WM.jpg",
      "scene 60 WM.jpg",
      "scene 79 WM.jpg",
      "scene 96 WM.jpg"
        );
      var gblPauseSeconds = 7.25;
      var gblFadeSeconds = .85;
      var gblRotations = 100;
    
      // End Customization section
    
    
      
      
    var gblDeckSize = gblImg.length;
      var gblOpacity = 100;
      var gblOnDeck = 0;
      var gblStartImg;
      var gblImageRotations = gblDeckSize * (gblRotations+1);
    
      window.onload = photoShufflerLaunch;
      
      function photoShufflerLaunch()
      {
      	var theimg = document.getElementById(gblPhotoShufflerImgId);
            gblStartImg = theimg.src; // save away to show as final image
    
    	document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
    	setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
      }
    
      function photoShufflerFade()
      {
      	var theimg = document.getElementById(gblPhotoShufflerImgId);
    	
      	// determine delta based on number of fade seconds
    	// the slower the fade the more increments needed
            var fadeDelta = 100 / (30 * gblFadeSeconds);
    
    	// fade top out to reveal bottom image
    	if (gblOpacity < 2*fadeDelta ) 
    	{
    	  gblOpacity = 100;
    	  // stop the rotation if we're done
    	  if (gblImageRotations < 1) return;
    	  photoShufflerShuffle();
    	  // pause before next fade
              setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
    	}
    	else
    	{
    	  gblOpacity -= fadeDelta;
    	  setOpacity(theimg,gblOpacity);
    	  setTimeout("photoShufflerFade()",30);  // 1/30th of a second
    	}
      }
    
      function photoShufflerShuffle()
      {
    	var thediv = document.getElementById(gblPhotoShufflerDivId);
    	var theimg = document.getElementById(gblPhotoShufflerImgId);
    	
    	// copy div background-image to img.src
    	theimg.src = gblImg[gblOnDeck];
    	// set img opacity to 100
    	setOpacity(theimg,100);
    
            // shuffle the deck
    	gblOnDeck = ++gblOnDeck % gblDeckSize;
    	// decrement rotation counter
    	if (--gblImageRotations < 1)
    	{
    	  // insert start/final image if we're done
    	  gblImg[gblOnDeck] = gblStartImg;
    	}
    
    	// slide next image underneath
    	thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
      }
    
    function setOpacity(obj, opacity) {
      opacity = (opacity == 100)?99.999:opacity;
      
      // IE/Win
      obj.style.filter = "alpha(opacity:"+opacity+")";
      
      // Safari<1.2, Konqueror
      obj.style.KHTMLOpacity = opacity/100;
    
      // Older Mozilla and Firefox
      obj.style.MozOpacity = opacity/100;
    
      // Safari 1.2, newer Firefox and Mozilla, CSS3
      obj.style.opacity = opacity/100;
    }
    
    //--><!]]>
    </script>
    
    <!--------------------------------------------------------------------------------
    <!--
    var gblPhotoShufflerDivId = "photodiv";
    var gblPhotoShufflerImgId = "photoimg"; 
    var gblImg = new Array--></head>
    
    <body>
    
    <div class="container">
      <div class="header"><img src="Logo.jpg" width="443" height="186" alt="Logo 443"></div>
      <div class="content">
        <p>&nbsp;</p>
        <div id="photodiv"><center>
    <img id="photoimg" src="scene 96 WM.jpg" /></center>
    </div>
        <p>&nbsp;</p>
        <p>MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF 
    
    TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF 
    
    TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF 
    
    TEXT. MY FIRST PARAGRAPH OF TEXT.</p>
        <p>&nbsp;</p>
        <p>MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND 
    
    PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY 
    
    SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF 
    
    TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT.</p>
        <p>&nbsp;</p>
        <p>MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF 
    
    TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF 
    
    TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF 
    
    TEXT. MY LAST PARAGRAPH OF TEXT.<br>
        </p>
        <p>&nbsp;</p>
        <p></p>
        <h1>&nbsp;</h1>
        <strong>
        <!-- end .content -->
      </strong></div>
      <div class="footer">
        <p>Footer</p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    </body>
    </html>

    I'm also having a problem with the automatic photo album (I found the shuffler online - it's not my creation: http://iamacamera.org/sandbox/photoshuffler/). Except for the initial picture in the div (which hides under the header correctly), once you scroll up a bit, the pictures end up overlapping the fixed/locked header, instead of hiding behind it (like the text), but I may need to start another thread for this issue...

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello MMM717,
    Look how easy it can be to let the natural flow of the document arrange those buttons for you -
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background: #C9D6A0;
    	color: #000;
    	font-family: "Century Gothic";
    } 
    img { 
    	display: block; /*I just did this because I don't have your image*/
    	background: #00f; /*I just did this because I don't have your image*/
    	border: none; 
    } 
    .container {
    	width: 960px;
    	margin: 0 auto; 
    	overflow: auto;
    	background: #603B3D;
    } 
    .header {
    	height: 186px;
    	width: 960px;
    	background: #603B3D;
    	text-align: left;
    	position: fixed;
    } 
    .header img {float: left;}
    	.header ul {
    		margin: 5px 0 0 400px;
    		text-align: center;
    	}
    		.header ul li {
    			margin: 10px;
    			display: inline-block;
    		}
    			.header ul li a:link,
    			.header ul li a:visited {
    				height: 75px;
    				width: 100px;
    				display: block;
    				color: #f00;
    				background: #00f;
    			}
    			.header ul li a:hover,
    			.header ul li a:active {
    				color: #00f;
    				background: #f00;
    			}
    .content {
    	margin: 186px 0 0;
    	padding: 10px 20px;
    	font-size: 12pt;
    } 
    .footer {
    	padding: 10px 0;
    	background: #CCC49F;
    }
    </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
            	<img src="Logo.jpg" width="443" height="186" alt="Logo 443">
                	<ul>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    </ul>
            <!--end .header--></div>
        <div class="content">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    	<br />
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    	<br />
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    	<br />
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    	<br />
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    	<br />
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    	<br />
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    	<br />
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    	<br />
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    	<br />
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    	<br />
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    	<br />
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    	<br />
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
        <!-- end .content --></div>
            <div class="footer">
            	<p>Footer</p>
            <!-- end .footer --></div>
        <!-- end .container --></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks Excavator - I'll look that over and see if I can get things to work. I'll advise how I do...

  • #4
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hello Excavator,

    My head's spinning a bit. I'm seeing quite a few changes compared to the code I posted initially:

    • "html" added before "body" in the CSS
    • Photoshuffler code removed - I'm having issues with this anyway, but I will need to either fix this or get a replacement as I want an album of pictures to automatically display on this page
    • Some other "stuff" removed that came from Dreamweaver, such as text decoration, etc.
    • More coding added to the img part of the CSS
    • Font size removed from header - is this needed at all here? Should I write my button labels as part of the picture for each? Or should I write them over the intended part of each button as html text (would this be better for search engine recognition)?


    Which of these changes are relevant to adding the buttons in this manner? All? If some aren't, what do these changes do? Will the header still stay fixed (as you helped me with previously), with the body rolling under once the page is scrolled down? I'm hoping I'm describing all of these correctly...

    I'm sorry if it seems I'm asking for too much - I designed the building for my project on my own (after never having done anything like it before in my life) without having to ask for much at all in the way of help, but this is making me nuts! Thanks again...

  • #5
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I should add that I took your code as is and ran it as a separate new page. I'm seeing the page buttons in a vertical line, running way down the page. I want to have these all within the header (in the space next to the logo in the header) in a horizontal 4 x 2 arrangement, like this:

    button 1 | button 2 | button 3 | button 4
    button 5 | button 6 | button 7 | button 8

    Thanks!
    Attached Thumbnails Attached Thumbnails Arranging buttons within a header-excavator-code-screenshot.jpg  

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by MMM717 View Post
    I should add that I took your code as is and ran it as a separate new page. I'm seeing the page buttons in a vertical line, running way down the page. I want to have these all within the header (in the space next to the logo in the header) in a horizontal 4 x 2 arrangement, like this:

    button 1 | button 2 | button 3 | button 4
    button 5 | button 6 | button 7 | button 8

    Thanks!
    Copy/paste that entire snippet into a new .html document and view it in your browser. DW Design View is NOT dependable, it does not render code like any known browser.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    * "html" added before "body" in the CSS

    I like to apply styling to both. If needed, one or both elements can be styled separately too.


    * Photoshuffler code removed - I'm having issues with this anyway, but I will need to either fix this or get a replacement as I want an album of pictures to automatically display on this page

    I removed it because I was addressing your question about menu buttons.


    * Some other "stuff" removed that came from Dreamweaver, such as text decoration, etc.

    text-decoration is that line under the anchor


    * More coding added to the img part of the CSS

    I thought I commented on that. I don't have your images so I changed them from default inline to block level elements, then gave them a color so I could see them.

    * Font size removed from header - is this needed at all here?

    Font size is up at the top of the CSS. If the font size is different in #header, then it needs to be there but no need to repeat it there if it's the same.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    MMM717 (11-14-2012)

  • #8
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Copy/paste that entire snippet into a new .html document and view it in your browser. DW Design View is NOT dependable, it does not render code like any known browser.
    That works for me in Chrome and Firefox, but in IE7 I'm getting the buttons displaying in as they were in my Dreamweaver design view screenshot. Anyway to fix/adjust for that (maybe some additional code that "fixes" things when the site is viewed/used in IE)? I see your signature noting "ignore IE", but I know people who use some variant of IE as their default and have an aversion to using other browsers (for reasons I don't understand, but they do), and I'm concerned about people seeing a greatly distorted version of the site.
    Last edited by MMM717; 11-14-2012 at 06:56 AM.

  • #9
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I'm curious - how do I adjust the spacing between these buttons in the code? In looking at the ones you included with the code, there's a pretty good amount of background space between each. That's OK depending on what someone is going for, but I had calculated the size of the image for the buttons to leave only about 3 px of space between - meaning for the total 517x186 area, I figured on a button size of 127x90 each.

    I attached a screenshot of what you worked on, and also one with the new buttons (with the last one not filled in for now, just for effect in the example). In the one with the new buttons, you can see they seem to be butting up against the other, and spilling over outside the header.

    Also, if the text (such as "button" you used) is written in directly in within the code, can it be setup to overwrite part of a button, and have that text sit towards the bottom of each one? If you look at my button design, it's pretty simple, with it mostly being background color (which I filled into the image itself), leaving a space below the top design to add in text. Or do I need to make any text part of the image itself (and not code based)?

    Thanks!
    Attached Thumbnails Attached Thumbnails Arranging buttons within a header-site-buttons-screenshot-excavator.jpg   Arranging buttons within a header-site-buttons-screenshot-new.jpg  

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Good morning MMM717,
    That ignore IE in my signature is referring to IE6.
    I actually forgot that IE7 drops the ball on display: inline-block; There is a fix, along with a pretty good article on what's happening, here.

    The space between those buttons is adjusted by the margin on the li. The word "button" can just be taken out, an anchor doesn't have to have text in it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    MMM717 (11-14-2012)

  • #11
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    That IE fix worked, once I figured out where to position it in the code. Thanks!

    I'm still having the problem with the spacing between/around the buttons. With the
    Code:
    .header ul li {
    			margin: 10px;
    as you initially had it set things up, each button has the following problem:

    • Margin values above 10px don't seem to make any changes one way or the other relative to how things appear when set at 10.
    • This margin value is not leaving any space between the left and right sides of each button.
    • A bit of the right side of the button is also being covered up/cut-off by the button that follows it. If you look at the right most button in each row - where there isn't another one next to it on the right to cover anything - you'll see a bit more of the button (noticeable on how the design comes a little further down on that side) than the ones in the other positions


    If I use a margin value lower than 10px, it helps the placement vertically somewhat depending on how I adjust things. My goal is to have the total height of the area - two rows of buttons with a height of 90px each + a bit of space above/below, equal the 186px height of the logo. However, any margin value below 9px is making things look worse side to side, with more of the right side of the buttons getting covered up. Such settings are also pushing the buttons further away from the logo, when they should be closer (so everything fits in the 517 x 186 area without anything getting cut-off/obscured). I tried making different variations of distinct left/right/top/bottom margin values, but couldn't get any of them to be an improvement.

    I've attached a screenshot of this set at 1px for comparison to the one I previously posted, and also the file for my button image (if that helps).
    Attached Thumbnails Attached Thumbnails Arranging buttons within a header-site-buttons-screenshot-margin-1.jpg   Arranging buttons within a header-site-button-excavator.jpg  

  • #12
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Good morning MMM717,
    The word "button" can just be taken out, an anchor doesn't have to have text in it.
    Yes, this part I understand, but thanks. What I meant by my question was could I code in writing so that it overwrites on the bottom portion of each button image itself - not below the image file. If so, how?

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Maybe something like this would work for you?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background: #C9D6A0;
    	color: #000;
    	font-family: "Century Gothic";
    } 
    .container {
    	width: 960px;
    	margin: 0 auto; 
    	overflow: auto;
    	background: #603B3D;
    } 
    .header {
    	height: 186px;
    	width: 960px;
    	background: #603B3D;
    	text-align: left;
    	position: fixed;
    } 
    	.header ul {
    		margin: 5px 0 0 400px;
    		text-align: center;
    		list-style: none;
    	}
    		.header ul li {
    			width: 100px;
    			margin: 3px;
    			float: left;
    		}
    			.header ul li a {
    				height: 25px;
    				padding: 50px 0 0;
    				display: block;
    				background: url(your picture here.jpg);
    			}
    </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                	<ul>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    	<li><a href="#">button</a></li>
                    </ul>
            <!--end .header--></div>
        <!-- end .container --></div>
    </body>
    </html>
    Last edited by Excavator; 11-15-2012 at 12:42 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    MMM717 (11-15-2012)

  • #14
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    A variation of that seems to be helping. I'll post further after I experiment a bit more. Much thanks!

  • #15
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    That worked out much better - thanks again, Excavator.

    Still one more question from before - can text somehow be overwritten, so that the titles for each page could be typed at the bottom (centered horizontally) of each button - not below the button, but on it?
    Last edited by MMM717; 11-16-2012 at 09:26 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •