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
-
CSS Truncate
With Google's new stance on hidden text does the CSS Truncate count as hidden? display: block;
Web Design | | L8ydrgn
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;0 -
Should Our Mobile Responsive Version of our Ecommerce Site include the on Page content to Help with Rankings
Hello All, We are soon to launch our new redesigned website along with a mobile responsive version but i have noticed we currently don't include the on page Content we have on the mobile version which we have on the desktop version to help with rankings etc. I am not sure how google does mobile research with regards to rankings. We have designed our responsive version to be as user friendly as possible at the expense of having to much clutter/content but I am wondering now , if we will rank on mobile if all our on page content isn't present. Just wondered if we should include it at the bottom of the pages with say a "Read more" extension to help avoid clutter? Any advice greatly appreciated thanks Pete
Web Design | | PeteC120 -
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 -
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 help to implement microdata/microformat for ecommerce site
**Can somebody please help me to implement microdata/microformats codes for our ecommerce product pages? **
Web Design | | EastEssence22
Please guide me if you have some CSS example for the same. Thanks.0 -
Need help with image resizing (re: slow site)
I'm trying to figure out why I'm having speed issues with my site, and using google speed test to help me knock out some of the issues. One of issues deals with image resizing. I have a responsive design and so even though on the home page the normal width is 580 of the blog area, the full post can go up to 1170. So I size all of my images to 1170 wide and let CSS resize them depending on the size of the browser. (The images on the most recent post are a little bigger than this because I was testing something.) I was wondering what the best practice was in regard to what I'm trying to do. Also feel free to check out my site and let me know of any other feedback / advice you have. Thanks !:)
Web Design | | NoahsDad0 -
Need some advice on changing website around.
I want to make some changes to my personal website and need a little help. I originally hired someone to create this site for me several years ago. Most of the site (including the home page) is html, but the blog part (/blog) is wordpress. The main site hasn't been updated in a few years (although the blog has been updated more often.) I'm not really targeting any keywords on my site (other than just my name) so I'm not really concerned about loosing any rank or anything. I"m just curious what the best route to go should be. Would you suggest keeping the site's format "as is" so to speak? (make the front page a landing page so to speak that links to my various sites, a little bio, etc; keep an about page, contact, /blog, etc...? ) Or should I go the more traditional route and make the blog the front page? Another route is to someone keep the most recent (1,2,or 3) posts on the home page (landing page) and sort of make it a landing page / recent post page. It's sort of like that now, only the main page just links to the most recent post instead of actually adding the post, if that makes sense. There maybe some themes out there that would work well, so feel free to suggest one if you know one that would work. I think the Aboutme.com pages look pretty nice and will let you use a custom domain, but I'm not sure. (And it's not a complete theme, so not sure that's the best option.) Thanks!
Web Design | | NoahsDad0 -
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