CSS and DIV Issue.

You're getting closer : ) Here's where you put the good CSS:
http://absolutehabbo.freehostia.com/new/includes/styles/style-new.css

You still need to remove the <style> tags from the css. Also, in your new html, you've lost the closing body tag at the bottom. </body>

I guess in the short run you could keep the stylesheet in the html like I have it, make sure the page looks good, and then carefully move the css over.

Maybe if you had the css in a simpler place. Like, the page is at http://absolutehabbo.freehostia.com/new/ and the css can be at http://absolutehabbo.freehostia.com/style-new.css and then you can have a direct link in the html:
<link href="style-new.css" rel="stylesheet" type="text/css">

That way they're both in the same folder and easier to link the two. You can still keep your images and stuff in the includes folder.

 

but i dont get it, its loading the CSS, its just not showing up right

is it because of the style tags?

 

Possibly. I don't know for sure. Some things are picky and some are not. They are html tags and do not belong in the CSS. They are only on my page to tell the browser that the CSS is within my html page.

 

meh, its not working ill try copying yours completely

took your html page, made it my index.php and its still messed up. the only thing i changed was the path to the images. its still messed though :S

 

I looked at the /new/ page and it's not too messed up.

for the right container, you're simply lacking a background colour.
change this line (under rightcontainer in the CSS)
background: url(includes/styles/images/content_box_bot.gif) bottom no-repeat;
to this:
background: #f3f3f3 url(includes/styles/images/content_box_bot.gif) bottom no-repeat;

For the left hand side, I see that (in FireFox) that the top header images are a bit wider than the rest of the box bodies.
#navigation, #rp_box, #main_box {
margin-top: 5px;
margin-bottom: 5px;
padding-bottom: 7px;
width: 219px; <-- try making this like 221px or so. but then check it in at least both FireFox and IE 6 and 7.

Oh, I know why they're a bit off. I copied your images and made them a hair bigger to accommodate the border. You could copy my images as I already gimped them bigger. Just go to http://stommepoes.jobva.nl/XHomerX and you'll see the listing of images. Open and save. Stick those in place of the ones you have (or try what I said above and make the width a bit smaller).

 

okay, its all good now, i just need to raise the right box up a little, and make the disclaimer box a little bit lower. other than that its great , also, i want the font to be arial (like the original absolutehabbo page) instead of times new roman or w/e it is.

ohh another thing, the images on the left navigation are really close to the left side of the nav box. how can i make the space bigger?

BTW: Thanks you VERY MUCH

EDIT: everything is like i want it to be. except for the space between the nav images and the side of the nav box. thats the only thing, i fixed everything else.

 

Yeah that was the only thing I didn't test.

Um, what did I do on my Pizza site to move the little question marks over a bit... oh yeah. In the CSS, I have positioned all the peeps images using the word "left" (under ul li, before the list of classes and seperate images).

When you position a background image, you usually use two words or two numbers. However, if i say left then the second value is assumed to be "center" which I think is what you want (not too high or low). You could change "left" to something like 5%. This should move it 5% from the left side. You can also use pixel units (background-position: 5% 50%; ).

I'm not 100% sure if the 50% would automatically work or if you need to state it. There are some values you can't mix and I forget which. The only thing I'm certain on is that you Cannot say 5px and "center". Words stay with words and numbers stay with numbers.

Or, you could add a bit more left side padding on the ul (the navigation list), which would move the peeps AND the navigation words further to the right. If you just change where the peeps are, the words will not be bumped further right.

And to change the font, just look at whereever I have the serif fonts, and replace with your sans-serif fonts. I couldn't see what I was doing with the sans-serifs : ) Also, if you want the navigation items to also be microscopic like you had them, just change the em value (which is the font size) to something like .6em because what you had was about that size.

Reduce the margin-top for #rightcontainer from 30px to something smaller. That should boost it up a bit. To push down the disclaimer, you could either increase top margin on footer OR add/increase a bottom margin on #leftcontainer (since that's the tallest thing on the page). Either of those should push the footer down a bit.

 

yay thank you! youve been a big help. my site is just as i want it right now. You are god <3

but one thing, what can i do to make it compatible in opera? is it complicated? or is it even possible xD

Thanks again

 

When I made my copy of your site, I tested it in Opera 9+, FF2+, FF1.5, IE6, IE7, and Konqueror. At that time, they looked good. Lemme check now...
Yeah, mine still looks fine in Opera. Do you see an Opera problem? Most Opera users are using the 9.24 or whatever they're at so checking in an ancient Opera is of no use.

 

omg i fixed it. i dont know how? but it works now xD

cool thanks again

What you want me to put on my thanks page?

"Special thanks to 'Stomme poes' from DigitalPoint forums" ?

or you want a different name there?

 

Eh, whatever you want. Thx. Stomme poes means "stupid cat", as in what we yell at our dumb cat all the time. : )

Just be aware that some of the things in the page are fragile, like when people enlarge the font size. Were I to build this site from scratch, I'd try to make it more liquid and flexible. So, it possible that you'll make some little change in the future and will mess something seemingly unrelated on the site. Be careful.

Get that book I mentioned and read it! It will save your butt!!

 

haha, i dont have to worry about that, becuase, its not really my site, i just code it, and im not getting paid or anything, so why work really hard at it? xD

but i will probably get that book. chapters should have it right?

 

ohh, i have one last question, when i have text in side the <p> </p> tags, i cant center it. <p align="center"> doesnt work, and <center> doesnt work. how can i make this text centered?

PS. i dont want EVERY <p> text to be centered, just certain ones.


Thanks

 

align=center is another ancient thing that should go the way of the Ranchero.

