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.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Modifying A Side NavBar [Alignment]

    Hey guys,

    I had some issues with a website that I am currently working on. It is pretty much done except for a few little things that I have to fix including this issue that I am about to present you with.

    My Website Link [Issue]:
    Please note that this is just a temporary link for now.
    http://www.pavlosrest.co.cc/menus.php

    Well my issue is on the right-hand side of the page. As you can see, the buttons that read "Dinner Menu, Senior Menu, Party Menu, Takeout Menu" from top to bottom, aren't positioned where I want them to be. I want them to be aligned with my content box on the left. In other words, I want to shift those buttons down in place of the "Testimonials" box and move the "Testimonials" box down to make room.

    HTML Page:
    Text is too long so I can't post here. So I pasted it on Pastebin.
    http://pastebin.com/yua5Umvc

    CSS:
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    body {
    	text-align: center;
    	margin: 1px;
    	padding: 1px;
    }
    
    #background
    {
    	position: fixed;
    	z-index: -800;
    	top:0;
    	left:0;
    	width: 100%;
    	height: !auto;
    }
    
    #wrapper {
    	text-align: center;
    	width: 912px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    }
    
    #socialwrap {
    	text-align: right;
    	width: 912px;
    	height: 32px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    }
    
    #header {
    	background-image: none;
    	text-align: center;
    	width: 912px;
    	height: 252px;
    }
    
    #logo {
    	background-image: none;
    	text-align: center;
    	height: 246px;
    	width: 906px;
    }
    
    #ntcontainer{
    	position: absolute;
    	float: right;
    	clear: both;
    }
    #menunav {
    	position: relative;
    	line-height: 0px;
    	display: inline;
    	float: right;
    	width: 155px;
    	border:2px groove #003333;
    	background-color: #CFB53B;
    	text-align: left;
    	padding: 18px;
    	margin-bottom: 10px;
    	z-index: 10;
    }
    
    #testimonial {
    	position: relative;
    	display: inline;
    	float: right;
    	width: 155px;
    	border:2px groove #003333;
    	background-color: #CFB53B;
    	text-align: left;
    	padding: 18px;
    	z-index: 11;
    	clear: both;	
    }
    
    #dummyMenu {
    	position: relative;
    	display: inline;
    	float: right;
    	width: 191px;
    	text-align: left;
    	z-index: 11;
    	clear: both;
    	height: 13px;
    }
    
    #sideMenu {
    	position: relative;
    	display: inline;
    	float: right;
    	width: 191px;
    	border:2px groove #003333;
    	background-color: #CFB53B;
    	text-align: left;
    	z-index: 11;
    	clear: both;
    	bottom: 13px;
    }
    
    #content {
    	text-align: center;
    	width: 912px;
    }
    
    #mainContent {
    	position: relative;
    	float: left;
    	text-align: left;
    	width: 640px;
    	font-size: 18px;
    	color: #000000;
    	background-color: #CFB53B;
    	font-family: "Arial Narrow";
    	border: 2px groove #000000;
    	padding-top: 20px;
    	padding-right: 30px;
    	padding-bottom: 20px;
    	padding-left: 30px;
    }
    
    #navbar {
    	z-index: 10;
    	padding-bottom: 20px;
    	width: 100%;
        height: !auto;
    }
    #navContainer {
        width: 100%;
        height: !auto;
        position: relative;
    }
    
    #homeButton {
    	position: absolute;
    	padding-top: 3.5%;
    	padding-left: 14%;
    	width: 668px;
    }
    
    #subscribe {
    	position: absolute;
    	top: 100%;
    	float: right;
    	width: 155px;
    	border:2px groove #003333;
    	background-color: #CFB53B;
    	text-align: left;
    	padding: 18px;
    }
    
    #sideLogo {
    	float: left;
    	width: 190px;
    }
    
    #footer {
    	text-align: right;
    	width: 912px;
    	clear: both;
    }
    
    
    .paragraph {
    	font-family: "Arial Narrow";
    	color: #FFFFFF;
    	font-size: 18px;
    	font-style: normal;
    }
    
    .footer {
    	color: #FFFFFF;
    	font-size: 12px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-weight: bold;
    }
    
    .header {
    	font-size: 36px;
    	font-family: Broadway;
    	color: #FFFFFF;
    	font-style: normal;
    }
    
    .no-border2 {  border-left: none;
      border-right: none;
      border-bottom: none;
    }
    
    .no-border3 {  border-left: none;
      border-right: none;
      border-bottom: none;
      border-top: none;
    }
    
    .style1 {
    	color: #FFFFFF
    }
    
    .style2 {
    	font-family: "Gill Sans MT Condensed";
    	color: #000000;
    	font-size: 50px;
    }
    
    .style5 {
    	font-size: 15px;
    }
    
    .style6 {
    	font-size: 13px
    }
    
    .style7 {
    	font-family: "Britannic Bold";
    	font-size: 17px;
    }
    
    .style8 {
    	font-family: "Britannic Bold";
    	font-size: 25px;
    }
    
    .style9 {
    	font-family: Arial, Helvetica, sans-serif
    }
    
    .style10 {
    	font-family: "Arial Narrow"
    	}
    
    .style11 {
    	font-size: 25px;
    	font-weight: bold;
    }
    
    .style12 {
    	font-family: "Arial Narrow"; font-style: italic; 
    }
    
    .style13 {
    	font-size: 25px
    }
    
    .style14 {
    	font-family: Onyx;
    	font-size: 36px;
    }
    
    .style15 {
    	font-family: "Gill Sans MT Condensed"; color: #000000; 
    }
    
    .style16 {
    	font-size: 14px
    }
    
    .style17 {
    	font-size: 15px;
    	font-weight: bold;
    }
    
    .style18 {
    	font-size: 22px;
    	font-weight: bold;
    }
    
    .style19 {
    	font-size: 16px
    }
    
    .style21 {	
    	color: #E9DBBC;
    	font-weight: bold;
    }
    If you can help me with this, I would really appreciate it. If my question wasn't clear, please do let me know.
    Last edited by CallMeShady; 03-06-2012 at 10:55 PM.

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Your div wrapper for the side menu is closed wrong. It needs to be closed after the side menu divs.

    Code:
      <div id="dummyMenu"></div>
        <div id="sideMenu"><a href="menus.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Dinner Menu','','images/Dinner Menu Side Tab Light.jpg',1)"><img src="images/Dinner Menu Side Tab Dark.jpg" alt="Dinner Menu" name="Dinner Menu" width="191" height="25" border="0" id="Dinner Menu" /></a></div>
        <div id="sideMenu"><a href="senior_menu.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Senior Menu','','images/Senior Menu Side Tab Light.jpg',1)"><img src="images/Senior Menu Side Tab Dark.jpg" alt="Senior Menu" name="Senior Menu" width="191" height="25" border="0" id="Senior Menu" /></a></div>
        <div id="sideMenu"><a href="party_menu.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Party Menu','','images/Party Menu Side Tab Light.jpg',1)"><img src="images/Party Menu Side Tab Dark.jpg" alt="Party Menu" name="Party Menu" width="191" height="25" border="0" id="Party Menu" /></a></div>
        <div id="sideMenu"><a href="http://www.pavlosrestaurant.com/Pavlos%20-%20Takeout%20Menu%20Edited.pdf" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Takeout Menu','','images/Takeout Menu Side Tab Light.jpg',1)"><img src="images/Takeout Menu Side Tab Dark.jpg" alt="Takeout Menu" name="Takeout Menu" width="191" height="25" border="0" id="Takeout Menu" /></a></div>
        <div id="testimonial">
    
          <p class="style9">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em>&nbsp;<span class="style10">&quot;I live in the White Rock area and it is a commonly know fact around here that Pavlos has the best french onion soup in North America, without exaggeration. You could sample french onions for years and not come close...&quot; </span></em></p>
          <p align="right" class="style10">- Xeno</p>
        </div>

  • Users who have thanked sean3838 for this post:

    CallMeShady (03-06-2012)

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sean3838 View Post
    Your div wrapper for the side menu is closed wrong. It needs to be closed after the side menu divs.

    Code:
      <div id="dummyMenu"></div>
        <div id="sideMenu"><a href="menus.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Dinner Menu','','images/Dinner Menu Side Tab Light.jpg',1)"><img src="images/Dinner Menu Side Tab Dark.jpg" alt="Dinner Menu" name="Dinner Menu" width="191" height="25" border="0" id="Dinner Menu" /></a></div>
        <div id="sideMenu"><a href="senior_menu.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Senior Menu','','images/Senior Menu Side Tab Light.jpg',1)"><img src="images/Senior Menu Side Tab Dark.jpg" alt="Senior Menu" name="Senior Menu" width="191" height="25" border="0" id="Senior Menu" /></a></div>
        <div id="sideMenu"><a href="party_menu.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Party Menu','','images/Party Menu Side Tab Light.jpg',1)"><img src="images/Party Menu Side Tab Dark.jpg" alt="Party Menu" name="Party Menu" width="191" height="25" border="0" id="Party Menu" /></a></div>
        <div id="sideMenu"><a href="http://www.pavlosrestaurant.com/Pavlos%20-%20Takeout%20Menu%20Edited.pdf" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Takeout Menu','','images/Takeout Menu Side Tab Light.jpg',1)"><img src="images/Takeout Menu Side Tab Dark.jpg" alt="Takeout Menu" name="Takeout Menu" width="191" height="25" border="0" id="Takeout Menu" /></a></div>
        <div id="testimonial">
    
          <p class="style9">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em>&nbsp;<span class="style10">&quot;I live in the White Rock area and it is a commonly know fact around here that Pavlos has the best french onion soup in North America, without exaggeration. You could sample french onions for years and not come close...&quot; </span></em></p>
          <p align="right" class="style10">- Xeno</p>
        </div>

    No, that is not the issue. I created that "dummy" tag just to add a little bit of line break on the top, as I was experimenting with the code, trying to align the side menu using some simple tricks, but it still kind of messed up. If I completely remove the "dummy" tag, it doesn't really make a big difference. The div tag that contains every button is called "sideMenu".

  • #4
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Setting #mainContent position to position: absolute; will line up the top of your page fine.

    Edit:
    Changed #footer to position: absolute; too and moved it (see below) and it seems to be fine.
    Code:
                            <td><div style="float:left;">Spaghetti</div>
                                <div align="right">$9.95</div></td>
                          </tr>
    
                      </table></td>
                    </tr>
                  </table>
              </div>
            </div>
          </div>
    	  <div id="footer"> <br />
    
        <span class="style1">Copyright © Pavlos Restaurant 2008 Ltd. </span></div>
        </div>
    	
      </div>
      
    </div>
    <div id="sixserve" style="display:none"><a href="http://sixserve.com" onclick="window.open(this.href);return(false)"><img src="http://sixserve.com/page/badge.png" alt="SixServe Free Web Hosting" title="SixServe Free Web Hosting" /></a></div>
    <script type="text/javascript" src="http://sixserve.com/page/badge.js?user=pavlosre&amp;domain=pavlosrest.co.cc"></script></body>
    </html>
    You've used many an id where there should be a class and it's really confusing to read.
    Last edited by dan-dan; 03-06-2012 at 10:04 PM.

  • Users who have thanked dan-dan for this post:

    CallMeShady (03-06-2012)

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the help guys but I've resolved the issue by using sean3838's input. Basically, I enclosed the "dummy" tag the way he told me to and then I added another "dummy" tag to create a line break on the top of the tabs. That aligned the page perfectly.

    Thanks again, you guys are truly awesome.


  •  

    Posting Permissions

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