Highlighted

Browser Alignment

New Here ,
Feb 27, 2018

Copy link to clipboard

Copied

Hi Everyone; I'm fairly new to Dreamweaver but I know that does not excuse me from using a table on my website!! I'm using the latest CC 2018.

But I have used a 3 column table with the intention of holding the content together in a line - which it does perfectly.

I have wrapped the table in a div and then auto aligned the left and right margins of the div, this centres the table in dreamweaver but as soon as I open in browser the table is still left aligned.

Is there something I am missing? Any help would be appreciated.

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

What's in your Structure.css file?

I'm seeing a hodgepodge of css and html attribute styling. You really shouldn't do that unless you're making an html email. All of your styles should be handled by your css and then the html attributes should be removed to keep them from interfering with the css.

Views

171

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

Browser Alignment

New Here ,
Feb 27, 2018

Copy link to clipboard

Copied

Hi Everyone; I'm fairly new to Dreamweaver but I know that does not excuse me from using a table on my website!! I'm using the latest CC 2018.

But I have used a 3 column table with the intention of holding the content together in a line - which it does perfectly.

I have wrapped the table in a div and then auto aligned the left and right margins of the div, this centres the table in dreamweaver but as soon as I open in browser the table is still left aligned.

Is there something I am missing? Any help would be appreciated.

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

What's in your Structure.css file?

I'm seeing a hodgepodge of css and html attribute styling. You really shouldn't do that unless you're making an html email. All of your styles should be handled by your css and then the html attributes should be removed to keep them from interfering with the css.

Views

172

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
Feb 27, 2018 0
Adobe Community Professional ,
Feb 27, 2018

Copy link to clipboard

Copied

To stop a guessing game, it is best if you show your code.


Ben

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...
Feb 27, 2018 0
Adobe Community Professional ,
Feb 27, 2018

Copy link to clipboard

Copied

There's really no need to wrap a table inside another container to center it. You can center a <table> the same way you center a <div> tag, by first setting a width that is less than 100%, and adding the margins...

.centered-table {

     width:600px;

     margin:0 auto;

}

<table class="centered-table">
     <tr>

          <td>Oh, hello there.</td>

     </tr>

     ...

</table>

If you're uploading the page to your server and losing the centering there, it's possible you've forgotten to also upload your .css file where the centering is stored.

As Ben suggests, sharing your code will be the best way to get a quick and correct answer to your issue.

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...
Feb 27, 2018 0
New Here ,
Feb 27, 2018

Copy link to clipboard

Copied

Hi guys, thank you for replying. I get the feeling it is a bit of a mess to be honest but here it is:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Dashboard</title>

<style type="text/css">

@import url("Structure.css");

body {

    background-image: url();

    background-repeat: no-repeat;

    background-color: #000000;

}

#wrapperdashboard {

    display: block;

    width: 960px;

    margin-right: auto;

    margin-left: auto;

    border-color: #000000;

    left: auto;

    right: auto;

}

</style>

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

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>

var __adobewebfontsappname__="dreamweaver"

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a.indexOf("#")!=0){ d.MM_p=new Image; d.MM_p[j++].src=a;}}

}

function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d)&&d.all) x=d.all; for (i=0;!x&&i<d.forms.length;i++) x=d.forms;

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

</script>

<script src="http://use.edgefonts.net/acme:n4:default.js" type="text/javascript"></script>

</head>

<body onLoad="MM_preloadImages('../Images/About Us 2.png')">

<div id="wrapperdashboard"><img src="../Images/IMG-20180216-WA0000.jpg" alt="" width="460" height="250" id="Title"/>

</div>

   

<div id="YouTube">

<div id="TableDiv">

  <table width="960" border="0" margin="0" align="center">

    <tbody>

      <tr>

        <td width="285"><div id="SoundCloud">Content for  id "SoundClou

          <iframe width="250" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/316090387&color=%23ff5500&au..."></iframe>

