<imgs> and <inputs> etc are stretching to the full size of the div container.

seany123 · November 11, 2010

Code: [select]

#container {

text-align: left;

background-image:#000;

margin: 10px auto 10px auto;

border: black solid 20px;

width: 810px;

background-image: url('/images/content-bg.jpg');

background-position: top right;

-moz-border-radius:15px;

-webkit-border-radius:15px;

behavior:url(border-radius.htc);

}

i have the above code and im using it as a box on my website..

then i have

this html code:

Code: [select]

html>

<head>

<title>Welcome</title>

</head>

HELLO

</form>

</table>

</div>

</body>

</html>

haku · November 12, 2010

You don't have any image tags in there. And inputs are block level elements, so they will automatically expand to the full width that they can occupy. You need to set a width (or margins) on the input to stop it from stretching.

seany123 · November 13, 2010

no i dont have an image tag... but the same happens with the input button its stretches.

is there any other way i can stop it without assigning a width and height to everything??

haku · November 14, 2010

No.

seany123 · November 14, 2010

i dont understand though i have set the width and margin already in the table 10% and 10%

then i have to set the width and height again for the input button?

haku · November 15, 2010

Ignore all my previous posts - I don't know what I was talking about. Inputs don't stretch to the width of the container. Give us a link to your actual page, or show your actual code and it will be easier to help.

seany123 · November 15, 2010

okay here is the html/php page:

<?php
  
?>

<html>
    <head>
        <title>Welcome</title> 
        <link type="text/css" rel="stylesheet" href="css/test.css" /> 
    </head>
    <body>  
    <div id="centered">
This is with just the centered div
    </div>
<div id="centered">
	<table width="810px">
		<tr>
		This is with div table and tr... notice background image has now changed!!
		</tr>
	</table>
    </div>
<div id="centered">
	<table width="810px">
		<tr>
			<td>
				This is with div table and tr and td... notice background image has now changed!!<br/> WHY has the td made it so its now all in the middle... when i try and more tds all all screws ups.
			</td>
		</tr>
	</table>
    </div>	
    <div id="header_advert">
    <<<--- ADVERT HERE --->>>
    </div>
    <div id="footer">
     <div id="left">Copyright © 2010 MafiaKillerz.com All Rights Reserved</div>
     <div id="right"><a href="tos.php">TOS</a> | <a href="contact.php">Contact</a></div>
    </div>
    </div>
    </body>
</html>

here is the CSS page:

#container, *{
    height: 100%;
    background-image: url(/images/body-bg.jpg);    
}

*{
font-family: Arial;
    color: white;
}

.centered_old {
  clear: both;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 70%;
  height: 70%;
  margin: auto;
  background-image: url(/images/content-bg.jpg);
  border: black solid 20px;
  
   -moz-border-radius:15px;

   -webkit-border-radius:15px;

    behavior:url(border-radius.htc);  

}

#centered{ 
height: auto;
    text-align: left;
    margin: 10px auto 10px auto;
    border: black solid 20px; 
    width: 810px;
    background-position: top right;
    table-layout: fixed;
    background-image: url("/images/content-bg.jpg"); 
    
    -moz-border-radius:15px;

   -webkit-border-radius:15px;

    behavior:url(border-radius.htc);

}



#header_advert{
    text-align: center;
    border: black solid 20px; 
    width: 810px;
    height: 66px;
    background-image: url('/images/content-bg.jpg');
    border: black solid 20px;
    margin: 10px auto 10px auto;
    
    -moz-border-radius:15px;

   -webkit-border-radius:15px;

    behavior:url(border-radius.htc);
}

#footer{
    border: black solid 20px; 
    width: 810px;
    height: 15px;
    background-image: url(/images/content-bg.jpg);
    background-position: top right;
    border: black solid 20px;
    margin: 10px auto 10px auto;
    font-size: 10px;
    padding-top: 3px;
    padding-bottom: 3px;  
    
    -moz-border-radius:15px;

   -webkit-border-radius:15px;

    behavior:url(border-radius.htc);
}

#footer_old{
    clear: both;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 15px;
    width: 810px;
    margin: auto;
    margin-top: 90%;
    border: black solid 20px;   
    border-top: 20px solid black;
    border-bottom: 20px solid black;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 10px;
    height: 15px;
    color: #999;
    width: 790px;
    display: block;
    text-align: left;
    background-image: url(/images/content-bg.jpg);
    font-weight: bold;
    
    -moz-border-radius:15px;

   -webkit-border-radius:15px;

    behavior:url(border-radius.htc);
}
#footer #left a, #footer #right a{
    color: #FFF;
    text-decoration: none;
}
#footer #left a:hover, #footer #right a:hover{
    color: #bbb;
}
#footer #left{
    color: #FFF;
    margin-left: 10px;
    width: 350px;
    float: left;
    background-image: url(/images/content-bg.jpg);
}
#footer #right{
    color: #FFF;
    margin-right: 10px;
    width: 380px;
    float: right;
    text-align: right;
    background-image: url(/images/content-bg.jpg);
}

here is a link to where i have uploaded it to test.

http://mafiakillerz.com/test/test2.php

Basically what im trying to achieve is a index/title page which has a few containers (as seen on test page) and in the main container its split into different sections.... top 1/4 is for logo, then left would have picture.. right have login forms etc. and maybe a few other links and room for another table etc.

thanks for all help.

haku · November 15, 2010

Now you've lost me - I don't see any image tags OR input tags in your code, so I'm really not sure what you are asking.

seany123 · November 15, 2010

i didnt think i would need to add one.. but here look now

<?php
  
?>

<html>
    <head>
        <title>Welcome</title> 
        <link type="text/css" rel="stylesheet" href="css/test.css" /> 
    </head>
    <body>  
    <div id="centered">
This is with just the centered div
    </div>
<div id="centered">
	<table width="810px">
		<tr>
		This is with div table and tr... notice background image has now changed!!
		</tr>
	</table>
    </div>
<div id="centered">
	<table width="810px">
		<tr>
			<td>
				This is with div table and tr and td... notice background image has now changed!!<br/> WHY has the td made it so its now all in the middle... when i try and more tds all all screws ups.
			</td>
			<td>
				<input type='submit' name='button'>
			</td>
		</tr>
	</table>
    </div>	
    <div id="header_advert">
    <<<--- ADVERT HERE --->>>
    </div>
    <div id="footer">
     <div id="left">Copyright © 2010 MafiaKillerz.com All Rights Reserved</div>
     <div id="right"><a href="tos.php">TOS</a> | <a href="contact.php">Contact</a></div>
    </div>
    </div>
    </body>
</html>

its not just img or inpit tags though... im simply asking how can i set it so when i make a table it starts the first TR at the very top of the container rather than in the middle.

ALSO - how can i stop the background-image changing when i add these tags... <center> <table> etc

haku · November 15, 2010

Honestly, I don't even know where to begin, as you have a lot of issues before the ones that you are getting at, that if resolved will probably get rid of your issues (though open up new ones).

First: you shouldn't even be using tables in this layout. You have no tabular data. Scrap the tables altogether. This should solve your table issue, though it may open up another issue since I'm guessing you don't know how to do layouts without tables.

Second: You are missing a doctype. This is one of the single most important things you need in your document. Without it, you can basically give up all hope of ever being able to make your site cross-browser compatible. Add a doctype.

Third: You cannot have whitespace before your doctype. You have an empty line before your opening HTML tag. This line will be fine if you put your doctype before it, but if you put the empty line before your doctype, it will nullify the doctype.

Fourth: You shouldn't be using the center tag. It's deprecated. Leave it out. If you need to center things, you can center text with the CSS text-alignment attribute, or CSS margins set to auto.

Fifth: Avoid absolute positioning as much as possible. It should be used very rarely, and when you do use it, you should know exactly why you are using absolute positioning instead of another method. Absolute positioning is almost always not cross-browser/cross-monitor friendly.

Try fixing these things, and it will probably be easier to answer your questions. Sorry if it seems I'm being difficult, I'm not trying to be, but I feel like if I tried to figure out the answers to your questions, I'd just be showing you how to mask errors in something that is broken, rather than showing you how to build it properly in the first place (which is what I'm trying to do with this post).

After you've fixed these things, come back, show us your new code, and ask your questions (I'm guessing you will have some new ones), and it will be much easier to give the assistance you need.

seany123 · November 15, 2010

thankyou very much, your answer what pretty much on the money on what i needed to hear... thanks for the advice, i will be following it completely.

sean

Sign In

<imgs> and <inputs> etc are stretching to the full size of the div container.

Recommended Posts

seany123

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

seany123

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

seany123

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

seany123

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

seany123

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

seany123

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information