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 to fix non-crawlable pages affected by CSS modals?
I stumbled across something new when doing a site audit in SEMRUSH today ---> Modals. The case: Several pages could not be crawled because of (modal:) in the URL. What I know: "A modal is a dialog box/popup window that is displayed on top of the current page" based on CSS and JS. What I don't know: How to prevent crawlers from finding them.
Web Design | | Dan-Louis0 -
Do SEOs really need to care about trend in increase of voice search?
Hi all, Just browsing through the articles like "SEO trends in 2108"....I can see everyone mention about increase in voice search and attributing same to the SEO at top. But there is very less information on how to optimise for voice search....May be, they don't know what SEOs have to do exactly with voice search. Basically the input method is going to change on search and else remains same. This must be leading to increase of long tail searches and more search snippets to give an instant voice answer. What else has to be optimised to favoured in voice search? Thanks
Web Design | | vtmoz2 -
Do I need to 301 redirect www.domain.com/index.html to www.domain.com/ ?
So, interestingly enough, the Moz crawler picked up my index.html file (homepage) and reported duplicate content, of course. But, Google hasn't seemed to index the www.domain.com/index.html version of my homepage, just the www.domain.com version. However, it looks like I do have links going specifically to www.domain.com/index.html and I want to make sure those are getting counted towards my overall domain strength. Is it necessary to 301 redirect in the scenario described above?
Web Design | | Small_Business_SEO0 -
Help with Schema.org on Ecommerce Products
I’m looking for ways of using schema.org with products that have pricing options. There appear to be two main problems 1) Whilst colour, width, height and depth are all catered for, size appears to be missing – how can we mark up products that are available in sizes that aren’t necessarily covered by width/height/depth (e.g. shoe size). Also, what if the product is available in different finishes – technically, these could not properly be described as colours so how could we mark them up? 2) There doesn’t seem to be any particularly good way of marking up pricing options that are displayed on the same product detail page. For e.g. if a pricing option table is used like this: | ID | Colour | Price 001-red | Red | £3.99 001-green | Green | £4.49 001-blue | Blue | £4.99 | I can mark up each row as an offer, and give each offer a price and sku or mpn, but then I can’t use itemprop=”color” to describe exactly what the option is. Would I just use itemprop=”name” in this case and abandon color altogether (even though it’s technically supposed to be describing the colour of the product and not the name of the offer)? I suppose another way I could approach it would be to mark up each row as an individual product, and assign each one an offer with the details as described above but then the containing page would effectively look like a separate product – which it isn’t. Any help or advice on this would be very much appreciated
Web Design | | paulbaguley0 -
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 -
Given the lastest Google update, should I rewrite my Flash site or try to present an alternative HTML/CSS site?
I have a site that was created using Flash. The reasoning behind this was, at the time, that I didn't care if the site ranked or not (portfolio site). Now I would like to drive traffic to the site from SE's. Given the Penguin update, should I rewrite my Flash site in HTML/CSS or present an alternative site for bots and browsers that don't support Flash? My concern is that by presenting an alternative site to bots and non Flash supporting browsers that the SE's will see potentially see this as cloaking. Thoughts and advice would be much appreciated.
Web Design | | mj7750 -
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 -
I NEED ADVICE: Need Web Software for customers to access backend
I have a prospect in the credit repair industry. Does anybody know of some software where the clients can log into their own accounts to see the progress? The feature I am looking for is like a Real Estate website where the brokers can create their own accounts and upload their own properties.
Web Design | | Francisco_Meza0