View Full Version : div layers hate me.


horse*chica
05-28-2004, 05:17 AM
I need major help from someone again. I've made another layout for the game I play (hence the reason I have no html, head, or body tags; so don't be alarmed, lol). And...the text and divs both are going crazy. Add to the fact that it's midnight here and my brain has ceased to function.

Code:

<style text="text/css">
body {
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #61A6E1;
scrollbar-highlight-color: #61A6E1;
scrollbar-3dlight-color: #61A6E1;
scrollbar-darkshadow-color: #61A6E1;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #61A6E1;
scrollbar-base-color: #FFFFFF;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}

body
{font-size: 10pt;
font-family: arial;
color: #61A6E1;
line-height: 12px;
letter-spacing: 0pt;
}

a:link{color: ##61A6E1; text-decoration: none}
a:visited{color: ##61A6E1; text-decoration: none}
a:active{color: ##61A6E1; text-decoration: none}
a:hover{color: #E8E47C; text-decoration: underline; cursor: crosshair}

.box {border: 3px double #E8E47C;
width: 500px;
height: 300px;
overflow: auto;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #61A6E1;
scrollbar-highlight-color: #61A6E1;
scrollbar-3dlight-color: #61A6E1;
scrollbar-darkshadow-color: #61A6E1;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #61A6E1;
scrollbar-base-color: #FFFFFF;
text-align: justify;
padding-top: 5;
padding-bottom: 5;
padding-left: 5;
padding-right: 5;
z-index: 3;
}

.header {text-align: left;
}

#menu {
position: absolute;
top: 127px;
left: 420px;
width: 208px;
height: 81px;
z-index: 2;
}

#cover {
position: absolute;
top: 266px;
left: 0px;
width: 35px;
height: 1000px;
background-color: #FFFFFF;
z-index: 4;
}

</style>

<img src="http://countryjules.250free.com/fp/summerheader.gif" style="position: absolute; top: 0px; left: 0px; z-index: 1;">

<div id="menu"><a class="menu" href="http://www.furry-paws.com/home.php">HOME</a>&nbsp;
<a class="menu" href="http://www.furry-paws.com/atlas.php">ATLAS</a>&nbsp;
<a class="menu" href="http://www.furry-paws.com/market.php">MARKET</a>&nbsp;
<a class="menu" href="http://www.furry-paws.com/chat.php">CHAT</a>&nbsp;
<a class="menu" href="http://www.furry-paws.com/search.php">SEARCH</a>&nbsp;
<a class="menu" href="http://www.furry-paws.com/news.php">NEWS</a>&nbsp;
<a class="menu" href="http://www.furry-paws.com/help.php">HELP</a><br>
<a class="menu" href="http://www.furry-paws.com/messages.php">MESSAGES</a>&nbsp;
<a class="menu" href="http://www.furry-paws.com/profile.php?id=5217">MY PROFILE</a>&nbsp;
</div>

<div id="cover"></div>

<center>

<div class="box"><font color="#61A6E1">
Welcome to Riverbottom Kennels! You have just stumbled upon the home of some of the best Labrador Retrievers around. So uh...yeah. That's all. :)
</font></div><br>

<div class="box"><font color="#61A6E1">
<b>[5.26.04]</b> I made my dogs (dubbed "Tys" [pronounced "Tiss"] and "South", respectively) some pictures. You should go view them and applaud and such. Ha, just kidding. I have no artistic talent, so that was pretty much my only option. They'll do ok, I suppose.<br><br>
<b>[5.25.04]</b> Yay, I am a year older today! If you realllllly love me, you will get me...-thinks for a moment- a million [real] dollars, anddd...a chocolate milkshake -nod- Hehe. ^_^<br><br>
<b>[5.23.04]</b> Bought a relatively young male lab last night (renamed RB's Song of the South), for a cheap price (with a collar included). Unfortunately, smart ol' me trained him in <u>agility</u>. Eek. So, I wasted 3k, because I went ahead and trained him in tracking, too. I guess I'll just enter agility on the side...?<br><br>
<b>[5.22.04]</b> Yes, I have returned! Hey, I said I would. Now that I actually have free time, I'll be around much more often. Unfortunately, I lost each and every one of my Labrador lines, so I am starting anew, with RB's Told Ya So.
</font></div><br>

<div class="box"><font color="#61A6E1">
<span class="header"><u><b>Services</b></u></span><br><br>
- <i>LAYOUTS</i> I don't officially do layouts for the public; but will occasionally make one for someone if asked. I'm not too swift with HTML, but if you ask for certain things that I don't know how to do, I'll at least try a few times before giving up ;)<br><br>
- <i>DOUBLE TRAINING</i> I am a Professional Trainer and have the ability to Ditto/Double Train dogs. While I only do this for myself, like with layouts, if you ask, I'll probably double train your dog for you.<br><br>
<i>Prices</i>: I do not have a set price for either of my services. With the layouts, it is typically the more difficult to code, the pricier. Prices can be negotiated with on layouts. With training, I also have no set prices. Of course, it will be at a minimum of $4000 per dog; this way I get a $1000 profit. Prices can also be negotiated with for training. I will not cheat you by overpricing, but please remember, by offering these services to you, I do expect a decent profit.
</font></div><br>

<div class="box"><font color="#61A6E1">
<span class="header"><u><b>Cassos</b></u></span><br><br>
<a href="/cassoc.php?cassoid=5852"><img src="/images/cassoensigns/casso5852.gif" alt="Labrador Retriever Association" border="0"></a>
<a href="/cassoc.php?cassoid=5994"><img src="images/cassoensigns/casso5994.gif" alt="The Retriever Casso" border="0"></a>
</font></div>

</center>


You can see an example here: http://www.geocities.com/reverie_xoxo/summer.html

Eh...the only thing that is really working is the image. The text is the right color, but not the right size. And the top div "box" is behind the image. Annnddd...the menu text on the image is weird, too, not the color it should be. I guess that's about it. I have no idea how to fix it correctly...I've went over my head this time. Oh, and you might see a "pointless" div in there (nothing inside of it), the one that is very long (1000px) with a white background. It needs to stay in there, it's not just a random code, lol. Thank you VERY much in advance.

salomeyasobko
05-28-2004, 05:35 AM
the text is the right color but not the right size because you didn't specify the font size anywhere in the .box section.. so add the bold part to your CSS, and edit the red part:

.box {
border: 3px double #E8E47C;
width: 500px;
height: 300px;
overflow: auto;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #61A6E1;
scrollbar-highlight-color: #61A6E1;
scrollbar-3dlight-color: #61A6E1;
scrollbar-darkshadow-color: #61A6E1;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #61A6E1;
scrollbar-base-color: #FFFFFF;
text-align: justify;
padding-top: 5;
padding-bottom: 5;
padding-left: 5;
padding-right: 5;
z-index: 3; font-size: #px;}

EDIT: nevermind, i just noticed that you specified the font size in the body {} part of your CSS, so you don't have to change that.. but if you do and it helps, then leave it ;) but i wanted to point out that the font size on your website IS size 10.. i mean it looks like it to me. if it looks differently to you, and you're using Internet Explorer, try going to VIEW > TEXT SIZE > and then change the text size so that it looks right to you :P it's at the top, by the way.


then for the menu, i think the links are the wrong color because you messed up the hex code.. you put two # things [check out the bold parts].


a:link{color: ##61A6E1; text-decoration: none}
a:visited{color: ##61A6E1; text-decoration: none}
a:active{color: ##61A6E1; text-decoration: none}
a:hover{color: #E8E47C; text-decoration: underline; cursor: crosshair}


lastly, i'm pretty sure your DIV is behind your image because your z-index is screwed up. this is because you can't add 'style=' tags to an image code.. [check out the bold part]

<img src="http://countryjules.250free.com/fp/summerheader.gif" style="position: absolute; top: 0px; left: 0px; z-index: 1;">

you'll have to put the image in a DIV and add the style tags to the DIV. like this:

<DIV style="position: absolute; top: 0px; left: 0px; z-index: 1;">
<img src="http://countryjules.250free.com/fp/summerheader.gif"></DIV>

well.. hope that helps! :)

horse*chica
05-28-2004, 07:20 AM
Thanks SO much, Salo. I'm tellin' ya, it's like, later it gets, the more careless I am. I can't believe I didn't even notice the double #'s. That happened when I was copying in a different hex code, and I guess I didn't highlight everything to replace, lol. That fixed my color problem. Annnddd...you were also right about the size. I didn't realize until I pasted the code into the game that for some reason, 10pt shows up smaller in the game than on a normal webpage (it looks like 8pt). That was a little useless info for you there ^_^
However, I'm still having problems with the image. Placing it into a div didn't work, and anyway, I'm almost positive that you can place absolute positioning tags inside the img tag (I've done it before), lol. I dunno, maybe I'm wrong. The only thing I can really think of is to have each div layer/box absolute positioned...or is there an easier way?

salomeyasobko
05-28-2004, 07:29 AM
haha you're welcome! that happens to me too, later in the evening! :hehe:

i think it would be easiest to just absolute position them. well it's be easiest for me, anyway ;) you just get it done and then.. well, you don't have to worry about it! that doesn't take too long, right? :o

horse*chica
05-28-2004, 07:45 AM
Well, I tried something else before I came back (before I saw your most recent post) and it worked. I just added tons of <br> tags, because it hit me: I'd never put in a code to 'tell' the divs to go further down the page...so of course it would all begin at the top. Thanks again for your help :)