PDA

View Full Version : Positioning with <div> tags



cincinnatiboy4867
Dec 23rd, 2008, 01:47 AM
I use the <div> tags to position everything on my page. The problem I have is whenever I position something it shows up slightly different on IE than it does on FF. Any help with this would be nice...

TheTVStop
Dec 23rd, 2008, 02:01 AM
Posting a link would be nice. Code even better.

Excavator
Dec 23rd, 2008, 02:42 AM
Hello DarkMusicBeats,
See every link in my signature below.
Then go find a tutorial on floats - there are a million of them.

See if you can get a little better start with that information.
Any time you post here asking why your code doesn't behave the way you expect it to, we really need to see the code.

jerry62704
Dec 23rd, 2008, 05:20 AM
A good first place to look is the DOCTYPE - is it valid? A good second place to look is the css - do you have the universal resets?

* {border:0; padding:0;}

cincinnatiboy4867
Dec 23rd, 2008, 07:42 PM
sorry didn't mean to make anyone mad I just thought you guys would know...
if I have a picture on my website and position it it will look something like this:

<div style="position:relative;left:#px;top:#px">
<img src="http://www.website.com"/>
</div>

or

<div style="position:absolute;left:#px;top:#px">
<img src="http://www.website.com"/>
</div>

it shows up in different positions in different browsers...

and no I didn't reset any universals... how would I do that?

thanks a bunch guys...


