• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Adobe Adobe Community Display inline block fail when uploaded to web?

Explorer ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

Screen Shot 2023-12-26 at 10.38.44 AM.png

 

 

 

Hi All. 

Any ideas why this fails.. Div Containers as inline blocks centered. Flows to a stack when the browser is reduced which is what is wanted. Works in Dreamweaver and preview but when uploaded to web the divs center stacked. Center is what is wanted but not stacked. Want them to flow with the browsers. 

 

When the orginal website was created and images are added it works to the old pages. But with current  Dreamweaver it fails? Any ideas? 

 

Help is appreciated!  

 

Screen Shot 2023-12-26 at 10.24.09 AM.pngScreen Shot 2023-12-26 at 10.19.58 AM.png

Views

280

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
community guidelines
LEGEND ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

The answer would be in the code, can you paste what html and css you are using to display this layout?

 

Have you heard of flexbox or grid...............rather than using display-inline

Votes

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
community guidelines
Explorer ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

Hi, osgood. I have tried the Flex box..no luck 

 

 

Votes

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
community guidelines
LEGEND ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

quote

Hi, osgood. I have tried the Flex box..no luck 

 

 


By @h2obeek

 

Might the following help?

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>GRID/FLEX</title>
<style>
* {
box-sizing: border-box;
}
/* GRID EXAMPLE */
.responsive-grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr) ;
width: 75%;
max-width: 1200px;
margin: 0 auto 30px auto;
}
/* Media 768px */
@media screen and (max-width: 768px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr) ;
width: 85%;
}
}
/* Media 480px */
@media screen and (max-width: 480px) {
.responsive-grid {
grid-template-columns: 1fr ;
width: 95%;
}
}
.box {
display: grid;
place-items: center;
background-color: tomato;
color: #fff;
padding: 20px;
font-size: 30px;
}

/* FLEXBOX EXAMPLE */
.responsive-flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 75%;
max-width: 1200px;
margin: 0 auto;
}
/* Media 768px */
@media screen and (max-width: 768px) {
.responsive-flex {
width: 85%;
}
}
/* Media 480px */
@media screen and (max-width: 480px) {
.responsive-flex {
width: 95%;
}
}

.responsive-flex .box {
display: grid;
place-items: center;
flex-basis: 32.5%;
background-color: purple;
color: #fff;
padding: 20px;
font-size: 30px;
}
/* Media 768px */
@media screen and (max-width: 768px) {
.responsive-flex .box {
flex-basis: 49%;
margin: 0 0 10px 0;
}
}
/* Media 480px */
@media screen and (max-width: 480px) {
.responsive-flex .box {
flex-basis: 100%;
}
}
</style>
</head>
<body>
<!-- GRID -->
<div class="responsive-grid">
<div class="box">Grid</div>
<div class="box">Grid</div>
<div class="box">Grid</div>
</div>

<!-- FLEX -->
<div class="responsive-flex">
<div class="box">Flex</div>
<div class="box">Flex</div>
<div class="box">Flex</div>
</div>


</body>
</html>

 

 

Votes

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
community guidelines
Explorer ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>Untitled Document</title>


<link href=".AWBlock.css" rel="stylesheet" type="text/css">

<style type="text/css">

body,td,th {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #999999;
margin-left: auto;
margin-right: auto;
text-align: center;
}
h1,h2,h3,h4,h5,h6 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
}
h1 {
font-size: 18px;
color: #999999;
}
body {
margin-left: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
text-align: center;
}
</style>
<link href="Body Center.css" rel="stylesheet" type="text/css">


</head>

<body>

<div class="flex-container"><!--Start of Images Boxes -->

<!--Start of Images Boxes-->
<div class="aligncenter Blockinline BlockPadding"><img src="HultucoPlienAirp300.jpg" alt="" width="300" height="230" class="aligncenter Blockinline"/><br class="aligncenter">
<h1 class="aligncenter Blockinline">Watercolor</h1>
<br class="aligncenter">
<div class="aligncenter Blockinline"><br>
<img src="EnquireSS.jpg" width="150" height="35" alt=""/><img src="acquire.jpg" width="150" height="35" alt=""/></div>
</div>
<!--End of Image Box-->

<!--Start of Images Boxes-->
<div class="aligncenter Blockinline BlockPadding"><img src="HultucoPlienAirp300.jpg" alt="" width="300" height="230" class="aligncenter Blockinline"/><br class="aligncenter">
<h1 class="aligncenter Blockinline">Watercolor</h1>
<br class="aligncenter">
<div class="aligncenter Blockinline"><br>
<img src="EnquireSS.jpg" width="150" height="35" alt=""/><img src="acquire.jpg" width="150" height="35" alt=""/></div>
</div>
<!--End of Image Box-->

