Image in fluid layout

Hi!
If I have a small image in a fluid layout column which is the best practice for having the image's width adjust to the column width while still remaining proportional with its height?
Thanks!
kt

I am not sure about fixed height but to scale your image to your DIV width then this CSS will work?:
img {
width: inherit;
I suspect the height will also scale proportionately but another method is to use JavaScript which is for another forum to deal with. This one is for pure DW.
Your HTML might look like this:
<img alt="pict01" src="http://www.psaltiki.org/_images/hagios_cover_small.jpg">
<img alt="pict02" height="300px" src="sinai_syrmatiki.jpg">
The second image contains a constrained height with a width of inherited from your DIV.

Similar Messages

Centering images in fluid layouts while maintaining height of image

I am working in DW CS6 on a windows 7 computer; can someone tell me the HTML and CSS coding to use for the following idea?
I have an image file that is 900px wide by 300 px tall. (there is only one (1) image in the Div and no text) My goal is the keep the center of the image file (450px left & right) in the center of the fluid Div ID and keep the height of the image constant at 300px. The left and right sides of the image file just overflow the sides of the Div ID and are not visible to the users.
Thank you.

Maybe my request was not clear enough so I will see if I can explain it better. (getting the image inserted at the proper size is no problem using CSS)
It is my desire to keep the height of the image at 300px (and it does); I am looking for a way for the image to stay at 900px wide as the page width decreases WHILE the center of the image remains in the center WITHOUT the entire image narrowing. The left and right sides of the images just dissappear outside of the viewable area as defined by the adjustable width of the fluid Div ID.
Within the Source Code & Div Id - my html is as follows: <img src="images/logo.png" alt="logo" class="align-center large" />
Within the Styles CSS - my code uses: img.align-center { ~ .... } & img.large ( width: ~px; height: ~px; }
Do you have another suggestion?

Fluid Layout - Background Image

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

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

How to get text padding in CS6 fluid layout div?

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

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

Fluid layout suddenly hosed in DW - but renders fine in browser

Even though I'd seen some warnings about making changes to margains when using fluid layouts, I was trying to center an image in a div and changed the margain. Suddenly, the 'desktop' layout for the page wouldn't display correctly in the Design tab. I thought I'd hosed the entire page, but I tried viewing it in Firefox - and it works perfectly.
In the Design view, when showing the 'desktop' view, it only shows the header and first div as being within the fluid grid. I figured that meant I'd entered some errant character either in the CSS about that point or the source code. No joy in either location.
Also, I can visually edit the sizes of the divs (which all show as fluid in 'tablet' and 'mobile' sizes) in the two smaller sizes, but not in the 'desktop' view. Even the two divs that show as fluid cannot be resized in the desktop view - though they are selectable and show the sizing handles.
Is the feature so new that it's this buggy? Or am I missing something else?
Also - how much should boilerplate.css change? Should mods be made to this file?
I'm NOT an expert in DW, CSS or HTML, so I'd be perfectly willing to accept I've done something wrong.

It's called me being an idiot. I removed a bracket from the end of the tablet size mediaquery in my main stylesheet.

Help with moving image on fluid page

Hi-
I have been working with this fluid layout for too long....
I had everthing good once but then I did something and I think ruined my css file. I had a back up but evidently it wasn't recent enough
Anyway In my content1 tag I have an image or a video (its in the upper right corner) .... I need it moved to the left just a bit so it looks good in the frame. I tried all the little tricks that I know but no cigar. I'm not a web person, I am doing this for one of my worse half's clients (he is a photographer-long story).
I have a portion live expect links are staight to the final html. Any ideas?
http://www.seaturtleproduction.com/pinn/index
http://www.seaturtleproduction.com/pinn/menu
http://www.seaturtleproduction.com/pinn/history
Thanks
Tara

1. respond.min.js cannot be found
2. Correct the following http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.seaturtleproduction.com%2Fpin n%2Fmenu

Placement of icon with text issue in fluid layout, how do i fix it?

Am trying to make things look like the above image, this is for the fluid layout, but no matter what i do, that phone icon with the number 1-844.....does not move to right next to talk to us. Here is JS fiddle:http://jsfiddle.net/xtf205mk/
.fluid {clear: both; margin-left: 0; width: 100%; float: left; display: block;}
.top_nav_icon {vertical-align:middle;}
.call_icon_header{content:url(images/call-us-icon.png); float:left;}
.talk_icon_header{content:url(images/talk-to-us-icon.png); float:left;}
.float_right{float:right;} .top_nav_icon {vertical-align:middle;}
.top_nav_list1 { float:left;}
.top_nav_list1_1 {font-size:1em; width: 100%; float:right;}
.top_nav_list1_2 {font-size:1em; width: 100%; clear:none;}
.top_nav_list1_2 {font-size:1em; width: 100%; clear:none;}
Am using DW CC, but the visual aids is nowhere helping me in moving things to the right.
Can anyone help with this one please, thank you.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.navlist li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
.navlist li a {
    text-decoration: none;
    color: black;
</style>
</head>
<body>
<div>
    <nav>
        <ul class="navlist">
            <li class="top_nav_list1_1"><i class="fa fa-phone"></i> (281) 358-4900</li>
            <li class="top_nav_list1_2"><a href="#"><i class="fa fa-comment"></i> talk to us</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

Sliding menu in Fluid layout

Hi, Ive made a fluid layout
using this tutorial http://www.tutorio.com/tutorial/liquid-flash-layout
I have now recently put a section into it where there are 5 images that slide horizontally when u click on their thumbnails.
Using this tutorial http://www.kirupa.com/developer/flash5/slidingmenu.htm
I have managed to get everything fluid except for the amount the sliding images move horizontally. The original actionscript for each individual thumbnail is like this:
//sets the destination
on (press) {
_root.xnew = _root.mask2._x+(4-1)*100/2;
That will work fine for a normal layout, but because mine is a fluid layout it, it wont work properly on different screen resolutions. I was trying to replace the 100 value into the overall width of all of the sliding images divided by 5 but couldnt get it to work.
Any help would be appreciated,
Thanks

thanks for the answer
The bit ive been struggling with, is finding the right actionscript that lets me use the width of an existing image to adjust the amount the slider moves. I can do it with the stage by using the "Stage.width" code, but it doesnt work if I try "imagename.width"
Whats the equivelant for that code?

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

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

I will lock this discussion because of duplicate post.

Full width preloader for fullscreen layout/fluid layout

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

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

Displaying Custom images in Web Layout

Hello all,
Can anyone please tell tell me how to display a custom .gif image in web layout instead of the standard gif(rwbeige_logo.gif). Where do I've to store the image, for it to be detected during runtime. Thanks in advance.
Reagards,
Arun.V

for where you store the image you can store it in the database table in the blob column such as. for the report layaut containing image take the following:
- in the report layaut you can create a report selecting a table that containing the blob column.
- in the report layaut, modify the property of the item that present the database blob column to image.
soufiane

How to get fluid layout for Dreamweaver CS5?

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

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

Fluid layout problem

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

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

Apply Fluid Layout to existing site?

Has anyone been able to apply the CS6 Fluid Layout to existing Dreamweaver site pages? I have about 1000 pages, all template-based that I wojld love to convert to Fluid Layout if there is a reasonably efficient way to do it. Any info or a link to a tutorial on this would be appreciated. I am going crosseyed right now from all of the searching!

I don't have CS6, so I don't know what the Fluid Grid Layout is that Murray's talking about. But if what you are trying to do is to create pages that fill the browser window, that's easy.
And I think you don't have to alter your template(s) -- it can be done in your style sheet.
Almost all web pages have an outer "wrapper" that everything else (save the body) lives in. So, for a fixed-width website, you do the following:
#wrapper {
               margin: 0 auto; /* this centers your main content in the web page */
               width: 980px; /* This is the maximum width of your website in pixel units. */
For a fluid width, you do the following:
#wrapper {
     margin: 0 auto; /* this centers your main content in the web page */
     width: 100%; /* this sets the width to the viewport */
Now, one thing I do like to do is specify a minimum width, which I do in the body:
body {
          min-width: 760px;
I also like the CSS Tricks example, which specifies minimums and maximums, giving you "fluidity" up to a point.

Fluid layout

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

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

Image in fluid layout

Similar Messages

Maybe you are looking for