about css

[Infinity]

There's any way to set a div that automatically fits on the center of the screen? In any resolution I mean, because If I take a look to my page with my PC I see it centered, but on my laptop I see it moved slightly to the left (resolution things I suppose)

[Jackolantern]

You can use percentages instead of pixels for almost all measurements. The percentage is taken as a portion of how much space the element has available (the space in the div if in a div, or the window if only in the window). They will grow and shrink dynamically depending on how large the display is. This is known as a form of "liquid layout". However, these types of layouts have become very unpopular in the last few years due to the mobile device revolution. Liquid layouts can basically be destroyed and can become a mess on tiny screens. Fixed layouts, however (those that use pixels) can work fine on older internet-connected devices by scrolling, or newer, iPhone-style devices by zooming. Pretty much every major website today uses fixed layouts.

[IceRidder]

it's not ok to use percentages. what you need to do is create a "main" div in which you will include all others. You set the width of the div as you like (say 800,1028,1280 etc) and you put align=auto this will always center it.

[Jackolantern]

Ohhh, I misunderstood what he was asking for and thought he had asked for windows that centered and take up the full screen. Yeah, setting alignment is all you need if you want to keep a fixed-width div centered.

[ConceptDestiny]

In your code:

Code: Select all

<div id="main_container>
Your site
</div>

CSS:

Code: Select all

#main_container {
width: 500px;
left-margin: auto;
right-margin: auto;
}

[Infinity]

On the CSS I have write this:

Code: Select all

#maintext {
	position:absolute;
	top:130px;
	width:800px;
	z-index:1;
        left-margin: auto;
        right-margin: auto;
}
#secondarytext {
	position:absolute;
	top:100px;
	width:800px;
	z-index:1;
        left-margin: auto;
        right-margin: auto;
}

Secondary Text are for a links and main text for the main text.
But it looks so weird:
http://img259.imageshack.us/img259/4042/asfasv.png

Here part of the code related to the position:

Code: Select all

 <link href="style.css" rel="stylesheet" type="text/css" />
<div id="secondarytext" div align="center">
<?php
echo " <A href='index.php'>Submit a Fakemon!</a>";
print "   ||  ";
echo " <A href='votingsistem.php'>Vote a Fakemon!</a><br>";
?>
</div>
<div id="maintext" div align="center">

What's going wrong, and what can I do to make this better looking?

[ConceptDestiny]

I'm not entirely sure what you're asking for... The elements on your page seem to be centered.

Could you explain a little further what you're trying to achieve?

[Infinity]

I want a better presentation of the contents x__X''', it look very un-profesional >__<

[ConceptDestiny]

Do a bit of research and experiment to attain a better overall design.

[Jackolantern]

It also just takes practice. Yes, there is a lot to learn about web design, but it takes a lot more tinkering to make sites that look nice. I am not a design-oriented person and can't make good looking websites even though I know CSS decently.