I have a design, with a white square and a small black square overlapping the right side of the white square. I want to place text on the black square, but when I move text over to this point, the entire site expands and gets a horizontal scrollbar.

At a guess, I'd say its either an issue with the container being floated right & the float not being cleared properly, or its down to there being a fixed height on the container....without seeing code I can't be of anymore use.

Edit - now you've posted code...

Its because you've got the position set to static.

AcAnimate

06-09-2010, 05:39 PM

I've used static on the container before, where it worked fine:
http://www.acanimate.com

but what should I use then? I can't use position:absolute; since it will appear differently on different resolutions.
position:fixed; or position:relative?
But relative to what?

EDIT: I have tried position:fixed; and position:relative; and they don't work. With position:relative; it looks the same, as position:static;
Without any position:....;, the scrollbar is still there.

Scriptet

06-09-2010, 06:11 PM

Just to clarify position:static; is the default for all elements, where everything is kept in the normal flow of the document and does not have a specified position. In-fact there's rarely ever a need to specify position:static; seeing as it is already the default, the only time would be if you needed to override a previous declaration or something. It's more

The way to position static elements where you want is to use floats (to align left/right) with a margins/paddings to create the gaps needed.

I'm confused on what effect you are trying to achieve here (e.g where is the newspart DIV supposed to be, inside the bodypart DIV?) but as a guess it seems you are using relative positioning with top and left values on your #newspart DIV when you could just use margins paddings etc.. without the specific positioning

To be able to provide a more specific answer we at least need the HTML after the PHP includes have been parsed so just copy and paste it from View>Source in your browser, or provide a link..

AcAnimate

06-09-2010, 06:28 PM

I have already posted html codes above as you can see, but I will just provide a link to the site itself I am working on.

http://acanimate.com/newdesign/games

Everything is placed where I want it to be, but please do notice the large horizontal scrollbar on the bottom.

> You must have posted at least<br>10 times<br>
> Your game must be approved<br>by the Ac Animate users<br>
<br>Your name will be added<br>on the game information page<br>along with your e-mail.<br>
You will receive a direct link<br>to the file so you can<br>use it for others to download<br>without visiting us.<br><font style="color:gray;">_________________</font><br>

</font> </div>

Next we want to use floats, paddings and margins in the CSS rather than the current technique so change it to something like this:

That is SO awesome! The exact help I was hoping for!!
I guess I were just lucky that I made it work on my current website then..

Thank you so much, Scriptet :D!

Scriptet

06-09-2010, 07:12 PM

No problem, also as some additional advice:

You are using HTML tags like:
<center></center>
and
<font size="1" face="Verdana"></font>

These are old HTML tags which were deprecated, because the same effect can be achieved by using CSS, since that is what CSS is for controlling presentation not the HTML.

