Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 30
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Unhappy Can't move text to the right side of my design

    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;



    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/
    Last edited by AcAnimate; 06-09-2010 at 01:47 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Oh yeah, sorry

    This is my stylesheet:
    Code:
    #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:
    Code:
    <!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>

  • #4
    New Coder
    Join Date
    Apr 2010
    Location
    Norfolk, UK
    Posts
    34
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.
    Last edited by craftygeek; 06-09-2010 at 02:04 PM.

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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.
    Last edited by AcAnimate; 06-09-2010 at 05:43 PM.

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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..

  • #7
    New Coder
    Join Date
    Jun 2010
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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>

  • #8
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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:
    Code:
    	<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:

    Code:
    #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?

  • Users who have thanked Scriptet for this post:

    AcAnimate (06-10-2010)

  • #9
    New Coder
    Join Date
    Jun 2010
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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 !

  • #10
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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):
    #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.
    Last edited by Scriptet; 06-09-2010 at 07:15 PM.

  • #11
    New Coder
    Join Date
    Jun 2010
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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:
    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>

  • #12
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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

  • #13
    New Coder
    Join Date
    Jun 2010
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Already tried that, it made no difference at all

  • #14
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Are you sure? Remember it's meant to be:

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

  • #15
    New Coder
    Join Date
    Jun 2010
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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
    Last edited by AcAnimate; 06-09-2010 at 07:46 PM.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •