HTML help | First Page | Forum

Gaia Forums » Entertainment » Computers & Technology

La cucaracha diablo

Offline

Quote
Post: 77846311_1 created on Sun, 12 Feb 2012 17:09:06 +0000
Posted: Sun, 12 Feb 2012 17:09:06 +0000

ok so im almost done with this like box i am making for my photography but there is one minor glitch. the border should be behind everything else but for some reason its not. do anyone know whats wrong with it.

What it looks like:

http://static.tumblr.com/ozhy2k5/zA4lzahef/like.html

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">

img
{
position:absolute;

}

#text
{
position:absolute;
padding-left: 120px;
padding-top: 20px;

}

#portrait
{
position:absolute;
padding-left: 12px;
padding-top: 14px;

}

#like
{
position:absolute;
padding-left: 222px;
padding-top: 100px;

}
</style>

</head>

<body>
<div id="text">
<textarea name="" cols="" rows="6" >I am a 17 year old guy from Mississippi that now lives in Arizona. Currently a Junior in high school. I do some photography and graphical design work in my free time. I am hoping to go to collage then getting into one of those fields of work / business. When im not at school, taking pictures, or doing graphic work i am either Hanging with friends or discovering new music artists that are not widely known yet.</textarea>
</div>

<img src="http://static.tumblr.com/ozhy2k5/1iklz73wb/likebox_border.png">
<div id="portrait">
<img src="http://static.tumblr.com/ozhy2k5/TjZlz8xjf/likebox_portrait.png" >
</div>
<div id="like">
<a href="http://www.facebook.com/pages/Christian-Taylor-Photography/277402702312486"><img src="http://static.tumblr.com/ozhy2k5/Xlylz8xun/likebox_likebutton.png"></a></div>

</body>
</html>

Joda01

Offline

Quote
Report Post
Post: 77846311_2 created on Sun, 12 Feb 2012 17:20:21 +0000
Posted: Sun, 12 Feb 2012 17:20:21 +0000

cols=""

no size.
write a number.

La cucaracha diablo

6,600 Points

Offline

Quote
Report Post
Post: 77846311_3 created on Sun, 12 Feb 2012 17:26:24 +0000
Posted: Sun, 12 Feb 2012 17:26:24 +0000

Joda01

cols=""

no size.
write a number.

yes but that does not change the fact that you can not even scroll that box because the border img is covering it

Joda01

Offline

Quote
Report Post
Post: 77846311_4 created on Sun, 12 Feb 2012 17:28:20 +0000
Posted: Sun, 12 Feb 2012 17:28:20 +0000

use layering, I recall CSS supporting usage of the z-axis.
edit: try adding something like

z-index:-1;

to your img

Oculis

4,800 Points

Offline

Quote
Report Post
Post: 77846311_5 created on Sun, 12 Feb 2012 20:36:30 +0000
Posted: Sun, 12 Feb 2012 20:36:30 +0000

First of all, avoid using images for borders unless you really need to, secondly if I were you I would avoid separating elements as much as possible. If you want to group them together, just nest them one inside another.
Here's how I'd do your "like box":

&html&
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#box {
width: 270px;
height: 123px;
border: 9px solid #ABBACF;
position: relative;
margin: 15px 6px;
}
#box #portrait {
top: 0px;
left: 0px;
position: absolute;
}
#box #text {
top: 7px;
right: 10px;
width: 160px;
height: 80px;
position: absolute;
}
#box #like {
right: 4px;
bottom: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<img id="portrait" src="http://static.tumblr.com/ozhy2k5/TjZlz8xjf/likebox_portrait.png" alt="Portrait" />
<textarea id="text">I am a 17 year old guy from Mississippi that now lives in Arizona. Currently a Junior in high school. I do some photography and graphical design work in my free time. I am hoping to go to collage then getting into one of those fields of work / business. When im not at school, taking pictures, or doing graphic work i am either Hanging with friends or discovering new music artists that are not widely known yet.</textarea>
<a id="like" href="http://www.facebook.com/pages/Christian-Taylor-Photography/277402702312486"><img src="http://static.tumblr.com/ozhy2k5/Xlylz8xun/likebox_likebutton.png" alt="Like" /></a>
</div>
</body>
</html>

P.S.: TBH, not really, I'd most likely use floats instead of absolute positions, but I just wanned to make it quick without having to completely recheck everything.

Report This Topic | unblock images

Gaia Forums » Entertainment » Computers & Technology

Welcome to Gaia! ::

Quick Reply

More Information