View Full Version : It looks okie...But some problems


mgmg
10-01-2004, 11:05 AM
Earlier in the year, I posted here with some questions on CSS Layouts. I think I've found out how to do it, so I started making my own. I think it came out pretty good, considering how sucky I am at this. But there are some problems.

I just added some dummy text from my current page into the main entry.

Problems:
If you go to link, *http://www.thequietworld.com/layout.html* you can see for yourself.

To the far left, there is like 1 pixel between the blue and the boundary. I've checked in the code, and I'm pretty sure it shouldn't be there. How do I fix this?

The main content box is also seperated from the banner by about 5 pixels. How do I make them touch?

On the main content and left navigation, the color of the <td> ends as soon as there is no more content. However, I want it to extend further until the bottom of the navigation.

With the main content, there is some white space between it and the navigation bars. I would like it to be 13 pixels wide, and filled in with hex color 12018B.

I want the main content to scroll, when it reaches the bottom of the navigation.

Ideally, I want it to look like this: http://www.thequietworld.com/images/layout new.

Yes...It's a lot of problems. :lolol:

I'll add the code in a reply...It's exceeding the character limit. :)

mgmg
10-01-2004, 11:07 AM
Here's my code. It STILL exceeds the character limit. It's going to be split in half.....

<html>
<head>
<title>The Quiet World:: A Lemony Snicket Resource</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
width: 770px;
}

#header {
margin: 0px;
padding: 0px;
height: 225px;
width: 770px;
}
#left {
margin-top: 63;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
position: absolute;
padding-left: 0;
padding-right: 13;
left: 0px;
top: 160px;
width: 149px;
}
#center {
top: 0;
margin-top: 0;
margin-left: 175px;
margin-right: 175px;
}
#right {
margin-top: 70;
margin-bottom: 0;
margin-left: 13;
margin-right: 498;
position: absolute;
padding-left: 13;
padding-right: 0;
right: 15px;
top: 153px;
width: 150px;
}
</style>
</head>

<body>

<div id="header">

<img src="http://www.thequietworld.com/images/banner2.jpg">

</div>

<div id="left">
<table border="0">
<tr>
<td background="http://www.thequietworld.com/images/cellbackground.jpg">


<table border="0">
<tr>
<td>
<img src="http://www.thequietworld.com/images/thesite.jpg"></td>
</tr>
<tr>
<td>
<font face="Verdana" size="1">
&nbsp;- <a href="http://www.thequietworld.com"> Home</a><br>
&nbsp;- <a href="/aboutus.shtml">About Us</a><br>
&nbsp;- <a

href="http://vfdheadquarters.proboards27.com/index.cgi">Forums</a><br>
&nbsp;- <a href="/jobopenings.shtml">Job Openings</a><br>
&nbsp;- <a href="/affliates.shtml">Affiliates</a><br>
&nbsp;- <a href="/history.shtml">History</a><br>
&nbsp;- <a href="/editorials.shtml">Editorials</a><br>
&nbsp;&nbsp;&nbsp; • <a

href="/editorials/theall-seeingeye/index.shtml">The All Seeing Eye</a><br>
&nbsp;&nbsp;&nbsp; • <a

href="/editorials/thedailypunctilio.shtml/index.shtml">The Daily

Punctilio</a><br>
- <a href="/contests.shtml">Contests</a><br></font></td></tr>
<tr>
<td><img src="http://www.thequietworld.com/images/thebooks.jpg"></td>
</tr>
<tr>
<td background="http://www.thequietworld.com/images/cellbackground.jpg">
<font face="Verdana" size="1">
&nbsp;- <a href="books/book1.shtml">The Bad Beginning</a><br>
&nbsp;- <a href="books/book1.shtml">The Reptile Room</a><br>
&nbsp;- <a href="books/book1.shtml">The Wide Window</a><br>
&nbsp;- <a href="books/book1.shtml">The Miserable Mill</a><br>
&nbsp;- <a href="books/book1.shtml">The Austere Academy</a><br>
&nbsp;- <a href="books/book1.shtml">The Erstaz Elevator</a><br>
&nbsp;- <a href="books/book1.shtml">The Vile Village</a><br>
&nbsp;- <a href="books/book1.shtml">The Hostile

Hospital</a><br>
&nbsp;- <a href="books/book1.shtml">The Carnivourous

Carnival</a><br>
&nbsp;- <a href="books/book1.shtml">The Slippery Slope</a><br>
&nbsp;- <a href="books/book1.shtml">The Grim Grotto</a><br>
&nbsp;- <a href="?id=books/chris">The Author</a><br>
&nbsp;- <a href="/interestingfacts.shtml">Interesting

Facts</a><br>
&nbsp;- <a href="/funnyquotes.shtml">Funny

