7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

DIV / CSS HELP

by solidsoul
6 replies
  • WEB DESIGN
    • |
hello all so I'm playing around with a splash screen for my son and I'm trying to get the DIV to stick to the place I created for it in the image.. visit www.jeffdesjardins.com/games/zombiequest to see what I mean

I have it starting in the right location using css but it moves all around when the screen size changes..

how can I keep this static right where it belongs AND make it bigger to fit the area better.. like is there a way to make the input field have bigger font and bigger area to fill that grey bar?

thanks in advance
desjardins, Jeff
#css #div
  • Profile picture of the author solidsoul
    noboby got anything for this?
    Signature
    {{ DiscussionBoard.errors[5817209].message }}
  • Profile picture of the author iuditg
    I didn't get what you are trying to achieve.

    But if you want to make your input size bigger, then go to your css file and add

    input{width:100px;height:100px;font-size:18px;}

    You can change those to whatever you want.

    Also from what I saw from the source code you are using tables, I would suggest you to use Divs as they are easier to manage and quicker to setup.
    Signature
    {{ DiscussionBoard.errors[5817414].message }}
  • Profile picture of the author danielrandy
    i didn't understand what you mean. Kindly repeat again in easy words
    {{ DiscussionBoard.errors[5817741].message }}
  • Profile picture of the author solidsoul
    well I have a Table Setup (I can attempt to change to DIV) however I'm just playing with something for my son - there is an image as the BK of the table so I laid a DIV over a certain spot of the BK image where I created a little grey box that I wanted the input field to be so to seem like it was in that grey box.. I have it there as it stands HOWEVER when I min the screen or change resolution it moves it don't stay where I placed it.. been doing some research finding alot of css but anything I have tried has failed like setting absolute position that didn't work ..
    Signature
    {{ DiscussionBoard.errors[5818645].message }}
    • Profile picture of the author ronc0011
      Looking quickly at the markup I'm wondering why you didn't just set the whole thing up in a couple of nested divs', something like...
      HTML
      Code:
      <divid="wrapper">
<divid="locator">
<inputname="username"width="394"height="28"type="text"maxLength="766"/>
</div>
　
</div>
      CSS
      Code:
      #wrapper
{
float:left;
margin:20pxauto30pxauto;
background-image:url(images/zombie_splash.jpg);
background-repeat:no-repeat;
}
　
#locator
{
position:relative;
top:488px;
left:606px;
}
      BTW I think it's the "absolute" value you are using for the "position" attribute in your CSS file. that's causing your text box to float around
      {{ DiscussionBoard.errors[5820184].message }}
      • Profile picture of the author solidsoul
        Originally Posted by ronc0011 View Post

        Looking quickly at the markup I'm wondering why you didn't just set the whole thing up in a couple of nested divs', something like...
        HTML
        Code:
        <divid="wrapper">
<divid="locator">
<inputname="username"width="394"height="28"type="text"maxLength="766"/>
</div>
　
</div>
        CSS
        Code:
        #wrapper
{
float:left;
margin:20pxauto30pxauto;
background-image:url(images/zombie_splash.jpg);
background-repeat:no-repeat;
}
　
#locator
{
position:relative;
top:488px;
left:606px;
}
        BTW I think it's the "absolute" value you are using for the "position" attribute in your CSS file. that's causing your text box to float around
        Thank you soo much that worked perfectly...
        Signature
        {{ DiscussionBoard.errors[5824232].message }}

Trending Topics