</div></td>

        <td width="387"><div id="YouTube">Content for  id "YouTube"

          <iframe width="360" height="215" src="https://www.youtube.com/embed/rZ8gByOJgBU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div></td>

        <td width="274" bgcolor="#000000"><div id="BioDiv">

          <p style="font-size: 14px"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Us','','../Images/About Us 2.png',1)"><img src="../Images/About Us 1.png" alt="About Us" width="309" height="368" id="About Us"></a></p>

          <p> </p>

        </div>         

        <p> </p></td>

      </tr>

      <tr>

        <td> </td>

        <td><div id="YouTube2">Content for  id "YouTube2"

          <iframe width="360" height="215" src="https://www.youtube.com/embed/rw17EGXVcI0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        </div></td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

    </tbody>

  </table>

</div>

<p><\div></p>

    <p> </p>

</body>

</html>

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...
Feb 27, 2018 0
Adobe Community Professional ,
Feb 27, 2018

Copy link to clipboard

Copied

What's in your Structure.css file?

I'm seeing a hodgepodge of css and html attribute styling. You really shouldn't do that unless you're making an html email. All of your styles should be handled by your css and then the html attributes should be removed to keep them from interfering with the css.

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...
Feb 27, 2018 1
Adobe Community Professional ,
Feb 27, 2018

Copy link to clipboard

Copied

I know you're just starting out & beginner mistakes are expected --  we've all made them .   The big tragedy though  is your page contains no REAL TEXT.  If images fail to load for whatever reason, your site visitors won't see anything.  More importantly, search engines won't find you and  images of text are useless to translators and screen readers

Below is a centered table.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>About Us</title>

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

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

<style>

body {

    background-color: #222;

    color: #fff;

    text-align: center

}

table {

    width: 75%;

    border: none;

    margin: 0 auto;

}

caption { color: red; }

th { color: lightblue; }

/**image animation**/

table img {

    max-width: 100%;

    border: 2px solid #222;

    display: block;

    -webkit-transition: all 0.35s ease-in-out;

    -moz-transition: all 0.35s ease-in-out;

    transition: all 0.35s ease-in-out;

    cursor: -webkit-zoom-in;

    cursor: -moz-zoom-in;

    cursor: zoom-in;

}

table img:hover, table img:active, table img:focus {

    /**adjust scale to desired size**/

    -ms-transform: scale(1.5);

    -moz-transform: scale(1.5);

    -webkit-transform: scale(1.5);

    -o-transform: scale(1.5);

    transform: scale(1.5);

    border: 2px solid blue;

    position: relative;

    z-index: 100;

}

</style>

</head>

<body>

<h1>My Awesome Site</h1>

<h2>Some Pithy Slogan</h2>

<table cellspacing="1" cellpadding="5" summary="YouTube and SoundCloud media.">

<caption>

Centered Media Table

</caption>

<tbody>

<tr>

<th scope="col">Table Heading</th>

<th scope="col">Table Heading</th>

<th scope="col">Table Heading</th>

</tr>

<tr>

<td><img src="https://dummyimage.com/400x300" alt="description"></td>

<td><img src="https://dummyimage.com/400x300" alt="description"></td>

<td><img src="https://dummyimage.com/400x300" alt="description"></td>

</tr>

<tr>

<td><img src="https://dummyimage.com/400x300" alt="description"></td>

<td><img src="https://dummyimage.com/400x300" alt="description"></td>

<td><img src="https://dummyimage.com/400x300" alt="description"></td>

</tr>

<tr>

<td><img src="https://dummyimage.com/400x300" alt="description"></td>

<td><img src="https://dummyimage.com/400x300" alt="description"></td>

<td><img src="https://dummyimage.com/400x300" alt="description"></td>

</tr>

</tbody>

</table>

</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...
Feb 27, 2018 1
New Here ,
Feb 27, 2018

Copy link to clipboard

Copied

Is there any way to fix that? I've created the div's in the structure.css

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...
Feb 27, 2018 0