There are inline things and block things. Divs are blocks. P's are blocks too but the stuff inside them are inline (text and images are inline, and also <a> anchors, spans, em's... etc).

inline stuff is usually centered with text-align: center in the css (you can see that I did this in your left boxes). Blocks are usually centered (after being given a width) with margin: 0 auto (top and bottom margins are nothing and the side automatically try to be the same on either side).

The cool thing is, you could take an inline thing like an <a> and in the css call it a block (display: block). Once it's a block, you can set a width and a height to it, and center with margin: 0 auto if you want. Usually though people just need to set a height and width, which you can't do with inline (image is a special exception, it's like half inline (what it used to be) and half block (anything after an image is put on a new line if it's not floated).

Now, if you want to center some text but not all text, then you can either give them a class: (in the HTML, <p class="center"> and int he CSS: p.center { text-align: center; } )

OR I think what I did was name the p's by which box they were sitting in. So if I wanted only the radio p's to be centered, I'd say in the CSS:

#radioplayer (or whatever the name was) p {
text align:center;
}

#(name of some other box) p {
text-align: right;
}

#(yet another box) p {
text-align: left;
}

Or all the p's in the left floating container:

#leftcontainer p {
text-align: center;
}
So, you're saying that only the p's in a certain box will do the following command. All other p's will ignore it.


*Edit, if by "center" you mean vertical centering, that's more difficult in CSS because of the way CSS was written. Stoops. Anyway, then you've got to play with top and bottom paddings or margins, depending on what type of element you have. In lists, I try to center the text with either top padding or better, setting different line-heights (since my lists have <a>s which are inline).

 

okay, so i have this in my css

...

#right_container p {
  text-align: left;
  padding-top: 15px;
  padding-left: 10px;
}

p.center {
  text-align: center;
  padding-top: 15px;
  padding-left: 10px;
}

img {
  display: block;
  margin: 0 auto;
  padding-bottom: 10px;
} 

#right_container span {
  font-style: italic;
  color: #003366;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  padding-left: 20px;
...

Code (markup):

and i have this in my radio.php page.

	<p class="center"><a href="JavaScript:location.reload(true);" target="radio">
	Refresh this page.</p>
	</a>

Code (markup):

but it is not centered,
what did i do wrong?

 

OKay, first I give you answer and then I tell you some bad stuff I see in the html : )


The p.center would work... except later in the css, you say otherwise (or actually, I did) : )

#right_container p {
  text-align: left;
  padding-top: 15px;
  padding-left: 10px;
}

Code (markup):

CSS stands for Cascading Style Sheets. Cascading in this case means a few things, some rules you MUST know.

One is that, if something is stated on a sheet, but then a conflicting statement is made further down, the second statement is used.

p {
color: red;
}

other stuff in css...

later...
p {
color: blue;
}

Here, all p's will be blue. Even though you said red, you later said blue so it uses blue.

Another cascade is specificity. Meaning that somthing more specific will be used instead of a general rule.

p {
color:red;
}

#container p {
color: blue;
}

#container p.center {
color: green;
text-align: center;
}

If all your p's on a page are actually inside a div called #container and have the class of center, then they will also be green.

If some p's are outside #container, they will be red, but those inside #container which don't have the class "center" will be blue.

The last command is the most specific. When banks compete, you win.

So, you have p.center in your css, but further down you have #rightcontainer p setting the text left. So, you can do two things:

If you really want all the text in the right side on all pages centered, just change it where I had text-align: left to center.

Or, if you only want it where you have the class of center (which is a nice thing to have if you don't want all the pages the same), then make it more specific with #rightcontainer p.center {text-align:center;} and either of those should do it.

And another cascade you should know is that if you do set inline styling with something like <font> or <div style=something...> then they will take precedence over the stylesheet at the top (where I had the css) and over externals (where you now have the css). If you have an internal (at the top of the html like I had) and an external (with a link like you now have), the internal will override the external. And over all these, the browser's own style overrides everything (like when someone sets fonts large).


Now, the html:
<link href='style.css' rel='stylesheet' type='text/css' >

As far as I know, single quotes are just as valid as doubles, BUT if I made doubles for everything in the HTML, then this above must also have doubles. That is, don't mix the two (ESP if you are going to have javascript inside the html!)

<center><MARQUEE direction="left" loop="20" width="98%"><STRONG><h2>Welcome to AbsoluteHabbo! Bringing you EVERYTHING. Now!<h2></STRONG></MARQUEE></center>
I'd add the marquee styling to the css, NOT have it sit in the html. Also, use lower case letters for your tags. No <STRONG> but <strong>. Lastly, AVOID <center> as it's deprecated. To center things, use either the margin:0 auto; or text-align:center depending on what it is. I think marquees are inline elements (and deprecated but if I really wanted a marquee I'd be like, fuck it, just use marquee as it's easy).

<p class="Center"><b>DJ Says:</b></p><p class="center">
<link rel="StyleSheet" href="style_public.css" type="text/css">

Try to use lower case letters. Notice you have "Center" in your html but "center" in your css. The css will only work for "center". You'd either have to change one or the other as the important thing is that they are the same.
Also, instead of <b>s, you should use something like spans or ems and set them in the css... though I realise those are really quickie texts that will not sit there long, but just so you know for anything long term.
And adding the link in the middle is no no.

So far, so good. Keep plugging at it.

 

well i have another person who works on this site too (who is a fucking DUMBASS) he tried to do a marquee like <text scroll left>hey everybody</text> and he doesnt know php, css or anything important like that -.- and he loves the shift button. but i will do what you said.

you are a genius

 

use width in % not in px. you can take help from http://couponalbum.com. In this way your site will also become stretchable