Apex 4.2.1: Region grid layout?
See https://apex.oracle.com/pls/apex/f?p=57688:4
Page template - One Level tabs - no sidebar. Theme 24
The Grid Layout section in Region attributes has Start New Grid, Start new row/column, Column No or Automatic and Colspan attributes. How can I set the rowspan attribute so that, in the example page above, regions r1 and r2 are next to each other with no whitespace, regardless of the size of region r3? I thought I could easily set the rowspan of r1 to 2 and that would take care of it but maybe I am missing something.
Help? Thanks
VANJ.
Did you check the html of the renderd page.
Did is what I found.
<table class="regionlayout" role="presentation" summary="">
<tbody>
<tr>
<td valign="top">
<section id="R8612284225122823493" class="uRegion clearfix"> //R1
</td>
<td rowspan="2">
<section id="R8612284620818823496" class="uRegion clearfix">//R3
</td>
</tr>
<tr>
<td valign="top">
<section id="R8612284400865823496" class="uRegion clearfix">//R2
</td>
</tr>
</tbody>
</table>As it is now R1 and R3 are renderd next to each other. And R2 is in a seperate row.
So if R1 and R2 need to be next to each other R2 and R3 need to be swapped.
It maybe something as simple as a wrong sequence.
Nicolette
Similar Messages
-
Apex 4.2.1: Region table layout and pagination
See https://apex.oracle.com/pls/apex/f?p=57688:2
Theme 24, table-based layout. Page template = One Level Tabs, Left Sidebar.
All 4 regions are report regions using the report region and 2-column portlet as the region and report templates respectively.
Regions 1.1 and 1.2 are supposed to be in the same row in different columns so 1.1 has New Grid=Yes and 1.2 has New Column=Yes. Ditto for 2.1 and 2.2
1. Trial and error shows that simply changing the Pagination of report region 1.1 from None to Bottom-Right causes the layout to shift such that 1.2 moves to a grid row by itself! What is going on here? Surely a "trivial" change like whether pagination is displayed or not shouldn't cause such a major layout change. Am I missing something?
2. Regions 2.1 and 2.2 stick together. How can we add some breathing room between them?
3. If the page template is changed to One Level Tabs, No Sidebar, the behaviour changes. All the regions are rendered in 1 column, ignoring the New Column grid layout setting. Why is this?
4. In general, with all the layout changes in 4.x, I was under the impression that, when using a HTML Table based page template, simply using the New Grid/New Row/New Column, etc attributes on the Region attributes would be sufficient to build pages with intuitive, declarative layouts with arbitrary "boxes" laid out on the page, regardless of the content/region type. But that doesn't appear to be the case.
Can some CSS expert (here's looking at you, Paul) please share some insights on how all this works?
ThanksVANJ wrote:
Can some CSS expert (here's looking at you, Paul) please share some insights on how all this works?Hi Vikas
Regions 1.1 and 1.2 are supposed to be in the same row in different columns so 1.1 has New Grid=Yes and 1.2 has New Column=Yes. Ditto for 2.1 and 2.2With table-based region layout I'm getting a Column number selector rather than a New Column switch.
1. Trial and error shows that simply changing the Pagination of report region 1.1 from None to Bottom-Right causes the layout to shift such that 1.2 moves to a grid row by itself! What is going on here? Surely a "trivial" change like whether pagination is displayed or not shouldn't cause such a major layout change. Am I missing something? No abstruse CSS here, just Pagination Sub-template and table-less layouts coming home to roost.
Unlike the majority of report templates, the 2-column portlet report template doesn't have an outer HTML <tt>table</tt> to act as a container for the engine-generated pagination <tt>tr</tt>. The pagination row is thus treated by the browser as starting a new row in the current open table—the region layout. Having the pagination <tt>tr</tt> injected into the 2-column portlet source turns it into tag soup. The whole thing spectacularly fails HTML validation.
I expect the official Oracle line is that 2-column portlet reports are not supposed to use pagination.
2. Regions 2.1 and 2.2 stick together. How can we add some breathing room between them?Add this rule to the page Inline CSS. This will add some space on the left of all region cells except the first in the row.
.regionlayout td+td {
padding-left: 10px;
3. If the page template is changed to One Level Tabs, No Sidebar, the behaviour changes. All the regions are rendered in 1 column, ignoring the New Column grid layout setting. Why is this?If this is the layout shown in your link above then I'm not reproducing it. Can you upload an export of your app and provide a link to it? -
Apex 4.2 theme 25 grid layout setting.
Hi
I know this is silly question but i had to ask you because i have i tried enough , i have done this before but it not working for me right now. :(
I have 4 region on page .
Region 1 Grid Layout
Start New Row Yes
Column Automatic
Column Span Automatic Region 2 Grid Layout
Start New Row Yes
Column 1
Column Span 4Region 3 Grid Layout
Start New Row NO
Column 5
Column Span 4Region 4 Grid Layout
Start New Row YES
Column 1
Column Span 8In Region 4 I have 11 number field items with setting.
New Line YES
New Field YES
Width 11
Height 1
Column Span null(default)
Row Span null(default) I want to arrange first 6 in column 1 last 5 in column 5
I played around the setting by changing column on item to start with 1 and 5 respectively and and set the NO to start new row.
But it justs move little away to right not really to actual 5 column in grid.
Your Input is appreciated.
ThanksBUG in 4.1 application theme 25
-
APEX 4.2 aligning issue of Stop and Start Grid Layout item
My APEX application application is in the process of moving from 4.0 to 4.2. I am experiencing an issue with aligning (left margin justified) of Stop and Start Grid Layout items that have a border around them. Earlier I had an issue with the border itself not showing up in the 4.2 application. I was able to resolve that with a workaround by adding inline code in the CSS section of the page: #P23_OFFICE_START_TBL {width:682; border:1px solid #369; margin:5px;}. This created the border which I needed, but there are 2 Stop and Start Grid Layout items that are indented and not aligning with the border of the previous line. I have tried a number of different things but none of them have worked. This seems like a very simple issue to fix but I am having a tough time resolving it.
I tried to put the item in question in a different grid, which corrected the indention but then I lost the border around the item. It seems that the above CSS code does not work on the new grid. I also tried to put attributes such as margin-left:5px; float: left; clear: left; float: left, in the CSS code but that did not work, too.
Any suggestions?
Thanks
Ajay KI deleted and added back the Stop and Start Grid Layout items not aligning properly. This worked. Apparently, the 4.0 to 4.2 upgrade did not handle/convert these items properly. Deleting and adding them back resolved the issue.
-
APEX Theme 25 - Responsive Grid Layout Question
Hi
What is the best way to control an item to be positioned right next to the other item on the same row.
I have a select list that I would like to have an edit button right next to it.
I created two items for example:
P_MY_SELECT_LIST Grid set New Line to Yes, Auto
P_MY_EDIT_LINK Grid set New Line to No, Auto
But it is not doing what I expected.. what am I missing?
When it was tables not divs I had no trouble but now I need to learn the kep to using the Grid.
When I hard code the edit in the Post Element of the item it works great with 2 spaces... but I can't control the item by the AUTH Scheme. I don't want them to show up unless you have the proper role.
Plus, I want to learn the new 4.2 way!
Thanks, BillHi Scott, Bill,
Because Theme 25 relies on grid for most of it's positioning, it is difficult to do accomplish what was sometimes much simpler when using the tables approach for form layouts. This also happens to be one of the biggest issues with Theme 25: proper form and label positioning.
If we look back to using tables for form layout we would see that a structure would be created immediately when we started laying out items. Because of the way tables behave, whatever the size of your first label was controlled the width of that cell, and the cells below it. Meaning all of your labels would line up, but only take the space necessary to fit your label.
However, with a div-based grid, this is no longer possible. There is no structured set of cells that grow / contract together as there are in tables. Because of this, it is difficult to determine the width of a given container and apply that same width to others (for example, picking up your largest label, and applying the width of that label container to the other labels which are below).
One way to go around this problem, and what we've done in Theme 25, is to used fixed-width labels. So we explicitly set the width of labels, and that makes the layout much more predictable. We know that labels will always be a certain width, and that input fields that follow will begin from the same position. However, this is very different from how forms in tables work:
1. All labels are the same size, so even if a label is very small, or very large, it will take the same space.
2. We can no longer align two items be right next to each other without using grids.
3. When using grids, we have to be mindful of the label's fixed width as it can be larger than the column it is contained in.
We're working on a cleaner approach to this problem so creating responsive applications and laying form items is easier than it currently is. In the meantime, you can override several styles to help your particular use case.
Here are just a few styles you can apply to your page to get form alignment to behave (with a specified region static id):
1. Manually setting the widths of labels for a given region:
#my_region div.fieldContainer.horizontal>label {
width: 80px;
#my_region div.fieldContainer.horizontal div.fieldControls {
/* width above + 16px spacing */
margin-left: 96px;
2. Set Label widths to only take up the space they need:
#my_region div.fieldContainer.horizontal>label {
float: none;
width: auto;
#my_region div.fieldContainer.horizontal div.fieldControls {
margin-left: 0;
display: inline-block;
3. You can allow fields to float left:
a. Add to your inline CSS:
#my_region div.fieldContainer {float: left;}b. Set grid layout attributes for your second item as follows:
Start New Row: No
Column: Automatic
New Column: NoYou can combine these together as well. For example, applying styles #2 and #3 will let you position elements side by side and immediately after each other.
Scott,
For some of your issues in particular, here are some possible ways to go around them:
1. Password field being cut off
In addition to setting the size of the field to 60, you can apply an inline style to control the width by setting the HTML Form Element Attributes field to:
style="max-width: 100%;"This will restrict the size of input field to be a maximum of 100% of it's container, and should no longer be hidden when your window is resized.
2. Customer Report obscured
You can add an inline style to your page header to set this region's content to scroll. For example giving it a static id of my_region and adding the following to your page's inline css field:
#my_region section.uRegion>div.uRegionContent {overflow: auto;} Hope this helps!
Shakeeb -
Grid Layout - Getting two or more fields to display on the same line/row.
I am using version 4.2.
I have a form with a number of items.
I wish to control the display of the items so that some fields are beside each other (on the same line or row).
I have set the grid layout as follows:
:PX_ITEM1
Start New Row: Yes
Column: Automatic
Column Span: Automatic
:PX_ITEM2
Start New Row: No
Column: Automatic
New Column: Yes
Column Span: Automatic
When I do this the items are not displayed on the same row.
I can see when you change the "Start New Row" from No to Yes, the item fields ARE moved into the same <Div> that controls the row, but they just aren't displaying how I would like them.
Has anyone got this working?
Amanda.Hi Amanda,
I believe I have discovered the cause of the issue you are facing.
The problem is with the "Alert Region" region template and that it does not have any display points specified so indicate the number of grids that can fit in its region body. Without having any display points, the grid layout system attempts to use all columns available to its container. However, because the Alert Region has additional padding within, the columns will not fit and wrap to the next line.
To fix this issue, you will have to modify the "Alert Region" region template, go to "Display Points" and click Add Row. You will need to enter the following fields:
Name: Region Body
Template Substitution: BODY
Grid Support: Checked
Maximum Fixed Grid Columns: -1
This will fix the issue for you. I've logged a bug within our bug system to track this so we can fix it in a future release of APEX.
Best,
Shakeeb -
Hi,
I am using Oracle Apex 4.2.1
I have been following a Youtube Video from Oracle Learning: http://www.youtube.com/watch?v=dPgQZTsdSBI
The video demonstrates an example of grid layout for regions. The layout has 12 columns and and 4 regions, the regions using 3 columns each. In the video the regions align perfectly.
I have tried to recreate this in theme 26 but it does not work. I have set theme 26 to reference the page templates for theme 25. However, this does not work and the regions appear next to each other using 1 grid each with no spacing.
Any ideas on how to fix this in theme 26?
Thanks,
JIMJIM wrote:
Hi,
I am using Oracle Apex 4.2.1
I have been following a Youtube Video from Oracle Learning: http://www.youtube.com/watch?v=dPgQZTsdSBI
The video demonstrates an example of grid layout for regions. The layout has 12 columns and and 4 regions, the regions using 3 columns each. In the video the regions align perfectly. The video demonstration uses theme 25, which has page templates set up for a CSS grid system with 12 fixed-width columns.
I have tried to recreate this in theme 26 but it does not work.The theme 26 page templates are configured to use HTML table layout with a dynamic, variable number of columns. HTML tables expand to fit their contents, so the width of the columns is also variable.
I have set theme 26 to reference the page templates for theme 25.Don't know what you mean by this. Please explain in more detail.
However, this does not work and the regions appear next to each other using 1 grid each with no spacing.
Any ideas on how to fix this in theme 26?Basically there's nothing to "fix". This is how the table-based layout used in theme 26 works. The regions only appear to use "1 grid each" because their content is all the same size. If you add different content to the regions (as I have) then the table columns change width to fit it. You could use CSS to apply fixed widths to the columns, but that kind of defeats the purpose of using table-based layout.
The themes in APEX 4.2 don't appear to specify spacing between regions when using HTML table layout, but this can be controlled using CSS.
Why are you trying to use theme 26 rather than theme 25 as shown in the video demo? They don't look that different. -
Panel Grid Layout: Column Span unexpected behavior.
Whenever in a Panel Grid Layout, when i give a cell to span over multiple columns(2,3,4 or any), the cell is spanned over the entire row only.. Why does this behavior happens? In JDeveloper, the spanning is shown correctly in design tab and preview tab.
Hi Amanda,
I believe I have discovered the cause of the issue you are facing.
The problem is with the "Alert Region" region template and that it does not have any display points specified so indicate the number of grids that can fit in its region body. Without having any display points, the grid layout system attempts to use all columns available to its container. However, because the Alert Region has additional padding within, the columns will not fit and wrap to the next line.
To fix this issue, you will have to modify the "Alert Region" region template, go to "Display Points" and click Add Row. You will need to enter the following fields:
Name: Region Body
Template Substitution: BODY
Grid Support: Checked
Maximum Fixed Grid Columns: -1
This will fix the issue for you. I've logged a bug within our bug system to track this so we can fix it in a future release of APEX.
Best,
Shakeeb -
Hi,
I am using Apex 4.2.1.00.08 and trying to do some basic design on a form.
I have a couple of items and one of them is Shuttle item. I would like to position it on right side of form. I do this by setting Start New Row in Grid Layout to NO.
Up to this point all if fine. What I miss is setting for rowspan. This Shuttle item is bigger than other items and on the left side of form there is a big gap between item 1 and item 3 (item 2 is shuttle item).
I know that rowspan should take care of this. But I can't find this property among item properties.
I can find rowspan if I go into "Edit All" items, but there is no effect setting this value.
Any ideas?
P.S.
I am using Blue Responsive theme.Hi,
I am not sure if the vertical gap can be avoided unless you move P1_TEST to a different region.
The other option is to push the P1_TEST to the last, after the P1_BLANK page item.
The "Column Span" property in the grid layout can be used to control the horizontal spacing between the P1_ENAME and P1_TEST page items.
Thanks,
Rohit -
Can I control column color in fluid grid layout?
The columns in fluid grid layout are gray in CC; they used to be pink. I highly prefer pink, as I almost never design with that color, and I frequently design with gray.
Is there a way to set a preference for grid column color in CC?
Thanks.NO NO NO NO NO!
Never make your navigation editable or you will shoot
yourself in the foot
when it comes time to change a link there and you would have
to touch every
page. <sheesh>
Give each of those links a unique ID, e.g.,
<a href="page1.html" id="link1">Page 1</a> |
<a href="page2.html"
id="link2">Page 2</a>....
Then in the head of each child page, add this to the Editable
Region called
"head" -
<style type="text/css">
a#link2 { color:whatever; otherstuff:whatever; }
</style>
Now you would just edit the embedded stylesheet to change
a#link2 to a#link3
or whichever button you wanted to affect on that page.
Alternatively, you can go here -
http://www.divahtml.com and get
their
DivaGPS extension.
DO NOT MAKE YOUR NAVIGATION EDITABLE.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"malcster2" <[email protected]> wrote in
message
news:ga5dev$e89$[email protected]..
> make those links editable regions on the template, and
apply the
> neccessary styles in the individual html pages -
trying to make sense of the fluid grid layout.
can you use <div class> in fluid grid layout?
is it best to only insert divs using the fluid grid layout div?
when you insert a new fluid grid div what is the difference between entering a new line or not?
the html structure seems to be the same regardless of if you start a new line or not, am i wrong?
any help would be appreciated!Ben Pleysier wrote:
It's not my code, just rubbish I pulled out of the Bootstrap example sites....plenty more like that........ how about this beauty:
<div class="spb-row-container spb-row-full-width spb_parallax_asset sf-parallax parallax-window-height parallax-fixed spb_content_element bg-type-cover col-sm-12 no-shadow hidden-xs remove-element-spacing col-natural" data-v-center="true" data-top-style="" data-bottom-style="" data-midnight="dark" style="background-color:#009fc2;margin-top:0px;margin-bottom:0px;background-image: url(http://www.thesign.pt/wp-content/uploads/2014/10/FM.jpg);">
I thought we were talking about Bootstrap. No Bootstrap in the above.
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-1172 node-type-static-page not-mobile region-content navbar-is-fixed-top" onunload="">
No Bootstrap here either.
<div class="col-lg-3 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-22 col-xs-offset-2 col-lg-offset-0">
Please allow me to explain. Bootstrap is based on 12 columns regardless of screen size. Translating the above we get the following for each of the screen sizes
large 3 cols offset 0
medium 4 cols offset 1
small 4 cols offset 1
extra small 22 cols offset 2
Our attention immediately falls on the extra small device with 22 columns that are 2 columns offset, total 24 columns. How can this be when there are only 12 columns available. Why would one have offset columns on the smallest screen size when we are already battling for real-estate. I think that if we make the classes believable we can safely ignore the classes for the extra small device. Continuing, we see the same number of columns for medium and small and the same offset. Being a mobile first approach, the classes that we assign to small will filter through to larger screen sizes making the classes for medium screen sizes ineffective. Looking at the 0 offset for large screen sizes?? Why do that when it is the default value. In other words, had Bootstrap been applied properly, the tag would look like
<div class="col-sm-4 col-sm-offset-1 col-lg-3">
The other two examples are even more ridiculous. Once again, I implore you to start learning Bootstrap and you will come to the conclusion that you are supplying us with gibberish.
I'm not supplying the gibberish it's the many websites that rely on frameworks, be they Bootstrap/Foundation/Wordpress - whatever rubbish they are using that I'm lifting this code from that are supplying it.
Take the Bootstrap form - every form input field I observe is wrapped in a <div> tag, why - it's bloated and redundant coding. Bootstrap, much like Wordpress was never invented to be used to build websites.
That IS my whole point - there are numerous examples of where Bootstrap IS NOT being used properly because people rely on something they no nothing about and end up with verbose class names splattered around all over their pages, bloated js and css scripts because they are the default files which come with Bootstrap.
<div class="col-sm-4 col-sm-offset-1 col-lg-3"> to me this is still nasty and overly complex 'class' mark-up. A page full of this tripe would drive me insane.
The very worst people you could advise to use Bootstrap are the people in this forum because most will have little knowledge of coding (that's why they turn to a framework) and end up with a page full of crap.
And I'm not verbalising you - you said it yourself. People use lots of 'short cuts' - it doesnt mean it's a good approach to take. No ones re-inventing the wheel apart from Bootstrap, who are obviously trying too. Media queries already exist to produce responsive design, learn how to implement them and free yourself from being entrapped by frameworks where you have to use their naming convention, their break points by default, their over bloated js and css files and somethimes rubbish html mark-up. -
Dreamweaver cs6 and Fluid Grid Layouts!
New to Dreamweaver cs6 and Fluid Grid Layouts!
Could you please tell me if you can create several layout grid designs (in the same website) depending on the page layout you need for each
page?
The reason I am asking is my web site has different information on each page (which is laid out differently)
Maybe create layout.css and layout2.css and so on. AND TIE EACH PAGE IN WITH A PHP INCLUDE NAVIGATION PLACED ON EACH PAGE.
Is this possible.
Thanks, Mrs. WhiteDifferent layouts for different pages? It's certainly possible, but I don't recommend it. Ideally you want to work with ONE FluidGrid Layout throughout your site with some additional CSS rules for optional regions (classes & styles) that may not be required on all pages. Some examples of optional regions would be contact forms, tables, definition lists, re-usable floats, etc...
If your Responsive Design is well planned, you shouldn't need more than one main structure for mobile, one for tablet and one for desktops. If you go down the path of having different structures for 3 devices AND each site page, you will soon be wrestling with a 10,000 lb. gorilla: Herculean to build and not much fun to maintain.
Server-side includes for site wide headers, footers & navigation are a very good idea whether your site is Responsive or not. I use them all the time.
Nancy O. -
ALV Summation button is not working when GRID layout is specified
Hi,
I have created a report with Field: ALV Grid Layout. When i dont select anything in ALV GRID Layout. and execute the report. The outout is displayed in ALV Grid. and if i select amt column and PRESS SUMMATION button. im getting the total. Thats fine.
When i select any of the saved layout in ALV Grid Layout field.and run the report, the output is geeting displayed. and if i select amt column and press SUMMATION Button, im getting info message in the popup saying "Desired operation cant be performed for Column 'amt'"
Whts te problem ?
Thanks in Advance.
Jhovee.PART-II
FORM f_display_data.
TYPE-POOLS: slis. " ALV Global types
DEFINE m_fieldcat.
add 1 to ls_fieldcat-col_pos.
ls_fieldcat-fieldname = &1.
ls_fieldcat-ref_tabname = 'VBAK'.
ls_fieldcat-do_sum = &2.
ls_fieldcat-cfieldname = &3.
append ls_fieldcat to lt_fieldcat.
END-OF-DEFINITION.
DEFINE m_sort.
add 1 to ls_sort-spos.
ls_sort-fieldname = &1.
ls_sort-up = 'X'.
ls_sort-subtot = &2.
append ls_sort to lt_sort.
END-OF-DEFINITION.
DATA: ls_fieldcat TYPE slis_fieldcat_alv,
lt_fieldcat TYPE slis_t_fieldcat_alv,
lt_sort TYPE slis_t_sortinfo_alv,
ls_sort TYPE slis_sortinfo_alv,
ls_layout TYPE slis_layout_alv.
m_fieldcat 'VKORG' '' ''.
m_fieldcat 'KUNNR' '' ''.
m_fieldcat 'VBELN' '' ''.
m_fieldcat 'NETWR' 'X' 'WAERK'.
m_fieldcat 'WAERK' '' ''.
m_sort 'VKORG' 'X'. " Sort by vkorg and subtotal
m_sort 'KUNNR' 'X'. " Sort by kunnr and subtotal
m_sort 'VBELN' ''. " Sort by vbeln
ls_layout-cell_merge = 'X'.
CALL FUNCTION 'REUSE_ALV_GRID_DISPLAY'
EXPORTING
is_layout = ls_layout
it_fieldcat = lt_fieldcat
it_sort = lt_sort
TABLES
t_outtab = gt_vbak.
ENDFORM. " F_DISPLAY_DATA -
How do I get my Fluid Grid Layout page to resizes from portrait to landscape for iPhones?
Starting in portrait on my iPhone 4, the fluid grid layout page does not resize when I turn to landscape. After I refresh / resize to fit the page on landscape and then turn the iPhone to portrait, the page resizes just fine. Everything seems to be working just fine on the desktop, ignoring IE. Could it be my media query tags?
If anyone knows a solution, it would be much appreciated. Thanks.
Here is my test page: http://www.bedroomandmore.com/1_b_fluidGrid.html
Here are my media query tags (the first set of rules does not have the media query tag and becomes the default):
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
@media only screen and (min-width: 481px) {
@media only screen and (min-width: 769px) {
Here is most of my media query CSS:
@charset "UTF-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
/* Mobile Layout: 480px and below.(smartphone portrait) */
.gridContainer {
width: 95.4184%;
padding-left: 0.5907%;
padding-right: 0.5907%;
#header {
clear: both;
float: left;
display: block;
margin-left: 0%;
width: 72%;
max-height: 0%;
display: -moz-box; /* Firefox */
display: -webkit-box; /* Safari and Chrome */
display: box;
border: none;
top: auto;
padding-top: 0.25em;
#menuHorizontal {
clear: both;
float: left;
width: 118%;
height:100%;
margin-left: auto;
position:relative;
top:-1em;
display: block;
#slides {
clear: both;
float: left;
margin-left: 0.1em;
width: 119%;
position: relative;
top: -1em;
display: block;
/*Slides container: Important: Use position:relative; with top:-1em; together to position div.
Set the width of your slides container
Set to display: none to prevent content flash*/
.slides_container {
clear: both;
width: 100%;
display: block;
/*Each slide: Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display: block for original setting
slide_container is container size
slides_container div set the size of the image inside--adjust to fit image in it so it is not cropped*/
.slides_container div {
clear: both;
width: 69%;
display: block;
/* Mobile Layout: 480px. (smartphone landscape)
Inherits styles from Mobile Layout 480px.
Set to clear:none; to allow div to shift up
Or set to clear:both; to take a whole row of the screen*/
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
.gridContainer {
width: 95.4184%;
padding-left: 0.7907%;
padding-right: 0.7907%;
#header {
clear:both;
float: left;
display: block;
margin-left: auto;
width:100%;
display: -moz-box; /* Firefox */
display: -webkit-box; /* Safari and Chrome */
display: box;
border: none;
#menuHorizontal {
clear:both;
float: left;
width: 110%;
margin-left:auto;
display: block;
#slides {
clear:both;
float: left;
margin-left: 0%;
width: 68%;
display: block;
/*Slides container: Important:
Set the width of your slides container
Set to display: none to prevent content flash*/
.slides_container {
clear:both;
float: left;
width: 100%;
display: block;
/*Each slide: Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display: block for original setting*/
.slides_container div {
clear:both;
width:69%;
display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.
Set to clear:none; to allow div to shift up
Or set to clear:both; to take a whole row of the screen*/
@media only screen and (min-width: 481px) {
.gridContainer {
width: 95.9456%;
padding-left: 0.5271%;
padding-right: 0.5271%;
#header {
clear:both;
float: left;
display: block;
margin-left: auto;
width: 100%;
display: -moz-box; /* Firefox */
display: -webkit-box; /* Safari and Chrome */
display: box;
border: none;
#menuHorizontal {
clear:both;
float: left;
margin-left:auto;
display: block;
#slides {
clear:both;
float: left;
margin-left: 0%;
width: 70%;
display: block;
/*Slides container: Important:
Set the width of your slides container
Set to display: none to prevent content flash*/
.slides_container {
clear:both;
float: left;
width: 100%;
display: block;
/*Each slide: Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display: block for original setting*/
.slides_container div {
width: 100%;
display: block;I found the problem. There is a bug in Safari for iPhone 4. Use code to fix found at http://stackoverflow.com/a/6379407
-
How can I convert my web page from a fixed width layout to a fluid grid layout?
I'm taking a web design class (I'm using Dreamweaver CS6, btw) wherein the professor started us out building our websites in a fixed width layout but now I want to change my site into a fluid grid layout. My "site" so far is just one long page, and I've already designed it with fluid grid adjustments in mind (most things are centered in the layout) so it shouldn't need excessive tweaking.
Is there a way to duplicate the site folder that holds my first page, re-open a new document in fluid, then copy the code in and tweak the width parameters for the different layouts?
Did I just answer my own question? Help - I am new at this!!
Thanks all,
KCHerbert2001 wrote:
A bit off-topic, but Osgood: have you ever used SASS or LESS? When you are building your own grid systems it can save you a tremendous amount of time, and it's a lot of fun.
Take the following simple example - it generates all the 23 css classes automatically for a 12 grid system. And simply changing one variable allows you to create and calculate any number of columns!
//variables
$desktop: 1025px;
$large-columns: 12;
@media only screen and (min-width: $desktop) {
//regular grid span classes
@for $i from 1 through $large-columns {
.span-large-#{$i} {
width: percentage($i/$large-columns);
// push classes
@for $i from 1 through (($large-columns)-1) {
.push-large-#{$i} {
margin-left: percentage($i/$large-columns);
No, not explored it yet, and may never....I don't know. I don't really make much money out of web design. It's becoming more and more difficult to find the desire to learn new techniques when the opportunities aren't really there to put them into practice on as regular basis as I would like. I've got a very good handle on css, php, html, jQuery - I'm not sure I want to add another layer at the moment, given I'm never quite sure how long I will continue to 'bang my head against the wall' . I'm getting to the stage where I keep asking myself do I really need the problems associated with learning new stuff to the point of being comfortable with it if the financial rewards at the end don't equate to the efforts of learning it.
I don't really enjoy web development if truth is known. I come from a Graphic Design background which I much prefer but somehow got side tracked and pushed in this direction and there's no way back now, lol. Whilst I concede Web Development is much more exciting its also 100 times more complex/difficult and the skills needed are considerably more.
Your example looks interesting and I should think I could pick it up reasonably easily given I work with php which uses variables on a similar basis.
Maybe you are looking for
-
HT201269 I can't find my old contacts!!! help!!!
I just "restored" my iPhone...and I am pretty sure I wiped out all my contacts....Can anyone help me?
-
How to do replication in oracle 10g
hi, I am new to Oracle. I want to do Data Replication. I am using Oracle 10g. Can any one help me by telling the steps of Oracle replication. Thanks in advance. Message was edited by: user577340 Message was edited by: user577340
-
Documents i receive a message telling me I cant open this file because The document "HFB.pdf" coiuld not be opened. Acrobat can open fiiles in the "Adobe PDF document" format. 1. What causes this message? 2. Is there a workaround? I have already
-
How Uninstall Photoshop Elements 11 for Mac?
My new iMac shows Error 6 for my PE 11. How do I uninstall and reilnstall PE 11 into my new computer?
-
Having Trouble With My Ipod HELP ME OUT!!!!!
There's a problem with my ipod every time i plug it into my mac it connects then disconnects right away not letting do anything. Then it says its syncing with my mac before it disconnects and then there's nothing on it, and when i try it on windows i