Positions in Websites (CSS)

Got a kewl website or have a website question? Hosting? Servers?
Post Reply
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Positions in Websites (CSS)

Post by vitinho444 »

Hey guys

With me knowing some jquery i kinda fell in (probably a mistake) using it for almost everything.. even positioning elements in the webpage.

I like to make websites that fit every resolution. My screen is a 22'' 1920x1080 screen and so i can see everything in a website, but other people might not have such screen so we need to think about them.

So my min-resolution policy is 1024x768. I don't care if you have to scroll down to see more content, but i do care if you have to scroll horizontally, that just can't happen...

What i do is something like:

CSS:

Code: Select all

#content
{
position: absolute;
top: /*header height so it fits together */;
}
jQuery

Code: Select all

function Position()
{
$("#content").css("left", $(window).width() / 2 - $("#content").width() / 2); //center the div
}

$(window).resize(function()
{
Position();
});
This works very well.. but is this all necessary? Is there a more efficient way to position divs right?

Btw, i use this when i don't want to specify a width for a div, if i did specified i could just do a margin-left: auto and margin-right: auto and it would be centered.
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
User avatar
a_bertrand
Posts: 1537
Joined: Mon Feb 25, 2013 1:46 pm

Re: Positions in Websites (CSS)

Post by a_bertrand »

If you just want to make your site fit the width, you can use the old table tag. Sure some may argue that tables design are bad (bla bla, what looks good and work on most browser is ok), yet they are easier to do:

<center><table width='50%'><tr><td>Hello content</td></tr></table></center>

Don't worry about deprecated center tags or whatever. That will work for a good amount of time still.
Creator of Dot World Maker
Mad programmer and annoying composer
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: Positions in Websites (CSS)

Post by vitinho444 »

Why did you used width: 50%? Only 50% of the screen will be used?

But yeah tables suck a little xD

*inspect element*

Code: Select all

<table id="tbl1">
   <table id="tbl2">
    <table id="tbl3">
     <tr>
          <td>
              <table id="tbl4"><h1>Content</h1></table>
         </td>
     </tr>
    </table>
   </table>
</table>
*this designer is crazy*

You know what im saying? :D
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
User avatar
a_bertrand
Posts: 1537
Joined: Mon Feb 25, 2013 1:46 pm

Re: Positions in Websites (CSS)

Post by a_bertrand »

That's certainly NOT how I would do it ;)

But 50% was to show that you can center it.
Creator of Dot World Maker
Mad programmer and annoying composer
User avatar
vitinho444
Posts: 2825
Joined: Mon Mar 21, 2011 4:54 pm

Re: Positions in Websites (CSS)

Post by vitinho444 »

ahh right :)

My code was just a joke, but my friend once did a website and that was the code pretty much xD <tr> and <td> all the way.
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Post Reply

Return to “WebSite”