Jump to content

Please help move navigation bar


mindimercer

Recommended Posts

I have my site almost exactly like I want it. The only problem left is that the navigation bar is just right of center in the page and is eating up content space. I have tried what little I know to move it, but only was able to move the words themselves. The bar that appears before each stayed put.

I just changed a few minor things from the template I used. I'm posting the code. I don't think it'd be in the subnavigation area but since I don't know what I'm doing it very well could be and I'll post it as well in case. Any help would be appreciated more than you know.

Thanks.

 */
.sf_navigation {
   width:230px;
   margin-bottom:3em;
}
.sf_navigation h3 {
   display:none;
}
.sf_navigation ul {
   margin:0;
   padding:0;
   list-style:none;
   width:230px;
}
.sf_navigation li {
   font-size: 32px;
   width:230px;
   float:left;
   line-height:1.5em;
}

.sf_navigation ul li a {
   color:#999999;
   background-image:url(images/631_navigation_bg.gif);
   background-position: left 4px;
   background-repeat:no-repeat;
   padding-left:10px;
   text-transform:uppercase;
   text-decoration:none;
   width:220px;
   display:block;
}

.sf_navigation ul li a:visited {
   color:#999999;
   background-image:url(images/631_navigation_bg.gif);
   background-position: left 4px;
   background-repeat:no-repeat;
}

.sf_navigation ul li a:hover {
   color:#000000;
   background-image:url(images/631_navigation_bg_over.gif);
   background-position: left 4px;
   background-repeat:no-repeat;
}
.sf_navigation .subnav {
   position:absolute;
   left: -999em;
   margin:-1.5em 0 0 -480px;
   padding:0;
   width:480px;
   z-index:1000;
   border:0;
   background-image:url(images/631_flyout_bg.gif);
   background-position:0 0;
   background-repeat:repeat;
}

.sf_navigation .subnav li {
   margin:0;
   padding:0;
   width:auto;
   font-size:15px;
   width:117px;
   float:left;
   display:block;
   line-height:1.5em;
}
.sf_navigation .subnav li a {
   background:none;
   border:0;
   display: block;
   margin:0;
   padding:5px 10px;
   width:95px;
   height:70px;
   word-wrap:break-word;
   color:#dddddd;
   background-image:none;
}

.sf_navigation .subnav li a:visited {
   color:#dddddd;
   background-image:none;
}

.sf_navigation .subnav li a:hover {
   color:#ffffff;
   background-image:none;
}

#Nav1 iframe {
   position: absolute;
   left: -0.25em;
   top: -0.25em;
   z-index: 0;
   filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
   margin-left: 3px;
}

#Nav1 li:hover ul,
#Nav1 li.sfhover ul {
   left: auto;
}

#Nav1 li:hover, #Nav1 li.hover {  
   position: static;  
} 

Link to comment
Share on other sites

Stefan meant if you can post the HTML code here so we can see it same as you posted the CSS. It all goes together, so we need to see everything.

 

It would be even better if you can upload the entire page somewhere and just post the link here.

Link to comment
Share on other sites





blogheaderthree.jpg

 
 




 


<div class="statcounter"><a title="blogger statistics" class="statcounter" href="http://www.statcounter.com/blogger/"><img class="statcounter" src="http://c.statcounter.com/5569258/0/e46412be/1/" alt="blogger statistics" /></a></div>

 

 

15nab0w.jpg 













 






<a href="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822%2FUS%2Fmionmu-20%2F8014%2Fd1ae27c4-47b8-440d-8a7b-6e2d6e001a93&Operation=NoScript">Amazon.com Widgets</a> 





























 

























Content copyright 2010. Mindi On Music. All rights reserved. 




Link to comment
Share on other sites

I looked into Website tonight briefly once a while back, and I don't remember there even being any option to edit any HTML - it's just a WYSIWYG tool.

 

I really think I need something else, I just hate to start all over. I wonder though if I couldn't get new hosting, and just copy and paste that html into the new one to start where I left off?

Link to comment
Share on other sites

I really think I need something else, I just hate to start all over. I wonder though if I couldn't get new hosting, and just copy and paste that html into the new one to start where I left off?

 

Yes you can .. easily in fact.

 

That said, it seems to me you need to learn some basic web design. We have two options, our video tutorial on web design and our dedicated website on basic web design.

 

.. Your choice.

 

So the first thing you should do, is load the site you have in a web browser and then go to File - > save page as ... and save the complete web page. This way, you will have a copy of what you have now.

 

I hope that helps,

 

Stefan

Link to comment
Share on other sites

I looked into Website tonight briefly once a while back' date=' and I don't remember there even being any option to edit any HTML - it's just a WYSIWYG tool.[/quote']

 

I really think I need something else, I just hate to start all over. I wonder though if I couldn't get new hosting, and just copy and paste that html into the new one to start where I left off?

 

Is http://www.mindionmusic.com/ your website?

 

I am not seeing the navigation you speak of. Can you post a link to the page with the problem?

Link to comment
Share on other sites

As an alternate to using the file>save page as command (which I don't like because it saves all the images, ads, etc in the same folder)

 

In your browser, View > Page Source

Edit > Select All

Ctrl+C

Open Notepad

Ctrl+V

Save as .. all files ... thepagename.htm on your computer.

 

Now you have all the HTML saved, without all the images and things that you don't always need just to edit text. Now you can edit it yourself using a program of your choice. Or you can use the File>Open File command in your browser to view the page while you make changes in Notepad.

 

Another trick is that you can open .css files in a browser window too. Just get the url location from the page source view, copy into the navigation thingie (http://www.whatever.com/css/somefile.css is what it may be) in the browser, then follow the same copy technique. Now you have the css saved, and if you duplicate the folder structure and location it will be found and display right.

 

BTW ... nothing intrinsically wrong with WYSIWYG. I have used Composer and KompoZer for years and can get good results, better the more I learn about HTML/CSS and design.

 

HTH

Link to comment
Share on other sites

BTW ... nothing intrinsically wrong with WYSIWYG. I have used Composer and KompoZer for years and can get good results, better the more I learn about HTML/CSS and design

 

I agree.

 

There once was a time when I was a nerd-zealot and refused to use a good code editor when writing Java. Now, if any of you have seen Java code, you'd know how complex and verbose Java can get. Anyway, for a year or two I resisted and continued to use notepad to write Java .... then one day, I got wise and started using a program dedicated to writing Java. In software development, we call these IDE's:

 

Integrated Development Environment

 

... This was the best move I could have made because my productivity jumped though the roof. Still, I needed to understand Java to take full advantage of the IDE.

 

A little different from web design, but the spirit of the point I think holds true.

 

Stefan

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...