|
CSS - Collapsing Div Section
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? Similar TutorialsHi I have site where I am forced to set my content div <div id="content"> min-height with jquery on each page.Site Link This is because the content div keeps collapsing and ignoring the content it has. Can someone teach me how to fix this please. I thought I had this worked out before with the help of this forum, but it seems to be back again! In IE 6 (and maybe others, who knows. I am running Ubuntu =/ ) there is a big gap between the top horizontal nav and the comic. http://www.jjsunshines.com/ Any help would be greatly appreciated! I'll even trade you php help! This is the first site I have attempted to layout using CSS and have ran into a slight problem that I can't figure out so I am looking to the expertise of others. I have a layout that contains a sidebar (used for sub-nav) and a content area all inside of a wrapper. When there is content in the sidebar all is fine in IE and Firefox; however when I include no content in the sidebar IE looks fine but Firefox collapses the space where the sidebar was and begins the content there. Here are some of the links; Appearing correctly due to content in sidebar: http://www.jaycutler.com/Eumyotheria/the_program/the_program_index.html Appearing incorrectly due to no content in sidebar: http://www.jaycutler.com/Eumyotheria/contact/contact.html The CSS file can be found he http://www.jaycutler.com/Eumyotheria/css/stylesheet.css Any advice that can be offered would be greatly appreciated. Thank you for your time, Brian So... I have two versions of this page, one that validates, and another that doesn't. Problem is that the invalid one looks correct! This is because I got the css working before i discovered the invalid code... The offending code involves a nested ul in my nav. The invalid, looking good version looks like this: Code: <ul> li / li / <ul> li / li / </ul> li / </ul> To make it valid, I have to wrap li tags around the nested ul. I've spent gobs of time trying to figure out how to get my styles to work with this new code, but I must be missing something very simple. Here are the urls: invalid & valid Here's the css: Code:
#nav {
width:180px;
background-image:url(/images/moraga_logo.png);
background-repeat:no-repeat;
float:left
}
#nav ul.l1 {
width:179px;
position:relative;
top:100px;
margin:0;
padding:0;
}
#nav ul.l2 {
width:179px;
margin:0;
padding:0;
}
#nav ul.l1 li {
list-style:none;
border-top:1px solid #FFFFFF;
height:21px;
font-family:geometric, lucida, verdana, sans-serif;
font-size:.8125em;
font-weight:normal;
text-transform:uppercase;
letter-spacing:.125em;
text-align:right
}
#nav ul.l2 li {
text-transform:lowercase;
border:none;
font-size:.6875em;
}
#nav li.active a {
color:#A22B38;
text-decoration:none
}
#nav li.active a:hover {
color:#FFFFFF;
text-decoration:none
}
#nav a:link {
color:#000000;
text-decoration:none
}
#nav a:visited {
color:#000000;
text-decoration:none
}
#nav a:hover {
color:#FFFFFF
}
#nav a:active {
color:#000000;
text-decoration:none
}
Thank, in advance, for your generous help! -BBD I am just being scripting and have been messing with this problem for several hours and still have gotten no where at all so I was hoping for some assistance. I am attempting to make my stacked links open upon mouseover to display all the sublinks beneath the main ones and then close one the mouse is moved away from that area. I have the main ones working, as that is easy, it is those others that have me stumped. I am using outset and inset boarders to make it appear as if a drawer is being pulled out to reveal the sub-links. Any advice would be great, thank you. Hi. Please see the code below. I basically have a two column layout placed inside a container div(id="productDiv"). Each column is floated left, followed by an empty div that is set to clear:both. However, the productDiv collapses over the floated divs in Mozilla. It works as expected in IE. If I place a border on productDiv, it will expand as desired. This seems like buggy behavior for Mozilla. Has anyone ever seen this? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Testpage</title>
<style type="text/css">
body{
background-color: #eeeeee;
color: #000000;
margin: 20px auto auto auto;
}
#content{
position: relative;
background-color: #ECEADD;
font-size: 8pt;
padding: 0;
}
#productDiv{
position:relative;
margin-left: 12em;
background-color: #00ff00;
/*border: 1px solid black;*/
padding:0;
}
#category{
position:relative;
color:#000000;
font-size: 18pt;
margin: .5em 0 .5em 0;
}
#productInfoLeftCol{
position: relative;
float: left;
}
#productImage{
position: relative;
height: 360px;
width: 310px;
display:block;
}
#productInfoRightCol{
position:relative;
float: left;
margin-left: 1em;
}
.clearer{
clear:both;
}
</style>
</head>
<body>
<div id="content">
<div id="productDiv">
<h2 id="category">Category</h2>
<div id="productInfoLeftCol">
<img id="productImage" src="http://www.google.com/intl/en/images/logo.gif" alt="Some Product Image"/>
some text here
</div>
<div id="productInfoRightCol">
rightcol
</div>
<div class="clearer"></div>
</div>
</div>
</body>
</html>
Hi all, I am trying to collapse columns on double click by changing the style visibility of a col class from visible to collapse. Nice idea idea but it is not supported on IE and , although Firefox claims it does, with Firefox doesn't work either. sooo, do you know of any alternative to using the collapse thingie? 'hidden' is not an option as it leaves the space of the column on the table layout. I am checking the display prop now but I am not understanding it very well if it's a solution for me. many thanks in advance. Or really in this case their not collapsing like the should be. I have extra white space above each heading link in the gallery: http://www.sonicparke.com/skydev/gallery/ I'm also guessing that the same issue is causing the whitespace above the single column pages across the site like these: http://www.sonicparke.com/skydev/about.php http://www.sonicparke.com/skydev/about.php But it's weird that it's not happening on these: http://www.sonicparke.com/skydev/news.php I know that the zen.css file is a mess but I plan on cleaning it up a little later once I've worked through figuring out what I need and don't need. Maybe that's part of my problem but I'm still having the issue on the single column pages which don't even use the zen.css stylesheet. Thanks for the help. Hi, I want to make something that works like this: dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html# (cant post proper urls as I'm new) Whereby each link has a number of sub-links under it, and when you click a main link, the sub links for the previous one shut and the new one opens. But the tutorial on that site is not much help. It just gives you a load of code to copy into your editor, and when I've done that it didn't work anyway. Could someone point me in the direction of a tutorial to do this or let me know what I should be doing, as I can't seem to find anything on how to do it. Thanks! Hi, I have a border around the content of my page which is limited in width but not height. Some of the pages have more content then others so the height adjusts. I also have a left column and a black background with and image in this column but I have 2 problems 1. In IE I can't seem to get this black column(div) to extend to the full height of the column so that it reaches the border. 2. In Firefox this left column extends all the way down the page and the border doesn't surround the text it sort of collapses The column is left floated and in a div and the content is right floated and in a div as well which is all surrounded by a div with a border. I would appreciate any help that you might offer. Thanks Everyone knows about collapsing margins, but not everyone knows that inline blocks never collapse. So it would appear that IE treats tables as block elements (so margins collapse) and firefox treats them as god-knows-what (but akin to inline elements - so they do not collapse). Now, whether its right or wrong, I want the firefox behaviour - so I tried to display the tables as inline. This fixes IE.... but breaks firefox - the tables "loose" their width parameter so they don't display with correct widths. Does any CSS guru know a nice solution to this dilema (I know a couple of dirty solutions). To elaborate further on what is going in: There are a number of tables one after the other in the normal flow of the document that need to be seperated by certain margins. 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>
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; } 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> 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 |
|||||||