Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS Layout Help

Options
  • 25-03-2010 1:11pm
    #1
    Xylophonic
    Closed Accounts Posts: 364 ✭✭


    Hi,
    I need help with a template I am currently using. At the moment it has a nav menu on the left hand side but I want a similar one on the right hand side, could someone help me with the coding of this?
    Here is an image of what I would like to do: http://i42.tinypic.com/2jc8tw1.jpg
    Regards,
    Daz
    This is the code I currently use: 
    /* +++++++++++++++++++++++++++++ Shifting Ground +++++++++++++++++++++++++++++ */
 
/* ++++++++++++++++++++ Common Styles ++++++++++++++++++++ */
 
* {
 margin: 0px;
 padding: 0px;
}
body {
 color: #fff;
 background-color: #484848;
 font-family: 'verdana', 'helvetica', sans-serif;
 font-size: 100%;
 text-align: center;
}
table {
 font-size: 1em;
}
td {
 color: #fff;
 background-color: inherit;
 font-family: 'verdana', 'helvetica', sans-serif;
 font-size: 1em;
}
a {
 color: #fff;
 background-color: inherit;
 text-decoration: underline;
}
a:hover {
 color: #fff;
 background-color: inherit;
 text-decoration: none;
}
img {
 border: none;
}
ul, ul li {
 list-style: none outside;
}
ol, ol li {
 list-style: decimal inside;
}
p {
 padding: 0.6em 0em 0.6em;
}
fieldset {
 border: none;
}
input, textarea, select {
 font-family: 'verdana', 'helvetica', sans-serif;
 font-size: 13px;
}
.hidethis {
 display: none;
}
.clearthis {
 margin : 0px;
 height : 1px;
 clear : both;
 float : none;
 font-size: 1px;
 overflow : hidden;
 visibility: hidden;
}
 
/* ++++++++++++++++++++ Image Thumbnails ++++++++++++++++++++ */
.tb_center {
 text-align: center;
}
.tb_center img {
 margin: 1.3em auto;
 border: 1px #fff solid;
}
 
/* ++++++++++++++++++++ Body Wrappers ++++++++++++++++++++ */
#body_wrapper {
 margin: 35px 10px;
 width: 982px;
 background: url() no-repeat 100% 68px;
 font-size: 0.71em;
}
/* ++++++++++++++++++++ Body Container ++++++++++++++++++++ */
#body_container {
 float: right;
 position: relative;
 left: -243px;
 width: 496px;
 background: url('images/main_bg_bot.gif') no-repeat 0% 100%;
}
#body_container_b {
 padding: 15px 0px;
 width: 496px;
 background: url('images/main_bg_top.gif') no-repeat 0% 0%;
}
#body_container_c {
 color: inherit;
 background-color: #8e8257;
 border-left: #fff 6px solid;
 border-right: #fff 6px solid;
}
 
/* ++++++++++++++++++++ Page Header ++++++++++++++++++++ */
#page_header {
 padding-bottom: 2px;
 color: inherit;
 background-color: #b3ab78;
}
#page_header h1 {
 position: relative;
 top: -4px;
 width: 100%;
 height: 40px;
 background: url('images/counterstrike_logo.gif') no-repeat 50% 50%;
}
 
/* ++++++++++++++++++++ Page Content ++++++++++++++++++++ */
#page_content {
 padding: 15px 17px 10px;
 font-weight: bold;
 text-align: left;
}
.link_readmore {
 padding: 35px 0px 10px;
 text-align: right;
}
.link_readmore a {
 margin-left: auto;
 display: block;
 width: 94px;
 height: 24px;
 background: url('images/button_readmore.gif') no-repeat 0% 0%;
}
 
/* ++++++++++++++++++++ Navigation Menu Left ++++++++++++++++++++ */
#navmenu {
 float: left;
 margin-top: 68px;
 position: relative;
 left: 77px;
 width: 166px;
 background: url('images/navmenu_bg_bot.gif') no-repeat 0% 100%;
 font-size: 1.15em;
 font-weight: bold;
}
#navmenu_b {
 padding: 15px 0px;
 width: 166px;
 background: url('images/navmenu_bg_top.gif') no-repeat 0% 0%;
}
#navmenu_c {
 color: inherit;
 background-color: #6d6845;
 border-left: #fff 6px solid;
}
#navmenu a {
 text-decoration: none;
 text-transform: uppercase;
}
#navmenu li {
 border-top: #fff 1px solid;
}
#navmenu li a {
 display: block;
 padding: 5px 0px;
 width: 160px;
}
#navmenu li a:hover {
 color: inherit;
 background-color: #989160
}
#navmenu li.list_first {
 border-top: none;
}
 
/* ++++++++++++++++++++ Navigation Menu Right ++++++++++++++++++++ */
#navrightmenu {
 float: left;
 margin-top: 168px;
 position: relative;
 left: 77px;
 width: 166px;
 background: url('images/navmenu_bg_botright.gif') no-repeat 0% 100%;
 font-size: 1.15em;
 font-weight: bold;
}
#navrightmenu_b {
 padding: 15px 0px;
 width: 166px;
 background: url('images/navmenu_bg_topright.gif') no-repeat 0% 0%;
}
#navrightmenu_c {
 color: inherit;
 background-color: #6d6845;
 border-left: #fff 6px solid;
}
#navrightmenu a {
 text-decoration: none;
 text-transform: uppercase;
}
#navrightmenu li {
 border-top: #fff 1px solid;
}
#navrightmenu li a {
 display: block;
 padding: 5px 0px;
 width: 160px;
}
#navrightmenu li a:hover {
 color: inherit;
 background-color: #989160
}
#navrightmenu li.list_first {
 border-top: none;
}
 
