登录 | 注册 | FAQ
Anonymous

Relatively speaking it's OK- but...

+ 发表回复

7 篇帖子 分页: 1 / 1


Relatively speaking it's OK- but...

merlin » 周四 2月 24, 2011 12:56 am

Hi

One of the biggest problems that I’ve come across while trying to learn HTML/CSS is the “position:absolute and position:relative” . Where and when to use them – and even where not to use them. I try to think of containers stacked on top of each other with the contents inside them arranged separately. However, I often end with an unholy mess on the page.
In the exercise below I’ve managed - after a lot of trial and error - to get the text-boxes to hang together as I want them but even to my novice eye the code looks clunky. If anyone can suggest how the code could be more efficient I would love to hear.
One more point if I can stretch your patience a bit further. I’ve used both pixel units and percentage units to place some of the boxes in the exercise. Both work fine but I would like to know which is the best to use consistently.

Thanks a million


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>LIST EXAMPLES</title>

<style type="text/css">

.c {text-align:center;}

body {
background-image:url(pictures/texture5.jpg);
font-size:2em; font-family:arial_black;
}

.container2 {
width:99%;
height:700px;
}

.textbox {
width:25%;
height:300px;
background:peachpuff;
border:solid red 5px;
margin-left:20px;
font-family:arial_black;
font-weight:bold;
padding:10px;
}

.boxheading {font-size:.6em; text-align:center;}


</style>

</head>

<body>

<h1 class=c > EXAMPLES OF LISTS</h1>
<h3 class=c >UNORDERED LISTS</H3>



<div class=textbox style="position:absolute;left:5%; ">
<DIV CLASS= boxheading>LIST STYLE TYPE = DISK</DIV>

<ul style="list-style-type:disk;">

<li>BREAD </li>
<li>MILK </li>
<li>BEANS </li>
<li>PEARS </li>
<li>ORANGES </li>

</ul>
</div> <!--textbox-->


<div class=textbox style="position:absolute; left:35%;">
<div CLASS= boxheading> LIST STYLE TYPE = CIRCLE</DIV>

<ul style="list-style-type:circle;">

<li>BREAD </li>
<li>MILK </li>
<li>BEANS </li>
<li>PEARS </li>
<li>ORANGES </li>

</ul>
</div> <!--textbox-->

<div class=textbox style="position:absolute; left:65%; ">
<div CLASS= boxheading> LIST STYLE TYPE = SQUARE</DIV>

<ul style="list-style-type:square;">

<li>BREAD </li>
<li>MILK </li>
<li>BEANS</li>
<li>PEARS </li>
<li>ORANGES </li>

</ul>
</div> <!--textbox-->


<div class=textbox style="position:absolute; left:5%;top:600PX">
<div CLASS= boxheading> LIST STYLE TYPE = NONE</DIV>

<ul style="list-style-type:none;">

<li>BREAD </li>
<li>MILK </li>
<li>BEANS </li>
<li>PEARS </li>
<li>ORANGES </li>

</ul>
</div> <!--textbox-->


<!--XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->

<h3 class=c style="position:relative; top:690PX;">ORDERED LISTS</H3>

<div class=container2 style="position:relative; top:670px; ">


<div class=textbox style="position:absolute; left:5%; ">
<div CLASS= boxheading> LIST STYLE TYPE = LOWER-ROMAN &#160</div>
<ul style="list-style-type:lower-roman;">

<li>Sebastian Vettel </li>
<li>Fernando Alonso </li>
<li>Mark Webber </li>
<li>Lewis Hamilton </li>
<li>Jenson Button </li>

</ul>
</div> <!--textbox-->


<div class=textbox style="position:absolute; left:35%;">
<div class= boxheading> LIST STYLE TYPE = UPPER-ROMAN &#160</div>

<ul style="list-style-type:upper-roman;">
<li>Sebastian Vettel </li>
<li>Fernando Alonso </li>
<li>Mark Webber </li>
<li>Lewis Hamilton </li>
<li>Jenson Button </li>

</ul>
</div> <!--textbox-->


<div class=textbox style="position:absolute; left:65%;">
<div class= boxheading> LIST STYLE TYPE = LOWER-ALPHA&#160 &#160</DIV>

<ul style="list-style-type:lower-alpha;">

<li>Sebastian Vettel </li>
<li>Fernando Alonso </li>
<li>Mark Webber </li>
<li>Lewis Hamilton </li>
<li>Jenson Button </li>

</ul>
</div> <!--textbox-->


<div class=textbox style="position:absolute; left:5%;top:340px;">
<div class= boxheading> LIST STYLE TYPE = UPPER-ALPHA &#160 &#160</DIV>

<ul style="list-style-type:upper-alpha;">

