Hey Rick. Let me see if I can shed some insight on some of your
problems here.
You basic problem here is that you are using to much positioning. You
need to let the <div>'s do the work for you. Take out all the
absolute and relative positioning and the values associate with them
and you will see what I am talking about.
For Example:
Remove the positioning, as it isn't needed. You can produce the same
effect by setting margins. This will ensure there is always 50px from
the top of the page, and 250px from the left and right sides.
#dataentrybox {
margin: 50px 250px 0px 250px; (This goes
clockwise - top, right, bottom, left - and this will duplicate exactly
what you are doing with absolute)
border: 2px solid #333;
border-style: ridge;
background-color: #EDE8FF;
text-align: left;
}
Another option to make it always fit relative to the page size would
be the following:
#dataentrybox {
width: 80%;
margin: auto; (Auto margin will center the
left and right with the page.)
margin-top: 50px; (This will override the auto
for the top margin and give you 50px from the top.)
border: 1px ridge #000; (Just an example of
another way to do what you are above.)
background-color: #EDE8FF;
) (You don't really need the "text-align:
left" as this is the default in 99% of cases, but doesn't hurt
anything either.)
Removing the positioning from the "#titlebox" will make it fall in
line with the #dataentrybox <div> and keep it inside of the defined
<div>. Think of the <div> as a container, and when you use absolute
positioning you are removing the constraints already provided by the
<div>. In other words it looks like you are making it more
complicated than it needs to be. It isn't PHP. :)
#titlebox {
margin: 5px;
padding: 5px;
border: 1px solid #333;
}
Take those examples and go down the list. You will start seeing
things come together. I like messing with this stuff to keep my
skills up, and as "case studies" if you will to improve my skills, in
a minute I will post my version of your page. You can use it, or
just study it to see how I do it. I strive to keep my code as light
as possible, to work with or without styles (such as text browsers, or
people with styles turned off), and to make sure that they are to
standards so they work with screen readers, etc.
Ryan
On May 11, 5:22 pm, rickcasey <[email protected]> wrote:
> I'm a CSS newbie, and have some basic questions about box
> positioning.
>
> I've tried to answer my own questions by reading here, as well as CSS
> tutorials all over the place, to no avail; CSS is a slippery fish! But
> I do want to learn...
>
> Here is my CSS for trying to position a few simple boxes:
> #dataentrybox {
> position: absolute;
> top: 50px;
> left: 250px;
> right: 250px;
> height: 700px;
> border: 2px solid #333;
> border-style: ridge;
> background-color: #EDE8FF;
> text-align: left;
> }
>
> #row {
> padding: 2em;
> margin: 10px ;
> text-align:left;
> }
>
> #titlebox {
> position: relative;
> float: top;
> width: 100%;
> top: 0px;
> margin: 5px 5px 5px 5px;
> padding: 5px 5px 5px 5px;
> border: 1px solid #333;
> }
>
> #upperbox {
> position: absolute;
> width: 100%;
> top: 75px;
> margin: 5px 5px 5px 5px;
> padding: 5px 5px 5px 5px;
> border: 1px solid #333;
> }
>
> #lowerbox {
> position: absolute;
> width: 100%;
> top: 10px;
> left: 20px;
> margin: 0px 0px 0px 0px;
> padding: 10px 10px 10px 10px;
> border: 1px solid #333;
> }
>
> #btnbox {
> position: absolute;
> width: 100%;
> top: 500px;
> margin: 5px 5px 5px 5px;
> padding: 5px 5px 5px 5px;
> border: 1px solid #333;
> clear: both;
> }
>
> #statusbox {
> float: right;
> padding: 5px;
> border: 1px solid #333;
> }
>
> #leftbox {
> position: abolute;
> top: 400px;
> left: 5px;
> margin-top: 2em;
> margin-left: 1em;
> margin-bottom: 3em;
> border: 1px solid #333;
> }
>
> #rightbox {
> position: abolute;
> top: 400px;
> right: 100px;
> margin-top: 2em;
> margin-left: 1em;
> margin-bottom: 3em;
> border: 1px solid #333;
> }
>
> form p {
> margin: 0;
> padding: 0;
> padding-top: 5px;
> }
>
> form p label {
> font: 0.9em Arial, Helvetica, sans-serif;
> }
> form p boldlabel {
> font-weight: bold;
> }
>
> And then, here's my code using these div's (this also used PHP, which
> can be ignored):
> <div id="dataentrybox">
> <div id=titlebox>
> <div align="center">
> <h3>DNA Portal: Moved From/To Maintenance
> Screen</h3>
> </div>
> </div>
>
> <h3>List of Moves:</h3>
> <p>
> <select name="MovedSamplesList"
> onchange="editMove(this);"
> style="width:500; align:center">
> <?php
> $i=0;
> while ($i < $num_MovedSamples) {
> $samp =
> pg_fetch_row($showMoved_result);
> echo '<option
> value="'.$samp[1].'">'.$samp[0];
> $i++;
> }
> ?>
> </p>
> <p>
> <h3>Move From</h3>
> </p>
> <p>
> Box from: <input name=box_from size=10 >
> </p>
> <p>
> Row from:
> <select name="row_from">
> <option value ="A">A</option>
> <option value ="B">B</option>
> <option value ="C">C</option>
> <option value ="D">D</option>
> <option value ="E">E</option>
> <option value ="F">F</option>
> <option value ="G">G</option>
> <option value ="H">H</option>
> </select>
> </p>
> <p>
> Column from:
> <select name="col_from">
> <option value ="1">1</option>
> <option value ="2">2</option>
> <option value ="3">3</option>
> <option value ="4">4</option>
> <option value ="5">5</option>
> <option value ="6">6</option>
> <option value ="7">7</option>
> <option value ="8">8</option>
> <option value ="9">9</option>
> <option value ="10">10</option>
> <option value ="11">11</option>
> <option value ="12">12</option>
> </select>
> </p>
> <p>
> <h3>Move To</h3>
> </p>
> <p>
> Box To
> <input name=box_to size=10 >
> </p>
> <p>
> Row To:
> <select name="row_to">
> <option value ="A">A</option>
> <option value ="B">B</option>
> <option value ="C">C</option>
> <option value ="D">D</option>
> <option value ="E">E</option>
> <option value ="F">F</option>
> <option value ="G">G</option>
> <option value ="H">H</option>
> </select>
> </p>
> <p>
> Column To:
> <select name="col_to">
> <option value ="1">1</option>
> <option value ="2">2</option>
> <option value ="3">3</option>
> <option value ="4">4</option>
> <option value ="5">5</option>
> <option value ="6">6</option>
> <option value ="7">7</option>
> <option value ="8">8</option>
> <option value ="9">9</option>
> <option value ="10">10</option>
> <option value ="11">11</option>
> <option value ="12">12</option>
> </select>
> </p>
> <div id=btnbox>
> <input type="button" name="save" value="Save"
> onclick="submitForm('save')" class="btn" disabled>
> <input type="button" name="new" value="New"
> onclick="submitForm('new')" class="btn">
> <input type="button"
> onClick=location.href='dataMaintMenu.php'
> value="Data Maintenance" class="btn">
> <input type="button"
> onClick=location.href='DNA_Portal_Menu.php'
> value="Main Menus" class="btn">
> <input type="button" name="logout"
> onClick="location.href='logout.php'" value="Logout" class="btn">
> <!-- This button displays the screen state. -->
> <div id=statusbox>
> screen state: <input type="button" name=state
> value=<?php echo
> $scrstate ?>
> </div>
> </div>
> </div>
> </form>
>
> I put in the solid borders around the div's so I can see where they
> are.
>
> Anyway, this looks pretty awful; to see it, I put up a simple
> screenshot at:http://sites.google.com/site/rickcaseysite/Home/bad-css-example
>
> Particularly baffling is how the select element covers up the inline
> element <h3>Move From</h3> that comes right after it; but, like I
> said, I'm new to CSS.
>
> I've read some really excellent posts here, so I'm in hopes some
> wizards might contribute a few helpful insights...
>
> thanks,
> --rick in Boulder
>
> --
> --
> You received this because you are subscribed to the "Design the Web with CSS"
> at Google groups.
> To post: [email protected]
> To unsubscribe: [email protected]
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
