FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Center the site with the <DIV> tag.





Jakob [JaWGames]
I have a small problem, I have just started working with the <DIV> tag and I am planning to make the width of the site to about 800 so all users can look at it without scrolling. I will use two colums, one small to the left for links and things like that and a big to the right for the most content of the site.

I know that it is a <DIV ALIGN=center> tag but I just can`t get it to work.

So, do someone know how to do this?
Marston
Could you post the webpage that you are working on?
timerecords
Did you tryed?

<center>
<div> jhgfgh
</div>
</center>
Shake
Code:
<div align="center">
Insert Content Here...
</div>

The above should work for you. Maybe you just need to try it with quotation marks. Sometimes HTML will do that to you.

timerecords wrote:
<center>
<div> jhgfgh
</div>
</center>

That should also work, it is just messier.

Marston wrote:
Could you post the webpage that you are working on?

Yes, it would help to see the page that you are working on. It may not be the tag itself, but something else in the page that is interfering.
Jakob [JaWGames]
Ah, yes now I got it to work with the second one.
But how do you make so they becomes aligned in side of each other instead of that one is above the other?

I have not uploaded the work with the <DIV> to internet but here is a link to my site: www.jawgames.frih.net

For the moment I am using frames.
TomS
Shake wrote:
Code:

<div align="center">
Insert Content Here...
</div>


The above should work for you. Maybe you just need to try it with quotation marks. Sometimes HTML will do that to you.


No. Only the content of the DIV is aligned in the center. So the div must be 100% width of the window, that the sitecontent inside the div is aligned in center to the page.

The other solution should work.
Code:
<center>
<div>Some content</div></center>


I usually don't work with div's, btu you may center it with relative positions in the stylesheet.
Shake
I see. He was trying to center the entire <div> tag, not just the contents of the <div>. That settles that.

Jakob [JaWGames] wrote:
But how do you make so they becomes aligned in side of each other instead of that one is above the other?

Hmm...could you make some sort of diagram? I don't understand what you are asking.

You might be referring to nesting, the process of putting tags within other tags like so:

Code:
<center>
    <div class="content">
        <div class="welcomebox">
            Welcome to my website.
        </div>
        <div class="news">
            News goes here.
        </div>
    </div>
</center>

Also, if you don't know CSS yet, you will definitely want to learn it.
Look at some CSS Tutorials using a simple Google search to get started with it.

Additionally, learn to use server side includes to your advantage. They can save a lot a time and work when dealing with multiple pages from a website, much like CSS does, by making certain parts of your pages (such as a navbar or header/footer) into a separate file of its own, so it is easier to manipulate when you have a large website (so you don't have to use those ugly frames!).

I just thought you might appreciate a few pointers, as I was looking at your HTML. It was quite, well, clean...for HTML, but it could be much nicer with some CSS and SSI. Rolling Eyes If you want additional help with CSS or SSI please reply. I'll be glad to help. Very Happy
lildotti
you could set the align to "absolute" and then edit the number of pixals each direction. to find out, take a screenshot, put it onto paint and move the cursor where you want the frame to be and in the bottem right hand side it should tell you the co-ordinates.

hope this helps
Shake
lildotti wrote:
you could set the align to "absolute" and then edit the number of pixals each direction. to find out, take a screenshot, put it onto paint and move the cursor where you want the frame to be and in the bottem right hand side it should tell you the co-ordinates.

hope this helps


I believe you're talking about the position attribute, not the align attribute.

Code:
<div position="absolute" top="<number of pixels from the top>" left="<number of pixels from the left>"


In addition to the 'top' and 'left' attributes above, you can use 'right' and 'bottom'.

I don't really see why you would want to use the position attribute with a value of absolute (or any position attribute imho) to move your divisions though, as it makes your site less accessible to users of different resolutions/browsers. Confused
Jakob [JaWGames]
I used following code to center the whole DIV thing

Code:
<DIV STYLE="position:center;>content</DIV>


I want the three "boxes" (Headline, Links and Content) placed like this:

//HHHH//
//LCCC//
//LCCC//
//LCCC//

But when I am trying to have more than one "DIV thing" they becomes placed like this:

///L
///L
/CCC
/CCC

So the thing I need help with right now is to align the boxes in this way.


I am working at learning CSS right now, I realised that it is essential to know if you want a good site. Smile


Thanks alot for tipsing me about that server side include thing, as you said it will save me a lot of time.
cambonas
I really don't know I understood what you want, but I'll try...

To center the DIV in the window, you could use CSS element margin. For
example, you have
Code:

<div id="divsname">

</div>

So, in your CSS you must have
Code:

body {
 text-align: center; /* this is necessary because old IE version */
}

#divsname {
 width: ???px; /* put here the width of your DIV */
 margin: auto;
}
onydchic
Why dont you use the float properties?
e.g
Code:
 #leftside {
float:left
width: 150px;
}
#middle {
float: right
width: 650px;
}



but i heard that float may have some issues... i dunno.
or you could just use the position set to absolute?
simplyw00x
This thread has some of the most out-dated html advice I have *ever* seen...

the <center> tag should not be used anymore. Instead of the clumsy:
Code:
<center>
<div>
</div>
</center>

use:
Code:
<div stlye="margin-left: auto; margin-right: auto;"></div>


The align property is also no longer relevant. Use the above instead.

If you're indulging in presentational HTML hackery, why not just use tables? Apparently there are many forum users happy to assist you on design from a perspective of 1999, so they should be able to design you a great table-based one...
Jakob [JaWGames]
For the moment I am trying to find out a simple solution to make it look good with frames.
I am still working at learning the <DIV> tag but I realised that it will take some time for me to both learn it and incorperate it to the site because of that I have many things that I am working at. I will try the tipses when I have time.

Thanks for the help everyone Smile
garionw
Ok, So far ive seen nothing thats even close to what I think he wants (Well, there was one, but not the way I was taught Razz)

CSS Coding
Code:


body{margin: 5px; text-align: center;}
#border{width: 760px; margin: 0 auto; text-align: left;}

#sidebar{width: 180px; float: left;}
#content{width: 580px; float: left;}


HTML Coding
Code:


<body><div id="border">
 <div id="sidebar">Hello, I am the side bar</div>
 <div id="content">Hello, I am the content</div>
</div></body>
Related topics
How Do You Center Your Entire Web Page?
Add Contextual Search to Your Blog
CSS - CSS Tutorial for skin maker
Aligning coloums with <div> and CSS
Best Method for layout
Can you target a <div> like a frame?
targeting <div> tags with links
Difference between <div> and <p>...?
Rate my site
problem with <ul> navigation
<h1> and <strong> tags
<li> tag document type?
[HELP QUICKLY!] Images not filling wrapper <div> eleme
One <br /> tag for better preview
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.