<li>Sebastian Vettel </li>
<li>Fernando Alonso </li>
<li>Mark Webber </li>
<li>Lewis Hamilton </li>
<li>Jenson Button </li>

</ul>
</div> <!--textbox-->


<div class=textbox style="position:absolute; left:35%;top:340px;">
<div CLASS= boxheading> LIST STYLE TYPE = &#160 &#160 &#160 DECIMAL &#160 &#160 &#160</DIV>

<ul style="list-style-type:decimal;">


<li>Sebastian Vettel </li>
<li>Fernando Alonso </li>
<li>Mark Webber </li>
<li>Lewis Hamilton </li>
<li>Jenson Button </li>

</ul>
</div> <!--textbox-->



<div class=textbox style="position:absolute; left:65%;top:340px;">
<div style="position:absolute;left:15%;top:45%;" >

<a href="#" >
BACK TO TOP
</a>

</div><!--textbox-->
</div><!--container2-->


</body>
</html>
头像

merlin

  • 帖子: 44
  • 注册: 周日 12月 19, 2010 3:31 pm

Re: Relatively speaking it's OK- but...

merlin » 周四 2月 24, 2011 12:31 pm

Hi CubeSquare

Many thanks for your full and detailed crit, comments and explanations.

First, the page is purely an exercise so there is a fair bit of experimentation going on.

Mixing percentages and pixle units was :
A. to get used to using both units
B. to see if there were any appreciable difference in using one over the other.
I had this idea that using percentages for the width of a container would mean that it would be the full width of any resolution and, therefore, more compatible with any resolution.
I (without thinking about it) wasn’t concerned with 99% as I would round it up to 100% when using calculations within it. I was sure the one percentage point wouldn’t be significant in pixel units. However, of course, (now thinking about it!) it would be 10 pixels on your resolution. OK. So, things in pixels from now on.
By the way, my reason for using 99% as opposed to 100% for the width declaration was that – on my browser anyway – a 100% width declaration results in a scroll bar appearing along the bottom albeit for a smidgen of a shift.

Your explanation of em’s crystallised things a little and it is a unit that I will try and employ in the future.

I was under the impression that if the declared font family wasn’t available the browser would just fall back to it’s default font. As the font style wasn’t particularly important in this exercise ( just me experimenting with one I’d seen on a list and liked ) I only declared one.
My font list shows that Arial and Arial Black are two distinct fonts. Therefore, I take it that black, in this case, is actually part of the family name.

I kept all the styles either embedded or inline in order to keep things simple and easier to relate to by people like your good self. Of course, as I get to more complex multi-page stuff I realise I will need to produce a separate style sheet.

Class declarations without quotes worked fine in my browser but I’ll take on board what you’ve said and use quotes in future.

Once again, CubeSquare, many thanks for your time and expertise.
头像

merlin

  • 帖子: 44
  • 注册: 周日 12月 19, 2010 3:31 pm

Re: Relatively speaking it's OK- but...

merlin » 周六 2月 26, 2011 11:27 am

Hi CubeSquare

Thanks for your additional comments – and encouragement.

Been away for a couple of days but took the laptop with me. I think I’ve managed to instigate most of your recommendations – and a few additions.

Thanks again for helping me clean up my act !

The new code:-


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">


<html>

<head>
<title>LIST EXAMPLES</title>


<style type="text/css">

.c {text-align:center;}


body {
background-image:url(pictures/texture5.jpg);
font-size:2em; font-family:arial_black;
}

.container1 {
width:1230px;
height:750px;

position:relative;
left:0px;
top:0px;

}

.container2 {
width:1230px;
height:875px;

position:relative;
left:0px;
top:0px;

}

.container3 {
width:1230px;
height:875px;

position:relative;
left:0px;
top:0px;

}


.textbox {
width:310PX;
height:310px;
background:peachpuff;
border:solid red 5px;
font-family:arial_black;
font-weight:bold;
padding-left:20px;
}

.boxheading {font-size:.6em; text-align:center;}


</style>

</head>

<body>

<h1 class="c" > EXAMPLES OF LISTS</h1>
<h3 class="c" >UNORDERED LISTS</h3>

<div class="container1">

<div class="textbox" style="position:absolute; left:10px;">

<DIV CLASS= "boxheading">LIST STYLE TYPE = DISK</DIV>

<ul style="list-style-type:disk;">

<li>BREAD </li>
<li>MILK </li>
<li>BEANS </li>
<li>PEARS </li>
<li>ORANGES </li>

</ul>
</div>


<div class="textbox" style="position:absolute; left:450px;">
<div CLASS= "boxheading"> LIST STYLE TYPE = CIRCLE</DIV>

<ul style="list-style-type:circle;">

<li>BREAD </li>
<li>MILK </li>
<li>BEANS </li>
<li>PEARS </li>
<li>ORANGES </li>

</ul>
</div> <!--textbox-->

