19 replies [Last post]
n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 1 day ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

Hello,

Here are screenshots of pages I need to create. I would like a few opinions. Should I use {float} or should I use {position} for this layout?

Thanks.

Edit: URL

Edit: More appropriate subject

This is my big chance . . . yep, I blew it . . .

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New project: {float} or {position}?

Are floats not positioning then :?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New project: {float} or {position}?

I would think that it may well be position absolutes for the panels looks like a tricky layout I would sketch it out carefully and then try and fashion the main containers relative and then see if you can position the panels absolute

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

larmyia
Offline
Elder
London
Last seen: 13 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

New project: {float} or {position}?

I think he means absolute/relative Hugo. stop being pedantic Tongue

larmyia

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New project: {float} or {position}?

*raspberry*

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

larmyia
Offline
Elder
London
Last seen: 13 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

New project: {float} or {position}?

how very mature :roll:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New project: {float} or {position}?

*moon*

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

larmyia
Offline
Elder
London
Last seen: 13 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

New project: {float} or {position}?

typical. typical.

go do some guruing!

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 1 day ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

New project: {float} or {position}?

Hugo wrote:
Are floats not positioning then :?

Ahh, Good point. :oops:

larmyia wrote:
I think he means absolute/relative Hugo. stop being pedantic Tongue

:-k Something drastic must happen from the switch to 5 stars from 3 . . .

Hugo wrote:
I would think that it may well be position absolutes for the panels looks like a tricky layout I would sketch it out carefully and then try and fashion the main containers relative and then see if you can position the panels absolute

That's exactly what I'll do.

Thanks for looking you two.

This is my big chance . . . yep, I blew it . . .

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

New project: {float} or {position}?

Just keep thinking flow. Flow makes it work. Except for some fiddling with sizes to approximate the prototype, it only took about 30 min. once the structure and order became clear.

Going in I thought the layout might be fragile, but it works at ±2 steps of font size change. That's good enough for me.:)

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

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

  <title>local -- FriedByte</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    }

body {
    background-color: #b8a470;
    color: black;
    font: 100% tahoma, verdana, geneva, sans-serif;
    }

p {
    font-size: 1em;
    }

* {
    margin: 0;
    }

h2 {
    margin-top: 15px;
    }

h3 {
    margin-bottom: 10px;
    }

h3.bio {
    clear: left;
    margin-left: 15px;
    }

h4 {
    margin-left: 295px;
    margin-top: 15px;
    }

ul {
    margin-left: 280px;
    padding: 0
    list-style: square;
    color: #aaa;
    }

li span {
    color: black;
    }

#wrapper {
    width: 900px;
    border: 3px outset black;
    background-color: #f0cc98;
    color: black;
    margin: 15px auto;
    }

#banner {
    height: 100px;
    border: 1px solid black;
    background-color: #f8f8f8;
    color: black;
    }

#breadcrumb {
    margin: 1em 0 1em 80px;
    }

#content {
    margin: 0 125px 0 40px;
    background-color: white;
    color: black;
    border: 1px solid black;
    }

#biobox {
    background-color: #f0cc98;
    color: black;
    border: 1px solid black;
    margin: 15px;
    margin-right: 140px;
    }

.clearing:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    }

.clearing {
    display: block;
    }
/* */
    

.flotlft {
    border: 1px solid black;
    float: left;
    margin: 15px;
    }

.pullup {
    margin-top: -2em;
    }

.sidebox {
    background-color: #666;
    border: 2px outset black;
    color: white;
    display: inline;
    float: right;
    margin-left: 15px;
    margin-right: -75px;
    margin-bottom: 10px;
    position: relative;
    width: 200px;
    }

.wide {
    width: 500px;
    }

/*]]>*/

</style>
</head>

<body>
  <div id="wrapper">
    <div id="banner">
      <p>3 lists, a logo and a search form</p>
    </div><!-- end banner -->

    <p id="breadcrumb">bread crumb links</p>

    <div id="content"
         class="clearing">
      <div class="sidebox pullup">
        <p style="height: 75px;">Your shopping cart</p>
      </div><!-- end pullup sidebox -->

      <p class="flotlft"><img src="bullseye.jpg"
           width="250"
           height="300"
           alt="" /></p>

      <h2>System of Theology</h2>

      <h3>By Timothy Dwight</h3>

      <div class="sidebox wide">
        <p style="height: 75px;">Add stuff to your cart</p>
      </div><!-- end wide sidebox -->

      <div class="sidebox">
        <p style="height: 450px;">Ages also recommends...</p>

      </div><!-- end sidebox -->

      <h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
      diam</h4>

      <ul>
        <li><span>nonummy nibh euismod tincidunt ut laoreet dolore
        magna aliquam erat</span></li>

        <li><span>volutpat. Ut wisi enim ad minim veniam, quis nostrud
        exerci</span></li>

        <li><span>tation ullamcorper suscipit lobortis nisl ut aliquip
        ex ea commodo</span></li>

        <li><span>consequat. Duis autem vel eum iriure dolor in
        hendrerit in</span></li>
      </ul>

      <h3 class="bio">Author Overview ...</h3>

      <div id="biobox">
        <p style="height: 300px;">Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit, sed diam nonummy nibh euismod
        tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
        wisi enim ad minim veniam, quis nostrud exerci tation
        ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in</p>

      </div><!-- end biobox -->
    </div><!-- end content -->
  </div><!-- end wrapper -->
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New project: {float} or {position}?

It's Garcon Gary with his fine plater of fare. Smile

No need to learn anything on this forum Laughing out loud

Jpgs magically become full layouts.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

New project: {float} or {position}?

Aw, c'mon. You gotta admit that it's an interesting layout. You'll notice I left the drudge part alone. I'd have more trouble and get less satisfaction coding the banner stuff.

It was fun to watch the layout flow unfold in my mind and know it would work before ever touching the keyboard. Smile

Come to that, I don't know that I could explain how I did it except in very general, and maybe unhelpful terms.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New project: {float} or {position}?

I think I'm just a little miffed as I stared at it and my normal powers to mentally construct a layout failed me and I did think it looked an interesting challenge that should have lept out at me :roll:

I got scared and panicked as I love( I think as you do) the challenge of mentally fashioning a layout that you know will work without having to view it in a browser and normally markup layout and rules without needing to look at it rendered.

Mea Culpa.

n8gz4ez keep us updated as to how it progresses as it will be interesting to see it unfold and how you cope with all the elements.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 1 day ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

New project: {float} or {position}?

Gary, Thank you for the incredible markup. Now I have a solid reference. Your 30 minutes is very much appreciated here.

Hugo, I will be keeping up with the progress of this site, there are more pages similar to this one, and they will be making an appearance in the layout section shortly. Hopefully by the end of October it will make the site check section in its entirety.

Nate

This is my big chance . . . yep, I blew it . . .

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 1 day ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

New project: {float} or {position}?

Hugo wrote:
n8gz4ez keep us updated as to how it progresses as it will be interesting to see it unfold and how you cope with all the elements.


Here is the site I have been working on . . . still a little buggy.

http://www.ageslibrary.com/nate/product_edwards_01.html

I ended up using Gary's markup as a guide, but I ended up in big trouble getting on the 2nd and 3rd side boxes. Mainly because Gary's markup is beyond my skill . . . :oops:

So instead of using {position: relative;} for the sideboxes, I made a graphic to stretch across the middle section, and ran it downward, similar to the good ole faux columns. This gives the appearance of having side boxes extending past its parent, when it really doesn't.

I only used {position: relative;} in one spot, the shopping cart, which I probably could have gotten away by just using negative margins.

I'd be interested in hearing any feedback . . .

Thanks again Gary, for the terrific markup example. Smile

This is my big chance . . . yep, I blew it . . .

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

New project: {float} or {position}?

It looks pretty good, however, doesn't stand up to resizing very well. Also, viewed at 800 x 600, you get a horizontal scrollbar.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 1 day ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

New project: {float} or {position}?

Tyssen wrote:
It looks pretty good, however, doesn't stand up to resizing very well.


:? Yeah . . . both because of the design of the layout and not using %'s for lengths.

For a fix, I would have to remove pixel defined heights or replace them with a %. The trick is that a lot of the IDs and Classes need to line up to look right. :roll: I am not happy with no flexibility, and this site depends way too much on graphics in my opinion.

This is my big chance . . . yep, I blew it . . .

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

New project: {float} or {position}?

Your little 'cheat' makes your version more elegant than mine, certainly less fragile.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New project: {float} or {position}?

Neat bit of lateral thinking with the graphic Nate, looks good.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 1 day ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

New project: {float} or {position}?

Great, thanks for the encouragement.

Nate

This is my big chance . . . yep, I blew it . . .