Quotes</a></font></td></tr>
<tr>
<td><img src="http://www.thequietworld.com/images/thetheories.jpg"></td>
</tr>
<tr>
<td background="http://www.thequietworld.com/images/cellbackground.jpg">
<font face="Verdana" size="1">
&nbsp;- <a href="?id=books/characters">V.F.D</a><br>
&nbsp;- <a href="?id=books/characters">Beatrice</a><br>
&nbsp;- <a href="?id=books/characters">Prufrock Prep</a><br>
&nbsp;- <a href="?id=books/characters">A Location...</a><br>
&nbsp;- <a href="?id=books/characters">The Disguises</a><br>
&nbsp;- <a href="?id=books/characters">When and

Where</a><br></font></td></tr>
<tr>
<td><img src="http://www.thequietworld.com/images/thefacts.jpg"></td>
</tr>
<tr>
<td background="http://www.thequietworld.com/images/cellbackground.jpg">
<font face="Verdana" size="1">
&nbsp;- <a href="?id=books/characters">The Transcripts</a><br>
&nbsp;- <a href="?id=books/characters">What to Look For</a><br>
&nbsp;- <a href="?id=books/characters">Read Between the

Lines</a><br>
&nbsp;- <a href="?id=books/characters">A Location...</a><br>
&nbsp;- <a href="?id=books/characters">The V.F.D Family

Tree</a><br>
&nbsp;- <a href="?id=books/characters">The Prospero</a><br>
&nbsp;- <a href="?id=books/characters">The Sebald Code</a><br>
&nbsp;- <a href="?id=books/characters">ASoUE Food</a><br>
&nbsp;- <a href="?id=books/characters">"The World is Quiet

Here"</a><br>
&nbsp;- <a href="?id=books/characters">To Beatrice</a><br>
&nbsp;- <a href="?id=books/characters">Sad Song Lyrics</a><br>
&nbsp;- <a href="?id=books/characters">The Snow Scouts...</a><br>
&nbsp;- <a href="?id=books/characters">"With all due

respect..."</a><br>
&nbsp;- <a href="?id=books/characters">V.F.D Rules</a><br>
&nbsp;- <a href="?id=books/characters">Lemony in the

News</a><br></font></td></tr>
<tr>
<td><img src="http://www.thequietworld.com/images/themovie.jpg"></td>
</tr>
<tr>
<td background="http://www.thequietworld.com/images/cellbackground.jpg">
<font face="Verdana" size="1">
&nbsp;- <a href="?id=books/movie1.shtml">Movie the First</a><br>
&nbsp;- <a href="?id=books/movie1.shtml">Movie the Second</a><br>
&nbsp;- <a href="?id=books/movie1.shtml">The Cast</a><br>
&nbsp;- <a href="?id=books/movie1.shtml">The

Crew</a><br></font></td></tr>
<tr>
<td><img src="http://www.thequietworld.com/images/interact.jpg"></td>
</tr>
<tr>
<td background="http://www.thequietworld.com/images/cellbackground.jpg">
<font face="Verdana" size="1">
&nbsp;- <a href="http://vfdheadquarters.proboards27.com/index.cgi"

target="_blank">Forums</a><br>
&nbsp;- <a href="/members/fanfiction.shtml">Fanfiction</a><br>
&nbsp;- <a

href="/members/fanart.shtml">Fanart</a><br></font></td></tr>



</td>
</tr>
</table>

</td>
</tr>
</table>


</div>

mgmg
10-01-2004, 11:09 AM
<div id="center">
<table border="0">
<tr>
<td background=http://www.thequietworld.com/images/contentbackground.jpg">

<div align="center">
<a href="http://www.unfortunateeventsmovie.com/index.html?e=t0z50fppet">
<img src="http://www.unfortunateeventsmovie.com/banner_page/images/eye02.gif"

border=0></a>

<a href="http://www.unfortunateeventsmovie.com/index.html?e=jd7mep73ja">
<img src="http://www.unfortunateeventsmovie.com/banner_page/images/eye01.gif"

border=0></a>

<a href="http://www.unfortunateeventsmovie.com/index.html?e=iwr6jjp1bh">
<img src="http://www.unfortunateeventsmovie.com/banner_page/images/eye05.gif"

border=0></a><br>

<!-- START : Lemony Snicket's A Series of Unfortunate Events Code -->
<script language="JavaScript1.2">

function

setcountdown(theyear,themonth,theday){yr=theyear;m o=themonth;da=theday}

// Configuration
// End time, (year,month,day)
setcountdown(2004,12,17)

// Begin Code

var montharray=new

Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''