<div class="textbox" style="position:absolute; left:900px; ">
<div CLASS= "boxheading"> LIST STYLE TYPE = SQUARE</DIV>

<ul style="list-style-type:square;">

<li>BREAD </li>
<li>MILK </li>
<li>BEANS</li>
<li>PEARS </li>
<li>ORANGES </li>

</ul>
</div> <!--textbox-->


<div class="textbox" style="position:absolute; left:10px;top:400PX">
<div CLASS= "boxheading"> LIST STYLE TYPE = NONE</DIV>

<ul style="list-style-type:none;">

<li>BREAD </li>
<li>MILK </li>
<li>BEANS </li>
<li>PEARS </li>
<li>ORANGES </li>

</ul>
</div> <!--textbox-->

<div class="textbox" style="position:absolute; left:450px;top:400PX">
<div CLASS= "boxheading"> LIST STYLE TYPE = CUSTOM </DIV>

<ul style="list-style:url(pictures/lamp.gif);">

<li>BREAD </li>
<li>MILK </li>
<li>BEANS </li>
<li>PEARS </li>
<li>ORANGES </li>

</ul>
</div> <!--textbox-->

</div><!--container1-->
<!--XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->



<div class="container2" >

<h3 class="c" >ORDERED LISTS</h3>


<div class="textbox" style="position:absolute; left:10px; ">
<div CLASS= "boxheading"> LIST STYLE TYPE = LOWER-ROMAN &#160</div>
<ul style="list-style-type:lower-roman;">

<li>Sebastian Vettel </li>
<li>Fernando Alonso </li>
<li>Mark Webber </li>
<li>Lewis Hamilton </li>
<li>Jenson Button </li>

</ul>
</div> <!--textbox-->


<div class="textbox" style="position:absolute; left:450px;">
<div class= "boxheading"> LIST STYLE TYPE = UPPER-ROMAN &#160</div>

<ul style="list-style-type:upper-roman;">
<li>Sebastian Vettel </li>
<li>Fernando Alonso </li>
<li>Mark Webber </li>
<li>Lewis Hamilton </li>
<li>Jenson Button </li>

</ul>
</div> <!--textbox-->


<div class="textbox" style="position:absolute; left:900px;">
<div class= "boxheading"> LIST STYLE TYPE = LOWER-ALPHA&#160 &#160</DIV>

<ul style="list-style-type:lower-alpha;">

<li>Sebastian Vettel </li>
<li>Fernando Alonso </li>
<li>Mark Webber </li>
<li>Lewis Hamilton </li>
<li>Jenson Button </li>

</ul>
</div> <!--textbox-->


<div class="textbox" style="position:absolute; left:10px;top:500px;">
<div class= "boxheading"> LIST STYLE TYPE = UPPER-ALPHA &#160 &#160</DIV>

<ul style="list-style-type:upper-alpha;">

<li>Sebastian Vettel </li>
<li>Fernando Alonso </li>
<li>Mark Webber </li>
<li>Lewis Hamilton </li>
<li>Jenson Button </li>

</ul>
</div> <!--textbox-->

<div class="textbox" style="position:absolute; left:450px;top:500px;">
<div CLASS= "boxheading"> LIST STYLE TYPE = &#160 &#160 &#160 &#160 DECIMAL &#160 &#160 &#160 &#160</DIV>

<ul style="list-style-type:decimal;">


<li>Sebastian Vettel </li>
<li>Fernando Alonso </li>
<li>Mark Webber </li>
<li>Lewis Hamilton </li>
<li>Jenson Button </li>

</ul>

</div> <!--textbox-->

</div><!--container2-->



<!--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->

<div class="container3">
<h3 class="c">STACKED & POSITIONED LISTS</h3>


<div class="textbox" style="position:absolute; left:10px;">
<div CLASS= "boxheading"> LIST = STACKED</DIV>

<ol>
<li> HYDROGEN </li>
<ul>
<li> 1 electron</li>

</ul>
<li> HELIUM </li>
<ul>
<li>2 electrons</li>
</ul>
<li> LITHIUM</li>
<ul>
<li> 2 electrons </li>

<li> 1 electrons </li>
</ul>

</ol>


</div><!--textbox-->


<div class="textbox" style="position:absolute; left:450px;">
<div CLASS= "boxheading"> LIST POSITION = INSIDE</DIV>

<ul style="list-style-type:square; list-style-position:inside;"
<li> When the list style position is set to "inside" any text after the first line will start underneath the the bullet </li>
</ul>
</div><!--textbox-->


<div class="textbox" style="position:absolute; left:900px;">
<div CLASS= "boxheading"> LIST POSITION = OUTSIDE</DIV>

<ul style="list-style-type:square; list-style-position:outside;"
<li> When the list style position is set to "outside" any text after the first line will start underneath the the first