Update: Just tried to add a doctype or whatever and now all my paypal links floated to the top...
check it out for yourself: ******************* (http://www.*******************)

Also... you can compare between Firefox and IE how the pictures and some ads are positioned differently... check out my code to if u want... thanks so much!

jamesicus
Dec 23rd, 2008, 07:50 PM
I use the <div> tags to position everything on my page. The problem I have is whenever I position something it shows up slightly different on IE than it does on FF. Any help with this would be nice...
It does depend on what you mean by "slightly different", DurkMusicBeats -- it is indeed very difficult to produce "pixel perfect" layouts. Reference: About.com: Web Design/HTML -- You Can't Get Every Page to Look Identical, So Stop Trying! (http://webdesign.about.com/od/webdesigntutorials/a/aa061404.htm)

cincinnatiboy4867
Dec 23rd, 2008, 07:54 PM
It does depend on what you mean by "slightly different", DurkMusicBeats -- it is indeed very difficult to produce "pixel perfect" layouts. Reference: About.com: Web Design/HTML -- You Can't Get Every Page to Look Identical, So Stop Trying! (http://webdesign.about.com/od/webdesigntutorials/a/aa061404.htm)

True but I'm talking like 20 pixels or more on some things...

Rowsdower!
Dec 23rd, 2008, 07:54 PM
...
* {border:0; padding:0;}

That is a universal reset. IE (and maybe some other browsers - not really sure but I know it's not all browsers) automatically pads the content of web pages by a few pix (maybe 10px or so). This code wipes that out to start them all on equal footing, so to speak.

The "*" (asterisk) is universal, or in other words it is a non-specific selector to indicate that ALL elements within the page, including the page body, will have the attributes defined in this section. Since CSS is cascading, you want to put this bit in the topmost portion of your CSS and then style as usual thereafter. Anything you change BELOW this statement will override the settings (in the case above, border:0; and padding:0; ) with whatever you really want (for example, you could still make a class of div with a huge border and padding later on).

I hope this helps.

Excavator
Dec 23rd, 2008, 08:09 PM
sorry didn't mean to make anyone mad I just thought you guys would know...
if I have a picture on my website and position it it will look something like this:

<div style="position:relative;left:#px;top:#px">
<img src="http://www.website.com"/>
</div>

or

<div style="position:absolute;left:#px;top:#px">
<img src="http://www.website.com"/>
</div>

it shows up in different positions in different browsers...

Sorry if I sounded mad, I wasn't. Just explaining how better to get an answer to your problem. There are a LOT of things that can cause the problems you first described so it really helps if you're more specific.

Now, I'm hardly the one to help with absolute and relative positioning since I hardly ever use them but I'll try and clear it up for you.

Your relative positioned image is taking it's position from the div it's contained in.

Your absolute positioned image seems to be taking it's position from the browser window.

Those can be two very different things.


Instead of positioning things like that, see this link, (http://csscreator.com/node/11291) try using floats positioned with margins. Here's a pretty decent float tutorial (http://css.maxdesign.com.au/floatutorial/).

Just had a look at your site. Your use of deprecated html tags might need a little looser DocType than XHTML Strict. Give this a try instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

cincinnatiboy4867
Dec 23rd, 2008, 08:21 PM
Thanks for clearing up the position relative and absolute... when trying the different doctype it did help a lot of the errors and stuff but the paypal buttons are still where they where.. all 5 of em slammed up in the same place... :(

Update: there were 14 warnings now are 76 with new doctype... so warnings went up errors went down

cincinnatiboy4867
Dec 23rd, 2008, 08:22 PM
That is a universal reset. IE (and maybe some other browsers - not really sure but I know it's not all browsers) automatically pads the content of web pages by a few pix (maybe 10px or so). This code wipes that out to start them all on equal footing, so to speak.

The "*" (asterisk) is universal, or in other words it is a non-specific selector to indicate that ALL elements within the page, including the page body, will have the attributes defined in this section. Since CSS is cascading, you want to put this bit in the topmost portion of your CSS and then style as usual thereafter. Anything you change BELOW this statement will override the settings (in the case above, border:0; and padding:0; ) with whatever you really want (for example, you could still make a class of div with a huge border and padding later on).

I hope this helps.

<style type="text/css" * {border:0; padding:0;}>

is that how you do it? ^^^^^^^^^^^^^^^^

Excavator
Dec 23rd, 2008, 08:35 PM
<style type="text/css">
* {border:0; padding:0;}
</style>


That goes inside the head tags. <head> style stuff </head>

cincinnatiboy4867
Dec 23rd, 2008, 08:38 PM
<style type="text/css">
* {border:0; padding:0;}
</style>


That goes inside the head tags. <head> style stuff </head>

Okay, then I had it right the first time it just didn't make a difference lol thanks

Update: I'm down to 57 errors and 25 warnings woot! lol I'm gonna check out the float positioning or whatever and see how that goes.

cincinnatiboy4867
Dec 23rd, 2008, 08:48 PM
I don't think float is what I'm looking for... in fact, I'd rather have it to where nothing floated...

Excavator
Dec 23rd, 2008, 08:54 PM
That's fine, it's your site. Did you look over that link I gave you about absolute positioning?

Here it is again - http://csscreator.com/node/11291. It explains it far better than I possibly could.

cincinnatiboy4867
Dec 23rd, 2008, 10:18 PM
Okay, I can worry about the positioning later I just have to worry about the doctype now.

when I changed the doctype the position of my paypal buttons went all wacky and the boxes to my newsletter dissapeared...

idk wut to do...

Update: It wasn't the doctype that messed with my newsletter boxes it was
* {border:0; padding:0;}

cincinnatiboy4867
Dec 23rd, 2008, 10:31 PM
I just finished testing every doctype and the paypal button still stays at the top with any doctype. Remember my website is http://www.*******************

the code I use for one paypal button:


<div style="position:absolute;left:700px;top:950">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="1957798">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>

I really don't know what to do :(

jerry62704
Dec 23rd, 2008, 11:22 PM
Try changing the "top:950" to "top:950px".

cincinnatiboy4867
Dec 24th, 2008, 12:36 AM
Wow thank you so much it was so simple grr!!! lol okay

I have another question... when you move the screen smaller and smaller the text moves to try and fit inside the screen. Is there any way to keep the text in place at all times and never move?

Also:
I want an actual navigation bar not just pictures with links to my other pages as I have set up... any help with navigational bars would be great.. thanks so much.

cincinnatiboy4867
Dec 24th, 2008, 03:08 AM
I want the navigation bar to change on every page when I change it on one page u know what I mean?

Excavator
Dec 24th, 2008, 04:12 AM
I want the navigation bar to change on every page when I change it on one page u know what I mean?

php includes. Google that, it does exactly what your looking to do. Very handy and pretty simple to implement.

cincinnatiboy4867
Dec 24th, 2008, 04:18 AM
Awesome thanks so much.

Just ran across a problem. As I'm placing text over my navigation bar I realized that when you mouse over the text it doesn't press in the button because it reads it as text that u can copy. Is there anyway to bypass this to show the text but have it be as if it wasn't there?

http://www.*******************

cincinnatiboy4867
Dec 24th, 2008, 04:26 AM
Awesome thanks so much.

Just ran across a problem. As I'm placing text over my navigation bar I realized that when you mouse over the text it doesn't press in the button because it reads it as text that u can copy. Is there anyway to bypass this to show the text but have it be as if it wasn't there?

http://www.*******************

I want to make this invisible to the mouse but to where u can still see it:

<div style="position:absolute;left:55px;top:391px">
<font size=3 font color=white>Contact Us</font>
</div>

Excavator
Dec 24th, 2008, 04:44 AM
The link should include the text, like this:

<div style="position: absolute; left: 55px; top: 391px;">
<a href="http://www.*******************/atomblue.html>Contact Us />
</div>


Then you style the link to be the size of your button.



Yours has some js doing the links ... not exactly the best way to make a menu I think.

Have a look at an example menu using only CSS here (http://nopeople.com/CSS/menu_buttons_vertical/index.html).

cincinnatiboy4867
Dec 24th, 2008, 06:32 PM
Okay, good idea with the no javascript. I switched to a css navigation bar... thanks so much. Now I can't position it in IE. What am I doing wrong?

Excavator
Dec 24th, 2008, 06:58 PM
Hello again DirkMusicBeats,

If you could put your code in code tags we wouldn't have to scroll so far, your code would be in a box like what I'm posting here.

You can try this for your menu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><style type="text/css">
html, body {
background: #FC9;
}
* {
margin: 0px;
padding: 0px;
}
#menu_left {
width: 138px;
border: 1px solid white;
margin: 50px auto 0 auto;
background-color: #fff;
}
#menu_left ul {
list-style: none;
}
#menu_left ul a {
display: block;
height: 30px;
width: 136px;
line-height: 30px;
text-align: center;
color: #FFF;
}
#menu_left ul a:hover {
background-position: left;
}
a.button {
background-image: url(http://www.*******************/atomblue_B1.gif);
background-repeat: no-repeat;
background-position: -3px;
}
a.button:hover {
background-image: url(http://www.*******************/atomblue_B1_over.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="menu_left">
<ul>
<li><a href="http://www.home.com" class="button">Home</a></li>
<li><a href="http://www.pee.com" class="button">Pee</a></li>
<li><a href="http://www.poop.com" class="button">Poop</a></li>
<li><a href="http://www.caraudiotalk.com" class="button">Cardio</a></li>
<li><a href="http://www.yahoo.com" class="button">Yahoo</a></li>
<li><a href="http://www.google.com" class="button">Google</a></li>
<li><a href="http://www.stragee.com" class="button">Stragee</a></li>
<li><a href="http://www.gaggle.com" class="button">gaggle</a></li>
</ul>
<!-- Navbar def end --></div>
</body>
</html>

You'll notice a bit of a lag the first time you hover over that. That's the time it takes to download the _over image. You can eliminate that by combining your two button images together, so everything is downloaded at once. Here is an example of that - CSS Rollover (http://nopeople.com/CSS/CSS_rollover/index.html)

cincinnatiboy4867
Dec 24th, 2008, 07:14 PM
I'm only 13 so your gonna have to excuse my lack of knowledge with this stuff. when I put code in tags I use that button up there ^^ that says to wrap [ICODE] tags around it... so your saying wrap
or <code>?

Me trying out stuff:

<code>
coding
</code>

[CODE]
coding


Okay, got that figured out now how do u do the box with scroll bars?

Excavator
Dec 24th, 2008, 07:17 PM
Okay, got that figured out now how do u do the box with scroll bars?


:) Put enough content in that scrollbars are required.

cincinnatiboy4867
Dec 24th, 2008, 07:20 PM
Oooooooooooo true true. Okay, so... like is there anyway I can give you credit for helping me out with all this cuz u helped me out sooooooooooo much and I feel like I should credit you in some way u know what I mean?

btw I did your new thing... where all the pictures load at once I guess... and it also spaced out the pictures which I didn't realize were smashed together! lol thnx

cincinnatiboy4867
Dec 24th, 2008, 07:42 PM
my next task is positioning everything so when the screen resolution changes everything just scales down...

Excavator
Dec 24th, 2008, 07:58 PM
Oooooooooooo true true. Okay, so... like is there anyway I can give you credit for helping me out with all this cuz u helped me out sooooooooooo much and I feel like I should credit you in some way u know what I mean?

No credit needed... I'm glad to help where I can.

Just thought I might give you a start with a div layout, if you're interested. If not, that's fine too.
You can look at the code with ViewSource in your browser. Check it out here. (http://nopeople.com/DirkMusicBeats/)

And here it is all zipped up. (nopeople.com/DirkMusicBeats/DirkMusicBeats.zip)


I put a transitional DocType on it which will be a little less strict on how you code things. Check your work in the validator as you add things to it, that way you work on one problem at a time instead of a lot of problems later on.

cincinnatiboy4867
Dec 24th, 2008, 08:09 PM
I see what u mean but I'm not to good with the whole validator thing like...

there is no attribute "HTTP-EQUIV"

is there reallo no attribute "HTTP-EQUIV"??? so do I just delete it or what?

cincinnatiboy4867
Dec 24th, 2008, 08:11 PM
That link goes to my page with a banner and a navigational bar... I don't see how that gets me anywhere lol

I don't know exactly what to do with that u kno what I mean?

Excavator
Dec 24th, 2008, 08:22 PM
That link goes to my page with a banner and a navigational bar... I don't see how that gets me anywhere lol

I don't know exactly what to do with that u kno what I mean?

It doesn't goto your page, it's your images in a NEW page. A round-about way of suggesting you start over with good solid working code. It would be much easier to add things to this new site, validating along the way, than it would be to fix all the problems on your original. I mean, :eek: 460 Errors, 6 warning(s) :eek:, where do you start????

Like I said before though, it's fine if you don't want to---if you do, download that .zip and have a try.

cincinnatiboy4867
Dec 24th, 2008, 08:43 PM
Okay, I'll do it as long as I have u to help me through it...

I downloaded the zip but when I view it, it doesn't show the buttons... and I can't find in the html the url to the buttons... u know what I mean?

cincinnatiboy4867
Dec 24th, 2008, 08:54 PM
What's a good program to work with html (I'm using notepad right now and something tells me that's holding me back)

Excavator
Dec 24th, 2008, 09:04 PM
Okay, I'll do it as long as I have u to help me through it...

I downloaded the zip but when I view it, it doesn't show the buttons... and I can't find in the html the url to the buttons... u know what I mean?

url to the buttons is in the attached CSS file.

---The line highlighted in red links to Dirks_global.css in the same directory as index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>******************* - Get the Hottest Beats on the Block!</title>
<link href="Dirks_global.css" rel="stylesheet" type="text/css" />
</head>



---Dirks_global.css has the lines that load the buttons -

a.button {
background-image: url(http://www.*******************/atomblue_B1.gif);
background-repeat: no-repeat;
background-position: -3px;
}
a.button:hover {
background-image: url(http://www.*******************/atomblue_B1_over.gif);
background-repeat: no-repeat;
}



---That is a linked CSS file, instead of attached like you were doing. It's really handy because all your pages can have the <link href="Dirks_global.css" rel="stylesheet" type="text/css" /> in the head and that one CSS file can style all of them.

Excavator
Dec 24th, 2008, 09:06 PM
What's a good program to work with html (I'm using notepad right now and something tells me that's holding me back)

I think notepad is great for someone that knows HTML... it's not much help with code hints or anything a new coder might need. I use notepad a lot, and DreamWeaver is good but expensive... I don't really know what else is out there.

cincinnatiboy4867
Dec 24th, 2008, 09:19 PM
Okay now since your helping me do this the right way... here's what I got so far... and I need to position the navigational bar to the left... do I just float it over there?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>******************* - Get the Hottest Beats on the Block!</title>
<link href="Dirks_global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Navbar def -->
<style type="text/css">
html, body {

}
* {
margin: 0px;
padding: 0px;
}
#menu_left {
width: 138px;
border: 1px solid white;
margin: 50px auto 0 auto;
background-color: #fff;
}
#menu_left ul {
list-style: none;
}
#menu_left ul a {
display: block;
height: 30px;
width: 136px;
line-height: 30px;
text-align: center;
color: #FFF;
}
#menu_left ul a:hover {
background-position: left;
}
a.button {
background-image: url(http://www.*******************/atomblue_B1.gif);
background-repeat: no-repeat;
background-position: -3px;
}
a.button:hover {
background-image: url(http://www.*******************/atomblue_B1_over.gif);
background-repeat: no-repeat;
}
</style>
<div id="header">
<img

src="http://i346.photobucket.com/albums/p438/durkmusic/DURKMUSICBEATSBANNER.png" width="521"

height="97" alt="header image" />
<!--end header--></div>
<div id="wrap">
<div id="menu_left">
<ul>
<li><a href="http://www.*******************" class="button">Home</a></li>
<li><a href="http://www.*******************" class="button">Artists</a></li>
<li><a href="http://www.*******************" class="button">Producers</a></li>
<li><a href="http://www.*******************" class="button">Beats</a></li>
<li><a href="http://www.*******************" class="button">Request A Beat</a></li>
<li><a href="http://www.*******************" class="button">FREE Stuff</a></li>
<li><a href="http://www.*******************" class="button">FREE Newsletter</a></li>
<li><a href="http://www.*******************" class="button">Contact Us</a></li>
</ul>
<!--end menu_left--></div>
<!--end wrap--></div>
</body>
</html>

Excavator
Dec 24th, 2008, 09:32 PM
No, your styles do not belong in the body of your document.
The layout should go like this:

DocType
<html>
<head>

character encoding
link to css
title</head>
<body>

html code and content
</body>
</html>

So, your document should be this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>******************* - Get the Hottest Beats on the Block!</title>
<link href="Dirks_global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<img src="http://i346.photobucket.com/albums/p438/durkmusic/DURKMUSICBEATSBANNER.png" width="521" height="97" alt="header image" />
<!--end header--></div>
<div id="wrap">
<div id="menu_left">

<ul>
<li><a href="http://www.home.com" class="button">Home</a></li>
<li><a href="http://www.pee.com" class="button">Pee</a></li>
<li><a href="http://www.poop.com" class="button">Poop</a></li>
<li><a href="http://www.caraudiotalk.com" class="button">Cardio</a></li>
<li><a href="http://www.yahoo.com" class="button">Yahoo</a></li>

<li><a href="http://www.google.com" class="button">Google</a></li>
<li><a href="http://www.stragee.com" class="button">Stragee</a></li>
<li><a href="http://www.gaggle.com" class="button">gaggle</a></li>
</ul>
<!--end menu_left--></div>
<!--end wrap--></div>
</body>
</html>



But we are having problems with paths now.
--That Dirks_global.css from the .zip file has to be in the SAME directory as index.html.
Also, it seems you've moved the buttons as the link doesn't work anymore.

cincinnatiboy4867
Dec 24th, 2008, 09:52 PM
Okay cool. Now we're getting somewhere. check out my site now
http://www.*******************

Excavator
Dec 24th, 2008, 09:54 PM
Good start! Check what the validator has to say about it. (http://validator.w3.org/check?verbose=1&uri=http://www.*******************/)

cincinnatiboy4867
Dec 24th, 2008, 10:01 PM
All those errors are there because tripod adds stuff into my html to put up ads. You know what I mean?

Excavator
Dec 25th, 2008, 01:33 AM
Yeah, I see. That's going to happen too, can't get rid of every error when your hosting is forcing that kind of stuff on you. At least you can make your code right though.

cincinnatiboy4867
Dec 25th, 2008, 05:00 PM
Now what's that white thing doin there?

abduraooft
Dec 25th, 2008, 05:07 PM
Now what's that white thing doin there?
It's the background color of your #wrap


#wrap {
width: 736px;
background: #fff;
overflow: auto;
}

cincinnatiboy4867
Dec 25th, 2008, 05:45 PM
Oh, ok. Well I don't know what to do from here...

cincinnatiboy4867
Dec 25th, 2008, 06:09 PM
I want it to look like this:
http://durkmusicbeats.tripod.com/HOME.htm

cincinnatiboy4867
Dec 25th, 2008, 06:14 PM
Okay now how do I add text and ads and pictures and other stuff INSIDE that white table/box thing? Or don't I?

Excavator
Dec 25th, 2008, 07:44 PM
Now what's that white thing doin there?

Your white thing has an odd width on it. Need eitehr px or % measurement, not both.

#wrap {
width: 736%px;
background: #fff;
overflow: auto;
}

cincinnatiboy4867
Dec 25th, 2008, 07:46 PM
O okay thanks :) I fixed it :) ... now how do I add back in all my stuff THE RIGHT WAY lol

Excavator
Dec 25th, 2008, 07:46 PM
Okay now how do I add text and ads and pictures and other stuff INSIDE that white table/box thing? Or don't I?

Have a look at http://nopeople.com/DirkMusicBeats/ again and see if that helps.

cincinnatiboy4867
Dec 25th, 2008, 08:02 PM
It does help but how do I look at the other css page?

like how do I view Dirks_global.css

Excavator
Dec 25th, 2008, 08:20 PM
It does help but how do I look at the other css page?

like how do I view Dirks_global.css

One way is to put the path in your browsers address bar. Like this: http://nopeople.com/DirkMusicBeats/Dirks_global.css You can copy/paste from there.

My prefered method, if your using FireFox (http://www.mozilla.com/en-US/firefox/all-beta.html), add the WebDevelpersToolbar (https://addons.mozilla.org/en-US/firefox/addon/60) and you can edit the CSS live.

cincinnatiboy4867
Dec 25th, 2008, 09:09 PM
Okay, now I need help with positioning... do u think u could position the ads where u think they should go so I can get the basic idea of what to do? or you could just tell me...

home page:
http://www.*******************/

css:
http://durkmusicbeats.tripod.com/Durks_global.css

Excavator
Dec 25th, 2008, 10:10 PM
You can see how confusing it gets when you just throw a bunch of stuff in there all at once. It would be a lot easier to put one ad in and get it positioned where you want it, then do the next... and so on.

Have a look at the markup now. I moved a bunch of stuff around. It's still at http://nopeople.com/DirkMusicBeats/

and here's the CSS with the changes highlighted in red-


html, body {
background-image: url('http://i346.photobucket.com/albums/p438/durkmusic/background-1.png');
}
* {
margin: 0px;
padding: 0px;
}
#header {
height: 97px;
}
#hdr_img {
float: left;
}
#wrap {
width: 736px;
float: left;
background: #fff;
overflow: auto;
}
/***********menu styling************/
#menu_left {
width: 160px;
float: left;
border: thin solid white;
margin: 50px auto 0 auto;
background-color: white;
}
#menu_left ul {
list-style: none;
}
#menu_left ul a {
display: block;
height: 30px;
width: 136px;
line-height: 30px;
text-align: center;
color: #FFF;
}
#menu_left ul a:hover {
background-position: left;
}
a.button {
background-image: url(http://www.*******************/atomblue_B1.gif);
background-repeat: no-repeat;
background-position: -3px;
}
a.button:hover {
background-image: url(http://www.*******************/atomblue_B1_over.gif);
background-repeat: no-repeat;
}
#title {
width: 550px;
margin: 50px 0 0 180px;
text-align: center;
color: #f00;
}
.post {
width: 550px;
margin: 10px 0 0 180px;
padding: 10px 0 0 0;
}
.post hr {
margin: 10px auto;
width: 80%;
border-top: 1px solid #F00;
border-bottom: 1px solid #FF0;
}
#footer {
height: 20px;
margin: 10px 0;
font-size: 12px;
color: #FFF;
line-height: 20px;
text-align: center;
clear: both;
}
/*******ads******/
#googleadleft {
width: 160px;
margin: 30px 0 0 0;
float: left;
clear: left;
}
#googleadtop {
height: 60px;
margin: 0 0 0 541px;
}
#googleadright {
width: 160px;
margin: 30px 0 0 780px;
}
#googleadbottom {
height: 15px;
margin: 10px auto;
clear: both;
}

