Coding help please!

For your website woes and whees

Coding help please!

Postby H|F » Sat Apr 09, 2011 9:56 pm

So I decided to make an imagemap thinking I could easily code a site but now I am stuck on how I can put the content inside the image (Scrolling div hopefully in the grey area) :roll: I used GIMP originally to make the imagemap then realized it wasn't working right so then I used a mapping website which was a breeze. Now I am thinking that I won't be able to put my content inside the image.... I'm at a loss!
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby Daenerys » Sun Apr 10, 2011 12:31 am

Place a div layer over the image to position your content.
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Re: Coding help please!

Postby H|F » Sun Apr 10, 2011 1:58 pm

How do I code it in? Like under the html for the map or does it need to all be coded together lol
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby Daenerys » Sun Apr 10, 2011 2:18 pm

Call the div after the map-div, but in the same place. Give it a higher z-index if necessary. The z-index controls which overlapping div shows up on top.

Calculate how many pixels from the top and from the left you want the content to appear too.

Then code it something like this:

Code: Select all
<div style="text-align:left; width:400px; margin-left:pixelsfromtheleft; margin-top:pixelsfromthetop; z-index:10;">
<p>Put your content here</p>
</div>


Do you use an external css?
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Re: Coding help please!

Postby H|F » Sun Apr 10, 2011 8:07 pm

This is what I have, I tried to figure it out but I really don't know what I am doing :lol:

<div style="text-align:center; width:800px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_2201104092137452" src="http://i127.photobucket.com/albums/p152/zeejaxx/Important/Imagemap.png" usemap="#Image-Maps_2201104092137452" border="0" width="800" height="600" alt="" />
<map id="_Image-Maps_2201104092137452" name="Image-Maps_2201104092137452">
<area shape="rect" coords="181,89,556,187" href="http://zeejaxx.webs.com/index.htm" alt="Home" title="Home" />
<area shape="rect" coords="569,158,625,208" href="http://zephrah.deviantart.com" alt="DeviantArt Page" title="DeviantArt Page" />
<area shape="rect" coords="40,215,158,252" href="http://zeejaxx.webs.com/index.htm" alt="Home" title="Home" />
<area shape="rect" coords="42,265,157,300" href="http://zeejaxx.webs.com/pixels.html" alt="My pixel work" title="My pixel work" />
<area shape="rect" coords="41,314,153,346" href="http://zeejaxx.webs.com/dolls.html" alt="My pixel and tooled dolls" title="My pixel and tooled dolls" />
<area shape="rect" coords="39,357,142,388" href="http://zeejaxx.webs.com/bases.html" alt="My pixel bases" title="My pixel bases" />
<area shape="rect" coords="31,400,150,429" href="http://zeejaxx.webs.com/adopt.html" alt="My collection of adopted dolls from other artists" title="My collection of adopted dolls from other artists" />
<area shape="rect" coords="34,440,140,471" href="http://zeejaxx.webs.com/about.html" alt="A page just for me!" title="A page just for me!" />
<area shape="rect" coords="30,478,148,505" href="http://zeejaxx.webs.com/link.html" alt="My favorite places on the net!" title="My favorite places on the net!" />

</map>

</div>
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby Ninique » Sun Apr 10, 2011 10:41 pm

If you don't know what you're doing. Lifehacker just put up a video tutorial series on making websites I suggest checking out: http://lifehacker.com/#!nightschool/5788442

But yeah, here's what you would do: You need to put a div *on top* of what you have right now. To do that, put another div into your document, after everything else. This div we'll give it an id of content so that the css can recognize it. It would also be better to do it the same way with the div that you already have in there. So
Code: Select all
<div id="container">
(your image map code goes here)
<div id="content">The content goes here</div>
</div>
Then, make another file in the same folder and call it "style.css" (or whatever you want .css). In there, put this
Code: Select all
#container {
text-align:center;
width:800px;
margin-left:auto;
margin-right:auto;
position: relative;
}
All this stuff were the styles you had before in your style attribute. This is just a better way of doing it. The position: relative part is new. This is important so that you can place the div inside it properly (It's complicated to explain, but basically it makes it so that you can start counting the position from the top right of the container div instead of of the page, which prevents weirdness from happening with centered layouts)

Now continuing this in this same file, write this:
Code: Select all
#content {
position: absolute;
top: THE NUMBER OF PIXELS FROM THE TOPpx;
left: THE NUMBER OF PIXELS FROM THE LEFTpx;
}

