CSS styling help needed
-
I'm hoping that to someone experienced this is a quick fix, but it may be a pain and a rat's nest of code.
Five or so years ago, I designed my brother's website at https://www.argentdata.com/index.html. I built it off of the Mollio theme (http://www.mollio.org/), and used templates in Dreamweaver, so it's not in a CMS. It's not a work of art, and there are some issues with it, but it's served him fairly well. Longer-term it needs a redesign, but right now I'm asking about just one aspect of the existing design.
There are two parts to the site - the plain HTML site, and the osCommerce store that's under the purchase tab. If you go to http://www.argentdata.com/catalog/ you'll see that the osCommerce store is full width, while the navigation header copied over from the main site is 1200 pixels wide and centered. If you're on a wide monitor, it looks weird.
What he'd like to do:
Make the main site align to the left, both the content and navigation, and make the navigation left aligned for the osCommerce portion. He figures this is the easier way to do things, rather than try to muck with osCommerce CSS (that also has some merged CSS from the Mollio theme) and get it to center.
Does anyone have a fairly simple solution that can make the navigation bar look good on osCommerce? Either the above of making everything left aligned, or some other solution simple we haven't thought of?
Thanks!
-
It looks like he did get what he wanted done for now. Thanks everyone!
-
Hi Keri,
Just wanted to check on this and make sure you got everything worked out.
Thanks!
Anthony
-
Thanks everyone! I'll forward this to my brother and see if that does the trick (then come back and mark helpful answers).
Keri
-
Totally forgot about the index updates! (Gotta learn to finish reading posts.)
Edit "argentdata.com/css/main.css" (changes in italics):
Line 107
#header #site-name a, #header #site-name a:link, #header #site-name a:visited,
#header #site-name a:hover, #header #site-name a:active {
text-decoration: none;
color: #CCC;
position: relative;
_ left: 100px; _}
Line 111
#nav {
font: bold 96% arial;
height: 2.09em;
margin: 0 105px 0 40px;
position: relative;
_left: 100px; _}
Line 151
#wrap {
min-width: 770px;
max-width:none !important;
margin: 0 auto;
position: relative; }
Line 152
#content-wrap {
position: relative;
max-width: 1200px;
_left: 100px; _}
This should match the root pages to the osCommerce pages.
-Anthony
-
Hi Keri,
This isn't a perfect fix but it should do the trick.
On line 377 of "argentdata.com/catalog/stylesheet.css" change
max-width: 1200px to max-width: none !important
#wrap {
min-width: 770px;
_max-width: none !important; _
margin: 0 auto;
position: relative;
}
You could also just delete the max-width value altogether, but just in case there's another width value somewhere else... might as well change it.
On line 348 add
position: relative; left: 100px;
#header #site-name a, #header #site-name a:link, #header #site-name a:visited,
#header #site-name a:hover, #header #site-name a:active {
text-decoration: none;
color: #CCC;
_position: relative; _
left: 100px;
}
Same thing on line 352... add** position: relative;left: 100px;**
#nav {
font: bold 96% arial;
height: 2.09em;
font: bold 96% arial;
margin: 0 105px 0 40px;
position: relative;
_ left: 100px;_
}
/* Hope this helps!
- Anthony */
-
Please view the attachment. Is that the result you desire? I am not entirely sure based on the question.
EDIT - actually, I prefer the 2nd image as a solution.
If you like the second image, simply change #wrap margin value to:
margin: 0;
Please note I am not a CSS expert by any means. I simply know enough to get by.
-
not waht you're asking for, but the fastest solution i can think of.
wrap the os commerce page with a div that is 90% width. give it margin: 0 auto; so that it centers. The tables inside should auto adjust because they are all set to be 100% width.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
We're considering making notable changes to our website's navigation. Other than 301 redirects from old pages to new, what do I need to consider with this type of move or update?
We would like to make some navigation changes to our website: www.NetGainIT.com, specifically to the services section. I know that I will need a list of 301 redirects if I do not plan on keeping certain pages, but what else do I need to consider?
Web Design | | NetGainTech0 -
Is this CSS solution to faceted navigation a problem for SEO?
Hi guys. Take a look at the navigation on this page from our DEV site: http://wwwdev.ccisolutions.com/StoreFront/category/handheld-microphones While the CSS "trick" implemented by our IT Director does allow a visitor to sort products based on more than one criteria, my gut instinct says this is very bad for SEO. Here are the immediate issues I see: The URL doesn't change as the filter criteria changes. At the very least this is a lost opportunity for ranking on longer tail terms. I also think it could make us vulnerable to a Panda penalty because many of the combinations produce zero results, so returning a page without content, under the original URL. This could not only create hundreds of pages with no content, there would be duplicates of those zero content pages as well. Usability - The "Sort by" option in the drop down (upper right of the page) doesn't work in conjunction with the left Nav filters. In other words if you filter down to 5 items and then try to arrange them by price high to low, the "Sort" will take precedence, remove the filter and serve up a result that is all products in that category sorted high to low (and the filter options completely disapper), AND the URL changes to this: http://wwwdev.ccisolutions.com/StoreFront/category/IAFDispatcher regardless of what sort was chosen...(this is a whole separate problem, I realize and not specifically what I'm trying to address here). Aside from these two big problems, are there any other issues you see that arise out of trying to use CSS to create product filters in this way? I am trying to build a case for why I believe it should not be implemented this way. Conversely, if you see this as a possible implementation that could work if tweaked a bit, and advice you are willing to share would be greatly appreciated. Thanks! Thank you to Travis for pointing out the the link wasn't accessible. For anyone willing to take a closer look we can unblock the URL based on your IP address. If you'd be kind enough to send me your IP via private message I can have my IT director unblock it so you can view the page. Thanks!
Web Design | | danatanseo0 -
Help with Country selector pop up
Hi, We have just taken off our auto redirect on our sites so we now have separate domains - .co.uk, .de, .com, .fr, .eu, .com.au We are about to install a country selector that pops up. Its bit more of pros and cons answer I am after So the 2 options we considering are as follows The more complicated one with the following functionality across all sites in the case the example is having a French IP So I have a French IP – I arrive on French site = no pop up I arrive on UK site = pop up with text saying “you are on the UK site” and generates 2 button one saying“continue” and the other saying “take me to Tidy-books.fr” I arrive on the USA site = pop up with text saying you are on the US site and generates 2 button one saying “continue” and the other say “take me to Tidy-books.fr” I arrive on the German site = pop up with text saying you are on the DE site and generates 2 button one saying “continue” and the other say “take me to Tidy-books.fr” I arrive on the Australian site = pop up with text saying you are on the DE site and generates 2 button one saying “continue” and the other say “take me to Tidy-books.fr” I arrive on the European site = pop up with text saying you are on the EU site and generates 2 button one saying “continue” and the other say “take me to Tidy-books.fr” The other simpler option I have French Ip 1. I visit the French site no pop up 2. I visit any other countries site and a pop up with a all our flags appear allowing the person to select which country they wish to go to Hope that makes sense any suggestions etc would very much appreciated Thanks
Web Design | | tidybooks0 -
Can someone help me understand Structured Data?
So I'm wondering if someone could explain Structured Data a little better to me and what the importance is. I also am wondering how to best add Scheme.org markup to certain pages. I tried a plugin for wordpress and I don't think it was working correctly. I'm specifically wanting to make sure my Google Profile is showing with my website in SERP. I have the ?rel=author tag in on the front page and when I checked it when the Google Structured Data checker it shows it to be correct but its not displaying in SERP. Thanks!
Web Design | | jonnyholt0 -
Would iFrames From a Beta3 Help the SEO Value of Domain?
What I understand as of now: Google does crawl iframes, but attributes the SEO value of the content within them to their original site. (Let me know if I'm mistaken.) What I need to know: If I were to iframe a section of a beta3.domainname.com site into a domainname.com site, does this beta3 attribute any SEO value to the domainname.com site? Essentially - Does good content on a from a beta3.domainname.com (which is mainly just a naked piece of content) bring any benefit to the domainname.com version of the site when it is iframed into the domainname.com site?
Web Design | | SmokewagonKen0 -
Need help in website URL Structure
I have been working on a brand new website currently it is live but I have disallow Googlebots temporarily as I dint want any negative impact. The business of the site is to generate leads , they install and sell Stairlifts and used Stairlifts. There are two main categories New Stairlifts and Reconditioned Stairlifts Currently the URL for new Stairlifts is : http://willowstairlifts.co.uk/stairlifts/ and for Reconditioned Stairlifts is: http://willowstairlifts.co.uk/reconditioned-stairlifts/ My concerns are that the word Stairlifts is mentioned twice in the urls so is it going to have a negative impact or panda penalty? I am thinking of changing them to http://willowstairlifts.co.uk/new/ and the product pages to display as http://willowstairlifts.co.uk/new/brooks/ Currently its http://willowstairlifts.co.uk/stairlifts/brooks/ Same with reconditioned Stairlifts I like to change it to : http://willowstairlifts.co.uk/reconditioned Also its product pages to http://willowstairlifts.co.uk/reconditioned/brooks/ As currently its http://willowstairlifts.co.uk/reconditioned-stairlifts/brooks/ Thanks
Web Design | | conversiontactics0 -
Need some advice on choosing categories.
We have a website where we do a daily one minute video about our son who was born with Down syndrome. When I started the site I was going to do a daily video and put all of those in a category called "Noah's Minute." Cute title, but doesn't really tell anyone what it's about. (Oh what I've learned in the last year.) I was going to do no text on those video posts, just the daily one minute video. I wanted it to tell a story, in order, without me adding to it with words. Then I was going to have some other categories where I wrote information about Down syndrome. Therapy post, medical posts, best toys, parenting tips/encouragement, etc. I'm been running this site for almost a year and I now have a much better idea of the type of content I'll be posting, what people are interested in, etc. I now write content for each of the videos, and no longer group them under "Noah's Minute." If you check out some of the posts, you'll see I try to be very intentional with each posts, and try to make each one centered on a specific topic / key words. I'm now having to go through almost a year of posts that were under "Noah's Minute" and re organize them, however I'm having a problem with coming up with categories for the post. I have some of them under the category of "Therapy" since a lot of our readers are interested in checking out the different posts we do with Noah for his developmental therapy. But the other posts are much more "general" I guess. For instance a lot of our posts are just me telling our story and giving general parenting advice / encouragement. But having a category called "Parenting" seems to vague, and also every post I write could be considered "parenting." I'm wondering if someone would mind checking out some of our content, and giving me some advice on how to organize the posts. There is a lot of great info on our site, and many people ask me questions about things that are on the site, but they just didn't know was there. So I want people to find it better. Also how "detailed" do I have to be in the naming of my categories for SEO purposes? For instance, the category called "Therapy' is great for people who find our site, since it's a given that the category will be dealing with "Down Syndrome Therapy" but do I have to name the category "Down Syndrome Therapy" in order for people to find it via search? If so, that would get old quick to my readers: "Down Syndrome Therapy" "Down Syndrome Toys" Down Syndrome Books" etc.... Anyways, I'm not sure where to go from here. Thoughts, feedback, suggestions?
Web Design | | NoahsDad0 -
Google News we were dropped and need help finding ot why
Hi i have a site called in2town lifestyle magazine http://www.in2town.co.uk/ and up until two months ago we were with google news and for a long time. But then all of a sudden we were dropped which left us with no confidence about our site and led us to make changes to the site, some good and some bad to try and find out what was wrong with our site and why we were dropped. We have now been concentrating on sorting the site out which has led in a drop in traffic due to not updating it as we should because we are more concerned in trying to make it a quality lifestyle magazine and get back in google as well as making it a good experience for our readers.. I would like your help and finding out what you feel is wrong with our site so we can then work on it and change it and try and find out what went wrong with google news. we have spent years on the site but now we have gone in the wrong direction because we were more worried about google news. If you can advise us on how we should change the site and sort the site out and make it into the professional site it was once more then that would be great.
Web Design | | ClaireH-1848860