Some assistance please

  • atlnycdude
  • Newbie
  • Newbie
  • atlnycdude
  • Posts: 6

Post 3+ Months Ago

Hey room. Got a quick issue that I would like to have it solved soon. I created a navigation using ul, li tags and css. I created the navigation background using photoshop using | for each tab ig. Home, About us etc. I would like for each block on the horizontal line to fit on each of the "|" of the img. I want it smack in the middle including the text. Here is the code:


Code: [ Select ]


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Precious Jewels Learning Incorporated - Home</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="wrapper">
        <div id="header">
            <div id="followus">
                <a class="facebook"><img src="images/header/Precious-Jewels-Learning-Incorporated - facebook.jpg" alt="Facebook Page" /></a>
                <a class="twitter"><img src="images/header/Precious-Jewels-Learning-Incorporated - twitter.jpg" alt="Twitter Page" /></a>
                <a class="home"><img src="images/header/Precious-Jewels-Learning-Incorporated - home.jpg" alt="Home" /></a>
                <a class="contact"><img src="images/header/Precious-Jewels-Learning-Incorporated - email.jpg" alt="email" /></a>
            </div><!-- end "followus" DIV-->
        </div><!-- end "header" DIV-->

        <div id="navigation">
    <p id="menuHome">
    </p>
    <ul id="menuOne" class="menuHoriz">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
      <li><a href="services.html">Our Services</a></li>
      <li><a href="contributions.html">Contributions</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>
    
    <ul id="menuSubTwo" class="menuVert">
        <li><a href="mission.html">Mission Statement</a></li>        
   </ul>
    
    <ul id="menuSubThree" class="menuVert">
        <li><a href="preschool.html">Pre School</a></li>
        <li><a href="teen.html">Teen Empowerment</a></li>
    </ul>
    
     <ul id="menuSubFive" class="menuVert">
        <li><a href="newsletter.html">Newsletter</a></li>
    </ul>
    
    
    </div><!-- end "navigation" DIV-->

     <div id="main">
            <div id="left"><img src="images/body/Precious-Jewels-Learning-Incorporated---ezekial.jpg" alt="ezekial" /></div>
            <div id="right"><img src="images/body/Precious-Jewels-Learning-Incorporated---picture-gallery.jpg" alt="pic gallery" />
        </div><!-- end "main" DIV-->
        <div style="clear: both;">
            &nbsp;
        </div><!-- end "clear" DIV-->
    </div><!-- end "wrapper" DIV-->
        <div id="footer">
        </div><!-- end "footer" DIV-->
</div>
</body>
</html>
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Precious Jewels Learning Incorporated - Home</title>
  4. <link href="css/layout.css" rel="stylesheet" type="text/css" />
  5. </head>
  6. <body>
  7.     <div id="wrapper">
  8.         <div id="header">
  9.             <div id="followus">
  10.                 <a class="facebook"><img src="images/header/Precious-Jewels-Learning-Incorporated - facebook.jpg" alt="Facebook Page" /></a>
  11.                 <a class="twitter"><img src="images/header/Precious-Jewels-Learning-Incorporated - twitter.jpg" alt="Twitter Page" /></a>
  12.                 <a class="home"><img src="images/header/Precious-Jewels-Learning-Incorporated - home.jpg" alt="Home" /></a>
  13.                 <a class="contact"><img src="images/header/Precious-Jewels-Learning-Incorporated - email.jpg" alt="email" /></a>
  14.             </div><!-- end "followus" DIV-->
  15.         </div><!-- end "header" DIV-->
  16.         <div id="navigation">
  17.     <p id="menuHome">
  18.     </p>
  19.     <ul id="menuOne" class="menuHoriz">
  20.         <li><a href="index.html">Home</a></li>
  21.         <li><a href="about.html">About Us</a></li>
  22.       <li><a href="services.html">Our Services</a></li>
  23.       <li><a href="contributions.html">Contributions</a></li>
  24.       <li><a href="contact.html">Contact Us</a></li>
  25.     </ul>
  26.     
  27.     <ul id="menuSubTwo" class="menuVert">
  28.         <li><a href="mission.html">Mission Statement</a></li>        
  29.    </ul>
  30.     
  31.     <ul id="menuSubThree" class="menuVert">
  32.         <li><a href="preschool.html">Pre School</a></li>
  33.         <li><a href="teen.html">Teen Empowerment</a></li>
  34.     </ul>
  35.     
  36.      <ul id="menuSubFive" class="menuVert">
  37.         <li><a href="newsletter.html">Newsletter</a></li>
  38.     </ul>
  39.     
  40.     
  41.     </div><!-- end "navigation" DIV-->
  42.      <div id="main">
  43.             <div id="left"><img src="images/body/Precious-Jewels-Learning-Incorporated---ezekial.jpg" alt="ezekial" /></div>
  44.             <div id="right"><img src="images/body/Precious-Jewels-Learning-Incorporated---picture-gallery.jpg" alt="pic gallery" />
  45.         </div><!-- end "main" DIV-->
  46.         <div style="clear: both;">
  47.             &nbsp;
  48.         </div><!-- end "clear" DIV-->
  49.     </div><!-- end "wrapper" DIV-->
  50.         <div id="footer">
  51.         </div><!-- end "footer" DIV-->
  52. </div>
  53. </body>
  54. </html>


Code: [ Select ]

p#menuHome{ float: left; } #navigation { position:relative; background-color: #333; background-image: url(../images/navigation/Precious-Jewels-Learning-Incorporated_03.jpg); background-repeat: no-repeat; width: 820px; height: 47px; font-size: 14pt; } #navigation a:link, #navigation a:visited { font-family: Arial, Helvetica, sans-serif; color: white; text-decoration: none; } #navigation a:hover { color: #03C; } #navigation ul, #navigation li { margin:0; padding:0; } #navigation ul { list-style-type: none; } ul.menuHoriz li { float: left; } ul.menuVert { position: absolute; top: 24px; } #navigation li { display: block; background-color:#FF0; width: 130px; height: 25px; margin: 0 3px 0 0; padding: 0; } ul#menuSubTwo { left: 133px } ul#menuSubThree { left: 266px } ul#menuSubFive { left: 532px }
  1. p#menuHome{ float: left; } #navigation { position:relative; background-color: #333; background-image: url(../images/navigation/Precious-Jewels-Learning-Incorporated_03.jpg); background-repeat: no-repeat; width: 820px; height: 47px; font-size: 14pt; } #navigation a:link, #navigation a:visited { font-family: Arial, Helvetica, sans-serif; color: white; text-decoration: none; } #navigation a:hover { color: #03C; } #navigation ul, #navigation li { margin:0; padding:0; } #navigation ul { list-style-type: none; } ul.menuHoriz li { float: left; } ul.menuVert { position: absolute; top: 24px; } #navigation li { display: block; background-color:#FF0; width: 130px; height: 25px; margin: 0 3px 0 0; padding: 0; } ul#menuSubTwo { left: 133px } ul#menuSubThree { left: 266px } ul#menuSubFive { left: 532px }


Screen shot of the site is provided since posting links is not allowed here.

Just letting everyone know that the submenu's are not yet working but I would like to solve this issue first before I proceed to the next step. Thanks in advance.
Attachments:
screen shot.JPG
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • amogs
  • Born
  • Born
  • amogs
  • Posts: 3

Post 3+ Months Ago

Why not call up the image directly using css?
Moderator Remark: removed spam

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 81 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.