Make sure to actually put the number of pixels from the top and left lol. You can also add a z-index property, but technically you don't need it because absolute-positioned things automatically go on top of everything else.

Now to link everything together, add this to the head section of your main html document:
Code: Select all
<link rel="stylesheet" type="text/css" href="style.css">
Image
Av base is Glam Exclusive by Hollay, edit by DarkPhoenix
User avatar
Ninique
Celebrity
Celebrity
 
Posts: 316
Joined: Mon May 04, 2009 9:00 pm
Diamonds on hand: 16.00
Location: Canada
Dolling Style: Pixel

Re: Coding help please!

Postby H|F » Mon Apr 11, 2011 1:59 pm

Thanks so much ladies! I have never used an imagemap so I wasnt sure. I tried google but couldnt find anything. This is great!
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby Daenerys » Mon Apr 11, 2011 2:41 pm

tbh, I think you could make a nice layout without an image map or slicing up your layout. But you've already done so much work, you may as well continue.

But for future layouts, I would suggest making a general background, then making your button-backgrounds separately and add text to those buttons with html. You can use a simple css, with div layers to place your buttons/menu's as well as your content. Or even an iframe!

The drawback of an image map is, that once you want to add a navigation link, you have to redo your whole image and make a new image map out of it. Fortunately for dolls sites that rarely happens.

Now I must return to battle with my own css ... It won't do what I tell it to! (So I must be telling it wrong...)
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Re: Coding help please!

Postby H|F » Wed Apr 13, 2011 2:00 am

Yeah, I realized that I don't like the way this was goin' down for me. I'm going to start over lol. Most likely, this thread might be used for a bit for me XD Hope you all don't mind!!!
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby Daenerys » Wed Apr 13, 2011 9:48 am

Not at all. Just remember that coding a website can be a very personal thing. If it does what you want it to do, there isnt really a right or wrong. Sometimes there is a better, but you can't really do it wrong.

Anyway, I meant that the more different advice you get, the more choice you have to do it your own way.

You can do it!
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Re: Coding help please!

Postby H|F » Wed Apr 13, 2011 7:55 pm

Thanks for the support! I really need it lol by the way do you have a tut lol
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby H|F » Wed Apr 13, 2011 10:19 pm

So I made this test- http://zeejaxx.webs.com/testpg.html
Just to see what I liked and all. I know the size isn't right, I just put something to test. When I am done it will fit without scrolling and all.


*edit

Check out my webpage! if anyone finds any bugs let me know please :bob:
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby Daenerys » Thu Apr 14, 2011 9:38 am

I have a big wide screen monitor, and your logo is smakc in the middle of the top part, but your main content is on the left side of my screen. It actually sits completely to the left of your logo/header for me.

You did use center on the div's,. but you already gave them absolute positioning as well.

Code: Select all
div.main {
position:absolute;
top:100px;
left:210px;
width:520px;
height:310px;
overflow:auto;
background-color:ffffff;
color:000000;
font-family:arial;
font-size:14px;}