cincinnatiboy4867
Dec 25th, 2008, 10:44 PM
Okay cool Thanks so much we're almost there. Now I need to add in my music players with some text above and below like before and also my papal buttons. I"m not sure what to do but I'm gonna backup what I have now so if I mess up I can just go back to how it is.. now.

cincinnatiboy4867
Dec 25th, 2008, 11:06 PM
Okay, I got pretty far.. hopefully I'm doing it right... but when I try to put my paypal button in there it just drops under the music player instead of going beside it...

Also, the validator didn't like my music players and/or newsletter sign up boxes...

abduraooft
Dec 26th, 2008, 08:56 AM
Okay, I got pretty far.. hopefully I'm doing it right... but when I try to put my paypal button in there it just drops under the music player instead of going beside it...

Also, the validator didn't like my music players and/or newsletter sign up boxes...
Make use of SWFObject (http://code.google.com/p/swfobject/) to embed your flash files, which will remove all validation errors, and it has many other advantages.

cincinnatiboy4867
Dec 26th, 2008, 04:35 PM
Wow dude I just spent 30 minutes tryin to figure that out and I got nowhere... that's just too much for my small little brain :(

Is there any EASY tutorials on that?

cincinnatiboy4867
Dec 27th, 2008, 11:42 PM
I guess I just won't use it...

How do I space out the text from this line
from the text in this line

Excavator
Dec 27th, 2008, 11:47 PM
<p>
How do I space out the text from this line
<br />
from the text in this line
</p>

Sometimes a br tag is ok.

cincinnatiboy4867
Dec 28th, 2008, 12:07 AM
Ya the br worked good... I just need help positioning my paypal buttons and im done :( please help with just that last thing and I'll leave u alone

Excavator
Dec 28th, 2008, 03:04 AM
Ya the br worked good... I just need help positioning my paypal buttons and im done :( please help with just that last thing and I'll leave u alone

Adjust the numbers in red-

<div style="position: absolute; left: 400px; top: 950px;">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="1957798" type="hidden">
<input src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" name="submit" alt="" border="0" type="image">
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" border="0" height="1">
</form>
</div>

cincinnatiboy4867
Dec 28th, 2008, 07:04 AM
Thanks you so much really thank you

now is there any way to get it the same both on IE and FF?

cuz on IE it's like 6px or 7px closer to the top...

is there any simple way to fix this?

thanks again

cincinnatiboy4867
Dec 28th, 2008, 07:22 AM
Ok forget that I just messed up my site again...

Now the white background is goin waaaaaaay to far down...

can u see what I did please?

I know it's not the most fun thing to do but you understand the code and could go through in less than 5 minutes where as for me it would take me an hour to try random stuff idk about pleeeeeeze

Excavator
Dec 28th, 2008, 09:57 AM
Ok forget that I just messed up my site again...

Now the white background is goin waaaaaaay to far down...

can u see what I did please?

I know it's not the most fun thing to do but you understand the code and could go through in less than 5 minutes where as for me it would take me an hour to try random stuff idk about pleeeeeeze

It's all this mess:
<div class="post">

<hr />
<p>Hardcore Gangsta</p>

<!--end post-->
<div id="googleadbottom">
<script type="text/javascript"><!--
google_ad_client = "pub-3272991235410111";
/* 728x15, created 12/18/08 */
google_ad_slot = "9410879066";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!--end googleadbottom-->
<!--end wrap--></div>

<div id="googleadright">
<script>window.google_render_ad();</script><iframe name="google_ads_frame" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3272991235410111&amp;dt=1230236763117&amp;lmt=1230236762&amp;prev_slotnames=6608672467%2C1797578556&amp;output=html&amp; slotname=7560209509&amp;correlator=1230236763055&amp;url=http%3A%2F%2Fwww.*******************%2F&amp;ea=0&amp;frm=0&amp;f f=serif&amp;biw=1539&amp;bih=798&amp;adx=0&amp;ady=489&amp;ga_vid=1288658075.1230236763&amp;ga_sid=1230236763&amp;ga_hid=1030920 270&amp;flash=10.0.12&amp;u_h=1200&amp;u_w=1920&amp;u_ah=1200&amp;u_aw=1920&amp;u_cd=32&amp;u_tz=-540&amp;u_his=1&amp;u_java=true&amp;u_nplug=5&amp;u_nmime=45&amp;dtd=3" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" width="160" frameborder="0" height="600" scrolling="no"></iframe>
<!--end googleadright--></div>


<!--begin crappy positioning-->
<div style="position: absolute; left: 605px; top: 399px;">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="1957798" type="hidden">
<input src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" name="submit" alt="" border="0" type="image">

<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" border="0" height="1">
</form>
</div>
<div style="position: absolute; left: 605px; top: 549px;">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="1957798" type="hidden">
<input src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" name="submit" alt="" border="0" type="image">
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" border="0" height="1">
</form>
</div>
<div style="position: absolute; left: 605px; top: 699px;">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="1957798" type="hidden">
<input src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" name="submit" alt="" border="0" type="image">
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" border="0" height="1">

</form>
</div>
<div style="position: absolute; left: 605px; top: 849px;">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="1957798" type="hidden">
<input src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" name="submit" alt="" border="0" type="image">
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" border="0" height="1">
</form>
</div>
<!--end crappy positioning-->


You have a bunch of stuff that you've cut/paste in and you've lost track of your closing tags.
My head hurts just looking at it.

What happened to adding one thing at a time and checking the validator? I know some stuff would not get fixed but a lot of it would. Your back where you started now - 166 errors!! :eek:

Delete the content out of that last <div class="post"> so you have an EMPTY div like this:

<div class="post">
<!--end post--></div>

Then start putting things in it, one at a time... so you can see what messes it up before it gets this bad.

cincinnatiboy4867
Dec 28th, 2008, 05:19 PM
I did what u said and it still didn't work... check the source on my page if u want


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>******************* - Get the Hottest Beats on the Block!</title>
<link href="Durks_global.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://127.0.0.1:37935/xpopup.js"></script></head>
<noframes><body></noframes>
<body>
<div id="header">
<img src="http://i346.photobucket.com/albums/p438/durkmusic/DURKMUSICBEATSBANNER.png" alt="header image" width="521" height="97" id="hdr_img" />
<div id="googleadtop">

<script type="text/javascript"><!--
google_ad_client = "pub-3272991235410111";
/* 468x60, created 12/18/08 */
google_ad_slot = "1797578556";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!--end googleadtop--></div>
<!--end header--></div>
<div id="wrap">
<div id="menu_left">
<ul>
<li><a href="http://www.*******************" class="button">Home</a></li>
<li><a href="http://www.*******************" class="button">Artists</a></li>
<li><a href="http://www.*******************" class="button">Producers</a></li>
<li><a href="http://www.*******************" class="button">Beats</a></li>
<li><a href="http://www.*******************" class="button">Request A Beat</a></li>
<li><a href="http://www.*******************" class="button">FREE Stuff</a></li>
<li><a href="http://www.*******************" class="button">FREE Newsletter</a></li>
<li><a href="http://www.*******************" class="button">Contact Us</a></li>
</ul>
<!--end menu_left--></div>
<div id="googleadleft">
<script type="text/javascript"><!--
google_ad_client = "pub-3272991235410111";
/* 160x600, created 12/18/08 */
google_ad_slot = "7560209509";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!--end googleadleft--></div>
<div id="title">
<h1>Under Construction!</h1>

<h2>Please come back later!</h2>
</div>

<div class="post">
<!--end post--></div>

<div id="googleadbottom">
<script type="text/javascript"><!--
google_ad_client = "pub-3272991235410111";
/* 728x15, created 12/18/08 */
google_ad_slot = "9410879066";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!--end googleadbottom-->
<!--end wrap--></div>

<div id="googleadright">
<script>window.google_render_ad();</script><iframe name="google_ads_frame" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3272991235410111&amp;dt=1230236763117&amp;lmt=1230236762&amp;prev_slotnames=6608672467%2C1797578556&amp;output=html&amp; slotname=7560209509&amp;correlator=1230236763055&amp;url=http%3A%2F%2Fwww.*******************%2F&amp;ea=0&amp;frm=0&amp;f f=serif&amp;biw=1539&amp;bih=798&amp;adx=0&amp;ady=489&amp;ga_vid=1288658075.1230236763&amp;ga_sid=1230236763&amp;ga_hid=1030920 270&amp;flash=10.0.12&amp;u_h=1200&amp;u_w=1920&amp;u_ah=1200&amp;u_aw=1920&amp;u_cd=32&amp;u_tz=-540&amp;u_his=1&amp;u_java=true&amp;u_nplug=5&amp;u_nmime=45&amp;dtd=3" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" width="160" frameborder="0" height="600" scrolling="no"></iframe>
<!--end googleadright--></div>


<!--begin crappy positioning-->
<div style="position: absolute; left: 605px; top: 399px;">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="1957798" type="hidden">
<input src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" name="submit" alt="" border="0" type="image">

<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" border="0" height="1">
</form>
</div>
<div style="position: absolute; left: 605px; top: 549px;">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="1957798" type="hidden">
<input src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" name="submit" alt="" border="0" type="image">
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" border="0" height="1">
</form>
</div>
<div style="position: absolute; left: 605px; top: 699px;">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="1957798" type="hidden">
<input src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" name="submit" alt="" border="0" type="image">
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" border="0" height="1">

</form>
</div>
<div style="position: absolute; left: 605px; top: 849px;">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="1957798" type="hidden">
<input src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" name="submit" alt="" border="0" type="image">
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" border="0" height="1">
</form>
</div>
<!--end crappy positioning-->



<div id="footer">
<p>DurkMusic Beats, DurkMusic Productions, Trademark 2008-2010, DurkMusic Inc.</p>
<!--end footer--></div>
</body>
<script type="text/javascript">_popupControl();</script>
</html>





My css: http://durkmusicbeats.tripod.com/Durks_global.css

Excavator
Dec 28th, 2008, 07:43 PM
I'm sorry Dirk, I can't keep up with you.
I think you need to go all the way back to http://nopeople.com/DirkMusicBeats/ and work on ONE .post at a time.


--notice how I comment the end of the div like this: <!--end post--></div> Later on, when debugging, that makes life SO much easier.

--DON'T use absolute positioning. LEARN how to postition with floats and margins.

--CHECK YOUR WORK WITH THE VALIDATOR OFTEN. Every single time you add something, maybe it won't get so out of hand again.

--DON'T be throwing a bunch more googleads in there. It's just adding line after line after line after line of crap to dig through to find your problems.
Instead, build your site with the ads in mind, but you can put them in later.

Sorry I'm not more help but I just don't want to deal with the mess, it's making my head hurt.

cincinnatiboy4867
Dec 28th, 2008, 08:51 PM
Aight it's cool I understand I'll start from nopeople again

cincinnatiboy4867
Dec 28th, 2008, 09:14 PM
Okay, I'm gonna LEARN and add one thing at a time and wait for your permission to go on to the next thing. Right now I put it back how the nopeople site is...

There are 18 errors and 6 warnings.... I checked them all and they are all because of tripods ads.

Okay, now can I add the newsletter form in the top post now?

Excavator
Dec 28th, 2008, 09:30 PM
Haha, you really don't need my permission to do it. I'm just trying to show you it's much easier to get a small little bit working correctly before moving on to the next small little bit.
Like it says in the signature line, use the validator like a spellchecker. When your spellchecker finds a misspelled word you don't always agree with it's suggestions... the validator can be treated the same way. Like those errors from the tripod ads, those you can leave. When it finds an error you have made though, you can fix that before moving on.

Debugging and Development all at the same time!
hehe, that's a cool slogan. Thinking about adding that to my sig line

Maybe spending a little time with a tutorial would help. I'm sure I linked you to one already but have a look at this one (http://www.tizag.com/cssT/float.php)and study a bit on how they use floats and margins.

cincinnatiboy4867
Dec 28th, 2008, 11:20 PM
Ok I checked out the tutorial (again) and it's starting to make more sense now.

Is the margin like how far away it is from the edge of the browser screen. Like if I wanted it 50px away from it I would set the margin to 50px?

Excavator
Dec 28th, 2008, 11:30 PM
Ok I checked out the tutorial (again) and it's starting to make more sense now.

Is the margin like how far away it is from the edge of the browser screen. Like if I wanted it 50px away from it I would set the margin to 50px?

That's close, yes. It's measuring from the edge of the the container, whatever that might be.

#one {
float: left;
width: 100px; /*floats need a width*/
margin: 0 0 0 50px; /*it goes clockwise - top,right,bottom,left)*/
}

Would make #one 50px over from the left edge of #wrap in this bit:


<div id="wrap">
<div id="one">
<!--end one--></div>
<!--end wrap--></div>

cincinnatiboy4867
Dec 28th, 2008, 11:38 PM
OH ok I got u now...

Okay, All I did was add my newsletter form and I'm up to 66 errors and 6 warnings. I was able to fix 2 errors but the rest have to do with the code I'm suppose to paste and I'm afraid if I mess with it, it'll screw up my autoresponder. What do you think?


This is all I changed:

<div class="post">
<hr />
<center><h3>Get a FREE Beat just for putting in your Email!</h3></center><br />


<!--begin newsletter-->
<center>
<script language="JavaScript">
function checkSub(){
if (document.signup.email.value.indexOf('@', 0) == -1) {
alert("Please fill in your valid Email address.\nYour email should be in the following format:

[email protected]")
document.signup.email.focus()
return false}
if (document.signup.fname.value == "") {
alert("Please fill in your First name.")
document.signup.fname.focus()
return false}
}</script><form action="http://ezine-zap.com/cgi-bin/optin.cgi" method="post" name="signup" onsubmit="return

checkSub()"><input type=hidden name="action"

value="addlead"><input type=hidden name="member" value="382"><input type=hidden name="auto"

value="234"><input type=hidden name="thankyou"

value="http://www.*******************/thanks_for_subscribing.html"><table border=0 cellspacing=0

cellpadding=2><tr><td><font size="2" face="arial, verdana">Email

Address:</font></td><td><input type=text size=20 name="email"></td></tr><tr><td><font size="2" face="arial,

verdana">Artist Name:</font></td><td><input type=text size=20

name="fname"></td></tr><tr><td></td><td align=center><input type="submit"

value="Subscribe!"></td></tr></table></form>
</center>
<!--end newsletter-->
<!--end post--></div>

Hopefully I did a better job of organizing...

Excavator
Dec 29th, 2008, 01:28 AM
Some examples of what the validator is telling you (I know it can be a little hard to figure out what it's saying)

Line 37, Column 5: document type does not allow element "body" here is referring to this - (you only get one body tag)
<script type="text/javascript" src="http://127.0.0.1:37935/xpopup.js"></script></head><noframes>
<body> <script type="text/javascript" src="http://hb.lycos.com/hb.js">
</script><script type="text/javascript" src="http://ratings.lycos.com/ratings/lycosRating.js.php">
</script><script type="text/javascript"><!--//--><![CDATA[//>
<!--var cm_role = "live";var cm_host = "tripod.lycos.com";var cm_taxid = "/memberembedded";var tripod_member_name = "durkmusicbeats";var tripod_member_page = "durkmusicbeats/index.html";var tripod_ratings_hash = "1230504122:4a79e0f82e143a2587ea2b6e01bf8913"; var lycos_ad_category = null; var lycos_ad_remote_addr = "72.35.116.235";var lycos_ad_www_server = "www.tripod.lycos.com";var lycos_ad_track_small = "http://members.tripod.com/adm/img/common/ot_smallframe.gif?rand=687957";var lycos_ad_track_served = "http://members.tripod.com/adm/img/common/ot_adserved.gif?rand=687957";//--><!]]>
</script><script type="text/javascript" src="http://scripts.lycos.com/catman/init.js"></script>
<script type="text/javascript" src="http://members.tripod.com/adm/ad/code-start.js"></script>
<script type="text/javascript" src="http://members.tripod.com/adm/ad/code-middle.js"></script>
<script type="text/javascript" src="http://members.tripod.com/adm/ad/code-end.js"></script>
<noscript> <img src="http://members.tripod.com/adm/img/common/ot_noscript.gif?rand=687957" alt="" width="1" height="1" />
<!-- BEGIN STANDARD TAG - 728 x 90 - Lycos - Tripod Fallthrough - DO NOT MODIFY -->
<iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="728" height="90" src="http://ad.yieldmanager.com/st?ad_type=iframe&ad_size=728x90&section=209094"></iframe> <!-- END TAG -->
</noscript></noframes>
<body> <div id="header">

Maybe, as bad as the code is that was supplied to you, you should drop back to an even more lenient DocType. See how many errors you get with an HTML 4.01 Transitional? Only 14, and several of those can be fixed.


Put this in place of your XHTML DocType:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
Be careful where you put that </head>, it needs to enclose all the stuff in the head of the document and your only allowed one of those too.

cincinnatiboy4867
Dec 29th, 2008, 03:10 AM
I removed this:

<html xmlns="http://www.w3.org/1999/xhtml">
from above the <head> tag.. idk why it was there I'm thinking that's how u wanted me to have it... but i took it out and now im down to 13 errors...

Alright awesome!
down to 11 errors and 3 warnings woot! and all that is because of the tripod ads

The reason why I have two <body> tags is because when I write the html it goes like this:


<noframes><body></noframes>
<body>
and so on...

but when you view the source... you find out that tripod has slipped some ads up in there... that's because I haven't paid to have the ads removed (which I'm going to) I just wanna wait untill I have the site fully up and running without the ads then I'll start paying for it you know what I mean?

Update: I actually made it to where there's only one <body> tag but it still has the same errors... probably because the <noframes> tags

cincinnatiboy4867
Dec 29th, 2008, 04:36 PM
What you think? I can move on now or no?

Also, how do I change the color of the <hr>

Excavator
Dec 29th, 2008, 05:19 PM
Goodmorning Dirk,
It looks good. The validator likes it too, most of it anyway.

The hr can be changed in your CSS. Find it right here -

.post {
width: 550px;
margin: 10px 0 0 180px;
padding: 10px 0 0 0;
}
.post hr {
margin: 10px auto;
width: 80%;
border-top: 1px solid #F00;
border-bottom: 1px solid #FF0;
}#footer {
height: 20px;
margin: 10px 0;
font-size: 12px;


I have some examples of hr's that might give you some ideas here. (http://nopeople.com/CSS/hr/index.html)

...

cincinnatiboy4867
Dec 29th, 2008, 11:34 PM
dangit! I couldn't find it but I knew I saw it before! jeez...

Okay this is the code for the music player I use (if you know of a better one let me know...)

<script language="JavaScript" src="http://durkmusicbeats.tripod.com/audio-player.js"></script>

<object type="application/x-shockwave-flash" data="http://durkmusicbeats.tripod.com/player.swf"



id="audioplayer1" height="24" width="380">
<param name="movie" value="http://durkmusicbeats.tripod.com/player.swf">
<param name="FlashVars"

value="playerID=1&amp;bg=0x999999&amp;titles=Hardcore Gangsta,Hardcore

Gangsta;leftbg=CCCCCC&amp;lefticon=333333&amp;rightbg=3399FF&amp;rightbghover=0xcc00

00&amp;righticon=0x000000&amp;righticonhover=0xcccccc&amp;text=0xcc0000&amp;slider=0xcc0000&amp;tra

ck=000000&amp;

border=0xcc0000&amp;loader=0xffcccc&amp;loop=yes&amp;autostart=no&amp;soundFile=http://boxstr.com/fil

es/4374993_f23kn/Hardcore%20Gangsta.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

I have a couple questions on this code...

Firstly, does this:
<script language="JavaScript" src="http://durkmusicbeats.tripod.com/audio-player.js"></script>just go in the header and is only shown once? Or do you not know... it's cool if u don't

Second... to change the colors idk how to determine the html color code or even if thats what it is...
idk what this is: 0xcc0000&amp

cincinnatiboy4867
Dec 30th, 2008, 12:58 AM
also I noticed that you can drag pictures from my site and put them on your computer... how do I stop someone from doing that?

abduraooft
Dec 30th, 2008, 08:06 AM
also I noticed that you can drag pictures from my site and put them on your computer... how do I stop someone from doing that?Protecting anything(graphic,text,movie ...) displayed on web is fairly impossible. Read the sticky http://www.codingforums.com/showthread.php?p=182173#post182173

cincinnatiboy4867
Dec 30th, 2008, 06:04 PM
No, I didn't mean protecting the source code... Hear, let me show you...

If you go to yahoo.com and try to drag and drop the yahoo.com logo on your desktop it doesn't work...

Excavator
Dec 30th, 2008, 06:56 PM
That's because it's a flash thing, looks like it changes the date and has that snowfall. It's not an image.

cincinnatiboy4867
Dec 30th, 2008, 08:39 PM
O okay cool... so can u answer the how to color question below?

cincinnatiboy4867
Dec 30th, 2008, 08:40 PM
dangit! I couldn't find it but I knew I saw it before! jeez...

Okay this is the code for the music player I use (if you know of a better one let me know...)

<script language="JavaScript" src="http://durkmusicbeats.tripod.com/audio-player.js"></script>

<object type="application/x-shockwave-flash" data="http://durkmusicbeats.tripod.com/player.swf"



id="audioplayer1" height="24" width="380">
<param name="movie" value="http://durkmusicbeats.tripod.com/player.swf">
<param name="FlashVars"

value="playerID=1&amp;bg=0x999999&amp;titles=Hardcore Gangsta,Hardcore

Gangsta;leftbg=CCCCCC&amp;lefticon=333333&amp;rightbg=3399FF&amp;rightbghover=0xcc00

00&amp;righticon=0x000000&amp;righticonhover=0xcccccc&amp;text=0xcc0000&amp;slider=0xcc0000&amp;tra

ck=000000&amp;

border=0xcc0000&amp;loader=0xffcccc&amp;loop=yes&amp;autostart=no&amp;soundFile=http://boxstr.com/fil

es/4374993_f23kn/Hardcore%20Gangsta.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

I have a couple questions on this code...

Firstly, does this:
<script language="JavaScript" src="http://durkmusicbeats.tripod.com/audio-player.js"></script>just go in the header and is only shown once? Or do you not know... it's cool if u don't

Second... to change the colors idk how to determine the html color code or even if thats what it is...
idk what this is: 0xcc0000&amp

This question...

Excavator
Dec 30th, 2008, 08:50 PM
Is this what your looking for? (http://html-color-codes.com/)

What editor have you been using to write your pages with? Most of them have a color picker built in so all you have to do is click on a color to choose or click the eyedropper on something you want to match.

cincinnatiboy4867
Dec 30th, 2008, 11:46 PM
I use notepad like u said... and no that doesn't work.. normal html coding colors doesn't work I tried everything it's a different type of coloring

Excavator
Dec 31st, 2008, 12:00 AM
idk what this is: 0xcc0000&amp

That's nothing to do with color.

What text are you trying to change?
If it's the "Hardcore Gangsta/Genre:Rap" (I can't believe I actually typed the word rap ... :( ) then try this:






<p class="color">Hardcore Gangsta</p>

<!--begin music player 1-->

<p>
<script language="JavaScript" src="http://durkmusicbeats.tripod.com/audio-player.js"></script>

<object type="application/x-shockwave-flash" data="http://durkmusicbeats.tripod.com/player.swf" id="audioplayer1" width="380" height="24">
<param name="movie" value="http://durkmusicbeats.tripod.com/player.swf">
<param name="FlashVars" value="playerID=1&amp;bg=0x999999&amp;titles=Hardcore Gangsta,Hardcore

Gangsta;leftbg=CCCCCC&amp;lefticon=333333&amp;rightbg=3399FF&amp;rightbghover=0xcc00

00&amp;righticon=#FF3
3FF;righticonhover=0xcccccc&amp;text=0xcc0000&amp;slider=0xcc0000&amp;tra

ck=000000&amp;

border=0xcc0000&amp;loader=0xffcccc&amp;loop=yes&amp;autostart=no&amp;soundFile=http://boxstr.com/fil

es/4374993_f23kn/Hardcore%20Gangsta.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
<!--end of music player 1-->

</p>
<p class="color">Genre:Rap</p>





and add this to your CSS to make it red -

.color {
color: #f00;
/*or gray would be color: #ccc; */
}

cincinnatiboy4867
Dec 31st, 2008, 03:01 AM
I'm not tryin to change the text color if you read the previous posts it gives you the code. I'm tryin to change the colors on my music player silly

Excavator
Dec 31st, 2008, 03:51 AM
Silly? Wtf?

cincinnatiboy4867
Dec 31st, 2008, 06:04 AM
I'm kidding chill...

neways...

should I place my paypal using float?

if so can u show me an example or template of some sort?

Thanks

Excavator
Dec 31st, 2008, 10:13 AM
I'm kidding chill...

neways...

should I place my paypal using float?

if so can u show me an example or template of some sort?

Thanks

Yes, a float will work for your paypal buttons.
Try something like this-
markup:
<!--end newsletter-->
<!--end post--></div>


<div class="post">
<hr>
<div id="pay">
button here
<!--end pay--></div>
<p>Hardcore Gangsta</p>
<!--begin music player 1-->

<p>
<script language="JavaScript" src="http://durkmusicbeats.tripod.com/audio-player.js"></script>


CSS:

#pay {
float: right;
width: 120px;
height: 30px;
margin: 20px 50px 0 0;
background: #ff00ff;
}

cincinnatiboy4867
Dec 31st, 2008, 05:26 PM
okay cool...

I have a problem with your <hr>'s .... I can't change the height in firefox for some reason...

Update: I also need help positioning my paypal seal... for some reason I can't get it right :(

A lot of other errors idk how to fix...

Excavator
Dec 31st, 2008, 07:02 PM
okay cool...

I have a problem with your <hr>'s .... I can't change the height in firefox for some reason...

...

haha, those are your hr's.
You have 6px border-top and a 6px border-bottom. 12px high hr. Try this instead:

.post hr {
margin: 10px auto;
width: 90%;
border-top: solid 1px #339933;
border-bottom: solid 1px #336600;
}

=========================================

To move your paypal button around, adjust the margins. Remember they go in a clockwise order - top,right,bottom,left.

.pay {
float: right;
width: 120px;
height: 24px;
margin: 19px 12px 0 0;

}



=============================================


<h2><center><font color="#236b8e"><u>Featured Bangers</u></font></center></h2> should be
<center><h2><font color="#236b8e"><u>Featured Bangers</u></font></h2></center>

Your DocType allows you to use the deprecated <center> tag but you need to enclose the thing your centering.

cincinnatiboy4867
Dec 31st, 2008, 08:27 PM
Thanks for answering all those questions!

Also what about the # before the color? validator has an issue with that but it doesn't work without it...

BTW I don't think my navigation pictures load at the beginning because when I mouse over it it still does that flash thing at first...

Excavator
Dec 31st, 2008, 09:07 PM
sorry, I didn't mean my paypal buttons.. I ment my paypal seal image below the right ad. I can't get it to move anywhere. no matter what margin i change



#seals {
width: 100px;
height: 100px;
float: right;
margin 0 50% 0 0;
}

Your margin line should look more like this - margin: 0 50% 0 0;

Excavator
Dec 31st, 2008, 09:10 PM
BTW I don't think my navigation pictures load at the beginning because when I mouse over it it still does that flash thing at first...

That's why we combine the normal and hover images into one image, so the hovered image is already there before the user hovers over it.


Like this. (http://nopeople.com/CSS/CSS_rollover/index.html)

cincinnatiboy4867
Dec 31st, 2008, 09:38 PM
That's why we combine the normal and hover images into one image, so the hovered image is already there before the user hovers over it.


Like this. (http://nopeople.com/CSS/CSS_rollover/index.html)

OH! can you help me do that with mine?
#menu_left ul a:hover {
background-position: left;
}
a.button {
background-image: url(http://www.*******************/atomblue_B1.gif);
background-repeat: no-repeat;
background-position: -3px;
}
a.button:hover {
background-image: url(http://www.*******************/atomblue_B1_over.gif);
background-repeat: no-repeat;
}

I thought you already did it anyways...

Excavator
Dec 31st, 2008, 10:08 PM
OH! can you help me do that with mine...

A good project for you! Put all this stuff you've been learning to use. I'll give you a start:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
</style>
</head>
<body>
<div id="wrap">
<div id="menu_left">
<ul>
<li><a href="http://www.*******************" class="button">Home</a></li>
<li><a href="http://www.*******************" class="button">Artists</a></li>
<li><a href="http://www.*******************" class="button">Producers</a></li>
<li><a href="http://www.*******************" class="button">Beats</a></li>
<li><a href="http://www.*******************" class="button">Request A Beat</a></li>
<li><a href="http://www.*******************" class="button">FREE Stuff</a></li>
<li><a href="http://www.*******************" class="button">FREE Newsletter</a></li>
<li><a href="http://www.*******************" class="button">Contact Us</a></li>
</ul>
<!--end menu_left--></div>
<!--end wrap--></div>
</body>
</html>

The first thing you'll want to do is combine your button images.

cincinnatiboy4867
Jan 1st, 2009, 06:28 AM
I think I get the idea but I don't know how to apply it to that menu... like it loads one picture on the other and then when u hover the top one disappears? Maybe? Idk lol I seriously studied the code on that page u get and compared it to mine and i don't really know what to do... :(

cincinnatiboy4867
Jan 1st, 2009, 06:40 AM
Dang I just tried every combination and got nowhere :(

I also wanna have the #wrap have a border of some sort

Excavator
Jan 1st, 2009, 07:59 AM
Dang I just tried every combination and got nowhere :(

I also wanna have the #wrap have a border of some sort


Let's see your images first.
You can put a border on #wrap if you want, you know how to do that by now. - border: 1px solid #000;

cincinnatiboy4867
Jan 1st, 2009, 06:44 PM
I'm having trouble positioning my text in the middle. When I put the <center> tags around it they go to like the right center not the center of the center...

Also, I can't move the top google ads banner without moving my header banner.. I'm trying to move my top google ads banner down 15px or so...

abduraooft
Jan 2nd, 2009, 07:39 AM
Are you trying to make it like

.post {/*Durks_global.css (line 60)*/
/*margin:10px 0pt 0pt 180px;*/
margin:10px auto;
padding:10px 0pt 0pt;
text-align:justify;
width:550px;
}

Rowsdower!
Jan 2nd, 2009, 02:54 PM
I'm having trouble positioning my text in the middle. When I put the <center> tags around it they go to like the right center not the center of the center...

Also, I can't move the top google ads banner without moving my header banner.. I'm trying to move my top google ads banner down 15px or so...

Not sure about your text positioning issue (I'll check into it), but to move your google ads banner down just add this to your css:


#googleadtop {
height: 60px;
margin: 0 0 0 541px;
padding-top: 20px;
}

Since you're not using a background color it won't hurt you any to use padding rather than margin here. Tested in FF2 and IE7.

cincinnatiboy4867
Jan 2nd, 2009, 06:42 PM
Awesome thanks so much!

And don't worry about the text I think I like it better how it is :)

cincinnatiboy4867
Jan 2nd, 2009, 07:04 PM
Okay, now I can't figure out what happened with my artists page: http://www.*******************/artists.html
For some reason my css pic and my footer floated down way to far... I didn't change much but remove a few things in the <wrap> tags and add some text.

Excavator
Jan 2nd, 2009, 07:19 PM
Okay, now I can't figure out what happened with my artists page: http://www.*******************/artists.html
For some reason my css pic and my footer floated down way to far... I didn't change much but remove a few things in the <wrap> tags and add some text.

Try this Dirk:


#wrap {
width: 736px;
float: left;
clear: left;
margin: 1px auto;
background: #fff;
overflow: auto;
border: 3px ridge green;
}

Rowsdower!
Jan 2nd, 2009, 08:44 PM
Clearing floats didn't do it for me, but this did:


#seals {
width: 50px;
height: 25px;
float: right;
/*margin: 550px 70px 0 0;*/ /*wipe out your top margin -- see below*/
margin: 0px 70px 0 0;
}

Check to make sure this doesn't break your other pages though as this is an ID used in more places than just this artists page.

Rowsdower!
Jan 2nd, 2009, 09:13 PM
I'm also noticing an issue with the window resizing. When I don't have my browser window full size your #googleadright drops below your #wrap.

You can fix this by adding a min-width div around both the #wrap AND the #googleadright div's. Something like this should work:

In your HTML:
<!--end googleadtop--></div>
<!--end header--></div>
<div id="mainwrapper">
<div id="wrap">


...a bunch of your code is here but I'm leaving it out to save space...


<!--end googleadright--></div>
<!--end mainwrapper --></div>
And then add this new ID into your CSS:
#mainwrapper
{
min-width: 950px;
}

This combined with the fix above kept your ads and footer right where they should be regardless of the size of my browser window. Tested and working in FF2 and IE7.

cincinnatiboy4867
Jan 2nd, 2009, 09:13 PM
I did what u said and it ended up smashing my css image all the way to the bottom of my right ad.

Rowsdower!
Jan 2nd, 2009, 09:18 PM
I did what u said and it ended up smashing my css image all the way to the bottom of my right ad.

OK, well it doesn't have to be 0px for the top margin, but the 550px margin was what was throwing you off. Try something more moderate like 20px or so and see if that looks better.


margin: 20px 70px 0 0;

Rowsdower!
Jan 2nd, 2009, 09:56 PM
Final solution:

Full HTML for the artists page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>******************* - Get the Hottest Beats on the Block!</title>
<link href="Durks_global.css" rel="stylesheet" type="text/css">
</head>
<noframes>
<body><script type="text/javascript" src="http://hb.lycos.com/hb.js"></script>
<script type="text/javascript" src="http://ratings.lycos.com/ratings/lycosRating.js.php"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
var cm_role = "live";
var cm_host = "tripod.lycos.com";
var cm_taxid = "/memberembedded";
var tripod_member_name = "durkmusicbeats";
var tripod_member_page = "durkmusicbeats/artists.html";
var tripod_ratings_hash = "1230929303:b6a5dde1d082fe2ab8473f9661f2ca74";

var lycos_ad_category = null;

var lycos_ad_remote_addr = "128.30.52.49";
var lycos_ad_www_server = "www.tripod.lycos.com";
var lycos_ad_track_small = "http://members.tripod.com/adm/img/common/ot_smallframe.gif?rand=828989";
var lycos_ad_track_served = "http://members.tripod.com/adm/img/common/ot_adserved.gif?rand=828989";
//--><!]]></script>
<script type="text/javascript" src="http://scripts.lycos.com/catman/init.js"></script>
<script type="text/javascript" src="http://members.tripod.com/adm/ad/code-start.js"></script>
<script type="text/javascript" src="http://members.tripod.com/adm/ad/code-middle.js"></script>
<script type="text/javascript" src="http://members.tripod.com/adm/ad/code-end.js"></script>
<noscript>
<img src="http://members.tripod.com/adm/img/common/ot_noscript.gif?rand=239777" alt="" width="1" height="1" />
<!-- BEGIN STANDARD TAG - 728 x 90 - Lycos - Tripod Fallthrough - DO NOT MODIFY -->
<iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="728" height="90" src="http://ad.yieldmanager.com/st?ad_type=iframe&ad_size=728x90&section=209094"></iframe>
<!-- END TAG -->
</noscript>

</noframes>


<div id="header">
<img src="http://i346.photobucket.com/albums/p438/durkmusic/DURKMUSICBEATSBANNER.png"

alt="header image" width="521" height="97" id="hdr_img">
<div id="googleadtop">

<script type="text/javascript"><!--
google_ad_client = "pub-3272991235410111";
/* 468x60, created 12/18/08 */
google_ad_slot = "1797578556";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!--end googleadtop--></div>
<!--end header--></div>
<div id="mainwrapper">
<div id="wrap">
<div id="menu">

<ul>
<li><a href="http://www.*******************/" title="Home"><strong>Home</strong></a></li>
<li><a href="http://www.*******************/artists.html" title="Your on this page">Artists</a></li>
<li><a href="http://www.*******************/about_us.html" title="All about *******************"><strong>About Us</strong></a></li>
<li><a href="http://www.*******************/beats.html" title="Search for BEATS"><strong>BEATS</strong></a></li>

<li><a href="http://www.*******************/request_a_beat.html" title="Request a specially made BEAT"><strong>Request A BEAT</strong></a></li>
<li><a href="http://www.*******************/free_stuff.html" title="Everything FREE is on this page"><strong>FREE Stuff</strong></a></li>
<li><a href="http://www.*******************/newsletter.html" title="Get our FREE Newsletter here"><strong>FREE Newsletter</strong></a></li>
<li><a href="http://www.*******************/contact_us.html" title="Contact Us for anything you need"><strong>Contact Us</strong></a></li>
</ul>




<!--end menu_left--></div>
<div id="googleadleft">
<script type="text/javascript"><!--
google_ad_client = "pub-3272991235410111";
/* 160x600, created 12/18/08 */
google_ad_slot = "7560209509";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!--end googleadleft--></div>
<div id="title">
<h1>Up-and-Coming Artists</h1>

<h2>Info Center</h2>
</div>
<div class="post">
<hr>
<p>
Are you an up-and-coming artist looking for the right path? Are you waiting for the opportunity of a lifetime that will make you a hit? Are you better than most of the top rappers and singers of today like Lil' Wayne, Young Jeezy, Chris Brown, Gucci, and more? You found the right place to be. Not only can you get the Hottest Bangers on the Block, but you can get your Beats customized any way you want them. If you need your tempo amped up 15bps, you got it. You need your beat in a lower key, we can do it. Anything you can think of our producers at DurkMusic Productions can do it for you. All you gotta do is buy the Beat!<br><br>

If you really wanna make it big in the music industry, you can even become a sponsored artist on our <a href="http://www.*******************">Home Page!</a> We can advertise for you, sell your music, help you build your demo album, hook you up with some of the top labels, and more! There isn't anything we can't do for you. That's what separates us from the rest. If you've read this far you're already ahead of the game! Most artists fail to become stars because they lack the knowledge and contacts that we have here at *******************. To get started on your fast track to the top or to ask us a few questions, email us at [email protected]*******************.

</p>
<!--end post--></div>


<div class="post">
<hr>

<br>
<center><h3><a href="http://www.*******************/beats.html">Search for Beats now!</a></h3></center>
<!--end post--></div>

<div id="googleadbottom">
<script type="text/javascript"><!--
google_ad_client = "pub-3272991235410111";
/* 728x15, created 12/18/08 */
google_ad_slot = "9410879066";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!--end googleadbottom--></div>
<!--end wrap--></div>




<div id="googleadright">
<script>window.google_render_ad();</script><iframe name="google_ads_frame"

src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3272991235410111&amp;dt=1230236763117

&amp;lmt=1230236762&amp;prev_slotnames=6608672467%2C1797578556&amp;output=html&amp;slotname=7

560209509&amp;correlator=1230236763055&amp;url=http%3A%2F%2Fwww.*******************%2F&amp;ea=

0&amp;frm=0&amp;ff=serif&amp;biw=1539&amp;bih=798&amp;adx=0&amp;ady=489&amp;ga_vid=1288658075.

1230236763&amp;ga_sid=1230236763&amp;ga_hid=1030920270&amp;flash=10.0.12&amp;u_h=1200&amp;u_w=

1920&amp;u_ah=1200&amp;u_aw=1920&amp;u_cd=32&amp;u_tz=-540&amp;u_his=1&amp;u_java=true&amp;u

_nplug=5&amp;u_nmime=45&amp;dtd=3" marginwidth="0" marginheight="0" vspace="0" hspace="0"

allowtransparency="true" width="160" frameborder="0" height="600" scrolling="no"></iframe>
<!--end googleadright--></div>

<!--begin seals-->
<div id="seals">
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!">
</a>


</div>
<!--end seals-->

<!-- end mainwrapper --></div>



<div id="footer">
<p>DurkMusic Beats, DurkMusic Productions, Trademark 2008-2010, DurkMusic co.</p>
<!--end footer--></div>
</body>
<script type="text/javascript">_popupControl();</script>
</html>

Full CSS:
html, body {
background-image: url('http://i346.photobucket.com/albums/p438/durkmusic/background-1.png');
}
* {
margin: 0px;
padding: 0px;
}

#mainwrapper
{
clear:both;
min-width: 950px;
height: auto;
overflow:auto;
}

#header {
height: 97px;
}


#hdr_img {
float: left;
margin: 3px auto;
}
#wrap {
width: 736px;
float: left;
margin: 1px auto;
background: #fff;
overflow: auto;
border: 3px ridge green;
}
/***********menu styling************/
#menu ul {
list-style-type: none; /****Bullets for list were visible in
FF2 but not IE7, this removes
them from all browsers. If you
want them back just wipe this
out of your CSS.****/
}
#menu {
width: 150px;
float: left;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;

border-width: 1px;
}

#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
color: #CCC;
display: block;
background: url(http://durkmusicbeats.tripod.com/menu.gif);
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #FFF;
background: url(http://durkmusicbeats.tripod.com/menu.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#title {
width: 550px;
margin: 50px 0px 0px 180px;
text-align: center;
color: #f00;
}



.post {
width: 550px;
margin: 10px 0px 0px 180px;
padding: 10px 0 0 0;
}


.post {
/*margin: 10px auto;*/
margin: 10px 0px 0px 180px;
padding: 10px 0px;
text-align: justify;
width: 530px;
}




.post hr {
margin: 10px auto;
width: 90%;
height: 10px;
border-top: solid 2px #339933;
border-bottom: solid 2px #336600;
border-left: solid 5px #339933;
border-right: solid 5px #336600;
}



.pay {
float: right;
width: 120px;
height: 24px;
margin: 19px 12px 0 0;

}
#footer {
height: 20px;
margin: 10px 0;
font-size: 12px;
color: #FFF;
line-height: 20px;
text-align: center;
clear: both;
}
/*******ads******/


#googleadleft {
width: 160px;
margin: 30px 0 0 0;
float: left;
clear: left;
}
#googleadtop {
height: 60px;
margin: 0 0 0 541px;
padding-top: 20px;
}
#googleadright {
width: 160px;
margin: 8px 0 0 780px;
}
#googleadbottom {
height: 15px;
margin: 10px auto;
clear: both;
}



