|
CSS - Saving User's Template Choice Into Database
Hello,
I have a website (using PHP) where users can create their own profiles for other users to view. I would like to create some CSS templates / themes that they can choose from to change the look of their profile page. I would like the style to be applied to a page so that everyone who views it sees it in that style. All the info I've found so far has been for the user preference in a cookie only, not to change the page permanantly. I suppose this would involve writing a value to the database so the style sheet is linked to that page via the database value. Any hints on how I go about setting this up? It's pretty new to me, all help would be vastly appreciated. Many thanks Similar TutorialsI know this can be done and of course now that I want to try it I can't find any sites that have this option to use as a guide and my search didn't turn up anything. Any one here experienced with this or now a site I could use as a guide?? I am looking to purchase a CSS only template (no flash, no php, etc) that is for a company who sells software. I need it to support and have room for a lot of text and am not interested in several columns. A dropdown menu would be ideal. I have been looking on various sites but haven't found anything suitable. Does anyone know of any off hand? Thanks! Hello! My first post...but definitely not my last. I'm working on a new site and used a CSS template designed by someone else. My problem is I can't figure out how to change any of the width parameters without screwing up how the page looks. If anyone could help me with resizing the width that would be greatly appreciated. The web site is located at www.easyplateau.com. Thanks! daniel Help! I bought a template that is supposed to be easily manipulated, but I am stuck... Can anybody offer some help on a couple files? I have emailed requesting support now a couple times with no response. I am trying to change the script so there is no white space for text an just have white text over the same grey/black background on my index page? I would like it to match the front page with the faded grey to black background and the text boxes black with white text My front page is rotating pictures as a slideshow can they be clickable and serve as a navigation to my gallery? If you are willing to help please let me know! Thanks so much! New to css.... Hi, just writing to get peoples oppinions. i have created a template for standardising the way my collegues at work layout their style sheets. any feedback will be welcome; PHP Code: /* ==== General Rules ==== */ body { } h1 { } h2 { } h3 { } h4 { } h5 { } h6 { } p { } a:link, a:visited { } a:hover { } img { } th { } td { } dt { } li { } /* ==== Layout Rules ==== */ #topBar { } /* ==== Specific Rules ==== */ #topBar h1 { } #topBar h2 { } #topBar h3 { } #topBar h4 { } #topBar h5 { } #topBar h6 { } #topBar p { } #topBar a:link, #topBar a:visited { } #topBar a:hover { } #topBar img { } #topBar th { } #topBar td { } #topBar dt { } #topBar li { } #leftBar { } /* ==== Specific Rules ==== */ #leftBar h1 { } #leftBar h2 { } #leftBar h3 { } #leftBar h4 { } #leftBar h5 { } #leftBar h6 { } #leftBar p { } #leftBar a:link, #leftBar a:visited { } #leftBar a:hover { } #leftBar img { } #leftBar th { } #leftBar td { } #leftBar dt { } #leftBar li { } #rightBar { } /* ==== Specific Rules ==== */ #rightBar h1 { } #rightBar h2 { } #rightBar h3 { } #rightBar h4 { } #rightBar h5 { } #rightBar h6 { } #rightBar p { } #rightBar a:link, #rightBar a:visited { } #rightBar a:hover { } #rightBar img { } #rightBar th { } #rightBar td { } #rightBar dt { } #rightBar li { } #mainContent { } /* ==== Specific Rules ==== */ #mainContent h1 { } #mainContent h2 { } #mainContent h3 { } #mainContent h4 { } #mainContent h5 { } #mainContent h6 { } #mainContent p { } #mainContent a:link, #mainContent a:visited { } #mainContent a:hover { } #mainContent img { } #mainContent th { } #mainContent td { } #mainContent dt { } #mainContent li { } #bottomBar { } /* ==== Specific Rules ==== */ #bottomBar h1 { } #bottomBar h2 { } #bottomBar h3 { } #bottomBar h4 { } #bottomBar h5 { } #bottomBar h6 { } #bottomBar p { } #bottomBar a:link, #bottomBar a:visited { } #bottomBar a:hover { } #bottomBar img { } #bottomBar th { } #bottomBar td { } #bottomBar dt { } #bottomBar li { } #vNav { } /* ==== Specific Rules ==== */ #vNav h1 { } #vNav h2 { } #vNav h3 { } #vNav h4 { } #vNav h5 { } #vNav h6 { } #vNav p { } #vNav a:link, #vNav a:visited { } #vNav a:hover { } #vNav img { } #vNav th { } #vNav td { } #vNav dt { } #vNav li { } #hNav { } /* ==== Specific Rules ==== */ #hNav h1 { } #hNav h2 { } #hNav h3 { } #hNav h4 { } #hNav h5 { } #hNav h6 { } #hNav p { } #hNav a:link, #hNav a:visited { } #hNav a:hover { } #hNav img { } #hNav th { } #hNav td { } #hNav dt { } #hNav li { } /* ==== Custom Rules ==== */ .imgLeft { margin: 2px; float: left; } .imgRight { margin: 2px; float: right; } Hi, I am creating a site (www dot 1913atc dot co dot uk) using a downloaded template. I want to increase the hight of the header, but I am having some trouble doing this so it does not affect the other parts of the top menu. Can someone please tell me how to go about increasing the height. Thanks Hi, I'm having a little trouble positioning something on my header. Here's my site: http://ne-yofan.com/test/. I'd like to position the blog in the header to the left without divs. How would I? Also my header looks different in Firefox and Internet Explorer. How can I fix that? Please and thank you. Here is index.php code. <body> <!--<a name="top"></a>!--> <div id="container"> <div id="header"> header stuff goes he </div><!-- Header --> <div id="container2"> <div id="container3"> <div id="content"> main content </div> <div id="sidebarLT"> left side bar </div> </div> <div id="sidebarRT"> right side bar </div> </div> <div id="top_navlist"> top nav will go here</div> <div id="footer"> footer info will go here </div></div> </body> </html> Here is CSS: /* CSS Document */ body { margin-top: 0px; margin-bottom: 30px; backround-color: #FFFFFF; } #container { width: 850px; margin: 0 auto; margin-top: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; backround-color: #fff border: 1px solid #333; } #container2 { width: 850px; margin: 0 auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.6em; color: #666666; border: 1px solid #ff00cc; } container3 { width: 635 px; float: left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.6em; color:#666666 border: 1px solid #ff00cc; } /*/ HEADER /*/ #header { width: 850px; height: 140px; border: 1px solid #ff6600; padding-left: 10px; padding-top: 10px; border: 1px solid #006600; float: right; } #content { width: 400px; padding-left: 10px; padding-right: 10px; padding-top: 10px; border: 1px solid #006600; float: right; } /*/ NAVIGATION /*/ #top_navlist { top: 20px; width:850px; line-height:normal; clear:both; border:1px solid #000066; position: absolute; } /*/ RIGHT SIDEBAR /*/ #sidebarRT { float: right; width: 175px; padding-left: 21px; padding-right: 10px; padding-top: 10px; border: 1px solid #000066; } /*/ LEFT SIDEBAR /*/ #sidebarLT { float: left; width: 175px; padding-left: 21px; padding-right: 10px; padding-top: 10px; border: 1px solid #00ff66; } /*/ FOOTER /*/ #footer { margin-top: 15px; padding-top: 0px; padding-bottom: 0px; clear: both; width: 850px; background-color:#FFF; border: 1px solid #ff0066; } The issue is that the main content is to the right of the sidebarRT. Other issue is that the top spot for navigation is set to the right and not aligned with the whole template. I am constructing my very first website using a freeCSS template..Embouteillage. When I upload it to my webhost (agilityhoster) everything appears to work OK..but the header colour and some of the graphic images don't apear. I've even uploaded the template without making any changes to the original..but the same result. Can anyone help me solve the riddle, Many thanks. Hi, just to explain I know absolutely nothing about css. I can barely manage to change fonts, so please be gentle with me. I am quite capable of following straight forward instructions though so if you can help it would be much appreciated. I have a website (URL address blocked: PM me to get URL)/joomla that I'm playing with. The submenu's are where I have an issue - they appear exactly as I want when a menu item is selected (indented and normal font weight) however when a sub menu item is selected the indent dissappears and it treats it like a main menu item. Below is the code where I think the issue is. I've been googling like mad to see if anyone else has the same problem with this particular template but no joy. On a seperate note if there are any joomla template experts out there I would be happy to pay a reasonable fee to make some other modifications (basically the padding and position of the main column is all over the place dependent on the content that is displayed). I'd also like to upgrade this to joomla 1.6 at some stage. Enquired with a couple of "professional" Joomla developers and recieved no reply. I assume my requirements are too small for them to consider, and that they are just too rude to reply to say so. /*LEFT COL LINK*/ #leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link, #rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link { line-height: 18px; padding: 0 0 0 8px; text-decoration: none; font-size: 11px; background: url(../images/menu_row.jpg) center left no-repeat; margin: 0; height: 18px; color: #666666; font-weight: bold; } #leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover { color: #4CAFC6; text-decoration: none; } /*LEFT COL CURRENT LINK*/ #leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, #rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link { line-height: 18px; padding: 0 0 0 8px; text-decoration: none; color: #666666; font-weight: bold; font-size: 11px; background: url(../images/menu_row.jpg) center left no-repeat; margin: 0; height: 18px; } #leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover { color: #4CAFC6; text-decoration: none; } /*LEFT COL SUB LINK*/ #leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link { text-decoration: none; color: #666; margin: 0 0 0 6px; font-size: 11px; background: url(../images/submenu_row.jpg) center left no-repeat; font-weight: normal; display: block; line-height: 18px; padding: 0 0 0 18px; border: none; height: 18px; } #leftcolumn ul.menu li ul li#current a, #leftcolumn ul.menu li ul li#current a:link, #leftcolumn ul.menu li ul li#current a:visited, #leftcolumn ul.menu li ul li#current a:hover { font-size: 11px; margin: 0 0 0 6px; padding: 0 0 0 18px; text-decoration: none; border: none; color: #333; background: url(../images/submenu_row.jpg) center left no-repeat; height: 18px; line-height: 18px; } /*SUBMENU POSITION*/ #leftcolumn ul.menu li#current ul { margin: 0; padding: 0; } #leftcolumn ul.menu li#current ul li { margin: 0; padding: 0; } /*CURRENT SUBMENU POSITION*/ #leftcolumn ul.menu li ul { margin: 0; padding: 0; } #leftcolumn ul.menu li#current ul li a:hover { color: #333; } #leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul { list-style: none; } I am trying to design a template and have spent hours trying to figure out where I'm going wrong. I am fairly experienced, but am used to designing with tables and read that it's better to design with DIV tags and assign CSS to position the elements (http://www.csszengarden.com ). The URL to the site I am designing is: http://www.electracustomhomes.com/new.php Here is the XHTML code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
<body>
<div id="page">
<div id="template_header_top">
<div id="template_header_01"> </div>
<div id="template_header_02"> </div>
<div id="template_header_03"> </div>
</div>
<div id="template_header_bottom">
<div id="template_header_04"> </div>
<div id="template_header_05"> </div>
<div id="template_header_06"><div id="search">{search}</div></div>
</div>
<div id="template_left"></div>
<div id="content">
<div id="sidebar">
<div id="menu">
{menu template='simple_navigation.tpl' collapse='1'}
</div>
<div id="news">
<h2>News</h2>
{news number='3' detailpage='news'}
</div>
</div>
<div id="main">
<h2>{title}</h2><div id="print">{print showbutton=true script=true}</div>
{content} <br />
<div class="left49">
<p>{cms_selflink dir="previous" label=""}</p>
</div>
<div class="right49">
<p>{cms_selflink dir="next" label=""}</p>
</div>
</div>
</div>
<div id="template_right"></div>
<div id="template_footer">
<div id="template_bottom_left"></div>
<div id="template_bottom"></div>
<div id="template_bottom_right"></div>
</div>
</div>
</body>
</html>
And the CSS to accompany it: Code:
* {
margin:0;
padding:0;
}
body {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
background-color: #620E0C;
color: #000;
}
img {
border: 0;
}
a,
a:link
a:active {
text-decoration: underline;
background-color: inherit;
color: #620E0C;
}
a:visited {
text-decoration: underline;
background-color: inherit;
color: #620E0C;
}
a:hover {
text-decoration: none;
background-color: inherit;
color: #0000FF;
}
div#page {
border: none;
margin: 0 auto;
width: 800px;
color: #000;
}
div#content {
clear: both;
width: 775px;
height: 100% !important;
background-color: #ccc;
color: #000;
margin: 0px;
padding: 0px;
}
div#template_left {
height: 100%;
width: 12px;
background: url(uploads/images/template_left.jpg) repeat-y left top;
float: left;
}
div#template_right {
height: 100%;
width: 12px;
background: url(uploads/images/template_right.jpg) repeat-y right top;
float: right;
}
div#main {
width: 200px;
height: 100%;
float: right;
}
div#sidebar {
width: 200px;
height: 100%;
}
div#menu {
width: 180px;
height: 100%;
}
div#menu dfn {
display: none;
}
div#menu li {
list-style: none;
}
div#news {
width: 180px;
height: 100%;
}
div#template_footer {
clear: both;
height: 40px;
color: #fff;
background-color: #620E0C;
margin: 0px;
padding: 0px;
}
div#template_bottom_left {
width: 12px;
height: 40px;
background: url(uploads/images/template_bottom_left.jpg) no-repeat left bottom;
}
div#template_bottom {
width: 775px;
height: 40px;
background: url(uploads/images/template_bottom.jpg) no-repeat center bottom;
}
div#template_bottom_right {
width: 12px;
height: 40px;
background: url(uploads/images/template_bottom_right.jpg) no-repeat right bottom;
}
I hope I've given all the information you might require... like I said, I really don't know why it's not working. Thanks in advance, Marcus Trying to build a CSS Page Centered Template, where content autostretches containers height, as opposed to setting absolute heights. If one column is longer than the others the others should auto stretch to same height. Also trying to work in a Footer that sits automatically at the bottom. Heres where I am at...as usual different story in every browser. page ---- <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="test.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="0" topmargin="0"><table><tbody ><tr><td><div class="container"> <!--*******page content start*******--> <div class="top">top</div> <div class="main1">main1</div> <div class="main2">main2</div> <div class="main3">main3</div> <!--*******page content end*******--> </div></td></tr></tbody></table></body></html> CSS Sheet ---------- table { width: 100%; height: 100%; } td { text-align: center; vertical-align: top; } div.container { position: relative; margin: 0 auto; width: 780px; text-align: left; height: 100%; } div.top { position: absolute; top: -3px; left: 0px; width: 780px; height: 203px; background-color: #CCC; } div.main1 { position: absolute; top: 200px; left: 0px; width: 200px; height: 100%; background-color: #BBB; } div.main2 { position: absolute; top: 200px; left: 200px; width: 200px; height: 100%; background-color: #DDD; } div.main3 { position: absolute; top: 200px; left: 400px; width: 380px; height: 100%; background-color: #AAA; } http://www.wam.umd.edu/~gdogum/testing/gdogum/gdogum.html http://www.wam.umd.edu/~gdogum/testing/gdogum/gdogum.css those are my two files, it seems to be working okay in IE6/win but not in firefox... anyone can maybe help me out? thanks it is much apprceiated. edit: also both files validate Boo Hi I'm building a new site in php & css. Im new to php yet seems fine so far. CSS I have had a little experience with due to my other site (thornapple.co.nz) yet I would still class myself as a eager learner. You can view the test site as it currently is at - darkasylum.org/site/template.php grrr wont let me post the link! Im just making up the template for the site. Its spilt into a few separate php files- *Header/Top Nav *Content *Right Nav *Footer All is going fine yet I have came across a wee stumbling block. There is a grungy flame bar that runs under the top nav and then again above the footer - framing the content. Im wanting to move these two bars- top one down say 18px and bottom up say 18px so it overlaps/layers over the content box and rightnav. Can't seem to figure it out after much time trying a few things and a bunch of choice words spoken.... the computer hasn't had flying lessons(yet) but im a little frustrated knowing it's something simple and seeing I have positioned things over the top of others in the past. Once done the image will be converted to black but this should really matter I guess... As you can tell by looking at the site im still in the first building stages - getting the template set before we start to move on from there. Sooo I have been looking around for a forum to ask on that's supportive and helpful. This forum seems a great place with many queries answered. You can check out my style sheet here - darkasylum.org/site/style.css Please ANY questions or if you need any part of my code just let me know. I desperately need to get this project rolling as I'm now way behind and have articles etc coming in. Help me Obi-Won kenobi your our only hope! (let's put your name there not Obi-Wons!) How many posts do I need to do before I can post a link? Better go check now... Thanks so much. Warmest Wishes Alex hello community... i would like to humble ask for anyone's help on this one... i need to add a right column to this template to make it a 3 column joomla template. but since i dont know css, i really dont know what to do. please help me. i have privided the code below. Here is the index.php Code:
<?php
/**
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
defined('_JEXEC') or die('Restricted access');
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/layout.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/joomla.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/template_ie6.css" type="text/css" />
<![endif]-->
<!-- Flow Player Start -->
<script type="text/javascript" src="flowplayer/flowplayer-3.0.6.min.js"></script>
<!-- Flow Player End -->
<meta name="verify-v1" content="18/oD5mtAqJSklIsjK/k6NWXMxJ6ZNJMyoGRkIl3Md8=" />
</head>
<body id="template-body">
<div id="header">
<div id="top"><jdoc:include type="modules" name="top" /></div>
<div id="contact"><jdoc:include type="modules" name="user6" /></div>
</div>
<div id="mainnav">
<div id="blog">
<a href="irsblog/index.php">Blog</a>
</div>
<jdoc:include type="modules" name="user3" />
</div>
<div class="clear"></div>
<div id="mainbody">
<div id="mainbody2">
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<div id="sidebar2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<div id="maincontent">
<div class="inside">
<?php if ($this->getBuffer('message')) : ?>
<?php endif; ?>
<jdoc:include type="component" />
</div>
</div>
</div>
<div class="clear"></div>
<div id="mainbottom-wrapper">
<div id="mainbottom">
<?php if( $this->countModules('user1') ): ?>
<div class="mainbottom-box" id="box-1">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php endif; ?>
<?php if( $this->countModules('user2') ): ?>
<div class="mainbottom-box" id="box-2" >
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php endif; ?>
<?php if( $this->countModules('user4') ): ?>
<div class="mainbottom-box" id="box-3">
<jdoc:include type="modules" name="user4" style="xhtml" />
</div>
<?php endif; ?>
<?php if( $this->countModules('user5') ): ?>
<div class="mainbottom-box" id="box-4">
<jdoc:include type="modules" name="user5" style="xhtml" />
</div>
<?php endif; ?>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</div>
</div>
<div id="bottom">
<div class="left">
<?php echo JText::_("100 S. EDISON AVE., STE. A TAMPA, FL 33606"); ?><br />
<?php echo JText::_("PHONE: (813) 229-7100 TOLL FREE: (888) 438-6474 FAX: (813) 251-9605"); ?>
</div>
<div class="right">
<?php echo JText::_("© 2000-2009 Law Offices of Darrin T. Mish, P.A"); ?>
</div>
<div class="clear"></div>
</div>
<script src="http://24520.hittail.com/mlt.js"; type="text/javascript"></script>
</body>
</html>
here is the layout.css Code:
#header {
background: transparent url('../images/bg-header.jpg') no-repeat scroll 0 0;
height: 149px;
width: 990px;
margin: 0 auto;
}
#mainnav {
height: 46px;
width: 990px;
margin: 0 auto;
}
#mainbody {
background: url('../images/bg-mainbody.png') repeat-y scroll 0 0;
width: 1010px;
margin: 0 auto;
}
#mainbody2 {
background: url('../images/bg-mainbody2.png') no-repeat scroll 0 0;
}
#sidebar {
background: #FFFFFF url('../images/bg-sidebar.png') repeat-x scroll 0 0;
color: #000000;
width: 223px;
min-height: 700px;
margin-left: 15px;
float: left;
}
#sidebar2 {
background: #FFFFFF url('../images/bg-sidebar.png') repeat-x scroll 0 0;
color: #000000;
width: 250px;
min-height: 700px;
margin-right: 15px;
float: right;
}
#maincontent {
width: 500px;
float: right;
margin-right: 15px;
}
#mainbottom-wrapper {
border-top: 0px dotted #000;
margin-top: 50px;
margin: 0 15px;
}
#mainbottom {
background: none #EFEFEF no-repeat scroll 0 0;
min-height: 192px;
margin: 10px 0;
padding: 0 10px;
clear: both;
color: #000000;
}
#footer {
background: #0B60B7 url('../images/bg-footer.png') no-repeat scroll 0 0;
text-align: center;
color: #FFFFFF;
padding: 10px 0;
margin: 0 11px;
}
#bottom {
background: #FFFFFF url('../images/bg-bottom.png') no-repeat scroll 0 0;
margin: 10px 0 20px 0;
width: 1010px;
margin: 0 auto;
padding: 10px 0;
}
and here is the template.css Code:
/* @important */
* { margin:0; padding:0; }
body {
background: #FFFFFF url('../images/bg.png') repeat-x scroll center top;
font: 78% Arial,Tahoma,Verdana;
color: #000000;
}
h1,h2,h3 {
margin: 0 0 10px 0;
}
h1, .componentheading { font-size: 1.5em; }
h2, .contentheading { font-size: 1.2em; text-align:center; }
h3 { font-size: 1.167em; }
ul {
margin: 10px 0 10px 0;
padding: 0 0 0 35px;
}
li{}
a {
text-decoration: underline;
color: #666666;
}
p {
margin: 0 0 15px 0;
line-height: 20px;
}
img {
border: none;
}
fieldset {
border: none;
}
.clear{
clear: both;
}
.inside {
padding: 5px;
}
.left {
float: left;
}
.right {
float: right;
}
/* Header Style */
#top {
height: 35px;
text-align: right;
color: #FFFFFF;
}
#contact {
float: right;
width: 300px;
min-height: 80px;
padding-right: 5px;
color: #000000;
}
/* Mainnav Style*/
#mainnav ul {
float: right;
list-style-type: none;
padding: 0;
margin: 0 auto;
}
#mainnav ul li {
background: url('../images/bg-menu.png') no-repeat scroll right center;
display: inline;
float: left;
height: 46px;
padding: 0 10px;
}
#mainnav ul li a {
color: #FFFFFF;
display: block;
float: left;
font-family: times new roman;
font-size: 1.2em;
font-weight: bold;
line-height: normal;
margin-top: 12px;
text-decoration: none;
text-transform: uppercase;
}
/* Blog Button */
#blog {
float: right;
margin: 10px 15px 0 120px;
padding: 0;
width: 60px;
}
#blog a {
background: #F2A31E;
color: #FFFFFF;
display: block;
font-family: times new roman;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: center;
padding: 3px 0;
}
/* Advert Style */
#advert-wrapper {
border-bottom: 0px dotted #000;
padding: 0 0 10px 0;
}
.advert-box {
min-height: 239px;
width: 367px;
}
/* Sidebar Style */
#sidebar ul {
list-style-position: inside;
margin: 0;
padding: 0;
}
#sidebar ul li {
padding: 5px;
border-bottom: 1px dotted #B9B9B9;
list-style-image: url('../images/bullet.png');
}
#sidebar ul li a {
color: #000000;
text-decoration: none;
}
#sidebar .moduletable, #sidebar .moduletable_menu{
margin: 0 0 15px 0;
}
/* Sidebar-c Style */
#sidebar-c ul {
list-style-position: inside;
margin: 0;
padding: 0;
}
#sidebar-c ul li {
padding: 5px;
border-bottom: 1px dotted #B9B9B9;
list-style-image: url('../images/bullet.png');
}
#sidebar-c ul li a {
color: #000000;
text-decoration: none;
}
#sidebar-c .moduletable, #sidebar .moduletable_menu{
margin: 0 0 15px 0;
}
/* Main Content Style */
#maincontent img {
padding: 5px;
}
/* Main Bottom Style */
.mainbottom-box {
float: left;
width: 228px;
min-height: 166px;
padding: 10px 5px;
margin: 10px 0;
}
.mainbottom-box ul {
list-style-image: url('../images/bullet.png');
}
.mainbottom-box ul li {}
.mainbottom-box ul li a {
text-decoration: none;
color: #000000;
}
#box-2,#box-3,#box-4 {
border-left: 1px dotted #B9B9B9;
}
/*Footer Style */
#footer a {
color: #FFFFFF;
}
/* Bottom Style */
#bottom .right, #bottom .left {
font-size: 0.833em;
}
#bottom .right {
width: 157px;
}
#bottom .left {
padding-left: 15px;
}
i would really appreciate it if anyone can help... thankks a whole lot!! I am using a modified Joomla template for this site - (birminghamfiberguild . org) I need to simply nudge over the menus and the middle content to avoid the couple of pixel overhang going on, on the right. I have looked at it using Firebug and nothing I do seems to do the trick. I'm doing this site for free for my non-profit org. I'd be appreciative of any help. Hey all, Our graphic designer Chrono has come up with a beautiful template, and Paul and I (the "coders") are developing a plan/system to turn the template into HTML/CSS. The URL of the template is http://www.mvcc.edu/sneakpeek.cfm. If you have any insight as to how to do this, please tell me! One other thing, what would you suggest for the white curved line that goes across the template? Thank you so much, Jordan will some one guide me how I can make the image attached in col2 to be fixed one and should not scroll down though the text in the col1 may scroll down. I have used the following css code. html, body { margin:0; padding:0; border:0; } body { background:#fff url(bg.jpg) center repeat-y; } #container { max-width: 900px; margin: 0 auto; width: 80%; } #col1 { width: 48%; float: left; } #col2 { width: 48%; float: right; } #footer { clear: both; background:#fff; padding:0.75em; } Has anyone here used / looked at the Yahoo CSS Grid Template Library? http://developer.yahoo.com/ypattern...hp?pattern=grid Any opinions on the idea of using it as the foundation for site layouts? I'm really having trouble wrapping my mind around the concepts for two - three column table-less CSS layouts. It looks like a viable shortcut... Hi guys I was given the task to slice a design in Photoshop and then to make a CSS tableless template. I would like to know where to find some nice newbie tutorials about how to make this. The following image is part of the main design that has to be converted to CSS website And following is the code of one of the template files that the custom CMS has. Code:
<br />
<div class="websiteintro" style="width:700px; margin-left: auto; margin-right: auto;">
<!--
<div class="htmlcontent">
<div style="text-align: center;">
<span style="text-align: right;">
<span style="font-weight: bold; color: rgb(204, 0, 0);">Citaat van de week...</span>
</span>
<br>
<span style="text-align: right;">
<span style="margin: 0cm 0cm 0pt; text-align: right;">
'{textfragment naam="citaat_van_de_week"}'
</span>
</span>
</div>
</div>
-->
</div>
<br /><br />
<table id="homepagecontent" border="0" width="700" cellpadding="0" cellspacing="0">
<tr align="left" valign="top">
<td width="234">
<div style="margin-bottom:20px;">
<h1><strong>Laatste nieuwsberichten</strong></h1>
{zoek_nieuws limiet="5" sorteer="datum_creatie DESC" var="nieuwsberichten"}
{foreach from=$nieuwsberichten item=nieuws}
<strong>{$nieuws->datum_creatie}</strong>: <a href='{$nieuws->link}'>{$nieuws->titel}</a><br />
{/foreach}
</div>
</td>
</tr>
</table>
<h1>. . .</h1>
I'll apreciate any urls or info you can give me. Thanks a lot in advance. |
|||||||