0

In the following css and html document can anyone tell me why my page width css code isn't working?

mystyle.css

#page
{
    width: 25%;
}

Here's the html page.

<html>
<head>
<title>Bail Bonding</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

<form action="bail.php" method="POST">

<div id="page">
<table width="25%">

<tr> <td>First Name:</td> 
     <td align="right"> <input type="text" name="fname"></td></tr>

<tr> <td>Last Name:</td>
     <td align="right"> <input type="text" name="lname"></td></tr>

<tr> <td>Address:</td>
     <td align="right"> <input type="text" name="address"</td></tr>

<tr> <td>City:</td>
     <td align="right"> <input type="text" name="city"</td></tr>

<tr> <td>Zip code:</td>
     <td align="right"> <input name="zip"></td></tr>

<tr> <td>Sate: <select name="sate">

    <option value="NONE"> Select</option>
    <option value="AL"> AL - Alabama</option>
    <option value="AK"> AK - Alaska</option>
    <option value="AZ"> AZ - Arizona</option>
    <option value="AR"> AR - Arkansas</option>
    <option value="CA"> CA - Califonria</option>
    <option value="CO"> CO - Colorado</option>
    <option value="CT"> CT - Connecticut</option>
    <option value="DE"> DE - Delaware</option>
    <option value="FL"> FL - Florida</option>
    <option value="GA"> GA - Georgia</option>
    <option value="HI"> HI - Hawaii</option>
    <option value="ID"> ID - Idaho</option>
    <option value="IL"> IL - Illinois</option>
    <option value="IN"> IN - Indiana</option>
    <option value="IA"> IA - Iowa</option>
    <option value="KS"> KS - Kansas</option>
    <option value="KY"> KY - Kentucky</option>
    <option value="LA"> LA - Louisiana</option>
    <option value="ME"> ME - Maine</option>
    <option value="MD"> MD - Maryland</option>
    <option value="MA"> MA - Massachusetts</option>
    <option value="MI"> MI - Michigan</option>
    <option value="MN"> MN - Minnesota</option>
    <option value="MS"> MS - Mississippi</option>
    <option value="MO"> MO - Missouri</option>
    <option value="MT"> MT - Montana</option>
    <option value="NE"> NE - Nebraska</option>
    <option value="NV"> NV - Nevada</option>
    <option value="NH"> NH - New Hampshire</option>
    <option value="NJ"> NJ - New Jersey</option>
    <option value="NM"> NM - New Mexico</option>
    <option value="NY"> NY - New York</option>
    <option value="NC"> NC - North Carolina</option>
    <option value="ND"> ND - North Dakota</option>
    <option value="OH"> OH - Ohio</option>
    <option value="OK"> OK - Oklahoma</option>
    <option value="OR"> OR - Oregon</option>
    <option value="PA"> PA - Pennsylvania</option>
    <option value="RI"> RI - Rhode Island</option>
    <option value="SC"> SC - South Carolina</option>
    <option value="SD"> SD - South Dakota</option>
    <option value="TN"> TN - Tennessee</option>
    <option value="TX"> TX - Texas</option>
    <option value="UT"> UT - Utah</option>
    <option value="VT"> VT - Vermont</option>
    <option value="VA"> VA - Virginia</option>
    <option value="WA"> WA - Washington</option>
    <option value="WV"> WV - West Virginia</option>
    <option value="WI"> WI - Wisconsin</option>
    <option value="WY"> WY - Wyoming</option>
    </select></td><td><input type="submit"></td></tr>
</form>
</table>
</div>
</body>
</html>
4
Contributors
4
Replies
32
Views
4 Years
Discussion Span
Last Post by crescendo
1

So it looks like your link element is in the wrong place, should be in the head section.. but since I've never tried to have it in the body section, I tried your code as is and it appears that it works fine.

I guess, I assume that the reason for it normally being in the head section is so that the style sheet is downloaded before the page renders...makes sense.

Anyway, your code looks good. When I run it locally here, the div that surrounds your content is taking up 25% of my screen. If I change the value to 50%, the div width adjusts accordingly.