#seals {
/*clear:both;*/ /****If you leave this commented out, your CSS validation
tag will be 20px below the google ad. If you put it
back in, your CSS tag will be 20px below whichever is
lower on the page: your google ad, or your content.****/
float: right;
margin: 20px 70px 0 0;
}

See if this works. If not, let me know specifically what you're seeing that's wrong (and in what browser).

Cheers and good luck!

cincinnatiboy4867
Jan 4th, 2009, 03:39 AM
Oh the thing is, is that it will be different on the home page and the artists page. I want it to be in the bottom right corner of every page. When the wrap lengthens to fit in the text it changes how far the page goes down and the css image doesn't follow that. Thanks :)

Update: I can get it right on the home page but then it's different on the artists page.

Rowsdower!
Jan 4th, 2009, 04:17 AM
To acheive that goal, just switch this:
<!--end googleadright--></div>

<!--begin seals-->
<div id="seals">
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!">
</a>


</div>
<!--end seals-->

<!-- end mainwrapper --></div>

To this:
<!--end googleadright--></div>

<!-- end mainwrapper --></div>

<!--begin seals-->
<div id="seals">
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!">
</a>


</div>
<!--end seals-->

In other words, move the "seals" section outside of the mainwrapper. This will keep the seal just above the footer in all cases.