function start_countdown(){
if (document.layers)
document.countdownnsmain.visibility="show"
else if (document.all||document.getElementById)


crosscount=document.getElementById&&!document.all?document.getElementById("coun

tdownie") : countdownie
countdown()
}

if (document.all||document.getElementById)
document.write('<span id="countdownie"></span>')

window.onload=start_countdown

function countdown(){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+"

"+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[mo-1]+" "+da+", "+yr
dd=(Date.parse(futurestring)-Date.parse(todaystring))
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000) )/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000 ))%(60*1000))/1000*1)

var titleDays = "s";
var titleHours = "s";
var titleMinutes = "s";
var titleSeconds = "s";
if(dday==1){var titleDays = "";}
if(dhour==1){var titleHours = "";}
if(dmin==1){var titleMinutes = "";}
if(dsec==1){var titleSeconds = "";}

var biggerCodeBegin = "<font style='{font-family: Verdana; font-size:

17px; font-weight: bold; color: #000000;}'>";
var biggerCodeEnd = "</font>";
var smallerCodeBegin = "<br><font style='{font-family: Verdana;

font-size: 9px; color: #000000;}'>";
var smallerCodeEnd = "</font>";

//if on day of occasion
if(dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 0){
var outputCode = biggerCodeBegin+"There's no time

left..."+biggerCodeEnd;
if (document.layers){


document.countdownnsmain.document.countdownnssub.d ocument.write(outputCode)


document.countdownnsmain.document.countdownnssub.d ocument.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=outputCode
}
// Output variables in proper format
else{
if(dday <= 0 && dhour <= 0 && dmin <= 0){
var outputCode = biggerCodeBegin+dsec+"

second"+titleSeconds+biggerCodeEnd;
}
else if(dday <= 0 && dhour <= 0){
var outputCode = biggerCodeBegin+dmin+"

minute"+titleMinutes+biggerCodeEnd+smallerCodeBegin+dsec+"

second"+titleSeconds+smallerCodeEnd;
}
else if(dday <= 0){
var outputCode = biggerCodeBegin+dhour+"

hour"+titleHours+biggerCodeEnd+smallerCodeBegin+dmin+" minute"+titleMinutes+",

"+dsec+" second"+titleSeconds+smallerCodeEnd;
}
else{
var outputCode = biggerCodeBegin+dday+"

day"+titleDays+biggerCodeEnd+smallerCodeBegin+dhour+" hour"+titleHours+",

"+dmin+" minute"+titleMinutes+", "+dsec+" second"+titleSeconds+smallerCodeEnd;
}
if(document.layers){


document.countdownsmain.document.countdownssub.doc ument.write(outputCode)


document.countdownsmain.document.countdownssub.doc ument.close()
}
else if(document.all||document.getElementById){
crosscount.innerHTML = outputCode;
}
}
setTimeout("countdown()",1000)
}
</script>

<ilayer id="countdownnsmain" visibility=hide><layer id="countdownnssub"

left=0 top=0></layer></ilayer>
<!-- END : Lemony Snicket's A Series of Unfortunate Events Code --><br>

<a href="http://www.unfortunateeventsmovie.com/index.html?e=vevr8e00dg">
<img src="http://www.unfortunateeventsmovie.com/banner_page/images/eye06.gif"

border=0></a>

<a href="http://www.unfortunateeventsmovie.com/index.html?e=lk0uz9e6wd">
<img src="http://www.unfortunateeventsmovie.com/banner_page/images/eye03.gif"

border=0></a>

<a href="http://www.unfortunateeventsmovie.com/index.html?e=pxqhug0jw9">
<img src="http://www.unfortunateeventsmovie.com/banner_page/images/eye04.gif"

border=0></a><br>

<br><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Till Lemony

Snicket's A Series of Unfortunate Events opens in theaters on December 17...<p>
<font size="1" face="Verdana, Arial, Helvetica, sans-serif"><i>"As you climb up

the V.F.D chute, you come to face a vast ruin. Smoke is raising inplaces and

the only remaning items are a stone archway and a refrigerator. A frozen

waterfall is in the background. You sigh and pick up some scraps of paper on

the ground. They crumple into ashes in your hand. You walk around the ruins. A

voice suddenly calls out 'The World is Quiet Here.'" </i><p>

Welcome to the new and improved <b>The Quiet World</b>! A growing resource for

Lemony Snicket fans! Welcome to The Quiet World: <I>Version 3.0</I><p>


<font size="2"><b>Lemony News:</b><br></font>
<div align="left">
<b>Pictures from New York Book Signing:</b><br>
<a

href="http://www.wireimage.com/GalleryListing.asp?navtyp=gls====77533">Wireimag

es.com</a> has posted several pictures from the New York Lemony Snicket book

signing. It makes it more bearable.....Why? Why not the Philippines? Why?<br>


<div align="right"><i>
October 1, 2004 | <a href="javascript:HaloScan('63');" target="_self"><script

type="text/javascript">postCount('63');</script></a> | <a

