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
-
Do we need to interlink homepage to the highest?
Hi, So our homepage is not even at top 5 pages interlinked most. I could see a ranking drop even when other pages overtaken homepage in internal linking. Homepage is the highest priority page we are expected to rank for our primary keyword. So, not linking homepage internally high but giving importance to other pages confuses Google and outrank homepage in rankings? Thanks
Web Design | | vtmoz0 -
Do we need both an .XML Sitemap and a .aspx sitemap?
Hi Mozers, We recently switched servers and it came to my attention that we have two sitemaps a XML version of the sitemap and a .aspx version of the sitemap. This came to light as the .aspx version of the sitemap is causing the site to come to a screeching halt as it has some complex code and lists over 80,000 products. My question is do we need both versions of the sitemap? My understanding is that the XML version is for Search Engine bots and the .aspx version is for customers. I can't imagine that anyone is using our .aspx version as it is basically a page with 80,000 links and it's buried away on the site, so we were hoping to kill off the .aspx version of the sitemap and keep the .xml version for Search Engine Bots. I wanted to check here first to make sure we did not any negative search engine implications. Any help would be most appreciated. Thanks so much! Patrick
Web Design | | gatorpool0 -
AMP Design help please
Hello Moz Friends So Google is nudging me to submit an AMP version of my website, but I'm no coder. In fact I'm a Wordpress Addict. So I'm just curious if you have created an AMP version, what do you use? Or did you have to recode an entire new website? Thank you friends! Chris
Web Design | | asbchris0 -
URL Re-Mapping Question ?. Do I need to the theme of my business in my url struture even though GWT knows what my site is about
Hi All, I have currently planning to do some url remapping on my Hire Website as alot of most important pages are far to many levels deep from the root domain. This is also making my sitemap not tidy etc. In GWT, Google knows that the theme is my website is Hire as it's the top word. Therefore do I still need to use the word hire in all my new url categories / structures or not ? Examples http://goo.gl/BFmvk2 I was thinking of remapping to www.xxxxxxx.xco.uk/tool-hire-birmingham http://goo.gl/pC9Bdp I was thinking of remapping to www.xxxxxx.co.uk/cleaning-equipment Notice in the later example , I do not have the word rent in the url. Any advice is much appreciated thanks peter
Web Design | | PeteC120 -
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 -
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 -
Live website is an addon domain - Need site old development url inaccessable from live domain
Hi everyone, I have a website which is built in Joomla 2.5. The development site is located at www,abc.com/subdomain/. We have set the site live using an addon domain which is www.xyz.com. The problem is, www.abc.com/subdomain/ is still accessible and being crawled by Google. How is the best way to make the development url inaccessible? Any help would be appreciated!
Web Design | | DougHosmer0 -
I need to buy a website template with seo focus - any tip? what technology is better?
Due to lack of resources, my company usually buys website templates and we adjust it internally. So we can always be with new designs, spending less money. With all this changes of google panda recently, I will change my website again. Usually we buy then from templatemonster, but some templates are far away from seo standards. Do you have tips where to buy than? Should I search for a specific technology or layout? Is this JS Animated website a goog choice?
Web Design | | Naghirniac0