cincinnatiboy4867
Jan 4th, 2009, 04:55 AM
Dang man thank you so much I owe you big time...

cincinnatiboy4867
Jan 6th, 2009, 12:12 AM
I have another question for you guys... the validator says that I have an open </div> tag or something. It says it's there for nothing. but I checked and it does go with the mainwrapper div id. Idk what to do. it's my artists page. here's the link: http://www.*******************/artists.html

Thanks so much :)

jerry62704
Jan 6th, 2009, 05:53 PM
You have two closing divs with the comment they are closing the mainwrapper (lines 151 and 153). Is that right?

You have <noframe> (line 8), but you don't have any frames for it be be connected to. Is that right?

You have this "<!--//--><![CDATA[//><!--" on line 11. The CDATA is to prevent parsing of the javascript, but what is the html comment enclosing the javascript comment for? Ditto on the javascript comment after it.

On line 31 you are self closing the image, but html doesn't like that.

Shouldn't the iframe (line 33) have the parameters like this "&amp;ad_size" instead of "&ad_size" (and for section too)?

Line 133 should have the type (<script type="text/javascript">) like you do elsewhere.

I'll let you deal with the three errors in the iframes (vspace, hspace and allowtransparencies).

cincinnatiboy4867
Jan 6th, 2009, 10:24 PM
You have two closing divs with the comment they are closing the mainwrapper (lines 151 and 153). Is that right?

