8 Replies - 1866 Views - Last Post: 29 January 2014 - 03:41 PM

#1 agent46   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

DW6 Fluid Layout Feature - Floats, Clears and Nav Buttons?

Posted 24 January 2014 - 02:57 PM

Glad to have found this forum. It looks like a great place with lots of helpful people and information. I'm a new guy. My name is Mick. I was a technical writer for a Japanese robotics company for about ten years but got laid off. Now I'm helping a friend's business with building their new website and have been learning web design. I have a pretty good basic grasp of CSS3 and HTML5 concepts. I can lay down basic code alright by hand, but am using DW6 because it has some great time saving features. So basically, I have enough knowledge to ask questions and understand answers but my coding kung fu is white belt level. I'm making lots of beginner mistakes and hope some of you fine folks can suggest best practices and styling techniques along the way that can help me tackle my design problems as they come up.

Here's my first problem for you.

Tools:
DW6's new fluid layout grid feature

Design task:

in the large screen layout, we want to display a single row of six graphic links to our product pages. These link buttons are 125px x 125px. There should be some space between them. The size of the buttons should remain constant as the browser screen width becomes less. At about half-size, link buttons 4, 5 and 6 should drop below buttons 1, 2 and 3 but otherwise remain the same.

My solution: (for purposes of simplicity, I've just put the <img> tag in place of the all the code that would normally be involved in an actual <a> tag.)

<head>
@media only screen and (min-width: 769px) {
.gridContainer {
	width: 99.4949%;
	max-width: 1232px;
	padding-left: 0.2525%;
	padding-right: 0.2525%;
	margin: auto;
}
#linkButtonBox1 {
	clear: none;
	float: left;
	margin-left: 0%;
	width: 100%;
	display: block;
}
#linkButtonBox2 {
	clear: none;
	float: left;
	margin-left: 0%;
	width: 94.4162%;
	display: block;
}
</head>

<body>
<div class="gridContainer clearfix">
<div id="linkButtonBox1">
  <table width="100%" align="left" cellpadding="0">
    <tr>
      <td width="125px"><img src="_images/LinkButton1.jpg" width="125" height="125"></td>
      <td width="125px"><img src="_images/LinkButton2.jpg" width="125" height="125"></td>
      <td width="125px"><img src="_images/LinkButton3.jpg" width="125" height="125"></td>
    </tr>
  </table>
</div>
<div id="linkButtonBox2">
  <table width="100%" align="left" cellpadding="0">
    <tr>
      <td width="125px"><img src="_images/main/RothPolyButtonsPinstriping.jpg" width="125" height="125"></td>
      <td width="125px"><img src="_images/main/RothPolyButtonsSprayGuns.jpg" width="125" height="125"></td>
      <td width="125px"><img src="_images/main/RothPolyButtonsExxxtras.jpg" width="125" height="125"></td>
    </tr>
  </table>
</div>

</div>
</body>



My Results:

The two linkButtonBox divs remain on separate lines and the buttons squish horizontally when I reduce the screen width. It's a no go.

The other thing I thought of is to create a class called .linkButton with styling for left margin space and assign it to each <a> inside the linkButtonBoxes. Can that be done? Does that even make sense?

I'm guessing here. Can anyone here suggest a best practice for making this work? I can then figure out the code for it. Much gratitude for any guidance. Thanks for your patience.

Mick

Is This A Good Question/Topic? 0
  • +

Replies To: DW6 Fluid Layout Feature - Floats, Clears and Nav Buttons?

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,311
  • Joined: 12-December 12

Re: DW6 Fluid Layout Feature - Floats, Clears and Nav Buttons?

Posted 24 January 2014 - 04:00 PM

I don't use DreamWeaver.

Anyway, setting more suitable widths for your tables of, say, 45% each will get you a step nearer. That is, 45% of their parent's width, which is already set at 99.x%.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,311
  • Joined: 12-December 12

Re: DW6 Fluid Layout Feature - Floats, Clears and Nav Buttons?

Posted 24 January 2014 - 04:07 PM

Quote

I have a pretty good basic grasp of CSS3 and HTML5 concepts.

If so, I wouldn't touch Dreamweaver.

Quote

I can lay down basic code alright by hand, but am using DW6 because it has some great time saving features.

These features won't save you time in the longer term, they will invade your dreams and dissolve your hair follicles.
Was This Post Helpful? 0
  • +
  • -

#4 agent46   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: DW6 Fluid Layout Feature - Floats, Clears and Nav Buttons?

Posted 24 January 2014 - 06:34 PM

It's too late for my sanity or my hair follicles, but I fear you may be right about dreamweaver. Stay tuned!

Thanks for your input. I'm going to play around with the tables idea and see if I can get it to cooperate a little more.

Still open to other strategies though. Tables seems so...nineties.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,311
  • Joined: 12-December 12

Re: DW6 Fluid Layout Feature - Floats, Clears and Nav Buttons?

Posted 24 January 2014 - 07:36 PM

Quote

Tables seems so...nineties.

I very much agree with you but assumed that this was imposed on you by DW so didn't pursue it.

I believe your question has more to do with the much broader topic of responsive web design and recommend this article.

This is a coding forum and most experienced members here don't touch Dreamweaver: it plays havoc with your code! I recommend Komodo Edit (Komodo IDE is the paid version), but there are many other IDEs to choose from.
Was This Post Helpful? 0
  • +
  • -

#6 agent46   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: DW6 Fluid Layout Feature - Floats, Clears and Nav Buttons?

Posted 27 January 2014 - 12:19 PM

andrewsw,

Thanks for that interesting article. I read it through.

I got introduced to Responsive Design concepts first from a Lynda.com course I took. Since I'm just starting out here, I'm trying to tackle the simple technical issue of coding the two link image containers (described in my OP) so they'll behave as described.

It seems to me I can do this without tables. Just need some suggestions on proper technique for getting it done. As it is, I'm still doing almost all the coding by hand in DW since I keep going back and trying new things.

Any guidance on this would be much appreciated.

Mick
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,311
  • Joined: 12-December 12

Re: DW6 Fluid Layout Feature - Floats, Clears and Nav Buttons?

Posted 27 January 2014 - 12:45 PM

I made my suggestion in post #2 as far as your current code, and tables, are concerned.

If you are asking how you would do this without tables then you could actually just remove all the table-elements from the above code, then set the widths of linkButtonBox1/2 in the css to 45% or similar.
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,311
  • Joined: 12-December 12

Re: DW6 Fluid Layout Feature - Floats, Clears and Nav Buttons?

Posted 27 January 2014 - 01:02 PM

Actually, based on your original description and the fact that the images are a fixed width, you could set a specific width on the divs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="uft-8">
    <title>Page Title</title>
    <meta name="description" content="The Description">
    <meta name="author" content="Andrew">
<style>
@media only screen and (min-width: 769px) {
    #linkButtonBox1 {
        float: left;
        width: 390px;
    }
    #linkButtonBox2 {
        float: left;
        width: 390px;
    }
}
</style>
</head>
<body>
<div class="gridContainer">
<div id="linkButtonBox1">
    <img src="http://placekitten.com/125/125" width="125" height="125">
    <img src="http://placekitten.com/125/125" width="125" height="125">
    <img src="http://placekitten.com/125/125" width="125" height="125">
</div>
<div id="linkButtonBox2">
    <img src="http://placekitten.com/125/125" width="125" height="125">
    <img src="http://placekitten.com/125/125" width="125" height="125">
    <img src="http://placekitten.com/125/125" width="125" height="125">
</div>
</div>
</body>
</html>

I suppose this could be considered a responsive design because, when the browser is very narrow, the images line-up underneath each other. You could try setting min-widths to prevent this, although this now probably conflicts with your media setting.

NB I am not in any way attempting to demonstrate a responsive design, only responding to the original, specific, question.

This post has been edited by andrewsw: 27 January 2014 - 01:07 PM

Was This Post Helpful? 1
  • +
  • -

#9 agent46   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: DW6 Fluid Layout Feature - Floats, Clears and Nav Buttons?

Posted 29 January 2014 - 03:41 PM

andrewsw,

Thanks for your responses. Yes, you're right. We're not really doing a full on responsive design with this site. At any rate your input got me thinking in a better direction and we got over this particular hurdle.

Thanks Again,
Mick
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1