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
-
Need An Honest Opinion Of My Design
Just looking to get an honest opinion on my website design for my scuba diving client. Trying to decrease bounce rate and have seen some results from tweaking design. Honest opinions appreciated. Recommendations appreciated even more 😉
Web Design | | InfinityTechnologySolutions0 -
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 -
Advice needed: Google crawling for single page applicartions with java script
Hi Moz community,we have a single page application (enjoywishlist.com) with a lot of content in java script light boxes. There is a lot of valuable content embedded but google can not crawl the content and we can missing out on some opportunities as a result. I was wondering if someone was able to solve a similar issue (besides moving the content from the java script to the HTML body). There appears to be a few services sprouting up to handle single page applications and crawling in google.http://getseojs.com/https://prerender.io/Did anyone use these services? Some feedback would be much appreciated!ThanksAndreas
Web Design | | AndreasD0 -
Can you use a base element and mod_rewrite to alleviate the need for absolute URLs?
This is a follow up question to Scott Parsons' question about using absolute versus relative URLs when linking internally. Andy King makes the statement that this can be done and that it saves additional space (which he claims then can improve page speed). Is this a true and accurate statement? Can using a base element and mod-rewrite alleviate the need for absolute URLs? I need to know before going off on a "change all of our relative URLs to absolutes" campaign. Thanks in advance! Dana
Web Design | | danatanseo0 -
How to put 'Link to this article' HTML code at bottom of article & is it helpful?
Hello, I was thinking about putting a box down at the bottom of my client's main articles that let's the reader easily copy the html code it takes to link to the article they're reading. Maybe I'd put it after the author bio. Do any of you do this? If so, what format do you use? It has to look nice of course. This is a non-techie industry. Thanks.
Web Design | | BobGW0 -
Best Website Builder - Help Me Choose
I need to built a multi language site (to built a Pilates, Yoga site) and I will use a site builder. After posting questions on wix.com I came to the fact I should continue my research because there are not SEO friendly. Do you have a suggestions? Limited to html knowledge, using a website builder is my only option. Here are some of the features I need: Multilanguage Web Site Mobile version SEO Friendly Nice Template Selections( this is important) HTML customization Twitter, Facebook, Blog... I'm not looking at free website builder, when you want good features, there is a price to paid. Thank you for your help and suggestions, BigBlaze
Web Design | | BigBlaze2050 -
Is my sitemap going to help me attract more visitors?
Hi, As I await my sitemap to go live, can someone tell me the main benefits of it? A Google sitemap that is .xml one. I have a images sitemap also as the site is an e-commerce store. Should I be expecting to see an increase in visitors when I implement it initially? Thanks Will
Web Design | | WillBlackburn0 -
Footer Links for Design Shops - Do They Help or Hurt?
I work on SEO for a number of clients at our agency, including our in-house SEO for our own website. I use Open Site Explorer all the time to analyze my competition in the SERPs and try to gain links from this insight. However, I've noticed a number of agencies and design shops that place a link in the footer of websites they've designed and created. For example "Site design by ABC Agency (hyperlinked to the agency's home page). Or I've seen small logos or graphics that link to the designer's site and use the "alt tag" to get stronger anchor text. From a design perspective, I don't care for this, but as a SEO...I can see why. We've designed a number of websites and have more in the pipeline, but have not used this tactic before. It seems like an irrelevant link from a content/user standpoint, however, it seems to work for a lot of agencies and design shops. Any input from the SEOmoz community would be great. Is it a short-lived strategy? Does it help or hurt your link-building and "rapport" with Google, Bing, Yahoo? Thanks everyone.
Web Design | | PHDL0