|
CSS - Good Idea To Split Css Into Files For Each Section?
for my website, i'm going to be using some css for every page in it, would it be advisable to store the css for each page in their own file? or even better in the actual page itself?
if i put it all into one css file i'll end up putting bit spacers: /*-=-=-=-=-=-=---=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-*/ to block things apart Similar TutorialsActually I had 4 files named the same as they were importing: Code: CSS @import "header.css"; @import "menu.css"; @import "content.css"; @import "footer.css"; It took me a half hour to figure out why IE was loading and Firefox wasn't. Hahaha, I am dumb. D-U-M-B, I mean D-U-N-C-E Off to the corner with me... Picture What if someone only had two middle fingers? Would they raise both and then go piss on their shoe? GEOGRAPHY :P I'm bored, at least I'm getting paid for this post :P Hahahaha... Quoted from a recent post " Using a server-side language or JavaScript to send different stylesheets to different browsers is a bad practice. It tends to cause more problems than it solves. " Enlighten me on "why this is considered a bad practice " -- or even better yet, what would u suggest is a work around. Specifically ive found that the use of absolute positioning tends to vary on how it works ( or doesn't) , ive narrowed my specific problem down to what seems to be the different browser's assigning a different "meter value" ( for lack of a better term) or size increment for "1px" My test page is essentially "displaying correctly" except offset values seem to produce a varying range of "what 1px really means". IE6 (win) and FF1/2 (win) displays the test page fine - but on IE5.2(mac), Safari (not sure version, but oddly enough this browser gives the closest true values) , and FF1 (mac) seem to "define 1px as either larger or smaller" then whatever their windows counterpart decides. How would you suggest I work around this situation if not with Browser Dection via the use of serverSide / Javascript coding ( which until reading the quoted statement above, i was going to implement). Do Share please ! edit: heres the CSS file, its been validated. The issue is inspecific to my file but related to browser detection. anyway... Code:
#totalcontents {
z-index : 7;
position : relative;
}
.banner {
z-index : 6;
position : absolute;
top : -1px;
z-index : 3;
}
#introblock {
position : relative;
}
.navigation {
z-index : 10;
position : absolute;
top : -33px;
left : 200px;
}
.smallheadline {
z-index: 8;
position : absolute;
top : -43px;
left : -175px;
width : 395px;
color : #CCFF00;
background-color : #333300;
padding : 3px;
border-style : solid;
border-width : 1px;
border-color : #999966;
font-family : times;
font-size : 10pt;
}
.dropright {
z-index: 8;
position : absolute;
top : -67px;
padding : 7px;
left : 203px;
color : #CCFF00;
border-style : solid;
border-width : 1px;
border-color : #66FF00;
background-color : #333300;
width : 325px;
}
.othernews {
z-index : 5;
position : absolute;
top : -276px;
left : -175px;
width : 390px;
color : #FFFFFF;
padding : 5px;
/*border-style : solid;
border-width : 1px;
border-color : #CCFF00;*/
}
.backdrop {
z-index : -1;
position : absolute;
top : -635px;
}
html {
background-color : #646464;
}
Does anyone have any idea what could be happening to my main menu - it dissappears in Safari! Hobo Is it possible to set up a section of a page to not have the sylings the rest of the page has? e.g. a div? I have a page which has a linked CSS sheet for the template. I also have the content running from a CMS. I want the content from the CMS (from MySQL to not have any of the pages syles enforced onto it. Is this possible? #null { ????? } <div id="null"> CMS CONTENT HERE </div> There is a problem with What's New section's appearance (right bottom). I want it appear just like here http://aslanyurek.com/atolye/index.asp but instead, it appears as. http://www.refinethetaste.com/html/ Style I created for the whole right block. PHP Code: /*right block*/ #rblock .notice { width:375px; height:30px; font-size:13px; line-height:30px; color:#f3f2f1; background:#5f5548 url(../images/isaret_2.gif) no-repeat 1% 55%; text-indent:15px; } #rblock .search { width:325px; margin-top:1px; background:#9e0b0e url(../images/icon_arama.gif) 3% 50% no-repeat; padding:5px 5px 5px 45px;} #rblock .search span { color: #FFFFFF; font-size:9px;} #rblock .news { width:375px; border-bottom:1px dotted #CCCCCC;} #rblock h1 { font-size: 14px; color:#716759; background:#ece7d1; text-indent:15px; line-height:25px;} #rblock .news h2 { font-size: 12px; color:#534741;} #rblock .news p { font-size: 10px;} #rblock img#news{ float:left; margin:10px; height: 60px; width: 66px; border:1px solid #b39f87; padding:1px; background:url(../images/load.gif) center no-repeat; } #rblock .clear { clear:both; height:1px; width:1px; overflow:hidden; } the contentWrapper div section collapse prematurely in mozilla, but displays fine in IE. Anyone know why? http://www.mgan.net/work/10-06-04/layout1.html Is there a css rule I don't understand in firefox that IE is overlooking? hi I have a page which has the top menu section fixed (using CSS), and the remainder of the page can be scrolled ... i.e. there are no frames. However the code below works well in firefox, but not IE. Could anyone please help make the code the work in IE (and all other major browsers). cheers nathan here's the code: Code: <style type="text/css" media="screen">
html, body
{
margin: 0;
padding: 0;
height:100%;
max-height:100%;
font-size: 90%;
font-family: verdana, sans-serif, arial, helvetica;
background-image: url('gradient.jpg');
background-repeat: repeat-x;
background-color:#fff;
}
#header
{ position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
z-index: 1;
height: 50px;
margin-bottom: 2em;
background-image: url('gradient2.jpg');
background-repeat: repeat-x;
}
#topmenu
{
position: absolute;
left: 250px;
top: 30px;
width:505px;
}
#stats
{
position: absolute;
right: 15px;
top: 5px;
text-align: center;
}
#gutter
{
float: left;
width: 3%;
height: 1px;
}
#col1
{
float: left;
width: 45%;
margin-bottom: 1em;
border-right: 1px solid #ccc;
padding-right: 3%;
margin-top: 5.5em;
}
#col2
{
float: left;
width: 15%;
margin-left: 3%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#col3
{
position: absolute;
right: 30px;
margin-left: 3%;
margin-bottom: 1em;
margin-top: 5.5em;
}
#footer
{
clear: both;
height: 50px;
padding: .5em;
font-size: 11px;
}
#footer ul {
border-top: 1px solid #ccc;
margin: 0;
padding: 1em 0 0 0;
list-style: none;
}
#footer li a, #footer li span {
display: block;
float: left;
padding: 5px 1em;
border-right: 1px solid #ccc;
}
#footer li span.copyright {
border-right: none;
}
a:hover {
color: #003;
}
h1
{
margin: 0;
padding: .5em;
}
h2 { margin-top: 0; }
<!--[if IE 6]>
body
{
overflow: hidden;
}
div.content
{
height: 100%;
overflow: auto;
}
<![endif]-->
</style>
Ok here is my problem: .leftmenu { font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12px; color:#444444; text-decoration:underline; } .leftmenu:link,.leftmenu:visited { font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12px; color:#FFFFFF; text-decoration:underline; } .leftmenu:hover,.leftmenu:active { font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12px; color:#F22222; text-decoration:underline; } I already have an a:link ect section (which works) However, i want to call the leftmenu class from the start of a table insert. <td width="70px" background="img/topbar.gif" class="leftmenu"> the leftmenu class itself works for text, BUT it doesnt get applied to links. Is there anyway to do this short of coding it into each link? I know css but have never tried anything like this before, and its been wrecking my head all morning..... B Thanks for reading, I have no idea what I'm doing as far as CSS goes and I just purchased this code for a bigcartel store. My main issue is that when I click checkout button with something in the cart nothing is happening. This is the checkout page code.where is says ---- is where my site goes but this is my first post so I cant post with it in there. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(----)"> <html xmlns="(----)"> <head> <title>{{ store.name }} — One moment...</title> <style type="text/css"> body { margin: 100px; text-align: center; font-family: Arial, Helvetica, sans-serif; color: #666; } h3 { padding: 50px; border: solid 1px #ddd; background-color: #f8f8f8; width: 300px; font-size: 18px; } </style> <script type="text/javascript" charset="utf-8"> function checkout() { if(top != self) { top.location.replace(self.location.href); } else { document.checkout_form.submit(); } } </script> {{ head_content}} </head> <body onload="checkout();"> <div align="center" style="margin:20px;"> <h3>One moment...</h3> </div> {% checkoutform %} <noscript> <input type="submit" value="Checkout" /> </noscript> {% endcheckoutform %} </body> </html> Anyone see anything wrong with it? The checkout button is supposed to take your paypal account so you can pay for the t-shirts. Here's the actual site add the www and com to it naffleskell.bigcartel Any help is greatly appreciated. Thank you!! Hi there im fairly noob to css and I cant figure out how to do this, or if its at all possible? please take a look at: http://www.freelayouts.us/css/page2.html this page display just fine, and the html code flows like this: - header - left column - right column - content - footer but what i want to do is make the source code flow like this: - header - content - left column - right column - footer BUT still display just like the above page.. is this possible? here is what happens when I reposition the source code: http://www.freelayouts.us/css/page1.html is there anything I can do to the CSS that will make it appear like the first example but the source code flows like my 2nd example? hope i didnt confuse you... thanks in advance Even though I tag my CSS - it's so large for my site that it's a pain to scroll through and use, even using the search. Is it possible to reference more than one stylesheet from style tags - and have it all work ok? No duplicate classes or anything, I just would like to divide it up into a few different files, but before I do I wanted to know if there's issues with this. Thanks! How would I change this to make list elements invisible? At the moment it just greys them out? div.sideBox ul li.disabled { display: block; padding: 2px 0 2px 7px; border-top: 1px solid #ccc; color: #777777; } So Id like to make the element basically like it doesnt exist. I dont want any spaces left over. Ive tried this div.sideBox ul li.disabled2 { visibility:hidden; } but it leaves an empty space. Hi I am a blogger user and write an English blog. I want to add a section in my blog's sidebar for adsense. It is a three column template, what I want it to add a single column at the top of 2 columns of sidebar. http://linguisticslearner.blogspot.com/ And below is the template code. Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='JAoqkG38S809dZLsa5uoS08FSskzqxBwsprrllDajqY' name='google-site-verification'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Grid Focus
Designer: Derek Punsalan
URL: www.5thirtyone.com
Updated by: Amanda Fazani (www.BloggerBuster.com)
Date: 14 August 2008
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#333" value="#333333">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#555" value="#555555">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#555" value="#555555">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#333" value="#333333">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#333" value="#333333">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="bordercolor" description="Border Color"
type="color" default="#eee" value="#eeeeee">
<Variable name="metacolor" description="Meta DataColor"
type="color" default="#7f7f7f" value="#7f7f7f">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Arial, sans-serif" value="normal normal 100% Arial, sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 95% Arial, sans-serif" value="normal normal 95% Arial, sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/
/* Use this with templates/template-twocol.html */
html, body {
background:$bgcolor;
color:$textcolor;
text-align:center;
margin: 0;
padding: 0;
font:12px arial,helvetica,verdana,sans-serif;
}
body #navbar-iframe {
display: none;
visibility: hidden;
height: 0px;
}
/* Headings
----------------------------------------------- */
h1{font-size:22px; color: $pagetitlecolor;}
h1 a{color: $pagetitlecolor;}
h2{font-size:18px;}
h3{font-size:16px;}
h4{font-size:14px;}
a{color:$linkcolor;text-decoration:none;}
a:hover{color:#666;}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
/* masthead / footer - navigation and categories */
#masthead{padding:5px 0;}
#masthead h1 a{text-transform:uppercase;width:400px;float:left;margin:12px 0 0 0;color:$pagetitlecolor;}
#masthead h1 a em{font-style:normal;color:$pagetitlecolor;}
#authorBlurb {width: 400px; float: right; color: $descriptioncolor;}
#authorBlurb img{float:right;width:42px;height:42px;border:3px solid $bordercolor;}
#authorIntro a{font-weight:bold;}
#authorIntro{line-height:1.4em;width:400px;float:right;margin:8px 0 0 0;}
#header-wrapper {
margin:0 auto 10px;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
color:$pagetitlecolor;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
ul.nav{list-style:none;background:$bordercolor;padding: 0; margin-left: 0;}
.nav li{border-right:1px solid #DDD;float:left;display:block;width:100px;}
.nav li a{font-size:11px;outline:none;color:$titlecolor;text-decoration:none;display:block;padding:5px 0 12px 5px;width:99px;text-transform:uppercase;}
.nav li a span{font-size:11px;color:$metacolor;text-transform:lowercase;}
.nav li a:hover{background:$titlecolor;color:$bordercolor!important;width:95px;}
* html .nav li a:hover{background:$titlecolor;width:99px;}
.nav li.skip{border-left:1px solid #DDD;float:right;display:block width:100px;}
.nav li.skip a{width:100px;}
li.top{border-left:1px solid #DDD;float:right;display:block width:100px;}
li.top a{width:100px;}
.nav li.skip a:hover, li.top a:hover { background: transparent;color: $titlecolor !important;}
.fix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.fix{display:inline-block;}
* html .fix{height:1%;}
.fix{display:block;}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
border-top:3px solid $bordercolor;
margin:20px auto;
width:965px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
margin:26px 0 0 0;
width:410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
color:$sidebartextcolor;
float:left;
margin:25px 0 0 33px;
width:250px;
line-height:1.3em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.sidebar h2 {color: $sidebarcolor;}
.sidebar ul{list-style:none;margin:8px 0 4px; padding-left: 0px;}
.sidebar ul li{
background:url('http://4.bp.blogspot.com/_0CLPmP1ydOo/Sa7zbixhCTI/AAAAAAAABNQ/GPsIktrM5tw/s1600/li.gif') no-repeat 0 3px;
color:$sidebartextcolor;
line-height:1.2em;
border-top:1px solid #BBB;
padding-left:16px;
padding-right:0;
padding-top:4px;
padding-bottom:4px;
}
#searchWrap input{vertical-align:middle;}
#searchWrap #s{font-size:1.1em;border:1px solid #BBB;padding:1px 2px;margin-right:3px;width:220px;}
#tertCol {color:$sidebartextcolor;}
#tertCol{float:left;width:214px;margin:10px 0 0 33px;}
#tertCol p{color:$sidebartextcolor;}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.postMeta{background:url('http://bloggerbuster.com/templates/grid-focus/images/dot.gif') repeat-x left center;text-transform:uppercase;font-size:11px;text-align:right;margin-bottom:5px}
.postMeta span.date{background:$bgcolor;color:$metacolor;padding:0 2px 0 4px;}
.postMeta span.comments{background:$bgcolor url('http://1.bp.blogspot.com/_0CLPmP1ydOo/Sa7yyg4qFKI/AAAAAAAABNI/2P6HSCDx4-g/s1600/chat_grey.gif') no-repeat left center;padding-left:15px;margin-left:2px}
.postMeta span.comments a,
.postMeta span.date a{color:$metacolor;}
.post{margin:0 0 15px 0;}
.post h2{line-height:1.2em;margin-bottom:7px;font-size: 18px;color:$titlecolor;}
.post h2 a{width:100%;display:block;outline:none;color: $titlecolor;}
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
.post-body blockquote {
border: 3px solid $bordercolor;
padding: 5px;
line-height:1.3em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
font: $postfooterfont;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment-general {background:$bgcolor ') top left;
border:1px solid #BBB;
margin-bottom:7px;
padding:0 7px 7px;
}
.comment-blog-author {background:$bgcolor url('http://3.bp.blogspot.com/_0CLPmP1ydOo/Sa7zz4pTw_I/AAAAAAAABNY/7lF8YVNW-Go/s1600/lgrey_diag.gif') top left;
border:1px solid #BBB;
margin-bottom:7px;
padding:0 7px 7px;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager { clear: both; margin: 10px 0;}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.3em;
}
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer-wrapper {
margin: 10px 0;
}
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
.left {float: left;}
.right {float: right;}
.ctime {float: right;}
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
]]></b:skin>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div class='masthead fix'>
<b:section class='masthead' id='masthead' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Thoughts in Remote Language (Header)' type='Header'/>
</b:section>
</div>
<div class='nav'>
<ul class='nav fix'>
<li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a></li>
<li><a href='http://awaz-e-dost.blogspot.com/' title='آوازِ دوست'>Link<br/><span>My Urdu Blog</span></a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS<br/><span>Syndicate</span></a></li>
<li class='skip'><a href='#main' title='Skip to content'>Main<br/><span>Skip to content</span></a></li>
</ul>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<div id='searchWrap'>
<form action='/search' id='searchForm' method='get'>
<input id='s' name='q' type='text' value=''/><input alt='Submit' id='searchsubmit' src='http://bloggerbuster.com/wordpress/wp-content/themes/grid_focus_public2/images/btn_search.gif' type='image'/>
</form>
</div>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Gadget1' locked='false' title='Share It' type='Gadget'/>
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'/>
<b:widget id='BlogArchive2' locked='false' title='Archive' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='Follow Me' type='HTML'/>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='tertCol'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Gadget2' locked='false' title='' type='Gadget'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed'/>
<b:widget id='Profile2' locked='false' title='About Me' type='Profile'/>
<b:widget id='LinkList1' locked='false' title='Favorite Links' type='LinkList'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>*</div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper' style='margin-top: 10px;'>
<div class='nav' style='clear: both;'>
<ul class='nav fix'>
<li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a></li>
<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS<br/><span>Syndicate</span></a></li>
<li class='top'><a href='#outer-wrapper' title='Return to the top'>Top<br/><span>Return to top</span></a></li>
</ul>
<p><a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. <a href='http://5thirtyone.com/grid-focus' title='Grid Focus by: Derek Punsalan'>Grid Focus</a> by Derek Punsalan <a href='http://5thirtyone.com'>5thirtyone.com</a>. Converted by <a href='http://www.bloggerbuster.com/'>Blogger Buster</a></p>
</div>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-15934010-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
I know very little about CSS, my wild guess is that I should change 'wrapper' classes in CSS but how? I do not know this. Can you please help me in this regard? Many Thanks Ok, this may be asking too much, but I have this design idea - http://tmh.netdbs.com/turnkey2.jpg But insofar as laying it out with CSS, I just am not sure where to begin breaking it apart and creating various divs so to speak, the main white area is where I will lay out various <P> tags and won't have a problem with that, but it is getting started that challenges me. I'd appreciate some feedback on how to approach this. TOm Here is a test page... http://www.thedreyersonline.com/test.htm It doesn't look horrible, so I can live with it, but it's designed so that the comments section will actually sit on the bottom like the "onbottom.gif" screenshot... It works if there is enough content in the "content" div prior to the "comments" div, but not when it's short. An alternative solution would be like the "extended.gif" screenshot, but the onbottom shot is preferred. Any help would be greatly appreciated! Thanks Bryan I haven't figured out how to align the <div> tag to be center for the Mozilla browser.. I know I'm missing something here but I can't remember which. This one work in IE but not Mozilla. Code:
<div style="text-align: center;">
<div>
<STYLE TYPE="text/css">
body {font-family:Verdana;
font-size:10pt;
font-weight:normal;
color:black;}
H2 {font-family:Verdana;
font-size:12pt;
font-weight:bold;
color:black;
width: 625px;
BORDER-BOTTOM: black 1px solid;
}
TD {font-family:Verdana;
font-size:8pt;
font-weight:normal;
color:black;}
.cTradeLines TD
{FONT-WEIGHT: normal;
FONT-SIZE:10ptl;
COLOR: black;
FONT-FAMILY: Arial}
.cTradeLines A
{FONT-WEIGHT: normal;
FONT-SIZE:10pt;
FONT-FAMILY: Arial}
.cTradeLines A:hover
{FONT-WEIGHT: normal;
FONT-SIZE:10pt;
FONT-FAMILY: Arial}
.cSpSm
{FONT-WEIGHT: normal;
FONT-SIZE: 7pt;
COLOR: black;
FONT-FAMILY: Arial}
</STYLE>
<p>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50%"></td>
<td width="50%" align="right" style="font-size:10pt;" valign="top"><LABEL style="font-family:Verdana; font-size:12pt; font-weight:bold; color:black;">TRANS UNION Credit Profile Report</LABEL><br>TRANS UNION<br>555 W ADAMS<br>CHICAGO, IL. 60661<br>800 888-4213<br>
Date Reported: 9/16/2005</td>
</tr>
</table>
</p>
<p>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50%"></td>
<td width="50%" align="right" style="font-size:10pt;" valign="top"></td>
</tr>
</table>
</p>
<p>
<H2>Status</H2>
No Hit<br></p>
</div>
</div>
I know the codes isn't w3.org compliant with the way the <style> tag are inserted. It's the way the web page is created via the 3rd party website when receiving it and I'm encapsulating it with a <div> tag. I don't wanna do a lot of screen scraping and moving around the tags with PHP because they are never the same from the 3rd party website. Thanks.. I've been trying to figure out how I can use css to make one side of the body one color and the other side another color. For example: if I want the entire left 70% of the page to be white and the right 30% to be black. no margins. it needs to stretch the entire length of the page regardless if there's any content in a div or not. And it need to be fluid. I've been trying everything I know and apparently that's not very much because I can't figure it out. The link below is what I've tried using a bg image. Hopefull this will illustrate the idea. But I don't want to use a bg image if I don't have to plus the division where the color changes needs to be fluid with the text and I haven't figured out how to do it with the offset percentages. Basically the left side needs to be white as wide or wider as the left column and the right side color can go from that point all th eway right regardless of how wide the browser is. Does that make sense? I think I could do it if it were 50/50 but that's not what I'm after. http://sonicparke.com Has anybody done this or know how it should be done? should i organise the css as 1. have each div then everything in it like a form/table.. 2. all divs at the top that make up the page then section for forms/table or some other way that works better and you can see/follow/jump to a place better? I use this css: #clearfooter { /* VERTICALLY ALIGN THE FOOTER TO BOTTOM WHERE REQUIRED */ clear: both; height: 170px; overflow: hidden; } #footerbox { /* BOX FOR THE FOOTER */ height: 170px; width: 759px; margin:0 auto; padding:0; margin-top :-170px; text-align: center; } It puts the footer at the bottom of the page. In IE I can click on the links in that part of the page. In FF I cannot. If I remove the "clearfooter" id then it works in FF although obviously it knackers the page layout...any solution available? Hello, I'm new to CSS but code is beginning to make more sense, for the most part. I've been able to transform an existing template into something more custom. The theme over all has turned out well and I'm happy with it. There is one snag that I'm running into and I really would appreciate someone with more experience and a better understanding of css framework to give me guidance. The issue: The "Comments/Respond" section for each blog post is getting pushed down rather far and there are odd little blue dots showing up to the right, just below the post itself, but before the beginning of the comments section. Now, I did try plugging the CSS code into the validation service and have found some warnings. The thing is, many of these issues were in the template (I didn't change them or edit them). So would the errors that the validation tool found be interfering with how the comment section is getting pushed down? Example of errors: Quote: 318 input[type="text"], textarea Property box-shadow doesn't exist in CSS level 2.1 but exists in : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 319 input[type="text"], textarea Property -moz-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 320 input[type="text"], textarea Property -webkit-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 823 .wp-caption Property -moz-border-radius-bottomleft doesn't exist : 3px 3px 824 .wp-caption Property -moz-border-radius-bottomright doesn't exist : 3px 3px 825 .wp-caption Property -moz-border-radius-topleft doesn't exist : 3px 3px 826 .wp-caption Property -moz-border-radius-topright doesn't exist : 3px 3px 1149 .submitbutton Value Error : float attempt to find a semi-colon before the property name. add it 1286 pre Property -webkit-text-size-adjust doesn't exist : 140% 140% 1289 code Property -webkit-text-size-adjust doesn't exist : 160% 160% 1296 #access, .entry-meta, .entry-utility, .navigation, .widget-area Property -webkit-text-size-adjust doesn't exist : 120% 120% 1299 #site-description Property -webkit-text-size-adjust doesn't exist : none none The thing is, I'm rather confused as to where to pinpoint the gap. In the CSS stylesheet the blog posts which are called out as "Content" live under an id called "Main". The comments seem to live under Main as well and seem to be in their own segment. I just can't figure out how to either pull the comment segment/table whatever you'd call it up more snug with the post, or eliminate whatever excess space is pushing comments down so far and causing the mysterious blue dots. I would post a link to what I'm talking about but I'm too new to the forum. Thanks in advance! |
|||||||