letter </li>
</ul>

</div><!--textbox-->

<div class="textbox" style="position:absolute; left:450px;top:500px;">

<div style="position:absolute;left:45px; top:125px" >

<a href="#" >
BACK TO TOP
</a>

</div><!--a tag-->
</div><!--textbox-->


</div><!--container3-->


</body>
</html>
头像

merlin

  • 帖子: 44
  • 注册: 周日 12月 19, 2010 3:31 pm

Re: Relatively speaking it's OK- but...

merlin » 周日 2月 27, 2011 1:02 am

Hi CubeSquare

Thanks for the extra bit of info.

I’ll use hex codes for colours from now on.

I think this particular exercise has just about run it’s course.

I’ve started another one. It also involves text boxes but with a twist ! Hopefully, I can take some of the lessons from the list exercise into the new one.

Thanks again CubeSquare.
Take care.
Merlin
头像

merlin

  • 帖子: 44
  • 注册: 周日 12月 19, 2010 3:31 pm

Re: Relatively speaking it's OK- but...

merlin » 周日 2月 27, 2011 12:41 pm

Hi CubeSquare

I’ve looked at your figures and your web site just now. In a way I wish I’d left it until later because I’ve got a busy day ahead and I haven’t got the time figure out some discrepancies which are probably down to my inexperience. However, I know they are going to keep reoccurring to me throughout the day.

I’ll be back !!

Merlin
头像

merlin

  • 帖子: 44
  • 注册: 周日 12月 19, 2010 3:31 pm

Re: Relatively speaking it's OK- but...

merlin » 周日 2月 27, 2011 9:04 pm

OK. I’m probably being extremely stupid here but there is something that I need to be clear on. When I looked at your site and navigated to the page where you have taken the effort to reproduce a section of my exercise I saw three boxes nicely spaced out from the left. However, there was a great big margin on the right.

I run my screen at 1280 x 1024. If I run it lower than that I tend to get a small slice lopped off the edge of my Firefox browser window with no bottom scroll bar to let me edge it over.

When I adapted your code it came out exactly the same i.e. a large margin down the right hand side.

However, when I used percentages for the widths I managed – with a bit of fine tuning to allow for the 5 px border on the boxes – to get the boxes near enough symmetrical .

Now here comes the dumb question. If you don’t use percentages for the line of boxes how do you know that they will be displayed symmetrically at all resolutions when using just pixels?

My adapted code following your guidelines came out as:-




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">


<html>

<head>
<title>LIST EXAMPLES</title>


<style type="text/css">

.c {text-align:center;}


body {
background-COLOR:#B0E0E6;
font-size:1.7em; font-family:arial_black;

}


.textbox {
width:25%;
height:270px;
margin-top:45px;
margin-left:5.25%;
margin-right:0px;
margin-bottom-0px;
background:#ffdab9;
border:solid #FF0000 5px;
font-family:arial_black;
font-weight:bold;

}

.boxheading {font-size:.6em; text-align:center;}


</style>


</head>

<body>

<h1 class="c" > EXAMPLES OF LISTS</h1>
<h3 class="c" >UNORDERED LISTS</h3>


<div class="textbox"STYLE="FLOAT:LEFT;" >

<DIV CLASS= "boxheading">LIST STYLE TYPE = DISK</DIV>

<ul style="list-style-type:disk;">

<li>BREAD </li>

<li>MILK </li>
<li>BEANS </li>
<li>PEARS </li>
<li>ORANGES </li>

</ul>
</div>


<div class="textbox" STYLE="FLOAT:LEFT;">
<div CLASS= "boxheading"> LIST STYLE TYPE = CIRCLE</DIV>

<ul style="list-style-type:circle;">

<li>BREAD </li>
<li>MILK </li>
<li>BEANS </li>

<li>PEARS </li>

<li>ORANGES </li>

</ul>
</div> <!--textbox-->



<div class="textbox" STYLE="FLOAT:LEFT;">
<div CLASS= "boxheading"> LIST STYLE TYPE = SQUARE</DIV>

<ul style="list-style-type:square;">

<li>BREAD </li>

<li>MILK </li>
<li>BEANS</li>
<li>PEARS </li>
<li>ORANGES </li>

</ul>
</div> <!--textbox-->
头像

merlin

  • 帖子: 44
  • 注册: 周日 12月 19, 2010 3:31 pm

Re: Relatively speaking it's OK- but...

merlin » 周三 3月 02, 2011 6:47 pm

Hi CubeSquare

Glad I to be instrumental - albeit serendipitously - in allowing the scales to fall from your eyes :-)

Keep up the good work.
Merlin
头像

merlin

  • 帖子: 44
  • 注册: 周日 12月 19, 2010 3:31 pm


+ 发表回复

分页: 1 / 1