/* ++++++++++++++++++++ Page Footer ++++++++++++++++++++ */
#page_footer {
 padding: 20px 0px;
 font-size: 0.9em;
 font-weight: bold;
}


Comments

  • Options
    #2
    rossc007
    Registered Users Posts: 627 ✭✭✭rossc007


    I think you'll need to throw up a copy of the HTML too in order for anyone to help mate :)


  • Options
    #3
    Xylophonic
    Closed Accounts Posts: 364 ✭✭Xylophonic


    Ok cool, I can't upload it at the moment so I'll just upload the code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Games Development @ IT Sligo</title>
<script type="text/javascript" src="bookMark.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
 <div id="body_wrapper">

  <!-- Start of Body Container -->
  <div id="body_container">
  <div id="body_container_b">
  <div id="body_container_c">

   <!-- Start of Page Header -->
   <div id="page_header">
    <!-- Website Title -->
    <h1><span class="hidethis">
    Counter Strike
    </span></h1>
   </div>
   <!-- End of Page Header -->

   <!-- Start of Page Content -->
   <div id="page_content">

    <p>Don't forgot to check <a href="[URL]http://www.freewebsitetemplates.com">free[/URL] website templates</a> every day, because we add at least one free website template daily.</p>
    
    <p>This is a template designed by free website templates for you for free you can replace all the text by your own 
    text. This is just a place holder so you can see how the site would look like.</p> 
    
    
    <p>If you're looking for beautiful and professionally made templates you can find them at <a href="[URL]http://www.templatebeauty.com">Template[/URL] Beauty</a>.</p>
    
    <div class="tb_center">
    <img src="images/game_consoles.gif" width="425" height="176" alt="" />
    </div>
<p>You can remove any link to our websites from this template you're  free to use the template without linking 
    back to us. Don't want your boss to know you used a free website template ;) .</p>
    
   <p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="[URL]http://www.freewebsitetemplates.com/forum/">forum</a>.</p[/URL]>
    
    <p>If you're looking for beautiful and professionally made templates you can find them at <a href="[URL]http://www.templatebeauty.com">Template[/URL] Beauty</a>.</p>
    <p>To find great hosting providers visit <a href="[URL]http://www.webhostingzoom.com">Web[/URL] Hosting Zoom</a></p>

    <!-- Bookmark Button -->
    <div class="link_button">
                 <form action="#">
      <input type="button" value="Bookmark us!" onclick="bookmark('http://www.google.com/','Google')">
     </form>
    </div>
   </div>
   <!-- End of Page Content -->
  </div>
  </div>
  </div>
  <!-- End of Body Container -->
 
  <!-- Start of Navigation Menu -->
  <div id="navmenu">
  <div id="navmenu_b">
  <div id="navmenu_c">
   <h3><span class="hidethis">Site Menu:</span></h3>
   <ul>
   <li class="list_first"><a href="index.htm">Home</a></li>
   <li><a href="year_1.htm">Year 1</a></li>
   <li><a href="year_2.htm">Year 2</a></li>
   <li><a href="year_3.htm">Year 3</a></li>
   <li><a href="contact.htm">Contact Us</a></li>
   </ul>

  </div>
  </div>
  </div>
  <!-- End of Navigation Menu -->
        
        
        <!-- Start of Navigation Right Menu -->
  <div id="navmenuright">
  <div id="navmenuright_b">
  <div id="navmenuright_c">
   <h3><span class="hidethis">Site Menu:</span></h3>
   <ul>
   <li class="list_first"><a href="index.html">Home</a></li>
   <li><a href="year_1.html">Year 1</a></li>
   <li><a href="year_2.html">Year 2</a></li>
   <li><a href="year_3.html">Year 3</a></li>
   <li><a href="contact.html">Contact Us</a></li>
   </ul>

  </div>
  </div>
  </div>
  <!-- End of Navigation Right Menu -->

  <div class="clearthis">&nbsp;</div>

  <!-- Start of Page Footer -->
  <div id="page_footer">
  </div>
  <!-- End of Page Footer -->

 </div>
</body>
</html>


  • Options
    #4
    Pablod
    Registered Users Posts: 489 ✭✭Pablod


    Just had a quick look, so my answer may not be 100% ;)

    1st- thing do you need to use relative position on your css
    2nd- look at the order of your HTML

    Inside your Body_wrapper
    You have body containter then Left menu then right menu all floated left.
    Place your leftnavmenu before your Body container, then your rightnavmenu (floated right) after the body container

    Hope this helps a bit.


  • Options
    #5
    Xylophonic
    Closed Accounts Posts: 364 ✭✭Xylophonic


    It didn't seem to work the right side menu is still missing.


  • Options
    #6
    Nulty
    Registered Users Posts: 7,838 ✭✭✭Nulty


    For a start

    Your div is called
    <div id="navmenuright">

    And your css rule is calling
    #navrightmenu {


  • Advertisement
Advertisement