Page 1 of 1
about css
Posted: Tue Nov 02, 2010 12:17 am
by 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)
Re: about css
Posted: Tue Nov 02, 2010 1:38 am
by 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.
Re: about css
Posted: Tue Nov 02, 2010 8:39 am
by 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.
Re: about css
Posted: Tue Nov 02, 2010 5:45 pm
by 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.
Re: about css
Posted: Tue Nov 02, 2010 7:11 pm
by 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;
}
Re: about css
Posted: Wed Nov 03, 2010 6:26 pm
by 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?
Re: about css
Posted: Fri Nov 05, 2010 11:56 am
by 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?
Re: about css
Posted: Sun Nov 07, 2010 4:50 pm
by Infinity
I want a better presentation of the contents x__X''', it look very un-profesional >__<
Re: about css
Posted: Tue Nov 09, 2010 8:52 pm
by ConceptDestiny
Do a bit of research and experiment to attain a better overall design.
Re: about css
Posted: Tue Nov 09, 2010 9:31 pm
by 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.