You have <noframe> (line 8), but you don't have any frames for it be be connected to. Is that right?

You have this "<!--//--><![CDATA[//><!--" on line 11. The CDATA is to prevent parsing of the javascript, but what is the html comment enclosing the javascript comment for? Ditto on the javascript comment after it.

On line 31 you are self closing the image, but html doesn't like that.

Shouldn't the iframe (line 33) have the parameters like this "&amp;ad_size" instead of "&ad_size" (and for section too)?

Line 133 should have the type (<script type="text/javascript">) like you do elsewhere.

I'll let you deal with the three errors in the iframes (vspace, hspace and allowtransparencies).

Awh thank you so much that helped a bunch do you think you could do the same thing on my home page: http://www.*******************

Thanks so much! :)

cincinnatiboy4867
Jan 7th, 2009, 09:24 PM
please please please please :)

Rowsdower!
Jan 7th, 2009, 10:14 PM
:( Have you even looked at the validator yourself yet? The "verbose output" option pretty much walks you through the problem.

For example, these are pretty easy:

Line #12 starts your body section, but line #11 has a <noframes> tag. Move this under the <body> tag...

Line #34, your image tag has this "/> at the end, make it just ">"

Line #36, in two places in your source URL you use "&" when it should be "&amp;" - replace those two...

Try to read up on this yourself or you'll never learn to do it on your own, ya know? Once you do that, if you have any problems that you can't FIGURE OUT, then you just ask us. We really should not be your first stop on this path.

Rowsdower!
Jan 7th, 2009, 10:23 PM
Also, see here (http://www.aptana.com/reference/html/api/HTML.field.allowtransparency.html) for why you shouldn't be using "allowtransparency" and a good clue as to why it is not standards-compliant.

It's not supported in Netscape, Mozilla, Opera, or Safari - it only works in IE5+.

That's one more error down... You should have no trouble working out the other 12 or so that are left. Please try it!!!

cincinnatiboy4867
Jan 7th, 2009, 10:53 PM
:( Have you even looked at the validator yourself yet? The "verbose output" option pretty much walks you through the problem.

For example, these are pretty easy:

Line #12 starts your body section, but line #11 has a <noframes> tag. Move this under the <body> tag...

Line #34, your image tag has this "/> at the end, make it just ">"

Line #36, in two places in your source URL you use "&" when it should be "&amp;" - replace those two...

Try to read up on this yourself or you'll never learn to do it on your own, ya know? Once you do that, if you have any problems that you can't FIGURE OUT, then you just ask us. We really should not be your first stop on this path.

I'm not dumb and asking people to fix my issues okay. I tried it myself and sometimes it doesn't explain them very well. Between <noframe> and </noframe> you can ignore because I can't change that coding. So the first 9 errors and warnings I can't even change. Up to about line 40 I can't change anything. After that I can make changes. I tried all the ones I could but some I don't understand. Like the # sign before my color. If I take that out, the color won't work. etc...

btw I took out the allowtransparency :)

jerry62704
Jan 7th, 2009, 11:10 PM
:( Have you even looked at the validator yourself yet? The "verbose output" option pretty much walks you through the problem.

For example, these are pretty easy:

Line #12 starts your body section, but line #11 has a <noframes> tag. Move this under the <body> tag...

Line #34, your image tag has this "/> at the end, make it just ">"

Line #36, in two places in your source URL you use "&" when it should be "&amp;" - replace those two...

Try to read up on this yourself or you'll never learn to do it on your own, ya know? Once you do that, if you have any problems that you can't FIGURE OUT, then you just ask us. We really should not be your first stop on this path.

I pointed out those errors in message 119 of this thread. Either I or you have wasted time on this.

cincinnatiboy4867
Jan 8th, 2009, 12:57 AM
...I just need to know how to fix the errors after line 40

especially the # sign in front of my html color code... I just don't get that one..

abduraooft
Jan 8th, 2009, 08:19 AM
<font color=#236B8E><u>Featured Bangers</u></font>
Have a look at the list of all Deprecated HTML tags and attributes (http://www.codehelp.co.uk/html/deprecated.html). You should never use them.
Try to learn some HTML and CSS before making a website, http://htmldog.com/ is a good resource to learn.

jerry62704
Jan 8th, 2009, 03:50 PM
...I just need to know how to fix the errors after line 40

especially the # sign in front of my html color code... I just don't get that one..

The "#" sign signals the browser that you are about to pass a string of hex values. #ff0000 for example tells it that you are coloring it red. #00ff00 tells it you are coloring it green and as you might guess #0000ff is blue (RGB). Possible values for any of the six positions are 0 to f. They should be, even in the deprecated code you have, put in quotes:
color="#123456".

cincinnatiboy4867
Jan 8th, 2009, 11:10 PM
I don't understand how my code is deprecated... I thought I was doing it the right way...

cincinnatiboy4867
Jan 8th, 2009, 11:11 PM
Have a look at the list of all Deprecated HTML tags and attributes (http://www.codehelp.co.uk/html/deprecated.html). You should never use them.
Try to learn some HTML and CSS before making a website, http://htmldog.com/ is a good resource to learn.

And I did learn html and css before I made my website... am I perfect? no. do I make mistakes? yes...

Rowsdower!
Jan 9th, 2009, 03:03 PM
OK, I really don't want this to come off as incredibly mean, but I'm taking the tough love approach with you from here on out..


I'm not dumb and asking people to fix my issues okay. I tried it myself and sometimes it doesn't explain them very well. Between <noframe> and </noframe> you can ignore because I can't change that coding. So the first 9 errors and warnings I can't even change. Up to about line 40 I can't change anything. After that I can make changes. I tried all the ones I could but some I don't understand. Like the # sign before my color. If I take that out, the color won't work. etc...

btw I took out the allowtransparency :)
I never said you were "dumb" but I have to say that asking people to fix all of your issues is not OK as far as I'm concerned. I won't go into the explanation of your color code since jerry already explained the issue there, but if you had a keen grasp of HTML and CSS - as abduraoft politely suggested you should pursue - then these validation issues would not be so confusing to you. Most validator errors you see should be head-smackers once you see them and you should be able to see that, for example, you just forgot to add quotation marks to an attribute value.

If you know and understand the basic rules of HTML there should be very, very little that the validator will tell you that you won't understand. Either you aren't paying attention, you don't know HTML well enough yet, or you are giving up waaaaay too easily. In any of the above cases it is not the best solution for us to spoon-feed the answers to you. It will only encourage you to maintain your current behavior and won't solve the real problem.


I don't understand how my code is deprecated... I thought I was doing it the right way...

This is how your code is deprecated:

Have a look at the list of all Deprecated HTML tags and attributes (http://www.codehelp.co.uk/html/deprecated.html). You should never use them.
Try to learn some HTML and CSS before making a website, http://htmldog.com/ is a good resource to learn.

Look at the section in that link called "Deprecated HTML attributes" then look at your code and validator errors. You are using things like vspace="<whatever>" in the tags for images. The proper way with the current standards is to use either inline CSS style or else use an external CSS sheet to style the padding or margins for images - no such thing as vspace anymore.


And I did learn html and css before I made my website... am I perfect? no. do I make mistakes? yes...
Like I said, maybe you didn't learn it well enough. There is nothing in your errors that is too advanced for a beginner to easily learn about. Now is the time to study hard. We don't ask for perfection; we only ask that you take some (or really MOST) of the responsibility to create and manage your own work. Refusing to study up on the recurring, frequently repeated mistakes that you have made - and have asked us to fix for you in more than one place at more than one time - makes us believe that you simply want someone, anyone, to do the work FOR YOU rather than to help you learn to do the work for yourself. IF this is not the case then it will help you to know that this is the impression that you are giving to more people than just me.

jerry62704
Jan 9th, 2009, 03:58 PM
The reason it is deprecated is the web is going in a different direction than it was in the 90s. In todays web content is one thing and how you display it another. Notice that the deprecated tags are related to the display of data in many cases. This is now moved to css.

When I started web work in the early 90s I avoided css like the plague. The battles between NS and IE with differing standards was too much a pita. But that is largely resolved now (yeah, I know about the IE bugs but that is small patotoes compared to the 90s wars).

Then I had to get with the times and it would probably be best for you to do the same. Welcome to the '00s.

cincinnatiboy4867
Jan 10th, 2009, 12:03 AM
You guys are absolutely right... I probably could study up a little more. I didn't realize I had forgotten some of the html and css I had learned over and over again... I'm sorry for making it seem like I want you guys to fix all my problems because I don't and I wouldn't want to if I were in your position... You can be harsh with me it's fine... I want to learn.. I don't want you to give me all the answers, I just need a link to a tutorial that will help here and there...

You guys are awesome for helping me this far anyways so thanks...

As for the vspace and hspace... that's the google ad code that I am supposed to copy and paste.. I didn't write that so I'm not sure if I should change it or not... and for everything above line 40 I cannot change...
So, any problems with that I cannot change... and as with google ads I guess it would still work if I took out vspace and hspace...

I also realized that I use a lot of deprecated tags like the <u> tag, the <font> tag, and the <center> tag....

As I was trying to correct my <center> tags I was successful with every one except for my newsletter. I can't seem to find a good code to center the newsletter... I know text-align=center doesn't work... it centers my text but not the form... align=center doesn't work... I couldn't find anything else that might work...

cincinnatiboy4867
Jan 11th, 2009, 05:20 AM
Okay I gave it a different id and gave it a margin of 8em... that seemed to work. Hopefully that was okay..

cincinnatiboy4867
Jan 11th, 2009, 05:39 AM
Okay, I'm pretty sure I got all the deprecated HTML out of my home page. Thanks so much for your help. I really really appreciate it.

cincinnatiboy4867
Jan 11th, 2009, 05:54 AM
I don't know how this code got into my HTML but the validator didn't like it so I took it out...
<script type="text/javascript">_popupControl();</script>Was this okay to do?