Fluid grid layout-how to keep an image on same line as menu
I am starting a new page and at the header I am trying to have a logo stay on the same line horizontily as the spry menu.
the spry menu seems to always go under the logo instead.
I am assuming the log and the menu should be in the same fluid grid layout div? or do I insert another div, but just not have another row checked.
I am working in CS6 and I am obvousley not a web designer. any imput would be appreciated... thanks...
Float the logo.
<img src="logo.jpg" style="float:left">
Nancy O.
Similar Messages
-
DW CC Fluid grid layout how to change px width for desktop layout
Hi there,
I have been going through the various tutorials about fluid grid layout and setting up our bureau's website in a responsive layout.
The width of the original design was 960 px and the hero pic and others have been exported at that size.
The first divs in the design look fine, header with the 960 px pic in it, and also the BC menu which is set to 960 wide.
However the body text goes out to the right, past the 960 px and this is because, right at the start, when starting the file in DW the desktop screen width is set to 1232px.
How can you change this setting when starting a new fluid grid layout?
I have tried changing the number of columns, or the percentage, and the width for desktop remains at 1232px.
Why is this?
Not all of our clients want a site 1232px wide on a pc.
Thanks so much.Hi Ben and Nancy,
Thanks for your replies, but maybe you both don't realise I am asking specifically about DW CC and setting up a responsive design using a fluid grid layout?
I have been following the recent videos from Adobe on this.
As far as the width of 960 goes, Nancy I am only shortchanging myself, as this is the website for our agency. The original design is 960px wide as I did read somewhere that this width is recommended now that responsive is coming, as it is easily divided into a grid layout. I also am quoting for a client at the moment who wants a responsive design for their website, and they have specifically requested that the site have a maximum width of 960 px. So I would like to find out if this is possible in DW CC at the moment when doing a fluid grid layout.
So what I am trying to do here is follow the Adobe tutorials on responsive design, using DW CC and I am using the current design for our agency website as a trial to set this up and try and get it working as a responsive website.
It does not seem to me that many other people are doing this, as most people are recommending that I try Github or Bootstrap.
However, I am not a coder and I am used to using DW, so I would like to get the DW CC responsive design features working if possible.
Ben the CSS you are looking at is being generated by DW CC as I follow the steps in the Adobe demonstration videos to set up a fluid grid layout in DW CC.
One of the things they say in the videos is that you can't program the CSS directly when doing a fluid grid layout, or you break the CSS and it all stops working. So I am using the new panels in DW CC to set up the layout. One thing I cannot get access to is the ability to set a maximum width for the site. It seems to be set in concrete when you start the fluid design up in DW CC.
Here is a pic of the screen I am talking about that sets the maximum width:
I cannot click in the pixel width at the top and change it. Also if I adjust the number of gridlines or the percentage for the pc layout, the default maximum pixel width does not change.
If you click on the preferences button and go into the Window sizes screen, there does not seem to be a way to set the maximum pc width here either, so I am a bit stumped.
Maybe I just have say to my clients that if you want a responsive design then the max width for pc can only be 1232px? It does seem strange to me that this cannot be changed. -
DW6 fluid grid layout issue: writes to page instead of css file
Using DW6 (version 12, owned, build 5861) on Windows 7 64 bit.
Following tutorials and the help files to use the fluid grid layout.
Start a blank page on a new site, which inserts the starter div and new css file
Immediately save page, which also generates/saves ancillary files (js and css).
Remove inner div that's created in order to use my own (have also tried leaving the default one in place and using that)
Insert new div, within the "gridContainer clearfix" div.
Place cursor just after that new div, still inside "gridContainer clearfix" and add new "fluid grid layout div tag", new row.
Following same method, do so again.
Dreamweaver adds the generated CSS code to the actual page instead of the expected div, visibly (minified)....and everything breaks. It does *not* add the code into the CSS file from there on and the only way to have it display the div (which does not show any visual indicators since the CSS is basically lost that would do so, is to CTRL-Z to undo the last step. It undoes the CSS showing as the only content in the HTML file, and *does* show a div with the name I'd given it. If I copy/paste that generated CSS into the fluid css file *then* CTRL-Z, it looks the way it's supposed to, with drag handles, visible indentations and so on.
If I then change div widths or position, it does record those changes in the CSS file, so it appears this is only when inserting new divs after the second one that's a problem (third div inside the container is when it starts choking; none overlap).
This is repeatable, on both desktop and laptop, running the same version. I've tried saving after every div insertion, only saving at the start, code view only, split only...
I've tried searching for someone else having this issue and must not be wording the search properly, can't find anyone else seeing this. It's a weird one.
If anyone can point me to something to try so the workaround isn't needed, it would be appreciated.OK try this workflow.
Create a new FGLayout and SAVE. This will save your CSS file with whichever name you give it.
Switch to Design View. Click on Mobile Display. Build your mobile layout first since this is what everything else is based on.
Insert a few Divs and don't worry about content. Just get the basic Div structure stacked one on top of the other like this:
<div class="gridContainer clearfix">
<div id="div1">
Div 1
</div>
<div id="div2">
Div 2
</div>
<div id="div3">
Div 3
</div>
<div id="div4">
Div 4
</div>
</div>
Hit Save and name your HTML file. Do not edit the CSS file. DW will generate the necessary layout code for you.
Switch to Tablet Display.
Grab the right side handles to resize divs and move to row above as desired.
Save often during development.
Switch to Desktop Display and repeat.
Once your layout is built, test media queries by previewing in browsers by resizing viewport
When you are completely satisfied with your responsive layout, begin adding content and use a separate external style sheet for content styles. DO NOT EDIT boilerplate or Layout CSS files as doing so could break your layout.
Nancy O. -
How to Scale Images in a Table in Fluid Grid Layout?
I copied over a table full of mouseover images into my new fluid grid layout. It all works fine, but in Mobile mode, all the images are compressed horizontally. How do I fix this?
http://savcp.com/howwemet-fluid.htmlStrip out your table code with F&R. You could greatly reduce your code & page load by using CSS instead of image swap behaviors. Same size images would produce a nicer appearance, too.
Below, I used floated <p> tags as containers for pictures. Copy & paste this into a new, blank document and SaveAs test.html. Preview in browsers with various viewport widths to see the effect.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document</title>
<style>
body { background: #222 }
/**BEGIN PICS**/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
#pics {
width: 100%;
overflow:hidden;
margin: 55px auto;
border: 1px solid silver;
#pics p {
float: left;
width: 24%;
text-align: center;
/**space between**/
margin: 0 0.25%;
border: 1px solid #222;
#pics img {
max-width: 100%;
border: 5px solid #333;
/**opacity on linked pics**/
#pics a img {
/**for pre-IE8**/
filter: alpha(opacity=90);
/**for other browsers**/
opacity: .90;
/**on mouseover**/
#pics a img:hover, #pics a img:active, #pics a img:focus {
filter: alpha(opacity=100);
opacity: 1.0;
border-color: #09C;
/**ADJUST BREAKPOINTS AS REQUIRED**/
/* Special Rules for Mobiles */
@media only screen and (max-width: 480px) {
#pics p{ height:110px;}
/* Special Rules for Tablets */
@media only screen and (min-width: 481px) {
#pics p{ height:175px;}
/* Special Rules for Desktops */
@media only screen and (min-width: 600px) {
#pics p{ height:255px;}
/**end PICS**/
</style>
</head>
<body>
<div id="pics">
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="wk3.html">
<img src="http://savcp.com/images/story/wk2.gif">
</a></p>
<p><a href="ss3.html">
<img src="http://savcp.com/images/story/ss2.gif">
</a></p>
<!--end #pics-->
</div>
</body>
</html>
Nancy O. -
How do I center an image inside a div tag using fluid grid layout?
where do I find and what do i use the image properties position when using the fluid grid layout. I'd like to center the image in the mobile page versus th left position in the desktop.
This is what my css codes looks like where the image is in the div tag:
#logo_links {
clear: both;
float: left;
margin-left: 0;
width: 32.2033%;
display: block;
This is the html code where the image is:
</div>
<div id="logo_links">
<div align="center">
<p><img src="../fluidgrid/images/3_7x2logo.jpg" alt="" width="236" height="110" align="left"></p>
</div>
</div>
I'm going to need more detail where to insert the suggested code as I am a newby!
Thanks -
Making my header background image scaleable using fluid grid layout
I'm sorry I dont really know how to post a link to this site (its not online just on my laptop) But really all I have is a blank screen I just started trying to build this responsive site (the site I was building wasn't responsive so i had to start over so thats where I'm at. I started a new fluid grid layout in dreamweaver cc I use 24 collums at 100%. I deleted the the div (but not the grid container one) . First is that I'm trying to build a header using the fluid grid layout (my laptop screen is 1920 px wide so I use the full screen because I want my site to take up a users full screen). The issue is when I use a image thats 1920 px width for a header background it test great in the browers meaning it scales correct but when I check it out in the smartphone and tablet preview options within dreamweaver cc the image is chop off. How do I get the image and really the rest of the site to scale and resize correctly not just in full screen for my pc but for tablets smartphones and anyones computer? I'm baffled please help? I hope I'm being clear if not I'll try again I need your help thank you
Try to keep responses in the original thread, it keeps replies from getting confused.
http://forums.adobe.com/thread/1430668?tstart=0 -
Placing a background image in fluid grid layout
I am having trouble building a fluid grid layout I am not sure why but when I shrink the layout it doesn't seem to work correctly
I need to do 2 things.
1) make the background image shrink as it is suppossd to. when you scale down the images doesn't shirink to tablet size and isn't there for the phone size (although I think I want a new image for phone with just one side of the (page image). on it so I assume I just link that in there under that section in in the css
2)It doesn't seem to want to align the writing so that it is only over the page section of the background image on each side (the rightcontent and left content boxes-ie they should look like text on a page)
also I want to take the page here when it is finished and make it a template for further pages (just changing the text) is that done the same as usual for the fluid grids?
Thank you in advance for the help
Here is the link that the site has been temp posted on for detail editing.
http://approvalsite.info/Kind of makes sense.
I am not sure how to make the div tag layouts relative to the background image.
please advise.
also, I have been playing with it and it seems to be working better now.
But the issue I have with it now is that the image on the right side of the page keeps showing at the bottom of the page instead of on the top of the page directly next to the wording on the left.
does anyone know why?
I am sure it is just a simple coding issue.
help
approvalsite.info
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%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
width: 85%;
padding-left: 1.82%;
padding-right: 1.82%;
background: url(../images/DSC_0014.jpg) center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-background-size: cover;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#menubar {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#leftcontent {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
height:auto;
#rightcontent {
clear: both;
float: right;
margin-left: 0;
width: 100%;
display: block;
height:auto;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
background: url(../images/DSC_0013.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-background-size: cover;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#menubar {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#leftcontent {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#rightcontent {
clear: both;
float: right;
margin-left: 0;
width: 100%;
display: block;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 90%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
background: url(../images/DSC_0013.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-background-size: cover;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header {
clear: both;
float: left;
margin-left: 5%;
width: 100%;
display: block;
#menubar {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#leftcontent {
clear: both;
float: left;
margin-left: 15%;
width: 30%;
display: block;
padding-right: 2%;
#rightcontent {
clear: none;
float: right;
margin-left: 1%;
width: 49%;
display: block;
margin-right: 8%;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
HTML
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="_css/layout.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="index_files/css3menu1/style.css" type="text/css" />
<!-- End css3menu.com HEAD section -->
</head>
<body>
<div class="gridContainer clearfix">
<div id="header"><h1>Jan Kardy's Literary Agency</h1></div>
<div id="menubar">
<!-- Start css3menu.com BODY section id=1 -->
<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="../index.html" style="height:18px;line-height:18px;">Home</a></li>
<li class="topmenu"><a href="../about_jankardys.html" style="height:18px;line-height:18px;">About Jan Kardys</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Resources</span></a>
<ul>
<li><a href="../Education_connection.html">Education Connection</a></li>
<li><a href="../submission_guidelines.html">Submission Guidelines</a></li>
<li><a href="#"><span>Blogs</span></a>
<ul>
<li><a href="http://unicornwritersconferencect.blogspot.com/">Unicorn Writers Conference</a></li>
<li><a href="http://advancenetworkingunicorn.blogspot.com/">Advanced Networking Blogs</a></li>
</ul></li>
<li><a href="../first_steps_to_publishing.html">First Steps to Publishing</a></li>
<li><a href="../library_publish_events.html">Library & Publishing Events</a></li>
<li><a href="#">Art Gallery</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Clients</a></li>
<li class="toplast"><a href="#" style="height:18px;line-height:18px;">Contact Jan Kardys</a></li>
</ul>
<p style="display:none"><a href="http://css3menu.com/">Horizontal Menu Using CSS Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->
</div>
<div id="leftcontent">
<p>Jan Kardys, President of Black Hawk Literary Agency, has thirty years of diversified publishing experience for nine major publishing corporations. Black Hawk Literary Agency LLC represents a broad spectrum of authors and illustrators, with a focus on new nonfiction and fiction. <br />
</p>
<p>Jan was Director of Contracts for Warner Books/Little, Brown & Company, Director of Contracts at Macmillan Publishing Company, Charles Scribner's Sons, and Contracts Director at Prentice Hall/Simon & Schuster. Ms. Kardys has worked at Harcourt Brace Jovanovich, Doubleday, Scholastic, Lippincott & Crowell, Publishers, St. Martin's Press, Conde Nast Publications, and Google. Beginning a career in editorial, Jan also worked in art and production in School publishing. Jan held various executive positions in subsidiary rights, licensing, database design, imaging, royalty conversions, contracts, copyrights & permissions departments.<br />
</p>
<p></p>
</div>
<div id="rightcontent"><p><strong><center>Jan Kardys, Literary Agent<br />
Black Hawk Literary Agency, LLC. <br />
17 Church Hill Road,<br />Redding, CT 06896</center></strong></p>
<p><strong><center>
<p><img src="images/jankardys.jpg" alt="jankardys_headshot" /></p>
<p>Blog: <a title="http://bookpublishingteacher.blogspot.com" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://bookpublishingteacher.blogspot.com">http: bookpublishingteacher.blogspot.com</a><br />
</p>
<p>Email: <a href="mailto:[email protected]" title="mailto:[email protected]">[email protected]</a> <br />
</p>
<p>Phone: 203-938-7405</p>
</center></strong></p>
</div>
<div id="footer"><h6>Webpage designed by Technomage Web Design</h6></div>
</div>
</body>
</html> -
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. -
In Fluid Grid layout, I have hidden 2 div for mobile layout. How do I unhide them?
In Fluid Grid layout, I have hidden 2 <div> for mobile layout. How do I unhide them?
Hi there,
I visited your site using Dreamweaver CC and tested it using the default Desktop, Tablet and Mobile sizes, followed by the Smart Phone Size.
The CSS you currently have sets the featurest <div> to 'display: none' when viewed on screen sizes lower than 480px:
Another helpful way to find out what is going on with your CSS is to test the site with Firefox using Web Developer Tools to inspect the element (or alternatively, Adobes Inspect tool). You can right-click the image and "Inspect Element" then resize the browser window so you can see exactly which CSS rule is being applied and overrided.
My suggestion would be to add an additional media query in Dreamweaver to handle all screen sizes below 480px and then set divs or elements you want to hide or show display property to visible.
Hope this helps! -
How can i apply border for fluid grid layout div
How can i apply border for fluid grid layout div
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="CSS/Layout.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
</script>
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"><img src="SJV-Images/Banners/Dark-green-curved-header.png"/></div>
<div id="LayoutDiv2">
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="SJV-Images/Stud1.jpg"/>
</li>
<li>
<img src="SJV-Images/Stud2.jpg" />
</li>
<li>
<img src="SJV-Images/Stud3.jpg" />
</li>
</ul>
</div>
</div> </div>
<div id="Nav">This is the content for Layout Div Tag "Nav"</div>
<div id="Special_Features"><h3 align="center">SPECIAL FEATURES</h3>
<ul>
<li>
It is one of the oldest school.</li>
<li>It was first started as an orphanage for the children of British soldiers, and later moved to its current location.</li>
<li>Rich in Anglo-Indian tradition dating back to three centuries.</li>
<li>The campus now has separate buildings within the campus for year 1 to year 8 (Junior and Sub Junior block) and year 9 to year 12 (Senior and Super Senior block).</li>
<li>The school has montessori facilities in a separate building.</li>
<li>The School also has boarding facilities for students from distant places.</li>
</ul></div>
<div id="History"><img src="SJV-Images/His_Image.png" alt="Hisimage" class="floatleft">
<h3>HISTORY OF OUR SCHOOL</h3><P>In 1750 – a very long time ago,a missionary and a teacher, Christian Frederick Schwartz came to India to work in the Danish Mission at Tranquebar.Due to his own personal charm, genius and integrity, soon he became a trusted envoy to the court of Princes ,both hostile and friendly. He even helped in the training and education of Serfogee Rajah, the adopted son of the Tanjore Raja Tuljagee.</P></div>
<div id="Photo_Gall"><center>
<strong>PHOTO GALLERY</strong>
</center>
<p><img src="SJV-Images/Photogall.png" width="174" height="70" class="floatright"/></p>
</div>
<div id="News_Events"><center>
<strong>NEWS & EVENTS</strong>
</center><center>Annual Day<br><center>
Alumni Meet<br>
Exam Time Table<br>Parents-Teacher's Meet</center>
</center>
<br></div>
<div id="footer">This is the content for Layout Div Tag "footer"</div>
</div>
</body>
</html> -
How Do I Put Pictures anywhere in fluid grid layout??
Hi,
I was wondering how you put pictures anywhere you want in fluid grid layout without having to use the fluid grid layout div tag. I find it easier to use the ap div and simply insert pictures and move them freely however when i do that they dont stay in the correct place and the other grids? Is there an easier way?Sorry but APDiv tags don't work in Fluid Grid layouts. That's why Adobe removed them from CC.
You must use the Fluid Grid divs in your layout to hold your text and images.
<div class="gridContainer clearfix">
<div class="div1">
insert image here...
</div>
<div class="div2">
insert image here...
</div>
</div>
Nancy O. -
How can I add a jquery effect (parallax bacground effect) in a fluid grid layout? I
How can I add a jquery effect (parallax bacground effect) in a fluid grid layout? I download it from the web (the effect), I use it in a blank html page and all works correctly. Using it in a fluid grid and no images appears and no effect.. why? In the Fluid grid layout I add the .html information inside the container.. and I add the css information in first place.
I download it from: http://www.jqueryrain.com/2012/02/jquery-scrolldeck-parallax-plugin/I've never tried to combine them. But to be honest, I don't think jQuery Parallax is going to work in FGLayouts b/c Parallax backgrounds are not built on a mobile first approach. For best results, Parallax requires a min-width of 960px which isn't mobile friendly.
Nancy O. -
Background Images in Fluid Grid Layouts
How can I get the background image that I assign to a fluid grid layout div to fill up 100% of the grid space and at the same time size the background to the fluid boundaries of the div the same way as if I had placed an image into the div? Currently, the background image lays in the grid at the pixal size of the background picture with only the portion of the background showing commenserate withthe size of the div contents. I use CS6.
Thank you.In your CSS Styles menu, if you double click on the layout div you are working on or the grid container, you will find that the image will show if you hit the return key. If you create a table bigger than the div tag or grid container, it will automatically resize and you be able to see your image. Thats a couple of cheat ways so you can see your image when you work and when you publish.
It just means you will have several of this code: <p> </p>
The image will only show the width and the height of layout div that you are working in.
I have been able to place one fluid grid layout div tag inside on another, although I find that if I make this a template file, the template tends to break over time. Not sure it that's because I am giving Dreamweaver a headache with multiple fluid grid layout div tags inside each other.
The most I have done: 1st level grid container, 2nd level inside grid container were layout div for spry collapse panel menus, 3rd level inside layout div for spry collapse panel menus were sub menus.
I have tried placing one image in the background of the grid container and then another image over the top in a fluid grid layout div tag. The reason why they move is because of the fixed/scroll option inside the CSS style. I found that when publishing, certain browsers shift both images either up or down. This can be a problem, especially if you create an image with a white box and try to align the second image up inside.
It probably can be done, and I spent months hand coding and playing with the file. IE8 is a problem and I have added extra code which I found online. Firefox tends to move things on Windows platform, but MAC is not as bad. Safari and Chrome tends to work better with fluid grid layouts. There is an option for the early versions of browsers so they can recognise things.
To resize everything when in tablet and mobile, I found tablet grid container/layout div tage size 80-90% and mobile to 40-50% grid container/layout div tage size.
Hope this helps -
Background images in fluid grid layouts Dreamweaver CS6
How can I get a background image png or jpg original size 1040w by 840h to scale down in the tablet and mobile layouts in Dreamweaver CS6 fluid grid layout?
Adding one of these in your CSS should do the trick...
background-size:contain;
or
background-size:cover;
Depending on the layout of your background image, one may work better than the other. -
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
Maybe you are looking for
-
MapBuilder Error:Can not find a GeoRaster object with specified rdt and rid
Hello, I can't GeoRaster data in the preview of the MapBuilder and MapViewer. The GeoRasterViewer shows the Raster images without problems. MapBuilders error message: 19.11.2008 13:07:11 oracle.sdovis.theme.GeoRasterThemeProducer prepareData SCHWERWI
-
Delpoyment Error While Deploying in WAS
Hi All, I got a deployment Error like this,please help me ragrding this. Dec 9, 2006 4:04:58 PM /userOut/deploy (com.sap.ide.eclipse.sdm.threading.DeployThreadManager) [Thread[Deploy Thread,5,main]] INFO: [025]Additional log information about th
-
XI 3.0 inst files : Why is "DVD RDBMS MSSQLSRV 2000" not available ?
Hi SDN, can anyone tell me why software download archive "DVD RDBMS MSSQLSRV 2000" is not available under /swdc at Service Marketplace ? In our company we are just about to install XI 3.0. We are going for the MS-SQL database and we have used SAP Dow
-
My Firefox v6.02 browser always open *.csv (comma delimited) file in another tab rather than downloading a file? I do not have right click option to save this file. My OP is windows XP sp2.
-
How do I solve what is causing a kernel panic?
I am working on a friends MacBook6,1 and it randomly crashes with kernal panics. I've ran AHT, Disk Utility & Memtest86 but to no avail. He's an app hoarder with 184 items in his Application folder and I've got a hunch that may have something to do w