Fluid layout problem

I have decided to rebuild my site from a fixed with layout to fluid/responsive. So far, I've set up a test page with a fluid layout, but it's not working as expected. See http://www.perberntsen.com/responsive_test.html
The relevant css is in the page.
When I make the browser window smaller, the columns will resize, but the rightmost column will drop down much too early, leaving lots of white space. (It does continue to resize, although out of sight.) I am planning to use media queries, but I dont't think they should be neccessary to achieve what I'm trying to do.
Things I've tried:
Removing min-width on the menu (didn't help)
Removing the header (didn't help)
Using position:relative (didn't help)
I've also read Ethan Marcotte's book on the subject as well as various articles on the internet.
Would be very grateful if someone could point me in the right direction ...
Edit: I also tried disabling external css and javascript, both of which didn't help. I am pretty sure the answer lies in the css.

No knowledge of responsive, but narrowing the min width to 150 looked pretty good in FF
#nav {
    background-color: #F4F4F4;    border: 1px dotted #505050;
    float: left;
    margin-top: 0;
    min-width: 150px;
    width: 15.3333%;

Similar Messages

CS6 Fluid Layout Problems

I'm new to coding and Dreamweaver CS6 and have been working with the fluid grid layout. When I view the template page in Safari Preview, my website looks like the image below. After saving and putting the files the page looks completely different when I type the website into the URL.
I have recreated the index page/template three times because I was having trouble formatting the Spry menu.
I'm wondering if by deleting the Spry menu, if I may have confused Dreamweaver's path or caused other disruptions?
How can I create a site that looks the same (or similar) to the preview? (and add a menu bar?)
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>T H R E E    W H E E L    S T U D I O</title>

<link href="../boilerplate.css" rel="stylesheet" type="text/css">
<link href="../layout.css" rel="stylesheet" type="text/css">


<script src="../respond.min.js"></script>


</head>
<body>
<div id="header">
<div style="text-align: center;">
<h1>T H R E E . W H E E L . S T U D I O</h1>
<br>
<p>Ceramic studio and gallery specializing in fine American crafts, whimsical useable pieces and odds and ends.</p>
</div>
<div id="body">

<p><img src="../images/flyingsaucer9.jpg" alt="flying saucer collection" width="694" height="480"></p>

<div id="breadcrumbs">HOME</div>
</div>
<div class="footer" id="footer"> 401.451.2350
    [email protected]
    436 Wickendon Street Providence, RI 02903
    Mon - Wed: 11:00 am - 5:30 pm
    Thu - Sat: 11:00 am - 6:00 pm
Sun: 12:00 pm - 5:00 pm</div>
</html>

When using the URL for the site, without a file name, the server automatically looks for the default document such as index.html.
Hence, you do need index.html or index.htm or index.php or similar.
index.dwt is a DW template file and is not classified as a default document, nor should it be. The template file should only be used on the local machine to create HTML documents based on that template.

Fluid grid layout problem in IE and Firefox

I just got DW CS6 and decided to try the fluid grid layout. This is my first try at doing it. I have 12 grid columns with 3 divs across the page. Each div spans 4 columns. In Opera, Safari and Chrome, everything works fine. However, in IE and Firefox, the div on the right side of the page drops down under the left div (the middle one and the left one stay where they belong). How do I fix this? The page is still a work in progress (obviously), but the url is http://www.brucebarrdesign.com/index_fluid.htm
Thanks

Hi
I've only just upgraded to CS6 so not tried the feature myself yet, but I like fluid layouts so will be. The three colums all have the css style attributes: width: 32.2033%; and margin-left: 1.6949%; in fluid_layout.css (1st colmn has a margin of 0).
Now I don't know how familiar you are with web coding and this isn't the place to try to tutor you in it. The number of digits after the decimal tells me you've let DW assign these % entirely by itself without any guidance. Those measurements all add up a bit tight, to me, to 100% (I've not done the maths). I always allow a little leeway for the difference in the way the browsers calculate things - not so it's visually disturbing - but precisely to avoid this very problem. I'd round the figures down manually in the css styles dialogues or by editing the stylesheet directly.
width: 32%; and margin-left: 1.5%; checking the maths so I'd know how much % leeway that leaves.
Like I said I've not used this feature myself yet so I don't know if there is somewhere to tell DW to round numbers down itself.
Hope this helps.

Fluid layout

Hi,
I am trying to build a site with fluid layout. I have three
classes: Preloader, Main and Background.
Preloader loads main.swf and has resize function where it can
access Background like so:
Sprite(loader.content).getChildAt(0).y = stage.stageHeight -
Sprite(loader.content).getChildAt(0).height;
Main has an instance of Background.
Background draws vertical lines. It uses fluid layout on its
own. Works fine.
Here is the catch:
Background utilizes stage.stageWidth and stage.stageHeight,
when tested with separate fla works like charm. However, when
accessed thru Preloader throws this error: Error #1009: Cannot
access a property or method of a null object reference. I think it
is because use of stage but I don't know how to go about it.
It also uses its own resize function.
So, what is the best way to put it all together? Where should
I keep resize function? What I need to do with stage object in
Background?
Hopefully I explain more or less coherently what is the
problem.
Here is abbreviated code for all three classes:

I just used the publish settings myself don't know if it will
help you it worked for me on this site.
http://www.cybermountainwebservices.com/client0/date/
settings:
http://www.mespinach.com/fluid.gif

CSS Layout Problem?

Can someone please help me with a layout problem.
As far as I can tell the page looks as it should in Netscape,
Firefox, etc., but IE6 and 7 refuse to work correctly.
The page I am working on is:
http://www.vmtampademo.com/localangler/testpage.html
Most of the picture caption and headline of the middle column
is behind the picture. I attempted to force the info with a
seperating div which seems to work sometimes. I doubt that this is
the correct solution. What am I doing wrong?
Thank you for the help!

It looks fine in Firefox 2.0.0.1, Opera 9.10, and IE 7.

In Dreamweaver 6, I created a new fluid layout. I set up (4) DIVs. In the 3rd div, I changed the font color. The new color shows up on the website when viewed in my computer desktop, but, when viewed in a tablet and a cell phone, the color of the font doe

In Dreamweaver 6, I created a new fluid layout. I set up (4) DIVs. In the 3rd div, I changed the font color. The new color shows up on the website when viewed in my computer desktop, but, when viewed in a tablet and a cell phone, the color of the font does not change. It's the same in Dreamweaver's Live view. It shows the new color on Desktop view and not in the cell phone or tablet view. Also, I changed the font itself in one of the DIVs and it shows up in the new font on the desktop view and website viewed thru the computer, but, not on the tablet or cell phone. Can someone please explain. I want to be able to change the fonts and colors for viewing in the tablet and cell phone, also. The fonts were all standard fonts. Sans-erif and Verdana and Arial were tried. Thanks.

I will lock this discussion because of duplicate post.

Layout problem in PDF conversion

Hi all,
i am downloading spool data using the function module CONVERT_ABAPSPOOLJOB_2_PDF. But i am facing layout problem. e.g. RFBILA00(financial statement generation program) has written balancesheet data to the spool. This spool data has some 6 columns. but CONVERT_ABAPSPOOLJOB_2_PDF is writing only first 3 columns to the generated PDF file. i used 'GET_PRINT_PARAMETERS' function module also with values like layout as 'X_65_132' and 'X_90_120'. but no success. if anybody knows the answer, please let me know.
Thanks in advance,
Naveen

Hi All,
i am following the below approach to download the information from spool.
program/spool output is an ALV List output data having 8 columns. but below approach is converting only first 5 columns in to PDF format. other 3 columns are getting truncated.
FUNCTION /ngl/download_spoolinfo_as_pdf.
""Local Interface:
*" IMPORTING
*"     REFERENCE(I_SPOOL_REQUEST) LIKE TSP01-RQIDENT
*"     REFERENCE(I_FILENAME) LIKE RLGRAP-FILENAME
*" EXCEPTIONS
*"      DOWNLOAD_ERROR
TABLES tsp01.
DATA: mtab_pdf LIKE tline OCCURS 0 WITH HEADER LINE,
        mc_filename LIKE rlgrap-filename.
DATA: mstr_print_parms LIKE pri_params,
        mc_valid(1) TYPE c,
        mi_bytecount TYPE i.
CALL FUNCTION 'GET_PRINT_PARAMETERS'
    EXPORTING
      copies                 = '1'
      cover_page             = space
      destination            = 'locl'
      expiration             = '1'
      immediately            = space
      mode                   = space
      new_list_id            = 'X'
      no_dialog              = 'X'
      user                   = sy-uname
      line_size              = 200
      line_count             = 65
     layout                 = 'X_65_200'
      layout                 = 'X_90_120'
      sap_cover_page         = 'X'
    IMPORTING
      out_parameters         = mstr_print_parms
      valid                  = mc_valid
    EXCEPTIONS
      archive_info_not_found = 1
      invalid_print_params   = 2
      invalid_archive_params = 3
      OTHERS                 = 4.
IF sy-subrc EQ 0.
    CALL FUNCTION 'CONVERT_ABAPSPOOLJOB_2_PDF'
      EXPORTING
        src_spoolid              = i_spool_request
        no_dialog                = 'X'
        dst_device               = mstr_print_parms-pdest
      IMPORTING
        pdf_bytecount            = mi_bytecount
      TABLES
        pdf                      = mtab_pdf
      EXCEPTIONS
        err_no_abap_spooljob     = 1
        err_no_spooljob          = 2
        err_no_permission        = 3
        err_conv_not_possible    = 4
        err_bad_destdevice       = 5
        user_cancelled           = 6
        err_spoolerror           = 7
        err_temseerror           = 8
        err_btcjob_open_failed   = 9
        err_btcjob_submit_failed = 10
        err_btcjob_close_failed = 11
        OTHERS                   = 12.
    IF sy-subrc EQ 0.
      mc_filename = i_filename.
      DATA: lv_filename TYPE string.
      lv_filename = i_filename.
      CALL FUNCTION 'GUI_DOWNLOAD'
        EXPORTING
          bin_filesize = mi_bytecount
          filename     = lv_filename
          filetype     = 'BIN'
        TABLES
          data_tab     = mtab_pdf
        EXCEPTIONS
          OTHERS       = 22.
      IF sy-subrc EQ 0.
        WRITE:/ mc_filename, 'CONVERTED TO PDF AND DOWNLOADED'.
      ELSE.
        WRITE:/ 'PROBLEM WITH DOWNLOAD'.
        RAISE download_error.
      ENDIF.
    ELSE.
      WRITE:/ 'PROBLEM WITH PDF CONVERSION'.
      RAISE download_error.
    ENDIF.
ELSE.
    WRITE:/ 'PROBLEM GETTING PRINT PARAMETERS'.
    RAISE download_error.
ENDIF.
ENDFUNCTION.

Full width preloader for fullscreen layout/fluid layout

Hi,
I'm new to this forum. I need help to figure out how to make the preloader works on the full screen website/ fluid layout. I add the Stage.resize on the code for FYI. When I added this code to the bar, it expanded to full screen, but there's no loading bar. The text is also no progress. Help please. Thanks

I really need help for this. FYI, I have:
Stage.align
stage.scaleMode
stage.addEventListener
to make the bar to fullscreen. Any idea why the bar is not working? Thanks

Layout problem - multiple repeating frames

Hi, I have a layout problem, pls help!
Short report description:
- Repeating Frame1 - gives 1 record, contains all other frames, variable vertical elasticity
- - Frame2 - contains all frames beneath - variable vertical elasticity
- - - Frame3 - variable vertical elasticity
- - - - some boilerplates
- - - - Repeating Frame 2 - various number of records, fixed vertical elasticity, height 100
- - - - Repeating Frame 3 - various number of records, fixed vertical elasticity, height 30
- - - - .. other repeating frames ..
When reaching the bottom of a page, and there is not enough room to print a record for Repeating frame 2, a record from Repeating frame 3 is printed in the bottom.
Next page starts with the remaining records from Repeating frame 2.. and then the remaining records from Repeating frame 3.
For example:
Page 1:
Rep frame 2 - Record 1
Rep frame 2 - Record 2
Rep frame 2 - Record 3
Rep frame 3 - Record 1 -- not enough space to print Record 4, so this record is printed
Page 2:
Rep frame 2 - Record 4
Rep frame 2 - Record 5
Rep frame 3 - Record 2
How can i ensure that all records from Rep frame 2 is printed before records from Rep frame 3?

Hi, thanks for helping me out!
I tried to use anchors, but they had no effect when connecting top of 3 to bottom of 2, got the same layout.
I then tried to create frames with vertical elasticity expand around both rep frame 2 and rep frame 3, and it seems to do the job.
- Repeating Frame1 - gives 1 record, contains all other frames, variable vertical elasticity
- - Frame2 - contains all frames beneath - variable vertical elasticity
- - - Frame3 - variable vertical elasticity
- - - - some boilerplates
- - - - Frame 4 - vertical elasticity expand
- - - - - - Repeating Frame 2 - various number of records, fixed vertical elasticity, height 100
- - - - Frame 5 - vertical elasticity expand
- - - - - - Repeating Frame 3 - various number of records, fixed vertical elasticity, height 30
and so on..
Thanks again

Layout Problem in swings

I have an Layout problem. My Applications consists of a label and a panel in which some more labels are present.
The panel should contain the scrollbar in order to view all the label that excced the size of the panel.This label and a panel should be adjacent to each other.
My problem is, I am not getting the scroll bar to the panel when I am adding the label that excced the size of the panel, when I am adding the label adjacent to this label.

Did you use JScrollPanel? If not, use it.

How to get fluid layout for Dreamweaver CS5?

CS 5 is not have Fluid Layoout,how to get fluid layout for Dreamweaver CS5?

For Responsive Web Designs (RWD), you can do it manually with CSS Media Queries. David wrote a detailed tutorial below.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
Or you can jump start your RWD projects with one of these popular Frameworks.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap FREE extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Nancy O.

[solved] layout problem in amarok 2.02

Hi,
Here, I have a bad layout problem with amarok 2.02. Amarok does not fit on my screen which is 1400 pixels large! I cannot reduce the part where the collection is shown. So that it is really unpractical to use.
I uploaded a snapshot to illustrate the problem (it is the full screen!):
emmanuelfavrenicolin.free.fr/Public/Sna … ok202.jpeg
Someone have the same problem ?
I tried to install svn version but I stopped after 3 hours of compilation, it is quite a big application.
Last edited by manouchk (2009-05-23 06:28:43)

Well, I tried amarok2-devel 2.0.90-1 but the problem of graphic layout remains similar, no improvement. Is it normall? Maybe amarok is only available for computer with screen >= 1600x1200 or is there an hidden configuration file where I could tweek this?
Last edited by manouchk (2009-05-18 02:41:03)

Urgent: Layout problem in "light inner page"

Hi Experts,
I am facing a problem in portal content area on external facing portal. I see a vertical scroll bar which restricts application from being displayed on entire screen.
I am getting this problem after a patching of EP 7.0, before patching every thing was running fine.
To me it looks like a layout problem in "light inner page", When I use "Light - 1: column (Full width)" layout I get a vertical scroll bar on portal. When I use default layout then this vertical scroll bar disappears but I see an empty navigation bar on left side which is not required.
Can some one advise a solution for this.
-Lave

hi,
Similar problem in this thread. check it out
Desktop inner page lost
Regardss,
Ganesh N

How to get text padding in CS6 fluid layout div?

After having set-up my fluid layout divs and entering some content, the text is all slammed against the left. Very unsightly! But my every attemtpt at chaning the CSS to insert some left padding breaks the overall layout by pushing divs down the page and ruining the column structure, presumably because these divs no longer fit (?). My overall layout does have a mix of columns for tablet and desktop, which degrade to a single column for the mobile.
Any help teaching an ol' dog a new trick would be much appreciated!

If you're using other HTML tags like <li> <address> <cite> <code> <blockquote> etc... you'll need to create padding styles for those, too. Usually the padding will not appear if you haven't enclosed text or images inside an appropriate tag.
Nancy O.

Fluid Layout - Background Image

Hello All,
First I'll explain what I did and what I'm hoping to see. I created a fluid grid layout. Below the fluid grid layout, added a div that extends 100% width that's not part of the fluid grid. So I inserted an image by going to the Commons tab and selected image, I was then able to browse for the image I wanted and then inserted it. once inserted I see it scales correctly on all 3 devices. Now I would like to add text over this image but I can not do that. I can only put text either above or below the inserted image. So I deleted the image, selected the div and inserted the image by going into my Properties panel and imported it as a background image. But as you guys may know, I had to set a specific height, for the image to be view and it doesn't even scale correctly on all device outputs. But that was the only way I could insert text over the image.
What am I doing wrong? All I want is to have a background that's scaleable on all viewports with the text on top of the image. Maybe there's a tutorial that can help me out with this.
HELP!
Thanks in advance.
P.S. Here's the simple code that I have.
<div class="gridContainer clearfix">
<div id="div1" class="fluid">Use Insert Panel for mhvkhhadditional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div>
</div>
<div>This is the content for Layout Div Tag</div>

You really must use a Background in the CSS. You cannot position image & overlay elements in Responsive Web Designs. It simply won't work well.
Resizable Full Page Background Image
I prefer to use CSS Gradients or solid background colors which is much less bandwidth for mobile data plans to absorb.
Ultimate CSS Gradient Generator - ColorZilla.com
Nancy O.

Fluid layout problem

Similar Messages

Maybe you are looking for