For example you can change the font and font-size for an element in CSS like this (See more here (http://www.w3schools.com/css/css_font.asp)):
#name{ font-family: Verdana; font-size:12px; }

And you can also center by using text-align:center; if it's just a piece of text or margin:auto; if it's a DIV with a set width like you've done with your container.

Secondly you can avoid having to break up text in your newspart column like you have had to do here for example:

> Your game must be approved<br>by the Ac Animate users<br>

Just by setting a width on the newspart DIV..try it add width:190px; (because this is about the size of the black rounded box) to #newspart then you won't need to keep adding <br> all the time.

AcAnimate

06-09-2010, 07:19 PM

I have already done that in my stylesheet.

But I have encountered a problem with the padding.

I can't move a button below an image? I have tried putting the button on a new line within the same DIV tag, but it weren't on the correct position.
So I made a new DIV.
But I can't move it below the actualy image. It is stuck besides it.

Remember there is no need to put the button in it's own DIV, you can remove the <br> before the button and to remove display:inline from the form.

AcAnimate

06-09-2010, 07:43 PM

I have also tried that :(

Then it doesn't have the exact position it needs - look now: http://acanimate.com/newdesign/games/
You will see that the button is slightly off to the right

Scriptet

06-09-2010, 08:07 PM

Do you mean the tiny gap on the left, this is because browsers apply a default margin and padding to some elements like forms, so you need to add:

form{ padding:0; margin:0; }

AcAnimate

06-09-2010, 08:53 PM

I have tried it on all ways, it changes nothing

EDIT: I figured out why :)
Thank you for your help

AcAnimate

06-10-2010, 10:38 AM

Now I have a new problem..
Well, first of all - Internet Explorer displays the page different from Google Chrome and Mozilla Firefox - but I can fix this with a long times work, but what I need right now is this:
The 'newspart' is placed perfectly. But when I add text to the 'bodypart', the text in 'newspart' gets pushed down below the text in 'bodypart'.
My question is: (as I think this is the correct solution)
How do I make 'newspart' an independent container? So the text wont move if you change the text in 'bodypart'?

Well, first of all - Internet Explorer displays the page different from Google Chrome and Mozilla Firefox - but I can fix this with a long times workOkay, I can't fix this.
The margins and paddings has freaked up Internet Explorer completely! :(

<div id="rightCol">
Want your game hosted?<br/>Have it published on Ac Animate!<br/>Contact us today: <a href='../contact/'>Click here</a><br/><br/>Requirements:<br>> You must be a member of Ac Animate Community<br>> You must have posted at least 10 times<br>> Your game must be approved<br>by the Ac Animate users<br><br>Your name will be added on the game information page along with your e-mail.
You will receive a direct link to the file so you can use it for others to download without visiting us.<br><font style="color:gray;">_________________</font><br>
<!--#rightCol--></div>

Do not use funky JavaScript like you have done there is no need for it! Try to understand how the layout works.

AcAnimate

06-10-2010, 08:29 PM

Hahahaha, it works! :D

About my "funky JavaScript", it is what makes the main buttons change image when the mouse hovers above them :)

Please read my post right above yours, that is quite a larger problem :(
EDIT: It does look quite better now that I've used this example you told me to use. But it is not quite acceptable.
Here, have a look:
http://img99.imageshack.us/img99/4426/unavngivetqo.jpg

Scriptet

06-10-2010, 10:08 PM

Is the screenshot the same as http://acanimate.com/newdesign/games/

You might need to add:
form, input { padding:0; margin:0; }

What browser are you using btw?

AcAnimate

06-10-2010, 10:56 PM

I am using Google Chrome and testing in Google Chrome, Mozilla Firefox and Internet Explorer

Is the screenshot the same as http://acanimate.com/newdesign/games/The screenshot is from that page, just in Internet Explorer - yes.

form, input { padding:0; margin:0; }I have added this, and it looks decent with only a small gap between picture and button - nothing that ruins the page :)

In Google Chrome and Mozilla Firefox, the browsers automatically adds a new line after
<li>text</li>
This text is on a new lineHowever, in Internert Explorer it would look like this:
<li>text</li>This text is on a new line
What I am saying is, that Internet Explorer doesn't automatically make a new line (<br/>) after "<li></li>", but Firefox and Chrome does. But if I add the "<br/>" to make it display properly in Internet Explorer, the page will expand too much in Firefox and Chrome.
___________________
View this page in Firefox/Chrome and Internet Explorer: http://www.acanimate.com/newdesign/games/info_pages/Battling_Tanks/

See here (http://www.w3schools.com/tags/tag_li.asp)for usage of the <li> tag, basically in your case because it's an unordered list the <li>'s should be wrapped around <ul></ul> tags

Therefore the browsers are interpreting them differently because it's invalid code at the moment! When you sort it out they should all display the same, but again default margins and paddings are applied so you need to add:

ul, ol, li { margin:0; padding:0; }

Or to avoid having to do this for elements as you go along you can just add the reset at the top of the page as described earlier:

*{ margin:0; padding:0 ;}

Also on another side note you could use pure CSS rollovers instead of JS..

</div>In Internet Explorer it looks like this: http://img819.imageshack.us/img819/5373/67954530.jpg
And in Google Chrome it looks like this: http://img815.imageshack.us/img815/2775/59289229.jpg

Scriptet

06-11-2010, 12:29 AM

I think the bullet-points not showing are due to an IE7< bug because of
*{ margin:0; padding:0; }

Try adding:

ul{ list-style-type:bullet;}

As for the gap underneath the images remove the two <br/> before the <hr> for a moment just to see if everything lines up the same in the browsers then.

AcAnimate

06-11-2010, 12:52 AM

All right, so I used everything you've given me and I have tweaked the site a lot, since your last post - and now it seems to work. It doesn't look the same,
Google Chrome & Mozilla Firefox: http://img375.imageshack.us/img375/8818/unavngivetk.jpg
Internet Explorer: http://img824.imageshack.us/img824/6836/unavngivet2.jpg
but I think the small difference is acceptable :)

I'll post here again, if I run into more problems, but so far it works perfectly :).
Incedible how much I did wrong.. And it worked perfectly with my first website (weird...)!

-- You meantioned something about CSS rollovers, are these faster than the JS script?

abduraooft

06-11-2010, 08:18 AM

You meantioned something about CSS rollovers, are these faster than the JS script? Yes, when you are applying the javascript rollover effects in the onload event of the page. The major point is, there might be some users who do not have javascript support or who blocked javascript in their browsers. Such users won't see any rollover effect. So, a CSS based one is more reliable.

AcAnimate

06-11-2010, 10:03 AM

Good argument.
I will try making a CSS rollover then :)

EDIT: Can't make it work.
I have copied examples from several webpages and tried them but they don't work for me.