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
-
How Progressive Enhancement Will be Helpful for SEO?
We have bundle of webpages where we load the content dynamically with the help of Ajax. Since we, need to implement Ajax crawl scheme for making Google to read those Ajax dynamic content we planned to go with hashbang URL's (!#) by creating HTMl snapshots. But last week Google withdrawn their support on crawling the Ajax crawling scheme we are planning to go with progressive enhancement approach as stated by Google in a press release. So, I just want to know what is meant by progressive enhancement and how we can implement in the case of webpages where we load the content dynamically with the help of Ajax? Please advice me on this.
Web Design | | Prabhu.Sundar1 -
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 -
Help with error: Not Found The requested URL /java/backlinker.php was not found on this server.
Hi all, We got this error for almost a month now. Until now we were outsourcing the webdesign and optimization, and now we are doing it in house, and the previous company did not gave us all the information we should know. And we've been trying to find this error and fix it with no result. Have you encounter this issue before? Did anyone found or knows a solution? Also would this affect our website in terms of SEO and in general. Would be very grateful to hear from you. Many thanks. Here is what appears on the bottom of the site( www.manvanlondon.co.uk) Not Found The requested URL /java/backlinker.php was not found on this server. <address>Apache/2.4.7 (Ubuntu) Server at 01adserver.com Port 80</address> <address> </address> <address> </address>
Web Design | | monicapopa0 -
Web Hosting and CDN for Wordpress Site Load Speed - Suggestions Needed
We all know that website load speed is more important than ever. While I love the look and feel of parallax and Wordpress, I want to do everything I can to keep the load speed down. I see a lot of conflicting information regarding web hosting services, CDN services and other service (Cloudflare for example). I am looking to hear from those with their own experiences to let me know what they think is the ideal setup for a parallax Wordpress site is as far as which services to use, including: 1. Web Hosting
Web Design | | Gauge123
2. CDN
3. Any other service or product that would help to provide and extremely fast site load time. Thank you!0 -
Metro style design for a new eCommerce Platform: will it survive?
Hello, While developing eCommerce solution for building webstores in WordPress, our team decided to use metro style design for our dashboard. Could you check the Dashboard screenshot please and discuss several questions with me: How do you think, is it a good idea to use this kind of style? Do you think if there are many people who hate it?:) Should we offer more dashboard designs that can be changed through admin area (may be to offer a standard WP design) or this style will be enough for the start? Thank you very much! Yaros, GosuSell 001_dashboard.jpg
Web Design | | GosuSell0 -
404 page in Windows IIS. HELP!
I run a real estate website.
Web Design | | Jeepster
My webmaster needs to create a 404 page for listings when they get deleted.
So far all he's come up with is 302-redirect to a standard "error template" page.
Can anyone suggest a 404 how-to guide I can show him?
Thanks0 -
Searching for BEST e-Commerce Multilanguage Platform, Need Advice
I have 2 online store in Canada. Both are selling One bilingual (English&french) Filtration Montreal and a unilinguale store Furnace Filters Canada Both are offering the same products at the same price for Canadian. We work hard to rank on Google.ca because we only sell and ship to Canada. The platform of Filtration Montreal is very basic and limited. For example, the url structure make it very hard to rank on Google.ca This platform is very not SEO friendly with url like: http://www.filtrationmontreal.com/en/product/honeywell-genuine-filter-95/pack-of-5-genuine-honeywell-furnace-filters-20x20x5-601.html The only good thing about this platform, is the multilingual option. The customer can shop in french or English. I would like to move that store to a new platform where I can create a multilingual online store. Do you have sugestions? Furnace Filters Canada is on BigCommerce. I find it SEO friendly. Using SEOmoz tools and new to SEO, high competitive keywords like: furnace filters, furnace filter are ranking on 3rd rank in Google.ca fist page! This site is getting more & more visitors every months. The only frustrating thing is the English only version of the stores to customers. QUESTIONS: What will be the SEO impact if I'm moving Furnace Filters Canada to a new platform? Do you have suggestions in finding the perfect multilanguage e-Commerce platform? Andrew Bleakley suggest Ashop. Anybody using Ashop? How about a eCommerce platform that can manage my 2 stores at the same time. REMEMBER, we sell and ship to Canada only. Thank you for your help and support. BigBlaze
Web Design | | BigBlaze2050 -
Does **tag on a product description help?**
Hi, Does using the tag on a line of text in the products description help with SEO for that keyword phrase? **See here: http://www.designerboutique-online.com/tops/passarella-death-squad/passarella-death-squad-t-shirt-white/0/ I have bolded the Passarella Death Squad T-Shirt line. Would this help in any way? Cheers Will**
Web Design | | YNWA0