<!--Start of Images Boxes-->
<div class="aligncenter Blockinline BlockPadding"><img src="HultucoPlienAirp300.jpg" alt="" width="300" height="230" class="aligncenter Blockinline"/><br class="aligncenter">
<h1 class="aligncenter Blockinline">Watercolor</h1>
<br class="aligncenter">
<div class="aligncenter Blockinline"><br>
<img src="EnquireSS.jpg" width="150" height="35" alt=""/><img src="acquire.jpg" width="150" height="35" alt=""/></div>
</div>
<!--End of Image Box-->


</div>
<!--End of Images Boxes-->
</body>
</html>

Votes

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
community guidelines
LEGEND ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

There's obviously something in your css that stops the divs displaying inline. Without seeing the complete css it's not possible to provide a conclusive answer. 

 

However I would not use display: inline-block; to position containers next to one another. 1) we have better methods like grid and flexbox to do the job and 2) the containers will NOT sit exactly next to each other as inline-block leave a gap between the containers. You can run the html code on to avoid this but that gets a bit messy or use some negative margin, again that gets messy and is avoidable using more appropriate methods such as flex or grid.

Votes

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
community guidelines
Explorer ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

Ok...

Thanks Osgood. 

 

Votes

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
community guidelines
Community Expert ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

What's the URL to your problem page online?

You have referrences to two external stylesheets we can't see.

Also inline-block styles are rarely used anymore. There are better ways to do this.

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

Hi Nancy....yes understood I did the orginal site 20 years ago. What I'm liking because it is basically a portfolio page is that the boxes flow no restrictions on browser page..so my view destop flows to 6 across then the rows centers below. There will be ad ons so don't want a restriction as to amount of boxes.  Next step will be making it phone friendly. Why I want the boxes to stack also. Not concerned that the boxes look justified on desk top.  

Votes

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
community guidelines
Explorer ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

Votes

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
community guidelines
LEGEND ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

quote

https://waterbeekannette.com/watercolor.htm


By @h2obeek

 

What browser are you using as the page looks to be doing what you require in Chrome and Safari or is this the old website.......hmmm?

 

The code you posted in the forum looks very different, so I'm a bit confused.

 

 

 

Votes

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
community guidelines
Community Expert ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

This what I see at normal Zoom settings on a 1680px wide display.

 

image.png

 

On smaller displays, columns reduce & and then stack vertically as expected.

 

That said, you have an extraordinary number of code validation errors & warnings that need attention. 235 code errors will adversely impact your layout on some devices.  Fix these first.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwaterbeekannette.com%2Fwatercolor.htm

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
LEGEND ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

quote

This what I see at normal Zoom settings on a 1680px wide display.

 

By @Nancy OShea

 

That's kind of what I'm seeing as well so I really dont know why the OP is seeing all the boxes as being stacked in their browser, that's IF we are looking at the same code, which I doubt, as I only see 3 products in the original post by the OP.

 

Anyway if what is required is the functionality in the url posted its best and easily accomplished with grid.

 

Plus its baffling because the OP says the original website was produced 20 years back, well the code at the url posted doesnt look quite that old...........so I'm confused.

 

I'm out now so I'll leave it in your capable hands to sort out. If the OP wants to go down the grid route based on the functionality at the url posted then I can provide some code for that....its pretty simple to keep the fixed width image and allow the images to fill up the browser space or wrap if there is not enough space. 

 

As an aside note. Has the rogue 'upvote' bot returned? I'm seeing a lot of crazy 'upvoting' going on recently which makes no sense.

Votes

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
community guidelines
Community Expert ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

quote

As an aside note. Has the rogue 'upvote' bot returned? I'm seeing a lot of crazy 'upvoting' going on recently which makes no sense.


By @osgood_

=========

Sadly, the bot problem persists and never fully went away.  The relevant team will likely delve deeper into the weeds after New Years.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

 

Hi Nancy, thank you and yes the orginal page was done 20 years  with dreamweaver.

I just updated all the artboxes with the new dreamweaver on the orginal page from 20 years ago, It was doing what I wanted to but...the mobile I wanted to adjust it was a tad off  when it centered. So I pasted the artboxes into a New dreamweaver page and it was doing everything I was wanting it to do on the mobile and it stacked just as I wanted it to on the desktop and flowed in preview but..would just not work when I tested in on my website. I test it on Two computers I have a very old iMac (27-inch, Late 2012) and a 2023 Macbook pro which Im using.  I see the same thing on both ??? 

 

The code I pasted  is from the new dreamweaver page. 

 

 

 

Votes

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
community guidelines
Community Expert ,
Dec 26, 2023 Dec 26, 2023

Copy link to clipboard

Copied

Before we can tackle layout issues, you must fix your code errors.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
LEGEND ,
Dec 27, 2023 Dec 27, 2023

Copy link to clipboard

Copied

LATEST
quote

The code I pasted  is from the new dreamweaver page. 

By @h2obeek

 

So why dont you share the complete code, html and css, with us  by uploading it into a seperate folder where the current website exists?

 

That way we would be able to see what is going on with your new code, layout. Showing us the old website and the functionality you are trying to achieve is great but we need to see the new code to provide any useful help, possible solutions.

Votes

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
community guidelines