...

View Full Version : Can't move text to the right side of my design



AcAnimate
06-09-2010, 02:45 PM
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.

Let me show you;
http://img717.imageshack.us/f/img2s.png/
http://img404.imageshack.us/f/img1zt.png/

Please help me, if you can :)
All help appreciated!

(if the images doesn't work, here's the links)
http://img404.imageshack.us/f/img1zt.png/
http://img717.imageshack.us/f/img2s.png/

abduraooft
06-09-2010, 02:58 PM
Please help me, if you can
All help appreciated! When you look to get help on your html/css, please post it it here. Or a link to your page would be much better.

AcAnimate
06-09-2010, 03:00 PM
Oh yeah, sorry :)

This is my stylesheet:

#bodypart {
background-image: url("files/images/layout.png");
position:static;
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:756px;
height:495px;
font-family:Raavi;
}

#newspart {
position:relative;
color:white;
left:570px;
top:0px;
}
"newspart" is placed within "bodypart", as the images shows.
This is my index.php page:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<title>Ac Animate - Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script language="javascript">
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
else browserVer = "2";

if (browserVer == 1) {
b1 = new Image(128,97);
b1.src = "files/buttons_menu/mouseover/b1.png";
b2 = new Image(128,97);
b2.src = "files/buttons_menu/mouseover/b2.png";
c1 = new Image(128,97);
c1.src = "files/buttons_menu/mouseover/c1.png";
c2 = new Image(128,97);
c2.src = "files/buttons_menu/mouseover/c2.png";
d1 = new Image(128,97);
d1.src = "files/buttons_menu/mouseover/d1.png";
d2 = new Image(128,97);
d2.src = "files/buttons_menu/mouseover/d2.png";
}

function hiLite(imgDocID, imgObjName, comment) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
}}
</script>
</head>
<body>
<center>
<a href='home/'><img src='files/buttons_menu/mouseover/a2.png'></a>
<a href='http://www.acanimate.com/community/' target="_blank" onMouseOver="hiLite('b','b2','')" onMouseOut="hiLite('b','b1','')"><img name="b" src='files/buttons_menu/button_forum.png'></a>
<a href='games/' onMouseOver="hiLite('c','c2','')" onMouseOut="hiLite('c','c1','')"><img name="c" src='files/buttons_menu/button_games.png'></a>
<a href='contact/' onMouseOver="hiLite('d','d2','')" onMouseOut="hiLite('d','d1','')"><img name="d" src='files/buttons_menu/button_contact.png'></a>
</center>
<div id='bodypart'>
<?php include("information/body.html"); ?>
</div>
<div id='newspart'>
<?php include("information/news.html"); ?>
</div>
</body>
</html>

craftygeek
06-09-2010, 03:00 PM
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, 06: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, 07: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, 07: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.

This is how everything on the main "design box" is placed:

<div id='bodypart'>
<center>[ <b>Show all</b> | <a href='multiplayer/'>Multiplayer</a> | <a href='3-dimensional/'>3-dimensional</a> ]</center>
<div id='newspart'>
<?php include("../information/gamenews.html"); ?>
</div>
<div id='game1'>
<img src='../files/images/games/displays/batta_img_display.png' title='Battling Tanks'>
</div>
</div>

Scriptet
06-09-2010, 07:40 PM
I have already posted html codes above as you can see

Yes I did see but because you were using PHP includes we could not see how this part of the code would look.


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

You want to use floats margins and paddings to position your elements where you want them rather than the way you are currently doing..which is using co-ordinates..

Firstly: Because your #game1 image DIV appears before the #newspart text DIV we need to change the HTML so it appears before it.. so it should look like this:

<div id='game1'>
<img src='../files/images/games/displays/batta_img_display.png' title='Battling Tanks'>
</div>
<div id='newspart'>
<font size="1" face="Verdana">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<br>Ac Animate Community<br>

> 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:



#bodypart {
background-image: url("files/images/layout.png");
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:756px;
height:495px;
font-family:Raavi;
}

#newspart {
float:right;
color:white;
}
#game1 {
float:left;
padding-left:30px;
}


See how it works?

AcAnimate
06-09-2010, 07:49 PM
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, 08: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, 08: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.

Image: http://img815.imageshack.us/f/unavngivet.jpg/

Code:

<style type='text/css'>
form {display:inline;}
#game1 {float:left;padding-left:80px;padding-top:25px;}
#button1 {float:left;padding-left:0px;padding-top:50px;}
#game2 {float:left;padding-left:50px;padding-top:25px;}

</style>

In the BODY tags (inside "bodypart"-DIV):

<div id='game1'>
<img src='../files/images/games/displays/batta_img_display.png' title='Battling Tanks'>
</div>
<div id='button1'>
<form method="link" action="battlingtanks/"><br/><input type="submit" value="Game Information" style="height: 25px; width: 172px"></form>
</div>
<div id='game2'>
<img src='../files/images/games/displays/batta_img_display.png' title='Battling Tanks'>
</div>

Scriptet
06-09-2010, 08:24 PM
If you wanted the button below the image then why did you add form {display:inline;} ?

Try keeping the button in the game1 DIV but removing the display:inline

AcAnimate
06-09-2010, 08:29 PM
Already tried that, it made no difference at all

Scriptet
06-09-2010, 08:38 PM
Are you sure? Remember it's meant to be:



<div id='game1'>
<img src='../files/images/games/displays/batta_img_display.png' title='Battling Tanks'>
<form method="link" action="battlingtanks/">
<input type="submit" value="Game Information" style="height: 25px; width: 172px">
</form>
</div>
<div id='game2'>
<img src='../files/images/games/displays/batta_img_display.png' title='Battling Tanks'>
</div>

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, 08: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, 09: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, 09: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, 11: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'?

Here's what I've tried:
Setting newspart above bodypart. Didn't work.
Setting newspart below bodypart. Didn't work.

Here's the code in stylesheet:

#bodypart {
background-image: url("files/images/layout.png");
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:756px;
height:495px;
font-family: raavi, arial;
}

#newspart {
font-family: verdana, arial;
margin-top:10px;
width:186px;
float:top;
float:right;
color:white;
}
Code in index.php

<div id='bodypart'>
<?php include("information/body.html"); ?> <!-- All text in bodypart -->
<div id='newspart'>
<?php include("information/news.html"); ?> <!-- Text in newspart -->
</div>
</div>

AcAnimate
06-10-2010, 08:39 PM
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! :(

I have tried like this:

<style type='text/css'>
<?php
function is_chrome()
{
return(eregi("chrome", $_SERVER['HTTP_USER_AGENT']));
}
if(is_chrome())
{
echo "#game1 {float:left;padding-left:80px;padding-top:25px;}";
echo "#game2 {float:left;padding-left:50px;padding-top:25px;}";
echo "#game3 {float:left;padding-left:80px;padding-top:25px;}";
echo "#game4 {float:left;padding-left:50px;padding-top:25px;}";
}
else
{
echo "#game1 {float:left;padding-left:80px;padding-top:25px;}";
echo "#game2 {float:left;padding-left:50px;padding-top:25px;}";
echo "#game3 {float:left;padding-left:80px;padding-top:-100px;}";
echo "#game4 {float:left;padding-left:50px;padding-top:-550px;}";
}
?>
</style>
And here are the entire <body> tags:

<body>
<center>
<a href='../home/' onMouseOver="hiLite('a','a2','')" onMouseOut="hiLite('a','a1','')"><img name="a" src='../files/buttons_menu/button_home.png'></a>
<a href='http://www.acanimate.com/community/' target="_blank" onMouseOver="hiLite('b','b2','')" onMouseOut="hiLite('b','b1','')"><img name="b" src='../files/buttons_menu/button_forum.png'></a>
<a href='../games/'><img src='../files/buttons_menu/mouseover/c2.png'></a>
<a href='../contact/' onMouseOver="hiLite('d','d2','')" onMouseOut="hiLite('d','d1','')"><img name="d" src='../files/buttons_menu/button_contact.png'></a>
</center>
<div id='bodypart'>
<center>[ <b>Show all</b> | <a href='multiplayer/'>Multiplayer</a> | <a href='3-dimensional/'>3-dimensional</a> ]</center>
<div id='newspart'>
<?php include("../information/gamenews.html"); ?>
</div>
<div id='game1'>
<img src='../files/images/games/displays/batta_img_display.png' title='Battling Tanks'>
<form method="link" action="info_pages/Battling_Tanks/">
<input type="submit" value="Game Information" style="height: 25px; width: 170px">
</form>
</div>
<div id='game2'>
<img src='../files/images/games/displays/maze_img_display.png' title='Maze 3D'>
<form method="link" action="info_pages/Maze_3D/">
<input type="submit" value="Game Information" style="height: 25px; width: 170px">
</form>
</div>
<div id='game3'>
<img src='../files/images/games/displays/drisch_img_display.png' title='Driving School'>
<form method="link" action="info_pages/Driving_School/">
<input type="submit" value="Game Information" style="height: 25px; width: 170px">
</form>
</div>
<div id='game4'>
<img src='../files/images/games/displays/deda_img_display.png' title='Destroying Daniel'>
<form method="link" action="info_pages/Destroying_Daniel/">
<input type="submit" value="Game Information" style="height: 25px; width: 170px">
</form>
</div>
</div>
<?php include("../information/where.php"); ?>
</body>

But it changed nothing at all.. It's like the images are frozen

Scriptet
06-10-2010, 09:09 PM
Firstly remember things in normal flow go from left to right...

Your layout is some text at the top which is centered and then two main columns underneath right(?), left column showing games and right column with text...

So therefore based on the above your basic HTML would look like this:



<div id="content">
<div id="toptext">Centered text at top goes here</div>
<div id="leftCol">
Games and buttons go here
<!--#leftCol--></div>
<div id="rightCol">
Right text goes here
<!--#leftCol--></div>
<!--#content --></div>


So take this as an example for your layout:



<!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>Untitled Document</title>
<style type="text/css" media="screen">
#content{
width:756px;
min-height:485px; /*height of bg image so it shows*/
margin:0 auto; /*centers the content*/
overflow:auto;
background:url('http://acanimate.com/newdesign/files/images/layout.png') no-repeat;
}
#toptext{
text-align:center; /*centers the top text*/
font-family: raavi, arial;
}
#leftCol{
float:left;
width:420px; /*=width of 2 game blocks*/
margin-left:73px; /*this centers the left col in the white area*/
}
#leftCol #game{
float:left; /*so the game blocks appear next to each other*/
padding:20px; /*20px gap around each game block*/
width:170px; /*width of each game block*/
}
#rightCol{
float:right;
width:180px; /*width of the right col*/
color:#FFF; /*color of text inside the col*/
font-family: verdana, arial;
font-size:10px;
padding:10px 5px; /*gap around the right col*/
}
#footer{
width:736px;
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
}
</style>
</head>

