Highlighted

fluid image size issue

New Here ,
Dec 21, 2017

Copy link to clipboard

Copied

I have 3 divs across the page (main image with arrows on either side) They are all 700 px in height. When I insert them into their divs, I get 3 different heights for the images. Any suggestions? Thank you!

TOPICS
Learn Dreamweaver

Views

255

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

fluid image size issue

New Here ,
Dec 21, 2017

Copy link to clipboard

Copied

I have 3 divs across the page (main image with arrows on either side) They are all 700 px in height. When I insert them into their divs, I get 3 different heights for the images. Any suggestions? Thank you!

TOPICS
Learn Dreamweaver

Views

256

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 21, 2017 0
Adobe Community Professional ,
Dec 21, 2017

Copy link to clipboard

Copied

If your images are set to take up a % of their parent container's width, the height will recalculate accordingly. If your widths are all different, but set to take up the same % space in the parent container, their heights will end up different as the image width scales.

It's hard to tell you exactly what you need to do to fix your code or images without seeing it/them. Could you post a link to your work in progress so we can give you more specific advice?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 21, 2017 1
New Here ,
Dec 21, 2017

Copy link to clipboard

Copied

Thanks Jon. I originally sized the divs as follows: 1 column, 10 columns, 1 column across a 12 column grid. Even if I paste the same image into each of the identical side divs, the right side comes out much longer than the left one, and each is longer than the main center image (even though all the images are 700px. The css code for each side div look identical.

dreamweaver-image.jpg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 21, 2017 0
Adobe Community Professional ,
Dec 21, 2017

Copy link to clipboard

Copied

I'm sorry, but your image doesn't really tell me anything about your code or your problem, aside from showing me you're using a Legacy Fluid Grid Layout and have some css written, also that you're in Design View. That last one raises a question, is the problem in Design View, Live View, in the browser when testing the page or all of the above?

In order to get help with something that's driven by code, we need to see the code. The easiest way to do that would be to upload your work in progress to a test location on your server (I suggest a folder called TEST), then share that location with us via a link (www.yourdomain.com/TEST). Once the problem is solved, you simply remove the test location from the server along with the content.

A very, very distant second (due to the Legacy Fluid Grid Layout) would be to copy/paste all of the code of your page and dependent files to the forum in the hopes that someone will rebuild your page in their environment to find the issue. That's a much tougher proposition when there's an image problem because some display issues related to images don't have anything to do with code. Since we don't get your images in a code paste, the problem may go unanswered. Again, a link to your work on a server you control makes a huge difference in troubleshooting your work.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 21, 2017 1
Adobe Community Professional ,
Dec 21, 2017

Copy link to clipboard

Copied

My advice is don't waste anymore of your development time on legacy Fluid Grid Layouts.  They were removed from DW CC for a reason:

  1. In 2012, they were a nice idea that was never fully realized.
  2. The layout CSS is very temperamental & easy to break.
  3. There are other responsive alternatives now that work much better.

This is a Bootstrap layout.  2 col + 8 col + 2 col.  All images are 400 x 300.

The working code.

================

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--Bootstrap 3 CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

/**custom styles for equal height columns**/

.sameheight { overflow: hidden; }

.equal {

margin-top: 2%;

margin-bottom: -99999px;

padding-bottom: 99999px;

}

</style>

</head>

<body>

<div class="container">

<div class="jumbotron">

<h1>Hello World!</h1>

<h2 class="text-info">Bootstrap 3</h2>

<h3 class="text-danger">With Equal Height Columns</h3>

</div>

<!--sameheight row-->

<div class="row bg-primary sameheight">

<!--begin 3 equal height columns-->

<div class="col-sm-4 equal"> <img  class="img-thumbnail" src="https://placeimg.com/400/300/arch" alt="placeholder">

<h3>Heading</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore quo facere, reprehenderit placeat inventore vitae, repudiandae consequuntur in eaque consectetur tenetur.</p>

</div>

<div class="col-sm-4 equal"> <img  class="img-thumbnail" src="https://placeimg.com/400/300/nature" alt="placeholder">

<h3>Heading</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore quo facere, reprehenderit placeat inventore vitae, repudiandae consequuntur in eaque consectetur tenetur.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nulla enim ullam. Nostrum officiis iste distinctio voluptates maiores voluptatem fuga hic necessitatibus labore dolor totam minus similique quasi, possimus quod.</p>

</div>

<div class="col-sm-4 equal"> <img  class="img-thumbnail" src="https://placeimg.com/400/300/people" alt="placeholder">

<h3>Heading</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore quo facere, reprehenderit placeat inventore vitae, repudiandae consequuntur in eaque consectetur tenetur.</p>

</div>

<!--/row--></div>

<!--/container--></div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap 3 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 21, 2017 1
New Here ,
Dec 21, 2017

Copy link to clipboard

Copied

Thank you Jon and Nancy! I just downloaded Dreamweaver cc 2017, which I am just now learning the layout. I'll open the pages in there and see what happens. At first glance, the desktop view looks NORMAL (problem fixed?) I haven't figured out how to see the mobile and tablet formats yet, so stay tuned. I really appreciate your reaching out to me and offering suggestions. Nancy, I see that Bootstrap is now part of Dreamweaver, and I know nothing about that yet. I am just an artist building a personal website. Not a developer. My website is addictedtowalls.com if you're curious.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 21, 2017 0
Adobe Community Professional ,
Dec 21, 2017

Copy link to clipboard

Copied

Bootstrap is used by millions of websites because it speeds up development.  There is a wealth of information about Bootstrap and the 12-box grid system online.    The Bootstrap version in DW right now is 3.7.

Bootstrap 3 Tutorial

It's unclear when DW will add support for the latest Bootstrap 4 version.  But I'm already using it as I don't have much concern about outdated browsers (IE9 and earlier).

Bootstrap 4 Tutorial

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 21, 2017 1
New Here ,
Dec 21, 2017

Copy link to clipboard

Copied

Thank you, Nancy. And thanks for the links.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 21, 2017 0