HTML Website design

by pagunston

Posted: 15 years ago 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

carolinefernndes 15 years ago

you can use margin: 0 auto;
- Thanks
- 1 reply
{{ DiscussionBoard.errors[5355073].message }}
- Pamellalovely 15 years ago
  
  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.
  
  Thanks
  
  {{ DiscussionBoard.errors[5441155].message }}
Trivium 15 years ago

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.
- Thanks
Signature
Wired Up - Computer guides and software reviews
{{ DiscussionBoard.errors[5355128].message }}
techmug 15 years ago

make #Wrapper div and take all divs into Wrapper.
#wrapper{margin:0px auto;}
or text-align:center
- Thanks
Signature

HQ Native Content Writing Service | Starting At $6.20/1,000 Words
{{ DiscussionBoard.errors[5361708].message }}
mlmguru2011 15 years ago

you can visit w3schools.com

It has answers to all your html,css related questions.
- Thanks
{{ DiscussionBoard.errors[5362757].message }}
blogfreakz 15 years ago

margin:0 auto; is good, the main wrapper will be center for sure... good luck!
- Thanks
Signature
Listen to your favorite podcast here
{{ DiscussionBoard.errors[5363860].message }}
tomlarry4 15 years ago

You can find the solution of your problem from this site... "webdesign(dot)about(dot)com/od/css/ht/htcsscenterfix(dot)htm"
- Thanks
{{ DiscussionBoard.errors[5370533].message }}
albaalica 15 years ago

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.
- Thanks
{{ DiscussionBoard.errors[5377053].message }}
memzoomvn 15 years ago

Body include all website so you can write that

*{margin: 0 auto ; padding :auto;}
body{margin 0 auto;}
- Thanks
{{ DiscussionBoard.errors[5381340].message }}
frenchsquared 15 years ago

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;
}
- Thanks
Signature

I am a php developer and Wordpress Guru. I was the original coder of Socrates and Metamorphosis. Be on the look out for my NEXT Theme... hopefully you will find it launched as a WSO in the next month or so. Optin for Special Pricing

Need some help with Wordpress? find me on fiverr
{{ DiscussionBoard.errors[5387004].message }}
blogfreakz 15 years ago

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 ...
- Thanks
Signature
Listen to your favorite podcast here
{{ DiscussionBoard.errors[5387562].message }}
- madhuriarora Banned 15 years ago
  
  [DELETED]
  
  {{ DiscussionBoard.errors[5388610].message }}
  
  Jenny30 15 years ago
  
  Originally Posted by madhuriarora
  
  margin:0 auto; used to set margin of div in center.
  
  Its very helpful for you
  
  Thanks
  
  {{ DiscussionBoard.errors[5390940].message }}
jawanda 15 years ago

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
- Thanks
{{ DiscussionBoard.errors[5391191].message }}
ernestrategos 15 years ago

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:  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>
- Thanks
Signature

Read one of my latest blog posts:
https://www.eagleblogging.com/write-...ost-today.html
{{ DiscussionBoard.errors[5400122].message }}
egrovesys 15 years ago

w3school is only the right place to know more about this issues.
- Thanks
- 1 reply
Signature
Joomla Development Services | eGrove Systems Articles

Python Developers | Magento Developers
{{ DiscussionBoard.errors[5403088].message }}
- brdpty 15 years ago
  
  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
  
  Thanks
  
  {{ DiscussionBoard.errors[5409161].message }}
Ibcontact 15 years ago

Read tutorials on w3schools. For html and css
- Thanks
{{ DiscussionBoard.errors[5409604].message }}
versatile 15 years ago

You can find help for your problem from:

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

Hope it will be helpful to you...
- Thanks
{{ DiscussionBoard.errors[5410081].message }}
Absolute Logo 15 years ago

May I also suggest using no tables just use pure CSS.
- Thanks
Signature
Absolute Logo Perfect for your small business!
{{ DiscussionBoard.errors[5436587].message }}
shantanu 15 years ago

You must start using notepad ++ it will let u write all codes and from tht u will learn codes too
- Thanks
{{ DiscussionBoard.errors[5437055].message }}
reneemaile 15 years ago

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.
- Thanks
{{ DiscussionBoard.errors[5439711].message }}
jastindpfoc 15 years ago

You can learn more about HTML and others languages through w3school.com.
- Thanks
{{ DiscussionBoard.errors[5440523].message }}
spy100 15 years ago

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;
}
- Thanks
{{ DiscussionBoard.errors[5440989].message }}

HTML Website design

Trending Topics

Lightening strikes :(

If you had to start over today -- what would you do ?

" It is what it is" ... overused way too much imo

What would you do without the Internet ??

Are you into the Stock Market??