href="javascript:HaloScanTB('63');" target="_self"><script

type="text/javascript">postCountTB('63'); </script></a>
<br></div></i>

<b>New Trailer!</b><br>
<a href="http://www.thesnicketsource.com">The Snicket Source</a> recently

recieved an e-mail regarding the eagerly anticipated new trailer.

Well...Apparently it's showing on Nickelodeon!<p>

From hyperboy2318<br>
<i>"...said something about Count Olaf having a striking resemblance to Jim

Carrey. It showed Captain Sham meeting Aunt Josephine and the Baudelaires at

the dock and a few other new scenes. Look out for it."</i><p>

<i>EDIT</i>: They are also showing cast interviews and other related Lemony

Snicket things! Be sure to check them out!<br>

<div align="right"><i>
September 27, 2004 | <a href="javascript:HaloScan('62');"

target="_self"><script type="text/javascript">postCount('62');</script></a> |

<a href="javascript:HaloScanTB('62');" target="_self"><script

type="text/javascript">postCountTB('62'); </script></a>
<br></div></i>
All of your content goes in this div. This section is fluid so that if the

window is collapsed, your div will collapse also and fit the screen perfectly.

To change the properties of this div you can change the #center selector in the

style sheet that is located on this page between the head tags.

</div>

</td>
</tr>
</table>



<div id="right">

<table border="0"
<tr>
<td background="http://www.thequietworld.com/images/cellbackground.jpg">
<table border="0">
<tr>
<td><img src="http://www.thequietworld.com/images/shoutbox.jpg"></td>
</tr>
<tr>
<td>

<div align="center"><!-- BEGIN MYSHOUTBOX.COM CODE -->
<iframe src="http://113493.myshoutbox.com/" width="152" height="251"

frameborder="0" allowTransparency="true"></iframe>
<!-- END MYSHOUTBOX.COM CODE-->

</td>
</tr>

<tr>
<td><img src="http://www.thequietworld.com/images/thepoll.jpg"></td>
</tr>
<tr>
<td>

<!-- Start Bravenet.com Service Code -->
<!-- The following line of code must be on one line, it can not wrap // -->
<script language="JavaScript"

src="http://pub21.bravenet.com/minipoll/show.php?usernum=1780255611&cpv=2">
</script></div>
<!-- End Bravenet.com Service Code --></td>

</tr>
</table>

</tr>
</table>

</div>

</body>
</html>

mgmg
10-01-2004, 11:22 AM
Ooops! Another mistake...

Also, when you minimize it, the central box is supposed to be fluid. However, instead when you minimize it, the right box moves....


WOW! I was using Mozilla and just viewed it in IE, after my dad tipped me off! Its so bad! The main box extends outside the boundary, and the shoutbox is not lined up. What happened??? Aren't these cross browser codes???

mgmg
10-02-2004, 02:00 AM
I think I figured some things out.....

I managed to make the central div scroll. I added this code to the beginning of the center tag.


<div id="center">
<table border="0">
<tr>
<td background=http://www.thequietworld.com/images/contentbackground.jpg">
<DIV id=scroll3 style="OVERFLOW: auto; WIDTH:416px; HEIGHT: 816px;

BACKGROUND-COLOR:#">

So now it scrolls....But I don't want a horizontal scroll bar to appear. Only a vertical one....

Here are the rest of the problems:
If you go to link, *http://www.thequietworld.com/layout.html* you can see for yourself.

To the far left, there is like 1 pixel between the left div and the far left boundary. I've checked in the code, and I'm pretty sure it shouldn't be there. How do I fix this?

The center div is also seperated from the banner by about 5 pixels. How do I make them touch?

On the center div and left div, the color of the <td> ends as soon as there is no more content. However, I want it to extend further until the bottom of the navigation (did using the scrollbar solve this for the center div?)

With the center div, there is some white space between it and the left and right divs. I would like it to be 13 pixels wide, and filled in with hex color 12018B.

I want the main content to scroll, when it reaches the bottom of the navigation. (Did I do it correctly?)

The center div is the one that is supposed to be fluid right? When you minimize it, the right div moves, not the center one.

For some insane reason...If you view it in Internet Explorer everything gets messed up. The center div extends farther then it's supposed to, the right div has moved. Aren't yjese supposed to be cross-browser? I use Mozilla Firefox...

Ideally, I want it to look like this: http://www.thequietworld.com/images/layoutnew.jpg

mgmg
10-02-2004, 06:09 AM
To stop any flaying because of double posting I've made a page detailing this. I keep trying to fix things, so the code I always have is changing. Any help on this will be greatly appreciated! Thanks!

http://www.thequietworld.com/newlayouthelp.txt

mgmg
10-03-2004, 01:08 AM
Can someone delete this thread.

I've already given up, and I don't think anyone will reply anyway.