Skip to main content
F
FriendlyJess
Participant
February 27, 2018
Answered

Browser Alignment

  • February 27, 2018
  • 4 replies
  • 339 views

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.

This topic has been closed for replies.
Correct answer Jon Fritz

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.

4 replies

F
FriendlyJessAuthor
Participant
February 27, 2018

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

F
FriendlyJessAuthor
Participant
February 27, 2018

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&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></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>

Jon Fritz
Community Expert
Jon FritzCommunity ExpertCorrect answer
Community Expert
February 27, 2018

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.

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
February 27, 2018

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.

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
February 27, 2018

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

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices