would a mystical css wizard explain this to one as lowly as i?
from : localhost/csstestingarea.blogspot.com/
why is there a white block underneath the logo before the nav bar?Code:
lt;?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?gt;
lt;!--lt;!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot; from : localhost/xmlns=' from : localhost/xmlns:b=' from : localhost/xmlns:data=' from : localhost/xmlns:expr=' from : localhost/lt;headgt;
lt;link hrcf=' from : localhost/i159.photobucket.com/albums/t147/clipsandeggs/paperclipszh6-1.png' rel='icon' type='image/x-icon'/gt;
lt;link hrcf=' from : localhost/i159.photobucket.com/albums/t147/clipsandeggs/paperclipszh6-1.png' rel='icon' type='image/png'/gt;
lt;b:include data='blog' name='all-head-content'/gt; lt;titlegt;lt;data:blog.pageTitle/gt;lt;/titlegt; lt;b:skingt;lt;![CDATA[/*
------------------------------------------------------------------------------------------------------------- ___ ___ ___ ___ ___ _____ / /\ / /\ / /\ / /\ / /\ / /::\ / /::\ / /:/_ / /:/_ / /:/_ / /::\ / /:/\:\ ___ ___ / /:/\:\ / /:/ /\ / /:/ /\ / /:/ /\ / /:/\:\ / /:/ /::\ /__/\ / /\ / /:/ \:\ / /:/_/::\ / /:/_/::\ / /:/ /:/_ / /:/ /:/ /__/:/ /:/\:| \ \:\ / /:/ /__/:/ \__\:\ /__/:/__\/\:\ /__/:/__\/\:\ /__/:/ /:/ /\ /__/:/ /:/___\ \:\/:/ /:/ \ \:\ /:/ \ \:\ / /:/ \ \:\ / /:/ \ \:\ / /:/ \ \:\/:/ /:/ \ \:\/:::::/ \ \::/ /:/ \ \:\/:/ \ \:\ /:/ \ \:\ /:/ \ \:\ /:/ \ \::/ /:/ \ \::/~~~~ \ \:\/:/ \ \::/ \ \:\/:/ \ \:\/:/ \ \:\/:/ \ \:\/:/ \ \:\ \ \::/ \__\/ \ \::/ \ \::/ \ \::/ \ \::/ \ \:\ \__\/ \__\/ \__\/ \__\/ \__\/ \__\/ ___ ___ ___ ___ ___ ___ / /\ /__/\ / /\ / /\ ___ / /\ / /\ / /:/_ | |::\ / /::\ / /::\ / /\ / /:/_ / /:/ / /:/ /\ | |:|:\ / /:/\:\ ___ ___ / /:/\:\ / /:/ / /:/ /\ / /:/ / /:/ /:/_ __|__|:|\:\ / /:/ /:/ /__/\ / /\ / /:/ /::\ / /:/ / /:/ /:/_ / /::\ /__/:/ /:/ /\ /__/::::| \:\ /__/:/ /:/ \ \:\ / /:/ /__/:/ /:/\:\ / /::\ /__/:/ /:/ /\/__/:/\:\ \ \:\/:/ /:/ \ \:\~~\__\/ \ \:\/:/ \ \:\ /:/ \ \:\/:/__\/ /__/:/\:\ \ \:\/:/ /:/\__\/ \:\ \ \::/ /:/ \ \:\ \ \::/ \ \:\/:/ \ \::/ \__\/ \:\ \ \::/ /:/ \ \:\ \ \:\/:/ \ \:\ \ \:\ \ \::/ \ \:\ \ \:\ \ \:\/:/ \__\/ \ \::/ \ \:\ \ \:\ \__\/ \ \:\ \__\/ \ \::/ \__\/ \__\/ \__\/ \__\/ \__\/
_________ ____________________________________________________/ ___ ___\ / \
| / __/ __| | | This work is licensed under a Creative Commons |
|| (_| (__ | | Attribution-Noncommercial 3.0 United States License. |
| \___\___| | | from : localhost/creativecommons.org/licenses/by-nc/3.0/us/ |\_________/ \____________________________________________________/
Name: paperclips plus andreas
ucl: from : localhost/paperclipsandscrambledeggs.blogspot.com/
Updated by: Locke Dragon: paperclipsandscrambledeggs@gmail.com
------------------------------------------------------------------------------------------------------------- */
#navbar-iframe { display: none;
}
*{margin:0; padding:0;}
body { background: rgb(232, 234, 236) none repeat scroll 0%; font-family: Verdana,Tahoma,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 76%; font-size-adjust: none; font-stretch: normal; line-height: 1.4em; text-align: center; color: rgb(48, 48, 48); -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;
background-image: ucl(quot; from : localhost/i159.photobucket.com/albums/t147/clipsandeggs/stripe.pngquot;)
}a{
color:#BFBFBF;
font-weight:bold;
text-decoration:none;
background-color:inherit;
}
a:hover{color:#2a5a8a; text-decoration:none; background-color:inherit;}
a ing{border:none; vertical-align: middle;}
p{padding:0 0 1.6em 0;}
p form{margin-top:0; margin-bottom:20px;}
ing.left,ing.center,ing.right{padding:4px; border:1px solid #505050;}
ing.left{float:left; margin:0 12px 5px 0;}
ing.center{display:block; margin:0 auto 5px auto;}
ing.right{float:right; margin:0 0 5px 12px;}
/**************** Header and navigation styles ****************/
#container{
width:757px;
margin:50px auto; 20px; 20px;
padding:1px 0;
text-align:left;
background:#ffffff;
color:#303030;
border:1px solid #505050;
}
#header1{
height:215px;
margin:0 1px 1px 1px;
background:#ffffff;
color:#ffffff;
}
#header{
height:0px;
padding:0;
margin:0px 1px 1px 1px;
background:#ffffff;
color:#ffffff;
}
#header1 h1{
padding:35px 0 0 20px;
font-size:2.4em;
background-color:inherit;
color:#ffffff;
letter-spacing:-2px;
font-weight:normal;
}
#header1 h2{
margin:10px 0 0 20px;
font-size:1.4em;
background-color:inherit;
color:#ffffff;
letter-spacing:-1px;
font-weight:normal;
}
#navigation{
height:2.4em;
line-height:2.4em;
margin:0 1px;
background:#B8E0C8;
color:#ffffff;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover{
background:#9EEFBE;
color:#ffffff;
text-decoration:none;
}
/**************** Content styles ****************/
#content{
float:left;
width:500px;
font-size:0.9em;
padding:20px 0px 0 30px;
text-align: justify;
}
#content h2{
display:block;
margin:10px 0 5px 0;
font-size:1.7em;
font-weight:normal;
letter-spacing:-1px;
color:#505050;
background-color:inherit;
}
#content h2 a{font-weight:normal;}
#content h3{margin:0 0 5px 0; font-size:1.4em; letter-spacing:-1px;}
#content a:hover,#subcontent a:hover{text-decoration:underline;}
#content ul,#content ol{margin:0 5px 16px 35px;}
#content dl{margin:0 5px 10px 25px;}
#content dt{font-weight:bold; margin-bottom:5px;}
#content dd{margin:0 0 10px 15px;}
/**************** Sidebar styles ****************/
#subcontent{
float:right;
width:190px;
padding:20px 20px 10px 0;
line-height:1.4em;
}
#subcontent h2{
display:block;
margin:0 0 15px -10px;
font-size:1.7em;
font-weight:normal;
text-align:left;
letter-spacing:-1px;
color:#505050;
background-color:inherit;
}
#subcontent p{margin:0 0 16px 0; font-size:0.9em;}
/**************** Menublock styles ****************/
.menublock{margin:0 0 20px 8px; font-size:0.9em;}
#subcontent li{list-style:none; display:block; padding:2px; margin-bottom:2px;}
#subcontent li a{font-weight:bold; text-decoration:none;}
#subcontent li a:hover{text-decoration:none;}
#subcontent li ul{margin:3px 0 3px 15px; font-size:1em; font-weight:normal;}
#subcontent li ul li{margin-bottom:0;}
#subcontent li ul a{font-weight:normal;}
.widget{margin:0 0 20px 8px; font-size:0.9em;}
/**************** Footer styles ****************/
#footer{
clear:both;
width:755px;
padding:5px 0;
margin:0 1px;
font-size:0.9em;
color:#f0f0f0;
background:#BFBFBF;
}
#footer p{padding:0; margin:0; text-align:center;}
#footer a{color:#f0f0f0; background-color:inherit; font-weight:bold;}
#footer a:hover{color:#ffffff; background-color:inherit; text-decoration: underline;}
/**************** Misc classes and styles ****************/
.splitcontentleft{float:left; width:190px;}
.splitcontentright{
float:right;
width:190px;
text-align: justify;
}
.clear{clear:both;}
.small{font-size:0.9em;}
.hide{display:none;}
.textcenter{text-align:center;}
.textright{text-align:right;}
.important{color:#f02025; background-color:inherit; font-weight:bold;}
.box{
margin:0 0 20px 0;
padding:10px;
border:1px solid #c0c0c0;
background-color:#fafbfc;
color:#505050;
line-height:1.5em;
}
.style2 {font-size: 12px}
blockquote{
margin:20px 0;
padding:0 20px 0 50px;
background:ucl(' from : localhost/photos1.blogger.com/blogger/7994/1253/1600/quote.jpg') 10px top no-repeat;
border:none;
color: #999999;
}
]]gt;lt;/b:skingt; lt;/headgt;
lt;bodygt; lt;div id='container'gt;
lt;!-- skip links for text browsers --gt; lt;span id='skiplinks' style='display:none;'gt; lt;a hrcf='#main'gt;skip to main lt;/agt; | lt;a hrcf='#sidebar'gt;skip to sidebarlt;/agt; lt;/spangt;
lt;div id='header1'gt; lt;b:section class='header' id='header' maxwidgets='4' showaddelement='yes'gt;
lt;b:widget id='HTML1' locked='false' title='' type='HTML'/gt;
lt;/b:sectiongt; lt;/divgt;lt;div id='navigation'gt;lt;ulgt;lt;li class='selected'gt;lt;a expr:hrcf='data:blog.homepageucl'gt;blog lt;ing src=' from : localhost/i159.photobucket.com/albums/t147/clipsandeggs/blog.gif'/gt;lt;/agt;lt;/ligt;lt;ligt;lt;a hrcf=' from : localhost/ lt;ing src=' from : localhost/i159.photobucket.com/albums/t147/clipsandeggs/aboutme.gif'/gt;lt;/agt;lt;/ligt;lt;ligt;lt;a hrcf=' from : localhost/ lt;ing src=' from : localhost/i159.photobucket.com/albums/t147/clipsandeggs/toolbox.gif'/gt;lt;/agt;lt;/ligt;lt;ligt;lt;a hrcf=' from : localhost/www2.blogger.com/profile/13088056030686503922'gt;about me lt;ing src=' from : localhost/i159.photobucket.com/albums/t147/clipsandeggs/portfolio.gif'/gt;lt;/agt;lt;/ligt;lt;ligt;lt;a hrcf='mailto:paperclipsandscrambledeggs@gmail.com'gt;email lt;ing src=' from : localhost/i159.photobucket.com/albums/t147/clipsandeggs/message.gif'/gt;lt;/agt;lt;/ligt;lt;/ulgt;lt;/divgt;
lt;div id='content'gt;
lt;b:section class='main' id='main' showaddelement='no'gt;
lt;b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/gt;
lt;/b:sectiongt; lt;/divgt;
lt;div class='splitcontentright'gt;lt;div id='subcontent'gt; lt;b:section class='sidebar' id='sidebar' preferred='yes'/gt; lt;/divgt;lt;/divgt;
lt;!-- spacer for skins that want sidebar and main to be the same height--gt; lt;div class='clear'gt;#160;lt;/divgt;
lt;div id='footer-wrapper'gt; lt;b:section class='footer' id='footer'/gt; lt;/divgt;
lt;/divgt;lt;!-- end outer-wrapper --gt;
lt;/bodygt;
lt;/htmlgt;
Start with the following:
on the ing src=quot; from : localhost/i159.photobucket.com/albums/t147/clipsandeggs/paperclipsbanner.jpgquot;
tag, remove the float, position, top and right rules. (They are on the inline style attribute).
Next you need to not have this rule:
.widget{margin:0 0 20px 8px; }
You can leave the font-size, but get rid of that margin.
That'll get rid of the whitespace and leaves the rest of it pretty decent (at least in Firefox).
BTW, if you aren't already you should be using Firebug. It makes CSS debugging ridiculously easy.
The DIV with the quot;headerquot; class, which is parent to all of your logo stuff, rests directly on top of the nav bar, but the image has been arbitrarily moved upward from its normal position. This left white space below.
I second the Firebug comment.
first, what is firebug? a firefox add-on? and second, i need that extra stuff for the header so that it's positioned correctly. if i don't have that in, it's too far to the right.
ok. looked up firebug, downloaded, installed, works like a charm, thanks! used the above suggestion and it worked! thanks! |
Post at 2011-1-21 23:47
| This Author's Posts Only