div.menu {
position:absolute;
top:408px;
left:219px;
width:550px;
height:80px;


That means that regardless of your center-tag, the divs called div.main and div.menu will be positioned 219 pixels from the left side of my screen. And not in the center.

I can still see everything fine though. But it just looks a little off.
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Re: Coding help please!

Postby Ninique » Thu Apr 14, 2011 1:31 pm

Daenerys wrote:I have a big wide screen monitor, and your logo is smakc in the middle of the top part, but your main content is on the left side of my screen. It actually sits completely to the left of your logo/header for me.


*shameless plug* I actually have a tutorial for that XD http://minidollz.ninique.net/tutorials/web_abspos.html

Really, you should try not using the CENTER tag as much as you can. It's considered an outdated way of doing things, and it's difficult to get different browsers to cooperate if you use it.
Image
Av base is Glam Exclusive by Hollay, edit by DarkPhoenix
User avatar
Ninique
Celebrity
Celebrity
 
Posts: 316
Joined: Mon May 04, 2009 9:00 pm
Diamonds on hand: 16.00
Location: Canada
Dolling Style: Pixel

Re: Coding help please!

Postby H|F » Sun Apr 17, 2011 12:14 am

:shock:

You.... are <3

Hope to work on this tomorrow :roll: Know I will be posting here again :wink:

This may as well be a permanent thread :lol:

_

Can we have a step by step workshop please? :hey:
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby H|F » Fri Apr 22, 2011 8:41 pm

OK so I haven't fixed that "centered for all monitors" prob but I was thinking, if I pul all of the content inside it's own div then couldn't I code it to be centered absolute?

It's like I know a enough but have no idea how to code... so stupid XD I mean, I know what everything does but my brain is ugh :shock:
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby Daenerys » Sat Apr 23, 2011 12:22 am

That is the idea :D

Most div layouts have a container div, often called container, where you can put the rest of your diva in. You're on the right way!
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Re: Coding help please!

Postby H|F » Sat Apr 23, 2011 10:37 am

Ugh I guess somewhere in the mix of things I get all messed up and dont realize what the heck im doing lol once I have a code/css/html im fine but making it makes me act retarded lol



¤ omigawd....... I got it I think lol why didnt I think of it before!!!
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby H|F » Sun Apr 24, 2011 1:50 am

OKAY *bumps*


checitoutnow

This is to test that whole div around/holding all contents method without any bg ect.
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby Daenerys » Sun Apr 24, 2011 2:21 am

The top links are precisely centered over the main content box. Nice work :)
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Re: Coding help please!

Postby H|F » Sun Apr 24, 2011 2:35 am

Yaaaay! lol I feel so special in the worst way.

:bob:

Thanks for all the help! Not don't learning yet though. I guess I should have named it the never ending thread :shock:
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby H|F » Sun Apr 24, 2011 3:26 am

Daenerys wrote:Do you use an external css?



Uh sorry I realize I never gave you an answer, no I don't, I know what you mean just don't know exactly how to go about doing so :lol: Know that it would be best to use it too huh?


I do now :shock: woah, it's like everything is clicking :roll:

I can't even begin to say how thankful I am for you two and Glam! <3
Last edited by H|F on Sun Apr 24, 2011 5:52 am, edited 1 time in total.
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby H|F » Sun Apr 24, 2011 4:20 am

Sorry this is too important not to bump,

div#centerdiv {
width: 200px;
border: 1px solid red;
margin-left: auto;
margin-right: auto;
}


thats easy XD
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig

Re: Coding help please!

Postby H|F » Sun May 01, 2011 12:20 am

So..... I'm back again XD

Trying to switch over to Zymic, any comments on the site for hosting?

I am using FTP, very exciting for me btw, and I have this all done and everything is fine (far as I can tell) until you go to the links page???

I don't understand what the heck I did!!!


Seems to be alright now?

*Off topic rant, why didn't anyone ever tell me to use FTP/External CSS before? eh? Would have helped me so much in the past :shock:
Heather | Age 25 | AV base by Kakuzu Chan
Image
BASE
Want to see where I started?
Spoiler: show
Image

Image

Bases by Wayuki

Image

Image

Image


Image

Image

Image

Image

All of these are bases from The Doll Palace

User avatar
H|F
Super star
Super star
 
Posts: 1829
Joined: Sun Nov 21, 2010 3:28 am
Diamonds on hand: 314.00
Location: Somewhere along the Milky Way
AKA: The Black Sheep
Dolling Style: Pixel
Avatar Base: Link in sig


Return to Screen Writer's Lounge

Who is online

Users browsing this forum: No registered users and 1 guest

cron