|
CSS - Css For A Site 7, 500 Pages Big?!?!?
Has anyone got any advice/experience on how to manage the css issues related to a site with upwards of 7, 000 pages.
The client wants to have at least 60% of the total pages in the site to be bespoke in terms of design and layout and obviously this will create some very big challenges in terms of planning and implementing the css. The reason why they want so many bespoke pages is because a site with that many pages would make for a very boring user experience if there was just one design and layout site wide. Any suggestions or advice would be great Cheers Similar TutorialsHi, I suck at css and I cannot figure anything out with it. I hate it but I am stuck using it. Can someone help me widen all the pages on my website with css? Thanks, Gibs Code:
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 10px;
text-align: center;
background: #d9d6cc url(images/page_bg.gif) top center repeat-x;
color: #868686;
margin: 0;
padding: 10px;
}
html, #wrapper, h1 {
margin: 0;
padding: 0;
}
img { border: 0; }
#wrapper {
margin: auto;
text-align: left;
width: 458px;
position: relative;
}
h1, h2, h3 {
font-size: 10px;
}
h1 {
line-height: 1;
position: absolute;
top: 0;
left: 0;
}
h2 {
margin: 0 0 5px 0;
padding: 0;
}
h3 {
padding: 4px 0 0 0;
}
.block {
display: block;
}
.clear {
clear: both;
height: 10px;
}
.left {
float: left;
margin: 5px 20px 0px 0px;
}
.right {
float: right;
margin: 0px 0px 0px 20px;
}
.readmore {
text-align: right;
}
/* page structure */
#wrapper {
background: url(images/body_t.png) 24px 0px no-repeat;
height: 40px;
}
h1 {
position: absolute;
top: 16px;
left: 43px;
margin: 0;
padding: 0;
width: 135px;
z-index: 10;
}
#nav {
position: absolute;
top: 31px;
left: 0;
width: 31px;
margin: 0;
padding: 0;
z-index: 5;
}
#nav li {
float: left;
width: 31px;
padding: 0;
margin: 0;
list-style: none;
}
#nav img {
display: block;
}
#body {
background: url(images/body_bg.png) repeat-y;
position: absolute;
top: 39px;
left: 10px;
width: 448px;
margin: 0;
padding: 10px 0 0 0;
z-index: 2;
}
#body .inner {
width: 300px;
margin: 10px 20px 0px 20px;
}
#body .inner #content {
width: 200px;
margin-left: 10px;
margin-top: 1em;
}
#body .inner #content p {
margin: 1em 0;
padding: 0;
}
#body .inner #content div {
padding: 17px;
border-top: 1px solid #d4d6cf;
border-bottom: 1px solid #d4d6cf;
}
#body .inner h2 {
font-size: 12px;
}
#page_title {
float: left;
margin: 3px 0 -50px 15px;
padding: 20px 0 50px 0;
width: 57px;
border-right: 1px solid #d4d6cf;
}
* html #page_title {
margin-left: 7px;
}
#news {
float: left;
width: 129px;
margin: 10px 0 0px 6px;
background: url(images/box_bg.gif) repeat-y;
}
#news div {
background: url(images/box_t.gif) no-repeat;
}
#news div div {
padding: 12px 12px 7px 12px;
background: url(images/box_b.gif) bottom left no-repeat;
}
#news p {
margin: 0;
padding: 0 0 3px 0;
}
#news .readmore {
padding-top: 4px;
}
#paper {
position: absolute;
top: 39px;
left: 243px;
width: 196px;
z-index: 9;
background: url(images/paper_bg.gif) repeat-y;
}
#paper .inner {
background: url(images/paper_b.gif) bottom no-repeat;
padding: 8px 30px 18px 30px;
}
#paper .readmore {
text-align: left;
margin-bottom: 0;
padding-bottom: 0;
}
#paper p {
margin: 1em 0;
padding: 0;
}
#footer {
text-align: right;
margin-top: -10px;
}
.footerie {
display: none;
}
.clear {
margin-top: -20px;
}
a {
color: #575e58;
font-weight: bold;
}
a:hover {
color: #b31d00;
}
I made a form that I wanted to print. It is a page with a table with most of it formated with CSS. When I print however all that shows is the text, nothing that is defined with CSS is acknowledge, not the font-family, table borders, etc. I tried it with Safari and Firefox, both look the same. What is the deal? I am contemplating trying to learn CSS and redesign my home page, from tables to CSS. I basically have my index page, with a header image at the top (image map), a left menu, a right menu, and the area in the middle is where the content is displayed. Would I use one CSS file for this, or one for each page? Sorry for the stupid question, I am completely new to the use of CSS. I would imagine I just use one and load the file in on my main page, and use it through out all the pages that I load into the content area, but im not sure. www.NightmareMotorSports.com I'm an amateur web designer, I only do pages for my band and for the gallery I work for. What happens is that on a Mac, people only get the background. www.formone.net is my band's site. www.kennedygallery.org is the gallery. www.kennedygallery.org/icefollies is a mini-site I made for an off-site event we did. I'm not sure whether it's IEmac or Safari or what that craps out, but the director of the gallery uses a mac and so I'd really like it if he could see our site. haha. Hi; I know this is a newbie issue, but I've studied the documentation & tutorials I have, without finding an answer... I'm building a new website, and just starting with CSS & XHTML. I've got a few examples of simple menus for the top of the page; for the basic "About", "Contact Us", "Home", etc. But the way these examples work is to define the style of the menu in CSS, then populate the menu in each page. I understand one of the conceptual benefits of CSS is to provide consistent styles across the website, without coding the style in each page. Since I want the menu to be the same on each page, I would like to specify the menu items and links in just one place, and include that in each page, so when the menu changes as I develop it, I only change it in a single place. I have a similar issue with my top level banner -- I define a background & box in CSS, but then insert my logo, title & tagline in the body of each HTML page. Again, I'd rather do it in one place. Is there a good, accepted, elegant way to do this, with CSS or some other mechanism? Thanks, Paul Hi, there. I have been working with the alignment for my site and every time I think I have it right, I look at it on a different size computer screen and everything is misaligned, I can't figure out what I'm doing wrong! I have a big .gif image as the background and a bunch of other images at the z-layer right above it so it gives the effect of a corkboard with sticky notes and things tacked onto it. Usually it looks great but when I view it on my large computer screen, all the "items" tacked on the board are shifted over so that although they're aligned with each other the way I want them to be, they're spilling off the background cork image. Any ideas what I'm doing wrong and how I can get it all aligned relative to the cork board, and have that whole thing centered on whatever size screen it's being viewed on? I thought that's what I had accomplished with the CSS code I wrote, can anyone figure out the loophole here? Thanks! -lindsey [code] <style type="text/css"> #corkboard { align:center; z-index: 1; } #mission { z-index: 2; position:absolute; left:110px; top:25px; } #whenWhere { z-index: 2; position:absolute; left:445px; top:25px; z-index: 2; } #mailing { z-index: 2; position:absolute; left:770px; top:40px; } #postItMenu { z-index: 2; position:absolute; left:90px; top:350px; } #currentEvents { z-index: 2; position:absolute; left:440px; top:250px; } #highlights { z-index: 2; position:absolute; left:690px; top:225px; } #class { z-index: 2; position:absolute; left:440px; top:550px; } </style> <body bgcolor="8a8584"> <div id="wrapper"><center> <div id="corkboard"> <img src="images/corkboard.gif"> <div id="mission"> <a href="home.htm"><img src="images/UCUmainLogo.png" border="0"></a> </div> <!--mission--> <div id="whenWhere"> <img src="images/whenWhere.png" border="0"> </div> <!--whenWhere--> <div id="mailing"> <a href="mailto:lindsey@urbancraftuprising.com?subject=UCU newsletter"><img src="images/mailingList.gif" border="0"></a> </div> <!--mailing--> <div id="currentEvents"> <a href="vo.htm"><img src="images/currentEvents.png" border="0"></a> </div> <!--currentEvents"--> <div id="highlights"> <img src="images/perks.png" border="0"> </div> <!--highlights--> <map name="menu"> <area shape="rect" coords="36, 20, 176, 100" href="javascriptopUp('about.htm')"> <area shape="rect" coords="178, 15, 322, 92" href="javascriptopUp('media.htm')"> <area shape="rect" coords="73, 105, 180, 178" href="javascriptopUp('vl.htm')"> <area shape="rect" coords="194, 120, 350, 192" href="javascriptopUp('friends.htm')"> <area shape="rect" coords="57, 199, 177, 282" href="javascriptopUp('sponsors.htm')"> <area shape="rect" coords="188, 194, 320, 313" href="javascriptopUp('vo.htm')"> </map> <div id="postItMenu"> <img src="images/postItMenu.png" usemap="#menu" border="0"> </div> <!--menu--> <div id="class"> <img src="images/classInfo.png" border="0"> </div> <!--class--> </div><!--corkboard--> </body> I know, this sounds like an AJAX question, but I don't think thats the solution. I have created a layout: http://www.cabinincanada.com/script/ The problem is, that I want to be able to click on the About us button, and have it load into the content box where the posts are. I could just create a second page, copying the HTML and making the changes, but isn't this defeating the purpose of CSS? I would then have to go through and update all my links on both pages if I made changes. How do I load content into a box from an external web-page? Hi, Was wondering if there was any possible way to insert text into a webpage using CSS. I have a website created with over 200 pages so far, and the people I'm creating it for all of a sudden decided that they want a line at the bottom of each page stating their name. I have a CSS created for the background and I was wondering if I could insert a line in that sheet that would add the text to all pages. Is it possible or am I just dreaming? LOL. I'm trying to avoid having to go through all those pages doing copy/paste..hehe. If this is not possible, any other ideas or help of any kind would be appreciated. Thanks, Christa I have a project in Visual Studio 2008, ASP.Net, 2.0. We are going from IE6 to IE8 and I'm making the changes for this move. I did all these changes by deploying the files to a test web server because I still had IE6 on my machine. When I publish to our web server the pages render like they should. I got IE8 last night so I figured I could just test it out on my box. When I run it off my box, the pages look all screwed up. I don't understand how they can look fine on the web server but not on my box. The same version of IE8 is installed on the test box I'm working with and my machine. Anyone ever encountered this or know of anything to check? If you have questions or need more info, ask. Hello everybody, I really need help on a CSS matter; Let me explain. My webpage is in PHP. I have a member page called member.php I am selecting the state,city and street datas from database and adding a fake url to the end of member.php. i.e: member.php/MA/Boston/Mass_Ave I am building my CSS on the main page. Member.php When I open member.php directly, CSS works perfectly. But when I want to click on a member page from the main page (here the link is given as <a href='member.pgp/$url'>David's Profile</a>) the page opens of course but CSS does not work. When the link is given as <a href='member.pgp?$url'>David's Profile</a>, it works. But I should use "/" instead of "?". I tried 3 ways to implement CSS. 1-<link ...... href='style.css'> 2- Internal <style> tags on head part 3-@import style.css None of these worked. My project stopped on this step. Thanks for your comments. Best Regards, [/FONT] Hi, I have many products with information that needed to be displayed and printed. I made a print page that displays each product with its own div that is within another div. When I view the page in IE, there is no problem. See pic 01.gif But when I print (or go to print preview) some pictures that overlap to the next page are CUT OFF. See pic 02.gif Is there any way of using CSS to fix the size of each page taht is printed? I use smarty foreach loops to generate repeating rows/tables. Anyways to set the page so that if the table or row is close to the end of a page then it will skip a few lines and begin again? That way to avoid images being cut off. Please refer to pictures attached he http://forums.devshed.com/php-devel...lem-397554.html Thanks! How do I get rid of the repeat of the background image at the top of the page(s). If I add a border to '#container' it goes away, but I don't want the border. I can make it the border white but that doesn't seem right. http://www.mandgweb.net/efw/index.html http://www.mandgweb.net/efw/about_e...ered_water.html hi, I have a problem with my website. On one of my computer my website proportions look right, but on my other computer it looks proportioned different. On my Computer everything is ok,but on my friends computer the web pages are not good. the css styles are ok but some images are bigger and some are small.how to solve this problem thanks mrjameer Hi, I'm relatively new to web development and I am self taught so please forgive any noobish comments haha. Basically I am building my company's web page and I have it all done except for one small discrepancy. My navigation bar at the top of the page has 4 links to the various sections of the website and they are in the right place in Safari, Chrome, Firefox, and Opera but in IE they are all out of whack. I've been banging my head against the desk trying to figure out whats wrong with either my CSS file or HTML code with no luck. I've validated both my CSS and HTML on the W3C validators and they come back with no errors. Not even a warning. Its all valid code. So I've heard this is common when dealing with compatibility issues that IE is the worst. So could someone please take a look at my code and see if they can find out whats wrong? Here is my CSS... #navbar { font-family: "Frutiger LT 55 Roman", Arial, sans-serif; height: 103px; width: 792px; padding-bottom: 0px; background-color: #0097c6; } #bigpic { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #leftcol { color: #585858; font-size: 10pt; width: 365px; padding-top: 15px; padding-left: 5px; padding-right: 7px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #rightcol { color: #585858; font-size: 10pt; width: 365px; padding-top: 24px; padding-left: 5px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: right; } #threecol-mid { color: #585858; font-size: 10pt; width: 195px; padding-top: 24px; padding-left: 10px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #threecol-right { color: #585858; font-size: 10pt; width: 195px; padding-top: 24px; padding-left: 5px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: right; } #leftcol-nohead { color: #585858; font-size: 10pt; width: 365px; padding-top: 24px; padding-left: 5px; padding-right: 7px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #footer { width: 792px; padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px; color: #999999; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 8pt; border-top-style: dotted; border-top-color: #999999; border-bottom-style: dotted; border-bottom-color: #999999; border-width: thin; clear: both; } .logo { padding-top: 18px; padding-left: 10px; padding-right: 10px; float: left; } #navlinks { padding-top: 4px; padding-right: 5px; margin-bottom: -4px; position: relative; float: right; } .allcontent { width: 800px; margin-left: auto; margin-right: auto; } h2, h3, h4, h5 { margin-right: 1px; margin-left: 0px; margin-bottom: 0px; margin-top: 1px; padding-bottom: 0px; padding-top: 0px; font-family: Arial, sans-serif; } .heading1 { font-family: Arial, sans-serif; font-size: 16pt; } .heading2 { font-family: Arial, sans-serif; font-size: 10pt; font-weight: bold; } a { text-decoration: none; color: #0097c6; } img { border: 0; } .disclaimer { font-family: inherit; font-size: xx-small; } The problem lies with the navlinks ID I think. Basically, IE doesn't put the images (which are also links) where I want them while all the other browsers do. Something funky about the way IE reads CSS maybe? I don't know. If more info or code is needed I'll gladly provide. Thanks in advance, Griz Ok, I have basic CSS knowledge but need some help. Here's what I'd like to do: I take trips and post pictures on my site. I use lighthouse to display the images, so each image has a separate filename and caption, and each group of images has a separate group name. Under "Ski Trip", for instance, I'll have Img 1, "Skiing"; Img 2, "More skiing"; etc. It's relatively tedious to create page after page that uses the same format. I use CSS for style, the menu, and Lighthouse, but is there way that I could create a new page entitled "New ski trip.html" and in that file just have a list of the image filenames, captions, etc., that end up all using the same html format to display the images? I don't think I'm being terribly clear (sorry) ... big kudos to anyone who can help. I am lost on how to stop the website pages from showing the scroll option. I don't want the scrolls in the middle of the website. Just want the to be normal. Please help! caligrafx.com/clients/haugenroof/ Thanks, Adam I have an index.php page which has a <link> to style.css. The style is applied just fine to content in index.php, but if index.php includes content from other php files using include(); statements, this included output ignores the stylesheet. I have tried putting a <link> to the stylesheet in the included php files, but this does nothing. Can anyone help? Thanks! Code: <link rel="stylesheet" type="text/css" href="style.css" /> For some reason, FF is displaying the web pages bigger than chrome or IE. I'm reviewing the site CSS with firebug on both FF and chrome but can't seem to find why its pages are different sizes on different browsers. It seems the seems either FF is scaling it up or IE and Chrome are scaling it done. The other question is, which browser(s) are displaying the real size of the webpage? Any help would be greatly appreciated! http://50.116.66.243/~ab27853/ Thanks. We've recently redesigned our company's website and went live with it. Unfortunately we've just noticed on the pages with Flash on them, the CSS drop-downs go behind the text, flash objects, etc. Does anyone know how to fix this? You can see what is happening on these pages. http://www.callan.co.uk/locate_school.php http://www.callan.co.uk/callanschool_student_pgs/callan_english_lessons_video.php You'll notice in the second link the far right drop-down menu doesn't go behind the right side navigation div. I think this is because it's the flash causing it and there is no Flash under that last drop-down menu. |
|||||||