Why do you beleive its not correct?

Edited by JorgeM

1

yes jorgem is correct. I just modified background color to make it clear.The page class div takes 25% of body.To represent this,i have used three different colors:-
1 body background color
2 div background color(changed width to 50%)
3 table background color

<html>
<head>
<title>Bail Bonding</title>
<style type="text/css">
#page
{
    width: 50%;
    background:blue;
}
</style>
</head>

<body style="background:red">
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

<form action="bail.php" method="POST">

<div id="page">
<table width="25%" style="background:green">

<tr> <td>First Name:</td> 
     <td align="right"> <input type="text" name="fname"></td></tr>

<tr> <td>Last Name:</td>
     <td align="right"> <input type="text" name="lname"></td></tr>

<tr> <td>Address:</td>
     <td align="right"> <input type="text" name="address"</td></tr>

<tr> <td>City:</td>
     <td align="right"> <input type="text" name="city"</td></tr>

<tr> <td>Zip code:</td>
     <td align="right"> <input name="zip"></td></tr>

<tr> <td>Sate: <select name="sate">

    <option value="NONE"> Select</option>
    <option value="AL"> AL - Alabama</option>
    <option value="AK"> AK - Alaska</option>
    <option value="AZ"> AZ - Arizona</option>
    <option value="AR"> AR - Arkansas</option>
    <option value="CA"> CA - Califonria</option>
    <option value="CO"> CO - Colorado</option>
    <option value="CT"> CT - Connecticut</option>
    <option value="DE"> DE - Delaware</option>
    <option value="FL"> FL - Florida</option>
    <option value="GA"> GA - Georgia</option>
    <option value="HI"> HI - Hawaii</option>
    <option value="ID"> ID - Idaho</option>
    <option value="IL"> IL - Illinois</option>
    <option value="IN"> IN - Indiana</option>
    <option value="IA"> IA - Iowa</option>
    <option value="KS"> KS - Kansas</option>
    <option value="KY"> KY - Kentucky</option>
    <option value="LA"> LA - Louisiana</option>
    <option value="ME"> ME - Maine</option>
    <option value="MD"> MD - Maryland</option>
    <option value="MA"> MA - Massachusetts</option>
    <option value="MI"> MI - Michigan</option>
    <option value="MN"> MN - Minnesota</option>
    <option value="MS"> MS - Mississippi</option>
    <option value="MO"> MO - Missouri</option>
    <option value="MT"> MT - Montana</option>
    <option value="NE"> NE - Nebraska</option>
    <option value="NV"> NV - Nevada</option>
    <option value="NH"> NH - New Hampshire</option>
    <option value="NJ"> NJ - New Jersey</option>
    <option value="NM"> NM - New Mexico</option>
    <option value="NY"> NY - New York</option>
    <option value="NC"> NC - North Carolina</option>
    <option value="ND"> ND - North Dakota</option>
    <option value="OH"> OH - Ohio</option>
    <option value="OK"> OK - Oklahoma</option>
    <option value="OR"> OR - Oregon</option>
    <option value="PA"> PA - Pennsylvania</option>
    <option value="RI"> RI - Rhode Island</option>
    <option value="SC"> SC - South Carolina</option>
    <option value="SD"> SD - South Dakota</option>
    <option value="TN"> TN - Tennessee</option>
    <option value="TX"> TX - Texas</option>
    <option value="UT"> UT - Utah</option>
    <option value="VT"> VT - Vermont</option>
    <option value="VA"> VA - Virginia</option>
    <option value="WA"> WA - Washington</option>
    <option value="WV"> WV - West Virginia</option>
    <option value="WI"> WI - Wisconsin</option>
    <option value="WY"> WY - Wyoming</option>
    </select></td><td><input type="submit"></td></tr>
</form>
</table>
</div>
</body>
</html>
0

I want the content on the page to resize as the browser is resized by the user but it isn't working for me. Am I going about it the wrong way? Thanks guys.

0

Firsly move your

<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

to the head section of your screen.

If you want to make your website responsive, you must use frameworks or twitter bootstraps and stuff like SASS.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.