View Full Version : Div Problem


ImperfectAngel
10-13-2005, 07:20 PM
Because of the way I've set my website up, is it possible for me to put the text on top of the image that I have?

Here's the CSS

A:link
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:visited
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:active
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:hover
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000;

(Warning: the following cursor attribute is for those who use IE only!)

cursor: value; [default, auto, wait, crosshair, hand, help, text, move, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize]
cursor: url('yourdomain.com/cursor.ani');}

h1 {font-family: value; [your font name for headers (arial, verdana, etc.)]
color: value; [your font color (#000000)] }

p {font-family: value; [your font name for paragraphs (arial, verdana, etc.)]
color: value; [your font color (#000000)] }

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

#menu {
right: 5px;
padding: 0px;
width: 150px;
}

#content {

margin-left: 0px;
padding: 0px;
margin-right: 200px;
}
background: #7D5A7B;
background-image: url(http://i9.photobucket.com/albums/a100/JDiva/mmbg0ft.jpg);
background-repeat: repeat-y;
background-position: 0% 0%;
background-attachment: fixed;

font-family: value; [your font name]
color: #000000 ;
letter-spacing: value; [any number value (3pt, 5pt)]
font-weight: value; [lighter, normal, bold, bolder, any number value (100, 500, 900)]
font-size: value; [xx-small, x-small, small, medium, large, x-large, xx-large,
any number value (12 pt, 18 pt)]

direction:rtl; [this reverses the entire site so the scrollbar is on the left]

(Warning: the following scrollbar attribute is for those who use IE only!)

scrollbar-face-color : #FFFFFF;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #FFFFFF;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #000000;

margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}

td
{ font-family: value; [your font name]
color: #000000;
padding-left: value; [2cm, 4cm etc.]
padding-right: value; [2cm]
padding-top: value; [2cm]
padding-bottom: value; [2cm]
padding: value; [2cm this is for all four sides]
padding: value value; [2cm, 4cm : two values for four sides, add numerical value] }

input, textarea
{ background: #000000 url(yourimage.gif);
font-family: value; [your font name]
color: #000000;
border-style: value; [dotted, dashed, solid, double, groove, ridge, inset, outset]
border-color: #000000;
border-width: valuepx; [numerical value, 5, 6, 8...] }

And here's the coding

<LINK href="http://kristal.bravehost.com/kristal.css" rel="stylesheet" type="text/css">

<html>
<head>
<title>¸¸.·*´¯`v´¯`*·.¸¸ Miss Marshall ¸¸.·*´¯`v´¯`*·.¸¸ </title>
</head>
<body>
<LINK href="http://kristal.bravehost.com/kristal.css" rel="stylesheet" type="text/css">

<img src="http://kristal.bravehost.com/mmlayout8vr.jpg" usemap="#mymap" width="750" height="700" border="0">


<map name="mymap">
<area shape="rect" coords="474,202,530,216" href="http://www.freewebs.com/missmarshall/kristal.html">
<area shape="rect" coords="539,201,595,216" href="http://www.freewebs.com/missmarshall/gallery.html">
<area shape="rect" coords="607,202,653,216" href="http://www.freewebs.com/missmarshall/media.html">
<area shape="rect" coords="659,202,693,216" href="http://www.freewebs.com/missmarshall/site.html">
<area shape="rect" coords="474,218,539,230" href="http://www.freewebs.com/missmarshall/internet.html">
<area shape="rect" coords="549,218,593,232" href="http://www.freewebs.com/missmarshall/index.html">
</map>

<div id="menu">

Your menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #menu selector in the style sheet that is located on this page between the head tags.

</div>


<div id="content">
All of your content goes in this div. This side 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 #content selector in the style sheet that is located on this page between the head tags.
</div>

Thanks.

Monkey Bizzle
10-13-2005, 08:55 PM
FYI, in your stylesheet, everything that says value; [random info here] you need to replace the word value with what it says in the [brackets].

beks
10-13-2005, 10:01 PM
You should be able to use dividers to position text so it's over the images.

http://www.lissaexplains.com/html7.shtml

<div id=layer1 style="position:absolute; top:20; left:20; width:300; height:300; z-index:1;">

Place text here.

</div>

You just need to fill the numbers in so they correctly match the image you are trying to put text over.

Monkey Bizzle
10-14-2005, 03:37 AM
That's:

<div id="layer1" style="position: absolute; top: 20px; left: 20px; width: 300px; height: 300px; z-index: 1;">

Place text here.

</div>

Make sure you put the px part. Also, you really don't need to use the z-index unless you have multiple divs positioned on top of each other. In this case, since you want the div to be over the image, I wouldn't use it at all because it might put it under the image. =)

ImperfectAngel
10-15-2005, 08:29 AM
Thanks, I've sorted out the problem now :)