|
|
Post a Project »
Find a Professional HTML Freelancer!
Find a Freelancer to help you with your HTML projects
| |
|
 |
|
|
10-30-2005, 11:46 AM
|
Full width code missing
|
Posts: 8
|
I hate blogs that only have the narrow strip down the middle, I want to expand mine to the full window size.
I have looked through the search area and tried a few html codes to no avail. Any ideas?
I use blogger and this is the site http://www.frugalforlife.com
Thanks  |
|
|
|
|
11-01-2005, 02:33 AM
|
|
Posts: 8
|
Bumping up to get a reply to question
|
|
|
|
|
11-01-2005, 03:07 AM
|
|
Posts: 42,383
Name: Chris Hirst
Location: Blackpool. UK
|
change the 950px in #rap to 100%
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
|
|
|
|
|
11-02-2005, 09:35 AM
|
|
Posts: 635
|
I fiddled around and was able to fudge something with your existing code, basically the left and right sidebars are locked to the edges, and the middle has left/right edges just inside those sidebars. Do a Google search for "css 3 column layout" for a rundown on how to do it.
I had to remove the content to post it here, so just replace the DIV contents with your content:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<META NAME="abstract" CONTENT="A Resource for Frugal and Simple Living">
<meta name="description" content="Resource for Frugal People or the Person wanting to live a Frugal and Simple Life, Information and Resources to help you Living Below your Means with Money Saving ideas, Tips, homemade products, Dumpster Diving, coupon codes, "/>
<meta name="Title" content="Frugal for life Experience life by living a simple frugal life "/>
<meta name="keywords" content="Trash, Finance, Repel Spiders, Tips, Budget, Frugal, Live frugally, Saving, Rebate, Saver, Review, Dumpster Diving, crockpot, homemade, cleaning, recipes, coupon code"/>
<META NAME="revisit-after" CONTENT="2 days">
<meta name="Robots" content="index,follow"/>
<META NAME="copyright" CONTENT="You must attribute the work in the manner specified by the author or licensor. You may not alter, transform, or build upon this work.">
<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//-->
</SCRIPT>
<title>Frugal For Life</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="generator" content="Blogger" />
<link title="Frugal For Life" href="http://frugalforlife.blogspot.com/atom.xml" type="application/atom+xml" rel="alternate" />
<link title="Frugal For Life" href="https://www.blogger.com/atom/9682622" type="application/atom+xml" rel="service.post" />
<link title="RSD" href="http://www.blogger.com/rsd.g?blogID=9682622" type="application/rsd+xml" rel="EditURI" />
<style type="text/css"><!--
--></style>
<style type="text/css"><!--
/*
-----------------------------------------------
Blogger Template Style
Name: Frugal For Life
Designer: Anna(Blog-Togs.com)
URL: www.blog-togs.com
Date: July 2005
----------------------------------------------- */
body {
font-size: 1em;
background-color: white;
margin: 0;
padding: 0
}
a:link {
color: #990000;
text-decoration: none
}
a:visited {
color: #990000;
text-decoration: none
}
a:hover {
color: #000;
text-decoration: none
}
a img {
border-width: 0
}
/* Header
----------------------------------------------- */
#header {
background-color: transparent;
background-image: url("http://photobucket.com/albums/y116/frugalforlife/blogtogs/header.jpg");
background-repeat: no-repeat;
margin-left: 0;
padding: 0;
position: absolute;
top: -25px;
width: 100%;
left: 0px;
height: 357px
}
#wabisabi {
background-color: transparent;
position: absolute;
right: 10px;
width: 217px;
height: 455px
}
/* Content
----------------------------------------------- */
#content {
text-align: left;
margin-top: 330px;
padding: 0
}
#sideleft {
position: absolute;
background-color: #f2f3f5;
color: #666;
font-size: 0.7em;
font-family: verdana;
font-weight: bold;
padding: 0 10px;
top: 330px;
width: 200px
}
#main {
position: absolute;
top: 350px;
left: 225px;
right: 250px;
margin-left: 18px;
}
#sidebar {
background-image: url("http://photobucket.com/albums/y116/frugalforlife/blogtogs/wabisabi.gif");
background-repeat: no-repeat;
color: #000;
background-color: #983333;
font-size: 0.75em;
font-family: verdana;
font-weight: bold;
position: absolute;
padding: 400px 10px 0 10px;
top: 30px;
right: 0px;
width: 200px
}
*html #sidebar {
margin-right: 11px
}
/* Headings
----------------------------------------------- */
h2 {
color: #999;
font: medium CSS_PROPERTY_UNDEF;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.2em;
margin: 1.5em 0 0.75em
}
/* Posts
----------------------------------------------- */
.date-header {
font-size: 1.5em;
font-family: georgia, garamond, sans-serif;
text-align: left;
margin: 1.5em 0 0.5em;
border-bottom: 1px solid #ccc
}
.post {
color: #000000;
font-size: 0.75em;
font-family: verdana, georgia, garamond, sans-serif;
font-weight: normal;
line-height: 1.3em;
padding-bottom: 0
}
.post-title {
color: #333;
font-size: 1.4em;
font-family: georgia, garamond, sans-serif;
font-weight: bold;
line-height: 1.4em;
text-align: left;
margin: 0.25em 0 0;
padding: 0 0 4px
}
.post-title a, .post-title a:visited {
color: #333;
font-weight: bold;
text-decoration: none;
display: block
}
.post-title a:hover {
color: #777
}
.post-footer {
font-size: 0.65em;
font-family: verdana;
font-weight: bold;
text-align: center;
padding-top: 8px;
padding-bottom: 40px;
border-top: 1px solid #ccc
}
.post img {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
padding: 4px;
float: left;
border: solid 1px #ddd
}
.post blockquote {
margin: 1em 20px
}
.post blockquote p {
margin: 0.75em 0
}
/* Sidebar Content
----------------------------------------------- */
#sideleft ul {
text-align: left;
margin: 0;
padding: 0 0 40px;
width: 100%;
overflow: hidden
}
#sideleft ul li {
color: #666;
font-style: italic;
font-weight: normal;
list-style-type: none;
margin: 0;
padding: 5px 0
}
#sideleft ul li b {
color: #333;
font-size: 0.9em;
font-style: normal;
text-align: right
}
#sidebar ul {
color: #fff;
font-size: 0.9em;
font-family: verdana;
font-weight: bold;
list-style: none;
margin: 0;
padding: 0 0 30px
}
#sidebar li {
color: #fff;
line-height: 1.5em;
margin: 0;
padding-left: 10px
}
#sidebar a, #sidebar a:link, #sidebar a:visited {
color: #4a1918;
text-decoration: none
}
#sidebar a:hover {
color: #fff;
text-decoration: none
}
#sidebar a img {
border: solid 2px #000
}
#sidebar a img:hover {
border: solid 2px #fff
}
#sidebar strong {
color: #000
}
/* Profile
----------------------------------------------- */
.about {
color: #4a1918;
text-align: justify;
padding-bottom: 20px
}
#profile-container {
margin: 0 0 1.5em;
padding-bottom: 1.5em
}
.profile-datablock {
margin: 0.5em 0
}
.profile-img {
display: inline
}
.profile-img img {
margin: 0 8px 3px 0;
padding: 4px;
float: left;
border: solid 1px #ddd
}
.profile-data {
margin: 0
}
.profile-data strong {
display: none
}
.profile-textblock {
margin: 0 0 0.5em
}
.profile-link {
margin: 0
}
/* Footer
----------------------------------------------- */
#footer {
margin: 0 auto;
width: 100%;
clear: both
}
#footer hr {
display: none
}
#footer p {
font: 78% / 1.6em "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0;
padding-top: 15px
}
.menutitle {
color: #000000;
font-weight: bold;
background-color: #ececff;
text-align: center;
cursor: pointer;
margin-bottom: 5px;
padding: 2px;
width: 140px;
border: solid 1px
}
.submenu {
text-align: center;
margin-bottom: 0.5em
}
--></style>
<script type="text/javascript">
/****************************************************
* DOM Image rollover:
* by Chris Poole
* http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it :-)
****************************************************/
function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;
</script>
<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>
<script type="text/javascript" src="http://www.haloscan.com/load/sdc2027/"></script>
<script type="text/javascript">
<!--
// -->
</script>
<!-- -->
<style type="text/css"><!--
@import url("http://www.blogger.com/css/navbar/main.css");
@import url("http://www.blogger.com/css/navbar/4.css");
--></style>
<script type="text/javascript" src="http://www.blogger.com/js/cookies.common.js"> </script>
</META>
</META>
</META>
</head>
<body>
<!-- -->
<div id="flagi" style="visibility:hidden;" onmouseover="showDrop()" onmouseout="hideDrop()">
<div id="flagtop"></div>
<div id="top-filler"></div>
<div id="flagi-body">
Notify Blogger about objectionable content.<br />
<a href="http://help.blogger.com/bin/answer.py?answer=1200"> What does this mean? </a>
</div>
</div>
<div id="b-navbar">
<a id="b-logo" title="Go to Blogger.com" href="http://www.blogger.com/"><img src="http://www.blogger.com/img/navbar/4/logobar.gif" alt="Blogger" height="24" width="80" /></a>
<form id="b-search" action="http://search.blogger.com/" name="b-search">
<div id="b-more">
<a id="b-getorpost" href="http://www.blogger.com/"><img src="http://www.blogger.com/img/navbar/4/btn_getblog.gif" alt="Get your own blog" height="15" width="112" /></a><a id="flagButton" style="display:none;" onmouseover="showDrop()" onmouseout="hideDrop()" href="javascript:toggleFlag();"><img src="http://www.blogger.com/img/navbar/4/flag.gif" alt="Flag Blog" name="flag" height="15" width="55" /></a><a id="b-next" href="http://www.blogger.com/redirect/next_blog.pyra?navBar=true"><img src="http://www.blogger.com/img/navbar/4/btn_nextblog.gif" alt="Next blog" height="15" width="72" /></a>
</div>
<div id="b-this">
<input id="b-query" type="text" name="as_q" /><input type="hidden" name="ie" value="UTF-8" /><input type="hidden" name="ui" value="blg" /><input type="hidden" name="bl_url" value="frugalforlife.blogspot.com" /><input id="b-searchbtn" title="Search this blog with Google Blog Search" onclick="document.forms['b-search'].bl_url.value='frugalforlife.blogspot.com'" type="image" src="http://www.blogger.com/img/navbar/4/btn_search_this.gif" alt="Search This Blog" /><input id="b-searchallbtn" title="Search all blogs with Google Blog Search" onclick="document.forms['b-search'].bl_url.value=''" type="image" value="Search" src="http://www.blogger.com/img/navbar/4/btn_search_all.gif" alt="Search All Blogs" /><a id="b-blogthis" href="javascript:BlogThis();">BlogThis!</a>
</div>
</form>
</div>
<script type="text/javascript"><!--
var ID = 9682622;var HATE_INTERSTITIAL_COOKIE_NAME = 'dismissedInterstitial';var FLAG_COOKIE_NAME = 'flaggedBlog';var FLAG_BLOG_URL = 'http://www.blogger.com/flag-blog.g?nav=4&toFlag=' + ID;var UNFLAG_BLOG_URL = 'http://www.blogger.com/unflag-blog.g?nav=4&toFlag=' + ID;var FLAG_IMAGE_URL = 'http://www.blogger.com/img/navbar/4/flag.gif';var UNFLAG_IMAGE_URL = 'http://www.blogger.com/img/navbar/4/unflag.gif';var ncHasFlagged = false;var servletTarget = new Image();
function BlogThis() {Q='';x=document;y=window;if(x.selection) {Q=x.selection.createRange().text;} else if (y.getSelection) { Q=y.getSelection();} else if (x.getSelection) { Q=x.getSelection();}popw = y.open('http://www.blogger.com/blog_this.pyra?t=' + escape(Q) + '&u=' + escape(location.href) + '&n=' + escape(document.title),'bloggerForm','scrollbars=no,width=475,height=300,top=175,left=75,status=yes,resizable=yes');void(0);}
function blogspotInit() {initFlag();}
function hasFlagged() {return getCookie(FLAG_COOKIE_NAME) || ncHasFlagged;}
function toggleFlag() {var date = new Date();var id = 9682622;if (hasFlagged()) {removeCookie(FLAG_COOKIE_NAME);servletTarget.src = UNFLAG_BLOG_URL + '&d=' + date.getTime();document.images['flag'].src = FLAG_IMAGE_URL;ncHasFlagged = false;} else { setBlogspotCookie(FLAG_COOKIE_NAME, 'true');servletTarget.src = FLAG_BLOG_URL + '&d=' + date.getTime();document.images['flag'].src = UNFLAG_IMAGE_URL;ncHasFlagged = true;}}
function initFlag() {document.getElementById('flagButton').style.display = 'inline';if (hasFlagged()) {document.images['flag'].src = UNFLAG_IMAGE_URL;} else {document.images['flag'].src = FLAG_IMAGE_URL;}}
function showDrop() {if (!hasFlagged()) {document.getElementById('flagi').style.visibility = 'visible';}}
function hideDrop() {document.getElementById('flagi').style.visibility = 'hidden';}
function setBlogspotCookie(name, val) {var expire = new Date((new Date()).getTime() + 5 * 24 * 60 * 60 * 1000);var path = '/';setCookie(name, val, null, expire, path, null);}
function removeCookie(name){var expire = new Date((new Date()).getTime() - 1000); setCookie(name,'',null,expire,'/',null);}
--></script>
<script type="text/javascript"> blogspotInit();</script>
<div id="space-for-ie"></div>
<div id="header"></div>
<div id="wabisabi"></div>
<!-- Begin #content -->
<div id="content">
<!-- Begin #sidebar -->
<div id="sideleft">
<h2><span id="sub15" class="submenu">Left Side</span></h2>
<center>
<li>
</li>
<li>
</li>
<li>
</li>
</center>
<li>
</li>
<li>
</li>
<li>
</li>
<div id="masterdiv">
<center>
</center>
</div>
</div>
<!-- End #sidebar --><!-- Begin #main -->
<div id="main">
Content
<div class="post-title">
</div>
<div class="post">
</div>
<div class="post-title">
</div>
<div class="post-title">
</div>
</div>
<!-- End #main --><!-- Begin #sidebar -->
<div id="sidebar">
<h2>Right Site</h2>
<ul>
</ul>
<center>
</center>
</div>
<!-- End #sidebar -->
<!-- End #content -->
<div style="clear: both;">
</div>
</div>
<!--[if IE]>
<br>
<br>
<![endif]-->
</body>
</html>
Last edited by funkdaddu; 11-02-2005 at 10:21 AM..
|
|
|
|
|
11-02-2005, 09:48 AM
|
|
Posts: 42,383
Name: Chris Hirst
Location: Blackpool. UK
|
Not a framed page But there will be a lot of work to do to make it into a fluid template.
The background image for #rap is a fixed width for a start, there are absolute positioned elements for the right side, the post view area (#main) will need setting up to flow between the sidebars and the same for the header section.
It can be done but it will depend on how your knowledge of CSS is.
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
|
|
|
|
|
11-02-2005, 06:49 PM
|
|
Posts: 8
|
My knowledge of CSS is Non-existant
However I will check out the "css 3 column layout" that was mentioned and play around- that is how you learn
|
|
|
|
|
|
« Reply to Full width code missing
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
- see screenshot