<body>
<div id="content">

<div id="toptext">[ <b>Show all</b> | <a href='multiplayer/'>Multiplayer</a> | <a href='3-dimensional/'>3-dimensional</a> ]</div>

<div id="leftCol">

<div id='game'>
<img src='http://acanimate.com/newdesign/files/images/games/displays/batta_img_display.png' title='Battling Tanks'>
<form method="link" action="info_pages/Battling_Tanks/">
<input type="submit" value="Game Information" style="height: 25px; width: 170px">
</form>
</div>

<div id='game'>
<img src='http://acanimate.com/newdesign/files/images/games/displays/maze_img_display.png' title='Maze 3D'>
<form method="link" action="info_pages/Maze_3D/">
<input type="submit" value="Game Information" style="height: 25px; width: 170px">
</form>
</div>

<div id='game'>
<img src='http://acanimate.com/newdesign/files/images/games/displays/drisch_img_display.png' title='Driving School'>
<form method="link" action="info_pages/Driving_School/">
<input type="submit" value="Game Information" style="height: 25px; width: 170px">
</form>
</div>

<div id='game'>
<img src='http://acanimate.com/newdesign/files/images/games/displays/deda_img_display.png' title='Destroying Daniel'>
<form method="link" action="info_pages/Destroying_Daniel/">
<input type="submit" value="Game Information" style="height: 25px; width: 170px">
</form>
</div>

<!--#leftCol--></div>

<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>

<!--#content --></div>

<div id="footer">
you are here: /newdesign/games/
<!--#footer--></div>
</body>
</html>



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, 09: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, 11: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, 11: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/

Scriptet
06-11-2010, 12:38 AM
I'm guessing it's because your <li> tags aren't within a <ul> (unordered list (http://www.w3schools.com/tags/tag_ul.asp)) or <ol> (ordererd-list (http://www.w3schools.com/tags/tag_ol.asp)) tag.

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..

AcAnimate
06-11-2010, 01:12 AM
So this is how I've done:

<div id="leftCol">
<br/>
<b>Game information</b>
<ul>
<li> Game title: Battling Tanks </li>
<li> Game genre: War/Arcade</li>
<li> Game dimension: 2D</li>
<li> Game objective: Destroy enemy vehicle</li>
<li> Controls: Read in-game</li>
<li> Multiplayer: Yes</li>
<li> Levels: 8</li>
</ul>
<b>File information</b>
<ul>
<li> Filetype: *.exe</li>
<li> Filesize: 6,57MB</li>
</ul>
<br/>
<b>Images</b><br/>
<a href='images/game_image_01.png'><img src='images/game_image_01.png' border="1" width=100px; height=100px;></a>
<a href='images/game_image_02.png'><img src='images/game_image_02.png' border="1" width=100px; height=100px;></a>
<a href='images/game_image_03.png'><img src='images/game_image_03.png' border="1" width=100px; height=100px;></a>
<a href='images/game_image_04.png'><img src='images/game_image_04.png' border="1" width=100px; height=100px;></a>
<br/><br/><hr><br/>
<form method="link" action="../../">
<input type="submit" value="Return" style="height: 25px; width: 90px">
</form>
<form method="link" action="../../../files/games/Battling Tanks/Battling Tanks.exe">
<input type="submit" value="Download game" style="height: 25px; width: 170px">
</form>
<form method="link" action="script.html">
<input type="submit" value="Play now" style="height: 25px; width: 120px">
</form>

</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, 01: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, 01: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, 09: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, 11: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.

AcAnimate
06-12-2010, 12:32 AM
Fixed.

still need help with above question



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum