Fluid grid width
Hey!
When you create a new fluid grid in Dreamweaver Web site - why the desktop width is set to 1232px? Why not for example, 1280px?
I know that you can set the max width for all you want, but why is the default desktop width to 1232px?
I would be really grateful if you can help me!
See you soon
SHORT ANSWER: To allow for chrome browser.
LONG ANSWER: The max-width must be less than your device bandwidth target (1280px) so that your page will fit comfortably inside the browser window, without lifting the horizontal scroll bars. Same rule applies if you are targeting 1024px or 1900px. Always shave about 1% for the browser scrollbars, gutters, curbs, etc...
Nancy O.
Tags: Dreamweaver
Similar Questions
-
fluid grid appears as his means to chrome and firefox, but in ie and safari the divs to display as a percentage of the entire screen, rather than as a percentage of the maximum width
I found the problem, thank you! nothing just a missing brace in the css that was causing the problem. the lines of code are numbered, and red when there is a problem (in cc at least 15). I could be the last to know that.
-
100% width div inside the fluid grid
Hi im trying to find the best way to use the transmission grid in Dreamweaver.
One problem im having is if my fluid is width 90% how to make a DIV to work 100% in width but have the DIV stay nested in the grid?
I installed the header and footer to run 100% outside the gate, but I now have a few DIVS that go through the page and I'm not sure how I can run 100% without changing the grid at 100% width.
Any help would be greatly appreciated.
Thank you
Luke
Fluid grids are not 100% width for a reason. They are designed to be centered on the screen and you can not do it with 100% divs.
I understand what you want - maybe as in this example of custom code:
Due to some limitations, FGLayouts are not the best way to achieve this.
If you want to give your FGLayout origins, you could get an acceptable effect with gradients of background CSS selector of your body that covers the entire page.
{body
background:-webkit-linear-gradient(white, maroon). / * For the Safari.
background:-o-linear-gradient(white, maroon). / * Opera * /.
background:-moz-linear-gradient(white, maroon). / * For Firefox * /.
background: linear-gradient(white, maroon). / * W3C Standard * /.
filter: progid:DXImageTransform.Microsoft.gradient (startColorstr = 'white', endColorstr = "Brown", GradientType = 0); / * IE6-9 * /.
}
Nancy O.
-
How can I use the width of the full screen while using fluid grids?
Start playing with fluid on the CS6 networks. If you start with the fluid grid model, in the arrangement of office (for example), the gridContainer is wide of 88.5%. It seems that you should do everything in the div. gridContainer That being said, if I want to create different visual effects on my page that use a real 100% width, how can I do that and stay within this structure/design methodology?
Sounds pretty basic, but I don't want first to break the rules or hacking in a work around
Thanks in advance.
Donna
Starting with the design of FG, you can set the widths of 100% in the new Document dialog box
If you already have in the design of your page, you can change the gridcontainer classes in your css as below
{.gridContainer}
left margin: auto;
margin-right: auto;
Width: 100%;
padding-left: 0%;
padding-right: 0%;
Clear: none;
float: none;
}
-
Page when enlarged kicks / fluid grid Video resize
I have some problems with my foot on this page: http://pauldhart.com/tf_teaser.html
I applied the code to allow for the video, incorporate scalability in the fluid grid and the footer is in the EXACT right place when the window is reduced in size, however, when that maximize the footer jumps down below the scroll.
I guess it has something to do with my code for the video scaling, since it disappears when I cut this CSS but I can't identify the problem. Here is the code in question.
HTML PART:
< div id = "contentbody" >
< div class = 'container-video' >
" < iframe src =" Byline = 0 & portrait = 0 & https://Player.Vimeo.com/video/128816726?color=f6ecca "width ="500"height ="281"frameborder ="0"allowfullscreen mozallowfullscreen webkitallowfullscreen > < / iframe > "
< / div >
< div id = 'fb-root' > < / div >
< script > (function (d, s, id) {})
var js, SJF = d.getElementsByTagName (s) [0];
If (d.getElementById (id)) return;
js = d.createElement (s); js.ID = id;
js. SRC = "/ / connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore (js, SJF);
(} (document, 'script', 'facebook-jssdk')); < /script >
" < div align ="left"id ="footer"> < div class ="fb-like"data-href = ' http://Facebook.com/threefingersmovie "data-width ="330"data-colorscheme = data-show-faces of the 'light' = 'false' data-send ="true"> "
< / div >
CSS PART:
{#contentbody}
Clear: both;
float: left;
Width: 100%;
display: block;
margin: 0px;
padding: 0px;
box-shadow: 3px 10px 20px #000;
max height: 600px;
}
.video-container {}
position: relative;
padding-bottom:56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
. Video-container iframe, .video-container object, container-.video incorporate {}
position: absolute;
top: 0;
left: 0;
Width: 100%;
height: 100%;
max height: 600px;
}
If you follow the link above and resize the browser, you will see the question. Any suggestions would be very helpful! Thanks guys/girls.
The problem is caused by padding-bottom on the container-video class. When the fill is specified as a percentage, the value is always calculated the width of the parent element. This applies not only to the horizontal padding, but also vertical filling. Therefore, the page becomes, more the footer is pushed away from the video.
The solution is very simple. Once the video has reached its maximum height, you must change the fill from the bottom to a fixed value instead of a percentage. Add this to your style sheet:
@media screen and (min-width: 769px) { .video-container { padding-bottom: 576px; } } -
Do not stretch the fluid grid header image
The grid of fluid image (hero div) meets the mobile and Tablet level queries, but not at the office 1232 px.
Image develops only for a max of 1125 px of 1540 px for the nav main div, which is 73%.
the CSS code is as follows for the desktop mode:
/ * Office Layout: 769px to a maximum of 1232px. Inherits the styles of: Mobile and tablet. */
@media only screen and (min-width: 769px) {}
{.gridContainer}
Width: 88.7142%;
Max-width: 1232px;
padding-left: 0,6428%;
padding-right: 0,6428%;
margin: auto;
Clear: none;
float: none;
left margin: auto;
}
#top {}
}
{#mainNav}
}
{#menuSystem}
}
.menuItem {}
Width: 13.0434%;
Clear: none;
margin left: 1.4492%;
}Any suggestions how I can develop and stretch the image to the same width as the main nav (7 horizontal buttons) in the fluid grid container?
If the value of 88.7142% should be increased to 100%, why then the image only develops to 73% and not of 88.7142%
URL is < tyndall.net.au >
Any suggestions greatly appreciated.
Thank you
Jonathan
By default, FGLayout sets the images with a maximum width of 100%. The image can resize up to its native file size but not more.
To do this, your image must be at least as wide as the layout of office max AND you should not add height or width attributes to the image itself.
Nancy O.
-
Fluid grid Tablet: hidden divs live show
I'm new to model fluid grid, but I use Dreamweaver CS6 and I understand that the mobile CSS reverberates down to Tablet, and then to the office. However, I thought that I could hide divs by adding display: none; the CSS code in the view of the tablet. When I do this, it works very well in edit mode. Looks quite right. But when I check the live and browser hidden div view (s) is clearly visible, for example:
I have 3 divs and I want everyone to be visible in only a point of view.
Div 1 = #mobile
Div 2 = #tablet
Div 3 = #desktop
I have do this in CSS:
/ * Mobile layout: 480px and below. */
{#mobile}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
{#tablet}
display: none;
}
{#desktop}
display: none;
}
/ * Tablet Layout: 481px to 768px. Inherits the styles of: Mobile layout. */
@media only screen and (min-width: 481px) {}
{#tablet}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
{#mobile}
display: none;
}
{#desktop}
display: none;
}
}
/ * Office Layout: 769px to a maximum of 1232px. Inherits the styles of: Mobile and tablet. */
@media only screen and (min-width: 769px) {}
{#desktop}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
{#tablet}
display: none;
}
{#mobile}
display: none;
}
}
Everything looks good in edit mode. But when I see it alive, mobile is fine, office is fine, but Tablet view includes any mobile even if it is not supposed to show.
What I am doing wrong? Any help is greatly appreciated, and I can add my real code if necessary.
Thank you!
In your liquid - grid.css, line 124, you have a useless (and invalid) "}". This prevents the other CSS is expressed.
-
How to Center a div in fluid grid?
Im not able to focus whatever it is in a fluid grid. I want to set the max width on something and then Center it but "margin: 0 auto ' does not work.
Hi, try something like this:
#container {}
display: block;
Width: 100%;
float: none;
left margin: auto;
margin-right: auto;
Max-width: 960px;
}
I hope this helps.
Alex
-
Dreamweaver CC fluid grid divs do not stretch to cover 100% of the screen
Hello
I do another sensible provision using DW CC and I came across a problem.
Design colored divs that spans the entire page to 100% with a background color and borders.
I already did the design upwards as a layout width fixed to get the color codes etc. and that works well, with colors that covers the screen.
Now, I'm putiing design in DW CC using checkerboard to fluid and there is a white border on the Web site.
I can't work on how to get rid of this. Here are excerpts from my two lots of CSS stylesheets, one for a presentation grid fixed and one for a structure reactive
CSS FIXED WIDTH
body, td, th {}
do-family: Calibri;
do-size: 14px;
Color: #000;
}
{body
left margin: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
* / The wrapper header spans the entire screen no matter what size and does not have a white border on the left and the right
{#headerWrapper}
background-color: #000;
height: 101px;
Width: 100%;
margin-right: auto;
left margin: auto;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #BDDB6D;
}
FLUID GRID CSS
The fluid layout grid CSS has the following in it:
{.fluid}
Clear: both;
left margin: 0;
Width: 100%;
float: left;
display: block;
}
{.fluidList}
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
/ * Mobile layout: 480px and below. */
{.gridContainer}
left margin: auto;
margin-right: auto;
Width: 86,45%;
padding-left: 2,275%;
padding-right: 2,275%;
Clear: none;
float: none;
}
{#div1}
}
* / This header wrapper extends through the presentation of the grid only and has a white border on the left and the right
{#headerWrapper}
Max-width: 100%;
height: 101px;
background-color: #000;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #BDDB6D;
}
What do I need add to the fluid grid layout to make the headerWrapper div span the screen, no matter what width?
What should I put in the grid CSS transmissions so that he can do that?
Thanks in advance!
I did it! I can't believe. The code I used is followed. The bar divs set color and at the border through the entire page and the wrapper divs to contain content in the various bars across the page.
I must say that DW CC fluid grids are much more stable to work with and it can take a lot of coding by hand now. This is a great improvement on when I tried to use grids of fluid on a project last year.
IN THE SECTION MULTIMEDIA PHONE REQUEST
{.gridContainer}
left margin: auto;
margin-right: auto;
Width: 100%;
padding-left: 0;
padding-right: 0;
Clear: none;
float: none;
}
{#headerBar}
background-color: #000;
min-height: 101px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #BDDB6D;
padding-top: 2.735px;
}
{#headerWrapper}
Width: 86,45%;
padding-left: 2,275%;
padding-right: 2,275%;
Clear: none;
float: none;
left margin: auto;
}
{#menuAnimationBar}
background-color: #B7B7B7;
height: 293px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #BDDB6D;
background-image:-webkit-gradient (linear, 50.00% 0.00%, 50.00% 100.00%, color-stop (0%, rgba (153,153,153,1.00)), color-stop (100%, rgba (192,192,192,1.00)));
background-image:-webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);
background-image: linear-gradient (180deg, rgba (153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);
display: none;
}
{#contentBar}
background-color: #F8FCF1;
min-height: 200px;
background-image:-webkit-gradient (linear, 50.00% 0.00%, 50.00% 100.00%, color-stop (0%, rgba (245,251,234,1.00)), color-stop (100%, rgba (251,253,247,1.00)));
background-image:-webkit-linear-gradient(270deg,rgba(245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);
background-image: linear-gradient (180deg, rgba (245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);
}
{#contentWrapper}
Width: 86,45%;
padding-left: 2,275%;
padding-right: 2,275%;
Clear: none;
float: none;
left margin: auto;
}
{#socialMediaBar}
background-color: #000;
min-height: 83px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-bottom-color: #BDDB6D;
border-bottom-color: #BDDB6D;
}
{#socialMediaWrapper}
color: #FFF;
Width: 86,45%;
padding-left: 2,275%;
padding-right: 2,275%;
Clear: none;
float: none;
left margin: auto;
padding-top: 2,275%;
}
{#footerBar}
color: #FFF;
background-color: #AAAAAA;
min-height: 176px;
background-image:-webkit-gradient (linear, 50.00% 0.00%, 50.00% 100.00%, color-stop (0%, rgba (153,153,153,1.00)), color-stop (100%, rgba (185,185,185,1.00)));
background-image:-webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);
background-image: linear-gradient (180deg, rgba (153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);
}
{#footerWrapper}
Width: 86,45%;
padding-left: 2,275%;
padding-right: 2,275%;
Clear: none;
float: none;
left margin: auto;
}
IN THE MULTIMEDIA TABLET QUERY SECTION
{.gridContainer}
Width: 100%;
padding-left: 0%;
padding-right: 0%;
Clear: none;
float: none;
left margin: auto;
}
{#div1}
}
{#headerBar}
}
{#headerWrapper}
Width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
Clear: none;
float: none;
left margin: auto;
}
{#menuAnimationBar}
display: none;
}
{#contentBar}
}
{#contentWrapper}
Width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
Clear: none;
float: none;
left margin: auto;
}
{#socialMediaBar}
}
{#socialMediaWrapper}
Width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
Clear: none;
float: none;
left margin: auto;
}
{#footerBar}
}
{#footerWrapper}
Width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
Clear: none;
float: none;
left margin: auto;
}
{#menuAnimationWrapper}
}
IN THE PC MEDIA QUERY SECTION
{.gridContainer}
Width: 100%;
Max-width: 1920px;
padding-left: 0%;
padding-right: 0%;
margin: auto;
Clear: none;
float: none;
left margin: auto;
}
{#headerBar}
}
{#headerWrapper}
Width: 88.5%;
Max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
Clear: none;
float: none;
left margin: auto;
}
{#menuAnimationBar}
display: block;
}
{#contentBar}
}
{#contentWrapper}
Width: 88.5%;
Max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
Clear: none;
float: none;
left margin: auto;
}
{#socialMediaBar}
}
{#socialMediaWrapper}
Width: 88.5%;
Max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
Clear: none;
float: none;
left margin: auto;
}
{#footerBar}
}
{#footerWrapper}
Width: 88.5%;
Max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
Clear: none;
float: none;
left margin: auto;
}
{#menuAnimationWrapper}
Width: 88.5%;
height: 293px;
Max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
Clear: none;
float: none;
left margin: auto;
}
-
Hello
Love the fluid grid system, but I have a question about this:
Is it in anyway possible to create different dimensions with it?
I want my headers to have different sizes, as office 275px height by width of 1232px and adjust the height for Tablet and mobile. Been trying to pull this off, but I really do not do the job.
Seen a few tuts, but could not find an answer to it. Only the approach that worked, I saw created an Adaptive page from scratch.
Is this possible? If so, how do I work?
Thanks for any response.
vVwd
The fixed. My bad. No0b@work here.
(the background in the wrong css file layer was to blame)
Should be easy to go now. Thanks for the tips. Appreciated.
-
fluid grid to the creation of boxes
try to understand how the checkerboard to fluid. what I understand when you use checkerboard to fluid, you can set fixed width and the height of the div on my site www.fortunecookieguy.com I have a series of installation of div, one for special offers, for most popular etc... below the promotions div I want to create 2 boxes about 40px 40px which will contain a photo and the special info for this special price, but how to create these boxes if I can't use the height and width fixed?
again, my site is www.fortunecookieguy.com Thank you.
You'll need to think "outside the box" because the fluid grids are based on % instead of fixed width pixels.
Think about how your site will look at Smartphones first. Everything will be based on this primary provision.
Nancy O.
-
layout and fluid grid div tags
so now, I start my journey of learning the layout feature fluid grid dw6. just started and have already fallen on a problem. When to create a div, I prefer to give them a width and height seems just to help put on the page, but in fgl when I put the value for these it just seem to ignore it, is this true? If so, how does this work?
Hello
The idea of using a fluid grid presentation is that the size of the div elements will adjust themselves based on the width different screen sizes.
It is difficult to say without seeing your design/layout that you work to say whether or not you should actually try to set the fixed width and height for your div elements fixed width setting is fine if you are designing a traditional presentation, fixed width, it can help you to read this article on the differences between fixed vs fluid layouts http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-r ight-one-for-you /
Since you mention that you are just starting to work with fluid grid, maybe check out Adobe TV can help you get started...
Alassane http://TV.adobe.com/watch/Learn-Dreamweaver-CC/Create-Fluid-Responsive-Web-pages-in-dreamw.
Good luck!
-
"Cannot find error in stylesheet Dreamweaver fluid grid" in Dreamweaver CS6
I have error in Adobe Dreamweaver CS6 which is part of the Creative Suite 6 Master Collection.
Mistake was when I try to use 'rubber' < div > layout: "Could not find style of grid sheet fluid Dreamweaver. When I clicked on the button in the sidebar, in the new document.
For anyone that has this problem, I thought it... On your style sheet! YOU MUST HAVE THIS CODE AT the TOP: Or it won't work and it gives this error and you can't see your fluid grid guides all... This will fix it if you are missing this code on your STYLE SHEET... Took me a few days to find out the reason, but I dug deep...
@charset "utf-8";
/ * Simple fluids
Note: Fluid requires that you remove the attributes height and width of the media of the HTML
http://www.alistapart.com/articles/fluid-images/
*/
IMG, object, embed, {video
Max-width: 100%;
Color: #000;
text-align: center;
}
/ * IE 6 doesn't support max-width so 100% width by default * /.
. IE6 img {}
Width: 100%;
}
/*
Properties Grid Dreamweaver fluid
----------------------------------
DW-num-CLO-mobile: 5;
DW-num-CLO-Tablet: 8;
DW-num-OCOL-Office: 10;
DW-gutter-percentage: 25;
Inspiration of "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-Web-design
Golden by Joni Korpi grid system and
*/
/ * Mobile layout: 480px and below. */
-
I created a transition .css for expand/collapse to the overview of a div in CS6. I set the max-height for the div for the office, however, I would like to set different max heights for the Tablet and mobile page layouts since the Office max height is too big to hide the info in these layouts.
Here is my current code of .css:
#whf-content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
color: #FFF;
background-attachment: fixed;
background-repeat: repeat;
background-color: #000;
max-height: 278px;
overflow: hidden;
}
#whf-content {
clear: both;
float: left;
margin-left: 0;
width: 66.6666%;
display: block;
max-height: 190px;
}
#whf-content {
clear: both;
float: left;
margin-left: 0;
width: 32.6007%;
display: block;
-webkit-transition: all .75s ease 0s;
-moz-transition: all .75s ease 0s;
-ms-transition: all .75s ease 0s;
-o-transition: all .75s ease 0s;
transition: all .75s ease 0s;
}
#whf-content:hover {
max-height: 999px;
}
As you can see, I tried to do two different values of max height with 278px and 190px above BUT when I do that, the 190px affects the view of the Office of the substitution of the value of 278px.
My question is, how can I set different heights max for the same div only affect each individual fluid grid view? Any help would be greatly appreciated.
Thanks a lot for your help Nancy. I chose to stay in FluidGrid.css and exchanged the transition .css hover with a Panel widget reducible Spry. Who managed the problem of resizing, as well as the absence of Hover on the tablets and phones. In case someone has a similar problem, I'll include the .css for the layout as well as the Spry .css.
CSS Spry Collapsible Panel:
@charset "UTF-8";
/ * SpryCollapsiblePanel.css - version 0.5 - Pre - Release Spry 1.6.1 * /.
/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/ * This is the selector for the main container of CollapsiblePanel. For our
* style by default, the CollapsiblePanel is responsible to draw borders
* about the widget.
*
* If you want to limit the width of the CollapsiblePanel widget, set a width
* the CollapsiblePanel container. By default, our CollapsiblePanel extends horizontally to fill
* a space available.
*
* The name of the class ("CollapsiblePanel") used in this switch is not necessary
* make the widget function. You can use any class name you want to style the
* CollapsiblePanel container.
*/
. CollapsiblePanel {}
margin: 0px;
padding: 0px;
}
/ * This is the selector for the CollapsiblePanelTab. This container houses
the Panel personnel. It is also the container where the user clicks
* to open or close the Panel.
*
* The name of the class ("CollapsiblePanelTab") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
* The CollapsiblePanel tab panel container.
*/
. {CollapsiblePanelTab}
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
do-family: Georgia, "Times New Roman", Times, serif;
do-size: 14px;
make-weight: bold;
text-align: center;
color: #FFF;
}
/ * This is the selector for the content area of a CollapsiblePanel. It is important to note that
* You should never put any filling on the element of content area if you plan to
* use opening and closing of the CollapsiblePanel animations. Place padding non-zero on the content
* item may cause the CollapsiblePanel suddenly increase in height, while signs alive.
*
* The name of the class ("CollapsiblePanelContent") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
* CollapsiblePanel content container.
*/
. {CollapsiblePanelContent}
margin: 0px;
padding: 4px;
do-family: Georgia, "Times New Roman", Times, serif;
do-size: 14px;
color: #FFF;
}
/ * An anchor tag can be used inside a CollapsiblePanelTab so that the
* keyboard focus ring will appear * inside * the tab rather than around the tab.
* This is an example of how to make the text in the eyes of anchor tag
* as the non-anchor (normal) text.
*/
. CollapsiblePanelTab a {}
text-decoration: none;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open. The "CollapsiblePanelOpen" class is added and removed programmatically
* to panels as long as the user clicks on the tabs within the CollapsiblePanel.
*/
. CollapsiblePanelOpen. {CollapsiblePanelTab}
}
/ * This is an example of how to change the appearance of the tab panel when the
* CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is added and removed programmatically
* whenever the CollapsiblePanel is closed.
*/
. CollapsiblePanelClosed. {CollapsiblePanelTab}
/ * background color: #EFEFEF * /.
}
/ * This is an example of how to change the appearance of the tab of the Panel as the
* mouse passes over it. The "CollapsiblePanelTabHover" class is added programmatically
* and removed containers tab panel as the mouse enters and leaves the tab container.
*/
. CollapsiblePanelTabHover. CollapsiblePanelOpen. {CollapsiblePanelTabHover}
}
/ * This is an example of how to change the appearance of all the Panel tabs when the
* CollapsiblePanel has focus. The class "CollapsiblePanelFocused" is programmatically added and removed
* whenever the CollapsiblePanel WINS or loses the keyboard focus.
*/
. CollapsiblePanelFocused. {CollapsiblePanelTab}
}
CSS layout:
@charset "utf-8";
/ * Simple fluids
Note: Fluid requires that you remove the attributes height and width of the media of the HTML
http://www.alistapart.com/articles/fluid-images/
*/
IMG, object, embed, {video
Max-width: 100%;
}
/ * IE 6 doesn't support max-width so 100% width by default * /.
. IE6 img {}
Width: 100%;
}
/*
Properties Grid Dreamweaver fluid
----------------------------------
DW-num-CLO-mobile: 4;
DW-num-CLO-Tablet: 8;
DW-num-OCOL-Office: 12;
DW-gutter-percentage: 15;
Inspiration of "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-Web-design
Golden by Joni Korpi grid system and
*/
/ * Mobile layout: 480px and below. */
{.gridContainer}
left margin: auto;
margin-right: auto;
Width: 88.0326%;
padding-left: 1.4836%;
padding-right: 1.4836%;
}
{#LayoutDiv1}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
#header {}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
#maincontent {}
Clear: none;
float: left;
margin left: 2.6785%;
Width: 100%;
display: block;
}
#navigation {}
Clear: none;
float: left;
left margin: auto;
Width: 100%;
display: block;
top of the margin: 80px;
margin-bottom: 80px;
background-color: #300;
height: 16px;
top: 5px;
}
{#whf - content
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
{#theride - content
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
{#donate - content
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
color: #FFF;
background-repeat: repeat;
background-attachment: fixed;
border: 0px solid #666;
}
#footer {}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
color: #FFF;
background-attachment: fixed;
background-image: url (.. / bkgdContent.png);
background-repeat: repeat;
top of the margin: 20px;
}
/ * Tablet Layout: 481px to 768px. Inherits the styles of: Mobile layout. */
@media only screen and (min-width: 481px) {}
{.gridContainer}
Width: 91.4836%;
padding-left: 0.7581%;
padding-right: 0.7581%;
}
{#LayoutDiv1}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
#header {}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
#maincontent {}
Clear: none;
float: left;
margin left: 1.6574%;
Width: 100%;
display: block;
}
#navigation {}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
height: 16px;
}
{#whf - content
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
{#donatecontent}
Clear: none;
float: left;
margin left: 1.6574%;
Width: 100%;
display: block;
}
{#theride - content
Clear: both;
float: left;
left margin: 0;
Width: 49.1712%;
display: block;
}
{#donate - content
Clear: none;
float: left;
margin left: 1.6574%;
Width: 49.1712%;
display: block;
}
#footer {}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
}
/ * Office Layout: 769px to a maximum of 1232px. Inherits the styles of: Mobile and tablet. */
@media only screen and (min-width: 769px) {}
{.gridContainer}
Width: 89.0217%;
Max-width: 1232px;
padding-left: 0.4891%;
padding-right: 0.4891%;
margin: auto;
}
{#LayoutDiv1}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
#header {}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
color: #FFF;
}
#maincontent {}
Clear: both;
float: left;
left margin: 0;
Width: 32.6007%;
display: block;
}
#navigation {}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
{#whf - content
Clear: both;
float: left;
left margin: 0;
Width: 32.6007%;
display: block;
}
{#donatecontent}
Clear: none;
float: left;
margin left: 1.0989 per cent;
Width: 100%;
display: block;
}
{#donate - content
Clear: none;
float: left;
margin left: 1.0989 per cent;
Width: 32.6007%;
display: block;
}
#footer {}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
{#theride - content
Clear: none;
float: left;
margin left: 1.0989 per cent;
Width: 32.6007%;
display: block;
}
}
#whf - content: hover {}
Max-height: 999px;
do-family: Georgia, "Times New Roman", Times, serif;
}
{#whf - content
do-family: Georgia, "Times New Roman", Times, serif;
}
-
Missing divs fluid grid resize handles
Hi, I followed the tutorials of page layout fluid grid step by step, but every time I insert a div tag (class: fluid) I don't get the sizing on the div. handles the div hover highlights in red, onclick the Red edge Gets a blue inner border. Resize it, duplicate, delete buttons, I can't create a layout. Any ideas?
Win7 Home premium. Latest update of cloud creation.
Thank you
I have the SOLUTION! Here is what happened...
In the fluid - grid.css you created first...
Find the class which is more you allows to have the handles (ie. the handles have disappeared from my .pageHeader class)
Add width: 100%; on the inside of the hooks.
{.pageHeader}
Width: 100%
}
Save the file and go back to Design mode. You have the rear handles!
Maybe you are looking for
-
Will there be a Libretto W100 with Haswell of Intel CPU?
I'm in love with my Libretto w100.I upgraded to 256 GB. Now, it takes an upgrade to Haswell. This would solve 2 main criticisms: -battery life-noise because of heating. A booklet with Haswell would be the best computer in the world.
-
Portege series: when they come in the 21st century?
I owned laptop computers Portege during the last millennium and has always been happy with them. My last was a M100 and I liked especially for its trackpoint instead of the Tablet and much of its equipment has been running flawlessly on Linux (in fac
-
After reinstallation, can't play for more than 30 minutes.
original title: fsx and activisionI have 2 years using fsx. Recently, I reinstall fsx and when I install it it asks activision key and I can't fly for 30 min. What should do? Kind regards Guy
-
Vostro 3550 restarts automatically (loop) every 3 seconds
Dell support, I have a problem with a laptop Vostro 3550. When I turn on the laptop, it just is not started at all but it auto resarts at the same time, every 3 seconds, the screen is black. The food, fan button, 3 buttons and also the front power i
-
What is the difference between the 4620 Officejet and 4622?
I read a lot of HP product and specifications and even searched the Internet, but I can't know the difference of the 4620 and 4622. My printer says 4622 and reading refers to the 4620 series. Thanks for the reply.