26 {{ upvoteCount | shortNum }}
26 {{ upvoteCount | shortNum }}

HTML Website design

by pagunston
23 replies
  • WEB DESIGN
    • |
Hey Guys, I am teaching myself HTML and CSS. I am using Adobe Dreamweaver to make a website. I have just created the layout using div tags however, I want to centre the entire layout. How do I go about doing this? If I use the centre tag, It centres the content however, I want to centre the layout instead. I hope this makes sense.
#design #html #layout #website
  • Profile picture of the author carolinefernndes
    you can use margin: 0 auto;
    {{ DiscussionBoard.errors[5355073].message }}
    • Profile picture of the author Pamellalovely
      Very nice and i think you need to visit this site w3school.com this will become very helpful for you and try margin : 0 may be you will get solution of your problem.
      {{ DiscussionBoard.errors[5441155].message }}
  • Profile picture of the author Trivium
    It's a bit difficult to tell exactly what you are asking, without an example. Nevertheless, I'm going to guess that you want your current web page as it is, but you want it centered on the page (as opposed to left aligned, or something of the like).

    Now, a simple, if unelegant way to perhaps solve this problem would be to, well, encapsulate the contents of the site body within yet another div tag, and set the alignment of this div tag's content to "center", thereby center aligning the whole page.

    However, this might mess around with the relative positionings of your site elements (again, hard to know without an example), but if this proves to be the case, you could try removing the center align attribute from the div tag added earlier, and then nest that within another div tag, with the alignment set to "center". That way, the relative positionings within the inner div tag (containing site contents) should be preserved, and this div tag itself would then be center aligned by the outermost one, effectively center aligning the whole page.

    I'm sure there are better ways to do this, but its just the first solution that jumped into my head. I'd suggest just giving it a try anyway, and seeing if it gives you the effect you desired. I hope that helps.
    Signature
    Wired Up - Computer guides and software reviews
    {{ DiscussionBoard.errors[5355128].message }}
  • Profile picture of the author techmug
    make #Wrapper div and take all divs into Wrapper.
    #wrapper{margin:0px auto;}
    or text-align:center
    Signature
    {{ DiscussionBoard.errors[5361708].message }}
  • Profile picture of the author mlmguru2011
    you can visit w3schools.com

    It has answers to all your html,css related questions.
    {{ DiscussionBoard.errors[5362757].message }}
  • Profile picture of the author blogfreakz
    margin:0 auto; is good, the main wrapper will be center for sure... good luck!
    Signature
    Listen to your favorite podcast here
    {{ DiscussionBoard.errors[5363860].message }}
  • Profile picture of the author tomlarry4
    You can find the solution of your problem from this site... "webdesign(dot)about(dot)com/od/css/ht/htcsscenterfix(dot)htm"
    {{ DiscussionBoard.errors[5370533].message }}
  • Profile picture of the author albaalica
    It's a bit difficult to tell exactly what you are asking, without an example. Nevertheless, I'm going to guess that you want your current web page as it is, but you want it centered on the page.
    {{ DiscussionBoard.errors[5377053].message }}
  • Profile picture of the author memzoomvn
    Body include all website so you can write that


    *{margin: 0 auto ; padding :auto;}
    body{margin 0 auto;}
    {{ DiscussionBoard.errors[5381340].message }}
  • Profile picture of the author frenchsquared
    create a new file...
    Make this div and add this css.
    You will be able to see how it works.

    body {
    margin:50px 0px; padding:0px;
    text-align:center;
    }

    #Content {
    width:500px;
    margin:0px auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
    }
    {{ DiscussionBoard.errors[5387004].message }}
  • Profile picture of the author blogfreakz
    another tip be sure you want to check out the site that you are designing in a tableless manner or CSS in IE because IE is not really cooperating well with CSS ...
    Signature
    Listen to your favorite podcast here
    {{ DiscussionBoard.errors[5387562].message }}
    • Profile picture of the author madhuriarora
      Banned
      [DELETED]
      {{ DiscussionBoard.errors[5388610].message }}
      • Profile picture of the author Jenny30
        Originally Posted by madhuriarora View Post

        margin:0 auto; used to set margin of div in center.
        Its very helpful for you
        {{ DiscussionBoard.errors[5390940].message }}
  • Profile picture of the author jawanda
    My favorite way to accomplish absolute centering is ...

    For a div that is, say, 800 px wide:

    #someDiv{

    left: 50%;
    margin-left: -400px;

    }

    I don't remember how I got hooked on this method, but at some point using Auto margins failed me and I discovered this method and have used it ever since.

    -Phil
    {{ DiscussionBoard.errors[5391191].message }}
  • Profile picture of the author ernestrategos
    You can insert the css inside the page in somewhere between the <head> </head> tags like this:

    <style type="text/css">
    body {
    text-align: center;
    }

    #container {
    margin: 0 auto;
    width: <!-- change the width for your layout, I'm using a standard size --> 960px;
    }
    </style>


    Your html structure has to go something like this:

    <body>
    <div id="container">
    Your others DIVs or content, hope I've been of help, Godspeed!
    </div>
    </body>
    Signature

    Read one of my latest blog posts:
    https://www.eagleblogging.com/write-...ost-today.html

    {{ DiscussionBoard.errors[5400122].message }}
  • Profile picture of the author egrovesys
    w3school is only the right place to know more about this issues.
    Signature
    Joomla Development Services | eGrove Systems Articles

    Python Developers | Magento Developers
    {{ DiscussionBoard.errors[5403088].message }}
    • Profile picture of the author brdpty
      html and css is the main source for designing website its nice to know that here is forum about this stuff its can really add me a knowledge about HTML and css that i can apply on my professional website design
      {{ DiscussionBoard.errors[5409161].message }}
  • Profile picture of the author Ibcontact
    Read tutorials on w3schools. For html and css
    {{ DiscussionBoard.errors[5409604].message }}
  • Profile picture of the author versatile
    You can find help for your problem from:

    codeassembly.com/How-to-center-a-page-layout

    Hope it will be helpful to you...
    {{ DiscussionBoard.errors[5410081].message }}
  • Profile picture of the author Absolute Logo
    May I also suggest using no tables just use pure CSS.
    Signature
    Absolute Logo Perfect for your small business!
    {{ DiscussionBoard.errors[5436587].message }}
  • Profile picture of the author shantanu
    You must start using notepad ++ it will let u write all codes and from tht u will learn codes too
    {{ DiscussionBoard.errors[5437055].message }}
  • Profile picture of the author reneemaile
    The most common approach to creating a website with Dream-weaver is to create and edit pages on your local drive, and then upload copies of those pages to a remote web server for viewing on the web.
    {{ DiscussionBoard.errors[5439711].message }}
  • Profile picture of the author jastindpfoc
    You can learn more about HTML and others languages through w3school.com.
    {{ DiscussionBoard.errors[5440523].message }}
  • Profile picture of the author spy100
    Another cool way to center a div ... is this method
    In the html page "example.html" you have ths div :
    <div class="centerme" >Center div</div>
    And in the css file put this :
    .centerme
    {
    width:800px; /*Your div width*/
    margin-left:auto;
    margin-right:auto;
    }
    {{ DiscussionBoard.errors[5440989].message }}

Trending Topics