Forums > table over an image???

Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics

cassjamminx

Aug 22 2006, 05:11 PM

hey i'm not too new to editing codes, but starting from scratch i'm lost as heck. i was wondering how to add the content part within this image...

first off, im not even sure if it's called "table" to go over the image as main content but i'm sure you know what i'm talking about.. i think it's a div? *clueless*

kinda like this http://michellebranch.com/interface.html

and also, if anyone has the code for a popup window? like to have pages open seperately, but i was wondering, if you had the one where you can adjust the size of the pop up window, not a standard size.

thanks!!!! i hope i'm writing clear enough for you guys to understand me lol

also, i was planning on changing the image for every link/page. but i was wondering if anyone had any ideas of what the background should be behind the image because i think plain white is boring.. i don't know how i'd do it though because it's saved a JPG. and it wont look right because of "cassandra farrar" with the white still... any suggestions??

Azarel

Aug 22 2006, 10:09 PM

Check out this topic to create a div overlay (the box you want the content to go in). http://www.createblog.com/forums/index.php?showtopic=97397

cassjamminx

Aug 22 2006, 10:15 PM

hey thanks i actually just figured it out, i used css. but i have a question, how do i put the scrollbar there? so the text doesnt go beyond the image?

Azarel

Aug 22 2006, 10:26 PM

Set a height on the div layer and set the overflow to auto.

cassjamminx

Aug 22 2006, 10:28 PM

i'm lost. i'm not using the code you gave me..
this is what i have..

CODE

<html>
<head>
<title>cassandra farrar</title>

<style type="text/css">
body
{
font-family: arial;
color: #453535;
font-weight: normal;
font-size: 10pt;
}
A:link
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#453535; }
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:#8E5247;

background-image: url();
background-color: #000000;

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

#menu {
  position: absolute;
  left: 220px;
top: 100px;
  padding: 0px;
  width: 425px;

}

</style>
</head>
<body>

<div id="menu">

Latest News: fghfsioghsioghiosfgfoisg gjdifjgiodgjiprj grjgioer giodrj geirj gioejidjgiodjgirej gioer geio gioeg iorhg iorehgioerhgiorejgioregioeroreoerhgerhgeiro
Latest News: fghfsioghsioghiosfgfoisg gjdifjgiodgjiprj grjgioer giodrj geirj gioejidjgiodjgirej gioer geio gioeg iorhg iorehgioerhgiorejgioregioeroreoerhgerhgeiro
Latest News: fghfsioghsioghiosfgfoisg gjdifjgiodgjiprj grjgioer giodrj geirj gioejidjgiodjgirej gioer geio gioeg iorhg iorehgioerhgiorejgioregioeroreoerhgerhgeiro
Latest News: fghfsioghsioghiosfgfoisg gjdifjgiodgjiprj grjgioer giodrj geirj gioejidjgiodjgirej gioer geio gioeg iorhg iorehgioerhgiorejgioregioeroreoerhgerhgeiro
Latest News: fghfsioghsioghiosfgfoisg gjdifjgiodgjiprj grjgioer giodrj geirj gioejidjgiodjgirej gioer geio gioeg iorhg iorehgioerhgiorejgioregioeroreoerhgerhgeiro
Latest News: fghfsioghsioghiosfgfoisg gjdifjgiodgjiprj grjgioer giodrj geirj gioejidjgiodjgirej gioer geio gioeg iorhg iorehgioerhgiorejgioregioeroreoerhgerhgeiro
Latest News: fghfsioghsioghiosfgfoisg gjdifjgiodgjiprj grjgioer giodrj geirj gioejidjgiodjgirej gioer geio gioeg iorhg iorehgioerhgiorejgioregioeroreoerhgerhgeiro
Latest News: fghfsioghsioghiosfgfoisg gjdifjgiodgjiprj grjgioer giodrj geirj gioejidjgiodjgirej gioer geio gioeg iorhg iorehgioerhgiorejgioregioeroreoerhgerhgeiro
Latest News: fghfsioghsioghiosfgfoisg gjdifjgiodgjiprj grjgioer giodrj geirj gioejidjgiodjgirej gioer geio gioeg iorhg iorehgioerhgiorejgioregioeroreoerhgerhgeiro
Latest News: fghfsioghsioghiosfgfoisg gjdifjgiodgjiprj grjgioer giodrj geirj gioejidjgiodjgirej gioer geio gioeg iorhg iorehgioerhgiorejgioregioeroreoerhgerhgeiro

</div>

</body>
</html>

<meta name="GENERATOR" content="MapSpinner">
</head>
<body>
<p></p>

<center>



<img src="siteimagenobg.jpg" width="640" height="528" usemap="#main image" border="0">
<map name="main image">
<area shape="rect" coords="504,499,636,526" href="http://www.myspace.com/cassandrafarrar">
<area shape="rect" coords="285,59,321,75" href="http://www.geocities.com/cassjamminx/links.html">
<area shape="rect" coords="233,60,280,74" href="http://www.geocities.com/cassjamminx/contact.html">
<area shape="rect" coords="227,60,229,60" nohref>
<area shape="rect" coords="179,58,227,75" href="http://www.geocities.com/cassjamminx/journal.html">
<area shape="rect" coords="129,59,174,74" href="http://www.geocities.com/cassjamminx/media.html">
<area shape="rect" coords="84,62,125,73" href="http://www.geocities.com/cassjamminx/music.html">
<area shape="rect" coords="56,59,79,75" href="http://www.geocities.com/cassjamminx/bio.html">
<area shape="rect" coords="14,58,50,75" href="http://www.geocities.com/cassjamminx/main.html">
</map>

</body>
</html>

</center>

Azarel

Aug 22 2006, 10:28 PM

Find:

#menu {
position: absolute;
left: 220px;
top: 100px;
padding: 0px;
width: 425px;

}

Add within the {} brackets:
height: ##px;
overflow: auto;

cassjamminx

Aug 22 2006, 10:34 PM

oh thank you!

ps.. can someone tell me what code represents what trait? because on a mac computer (which i have) it doesnt show the scrollbar with the codes, it just shows the default, which is blue and white. i'm trying to make the code match the page but i cant see it

CODE

scrollbar-face-color : #ffffff;
scrollbar-highlight-color : #ffffff;
scrollbar-3dlight-color : #453535;
scrollbar-shadow-color : #ffffff;
scrollbar-darkshadow-color : #453535;
scrollbar-track-color : #ffffff;
scrollbar-arrow-color : #453535;

*mods dont close this yet please i'm still waiting for other answers to other questions haha*

Azarel

Aug 22 2006, 10:42 PM

http://www.javascriptkit.com/howto/scrollbarcolor.shtml

cassjamminx

Aug 22 2006, 10:47 PM

you're a god. lol. do you know how to make popup windows?

EDIT: do the scroll bars look okay? i hate how i cant see it
http://www.geocities.com/cassjamminx/music.html

Azarel

Aug 23 2006, 12:17 AM

The scrollbar colors are not showing up because your coding is incorrect. Fix it so that it is:

body {
scrollbar-face-color : #ffffff;
scrollbar-highlight-color : #453535;
scrollbar-3dlight-color : #453535;
scrollbar-shadow-color : #ffffff;
scrollbar-darkshadow-color : #453535;
scrollbar-track-color : #ffffff;
scrollbar-arrow-color : #453535; }

rather than just the scrollbar settings.

Also, your div is not showing up in the right place. Try replacing #menu with .menu; let me know if that works.

Pop-ups: http://www.htmlcodetutorial.com/linking/li...amsupp_72.htmlx

cassjamminx

Aug 23 2006, 05:02 PM

^thanks..

when i changed

CODE

#menu  {
  position: absolute;
  left: 220px;
top: 100px;
  padding: 0px;
  width: 425px;
height: 390px;
overflow: auto;

to .menu; { it didn't work. well, for me, on my computer the div layers look fine, like it shows up in the right place. and when i did what you said, it brought all the text above the images. then i played around and did just menu or just .menu but it still turned out wrong on my computer..

thanks for the pop up site! i actually went there too and i bookmarked it after i asked lol.the only thing about it is that when you hover over the link it highlights black and i dont know why?! my link codes arent set that way either..

now i'm stuck. grr. haha.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.