Jump to content
Stef's Coding Community
Sign in to follow this  
mindimercer

Please help move navigation bar

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;  
} 

Share this post


Link to post
Share on other sites

Umm, I think so. I know I can in design mode, but I'm not sure about the actual css. I have the words where they should be, and even tried just taking out the bar completely, but it wouldn't let me or I didn't do it right. Sorry I'm not much help. This is mostly Greek to me.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Sorry, I realize I'm showing my ignorance on these issues, but at least I claim it. ;) All it will let me do is open the css section and edit it. I can post all of the css, but I'm afraid if there is a way to access the other, I don't know how to go about it.

Share this post


Link to post
Share on other sites

What are you working with? Do you see your page in a browser? If so, just right-click. That should give you the option to 'view source' then copy and paste that here.

Share this post


Link to post
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. 




Share this post


Link to post
Share on other sites
@mindimercer,

 

Do you know any HTML?

 

:/

 

Stefan

 

Very little. I can only do very basic things like changing font size, color, inserting clickable pics, etc. I did manage to scoot the text of the navigation over, but that's about.

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

I will have to look into those tutorials. Thanks.

 

And yes, that's where it's at, but I have it pointed at my blog at the moment until I get it where I want it to be to use the actual site there instead.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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...
Sign in to follow this  

×
×
  • Create New...