Skip to main content
R
racephotoman
Participating Frequently
December 5, 2020
Question

DREAMWEAVER - Image & text alignment

  • December 5, 2020
  • 4 replies
  • 1211 views

I'm creating a page with images and text. All my pages work OK when I place one image side by side as seen here:

http://www.september8th.com/travelpictorials.html

But my problem  is that I can't seem to get the "TOP of PAGE and copyright information words" I have at the bottom of all of my pages to align in the middle and below the last image when I'm displaying two side-by-side image widths w/different heights as seen on my test page (again, not a problem on all other pages - they display the "TOP of PAGE and copyright correctly in the center where I want it).

Problem (test) page:

http://www.september8th.com/store-test.html

NOTE: Disregard the top image w/link to PayPal.

As for the other images it looks like the "TOP of PAGE" wording is using the "floatright" coding?

Any help is appreciated!

 

 

    This topic has been closed for replies.

    4 replies

    O
    osgood_
    Legend
    December 6, 2020

    At this stage I think what you really need is the answer to your question, which is add style="clear: both;" to your div below:

     

    <div class="photoalign" style="clear: both;">

     

    Please take onboard what has been suggested in the other responses.

     

    I dont believe Google will penalize websites that arent mobile friendy. Google is full of rumours, spread about but no one knows if they are true or not. I'd rather be directed to a non-mobile friendy website which is packed full of useful information rather than a mobile website which contains a lot of outdated junk. Google judges on a lot of critera. not just mobile friendly.

     

    Having said that you are not providing your mobile users with the best possible experience so its certainly something to take into condsideration but that must be your decision not someone elses, you might be perfectly happy with a website which is aimed primarily at the desktop market.

     

    We are here just to advise and provide answers to your questions, which thus far you havent had an answer directly related to your question, until now.

     

     

     

     

    R
    racephotomanAuthor
    Participating Frequently
    January 17, 2021

    Thanks for all the great help (so-far). Yes for now I will design for the desktop audience, but started looking into Flexbox in parallel, and just want to get the conent up and running (haven't touched the site since 2010).  Thanks, added the SSL cert.

    Just a monor issue and can't see why.  Looking at www.september8th.com/posterinspirations.html everyhing looks OK on numerous testing computers, BUT if I view this page and others that contain the GRAY BACKGROUND with the "CATEGORY" text on my IPAD and IPHONE, it is shifted to the left - makes no sense unless it is just Apple's OS not liking the code?  I would think all the CSS codes would also display improperly - it seems only this one line.  BTW, have also been removing the "disable right-click code" as suggested. I'm happy that all seems OK for now on desktop platforms, but was curious about the Apple display shift???

    Walter

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 17, 2021

    It's no great mystery.  Categories div is 960px wide while the remaining layout is 1200px wide.  There is not enough available real estate on iPad & iPhone to fully accommodate 960 much less 1200px. 

     

    It think it's foolish in 2021 to build a site that's not responsive to fit ALL devices.  As an experiment, try removing all the pixel width values and changing them to % widths.  At least then you'll have fighting chance with the majority of Internet users.  

     

    Good luck! 🙂

     

    Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    December 5, 2020

    When a developer inserts code like

    document.addEventListener('contextmenu', event => event.preventDefault());

    I give up rendering any assistance.

     

    If the reason is that the images cannot be copied, than you are wrong.

     

     

     
     

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      December 5, 2020

      I'm glad you said something about the dreaded "disabled right-click."  It's so annoying but easily defeated when you know how.  And fortunately, most people know how 🙂

       

      Nancy O'Shea— Product User & Community Expert
        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        December 5, 2020

        Simple CSS Flexbox layout -- responsive, no floats & no tables.

         

        Copy & paste this into a new, blank document.

        <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flexbox Columns</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
background:antiquewhite;
color:brown;
text-align: center;
}
nav { 
background-color:tan;
padding:2%;
border-top:1px solid brown;
}
nav a {color:purple;}

/* Mobile first*/
.flexbox-container {
display: flex;
flex-direction: column;
}

/* Tablets, Desktops*/
@media only screen and (min-width: 630px) {
.flexbox-container {
flex-direction: row;
justify-content: space-evenly;
}
}
/* All devices */
.flexbox-container > div {
flex-grow: 1;
padding: 5%;
background-color:brown;
color:antiquewhite;
}
img {
max-width: 100%; 
height: auto;
display: block;
vertical-align: baseline;
margin: 0 auto;
border:10px solid white;
border-radius: 5%;
}
</style>
</head>
<body>
<header>
<h1>XYZ Website</h1>
<h2>Lorem ipsum dolor</h2>
</header>

<nav><a href="#">Navigation Link</a></nav>

<main class="flexbox-container">
<div>
<h3>Column 1</h3>
<img src="https://dummyimage.com/300x227" alt="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id in commodi dicta fuga sit, consequuntur.</p>
</div>

<div>
<h3>Column 2</h3>
<img src="https://dummyimage.com/227x300" alt="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id in commodi dicta fuga sit, consequuntur.</p>
</div>

<div>
<h3>Column 3</h3>
<img src="https://dummyimage.com/300x227" alt="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id in commodi dicta fuga sit, consequuntur.</p>
</div>

</main><!--/flex-container-->

<footer> <small>© 2020 XYZ Website all rights reserved.</small> 
</footer>
</body>
</html>

         

        Post back if you have any questions.

         

        Nancy O'Shea— Product User & Community Expert
        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        December 5, 2020

        I see several problems:

         

        #1 Your site is not responsive. Google penalizes sites that aren't mobile-friendly.  Start over with a responsive layout that works on ALL devices.  You'll find some starter Templates in Dreamweaver CC to help you.  See screenshots.

         

         

         

        #2 With the advent of CSS Flexbox and CC Grids for layouts, we rarely use floats anymore.

         

        #3 Tables are for tabular data only.  Don't be tempted to use them for layout purposes.

         

        #4 Your site is on a non-secure HTTP server.  Google is penalizing you for that, too. 

        Ask your host about SSL/TLS certificates.  Or investigate free certs from Let's Encrypt or Cloudflare.  These days, there's no excuse for not being on a secure server especially if you're doing e-commerce because potential customers are less inclined to purchase from non-secure sites. 

         

        Nancy O'Shea— Product User & Community Expert
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices