TalkPHP

TalkPHP (http://www.talkphp.com/forums.php)
-   XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)
-   -   Question | About Resolution (http://www.talkphp.com/xhtml-html-css/5291-question-about-resolution.html)

godfather20071 02-27-2010 04:45 PM
Question | About Resolution
 
hello people , i asked alot of people about how can i match my
website to any Resolution. but got no help yet.

here is my index.htm code:
Code:
<html>
<head>
    <title>noname</title>
    <link rel="stylesheet" type="text/css" href="Style.css" />
</head>

<body>


    <div class="rounded-box">
       
        <div class="bottom-left-corner">
            <div class="bottom-left-inside">&bull;</div>
        </div>
   
       
        <div class="bottom-right-corner">
            <div class="bottom-right-inside">&bull;</div>
        </div>
       
        <div class="box-contents">
           
        </div> <!-- end div.box-contents -->
       
    </div> <!-- end div.rounded-box -->





    <div class="rounded-box1">
   
        <div class="top-left-corner">
            <div class="top-left-inside">&bull;</div>
        </div>
       
        <div class="bottom-left-corner">
            <div class="bottom-left-inside">&bull;</div>
        </div>
       
        <div class="top-right-corner">
            <div class="top-right-inside">&bull;</div>
        </div>
       
        <div class="bottom-right-corner">
            <div class="bottom-right-inside">&bull;</div>
        </div>
       
        <div class="box-contents">
            <a href="index.htm">Home</a>
 <br>        <a href="ptc.htm">Paid To Click </a>
 <br>        <a href="ptr.htm">Paid To Read </a>
 <br>        <a href="pts.htm">Paid To Search </a>

        </div> <!-- end div.box-contents -->
       
    </div> <!-- end div.rounded-box -->



    <div class="rounded-box2">
   
        <div class="top-left-corner">
            <div class="top-left-inside">&bull;</div>
        </div>
       
        <div class="bottom-left-corner">
            <div class="bottom-left-inside">&bull;</div>
        </div>
       
        <div class="top-right-corner">
            <div class="top-right-inside">&bull;</div>
        </div>
       
        <div class="bottom-right-corner">
            <div class="bottom-right-inside">&bull;</div>
        </div>
       
        <div class="box-contents">
            hbhnn
        </div> <!-- end div.box-contents -->
       
    </div> <!-- end div.rounded-box -->


    <div class="rounded-box3">
   
        <div class="top-left-corner">
            <div class="top-left-inside_3">&bull;</div>
        </div>
       
        <div class="bottom-left-corner">
            <div class="bottom-left-inside_3">&bull;</div>
        </div>
       
        <div class="top-right-corner">
            <div class="top-right-inside_3">&bull;</div>
        </div>
       
        <div class="bottom-right-corner">
            <div class="bottom-right-inside_3">&bull;</div>
        </div>
       
        <div class="box-contents">
          bla bla
          and i will help u to make money online <hr>
        </div> <!-- end div.box-contents -->
       
    </div> <!-- end div.rounded-box -->

    <div class="rounded-box4">
   
        <div class="top-left-corner">
            <div class="top-left-inside">&bull;</div>
        </div>
       
        <div class="bottom-left-corner">
            <div class="bottom-left-inside">&bull;</div>
        </div>
       
        <div class="top-right-corner">
            <div class="top-right-inside">&bull;</div>
        </div>
       
        <div class="bottom-right-corner">
            <div class="bottom-right-inside">&bull;</div>
        </div>
       
        <div class="box-contents">
            hbhnn
        </div> <!-- end div.box-contents -->
       
    </div> <!-- end div.rounded-box -->


<br>

<table class=noname width=206 height=84 border=0 cellspacing=0 cellpadding=0>
 <tr><td></td></tR></table>

</body>
</html>

and here is my css file:
Code:

/**-------------------------------------
    GLOBAL ATTRIBUTES
--------------------------------------**/


    body {
        margin: 0px 0px 0px 0px;
        background-color:#c6edfd;
    }
   
    /*הגדרה כללית של הצבע שמתחת לפינות*/
    /*#c6edfd הצבע המקורי */
    div.top-left-corner,
    div.bottom-left-corner,
    div.top-right-corner,
    div.bottom-right-corner
    {
        position:absolute;
        width:20px;
        height:20px;
        background-color:#c6edfd;
        overflow:hidden;
    }
   
    /*הגדרה כללית של כל הפינות המעוגלות והצבע שלהן*/
    div.top-left-inside,
    div.bottom-left-inside,
    div.top-right-inside,
    div.bottom-right-inside
    {
        position:relative;
        font-size:150px;
        font-family:arial;
        color:#65c9fe;
        line-height: 40px;
    }
   
   
    /*הגדרת צבע פינות רק ל box 3*/
    /*הגדרתי את הצבע לירוק שתבחין בהבדל*/
    div.top-left-inside_3,
    div.bottom-left-inside_3,
    div.top-right-inside_3,
    div.bottom-right-inside_3
    {
        position:relative;
        font-size:150px;
        font-family:arial;
        color:#ffffff;
        line-height: 40px;
    }


/**-------------------------------------
    main_box
--------------------------------------**/

    div.rounded-box {
        position:relative;
        width: 700px;height:100px;
        background-color: #65c9fe;
        margin: 0px 0px 0px 152px;
    }
   
    /*הגדרה של צבע main ב box מסויים*/ 
    div.rounded-box1 {
        position:relative;
        width: 150px;height:200px;
        background-color: #65c9fe;
        margin: 25px 0px 0px 170px;
    }   

    /*הגדרה של צבע main ב box מסויים*/ 
    div.rounded-box2 {
        position:relative;
        width: 150px;height:200px;
        background-color: #65c9fe;
        margin: 25px 0px 0px 170px;
    } 


    /*הגדרה של צבע main ב box מסויים*/ 
    div.rounded-box3 {
        position:relative;
        width: 480px;height:800px;
        background-color: #ffffff;
        margin: -410px 0px 0px 350px;
    }     


    /*הגדרה של צבע main ב box מסויים*/ 
    div.rounded-box4 {
        position:relative;
        width: 700px;height:60px;
        background-color: #65c9fe;
        margin: 25px 0px 0px 152px;
    }     

/**-------------------------------------
    center
--------------------------------------**/ 
   
    div.top-left-corner {
        top:0px;
        left:0px;
    }
   
   
    div.bottom-left-corner {
        bottom:0px;
        left:0px;
    }
   
    div.top-right-corner {
        top:0px;
        right:0px;
    }
   
    div.bottom-right-corner {
        bottom: 0px;
        right:0px;
    }

/**-------------------------------------
    inside
--------------------------------------**/ 

   
    div.top-left-inside {
        left:-8px;
    }
   
    div.bottom-left-inside {
        left:-8px;
        top:-17px;
    }
   
    div.top-right-inside {
        left:-25px;
    }
   
    div.bottom-right-inside {
        left:-25px;
        top:-17px;
    }
   
   
    div.top-left-inside_3 {
        left:-8px;
    }
   
    div.bottom-left-inside_3 {
        left:-8px;
        top:-17px;
    }
   
    div.top-right-inside_3 {
        left:-25px;
    }
   
    div.bottom-right-inside_3 {
        left:-25px;
        top:-17px;
    }

/**-------------------------------------
    contents
--------------------------------------**/
   
    div.box-contents {
        position: relative;
        padding: 8px; color:#000;
    }



table.big {position:relative;
        width: 900px;height:800px;
     
        margin: -1200px 0px 0px 50px;}

table.youmoney {position:relative;
        margin: -1030px 0px 0px 175px;
background-image: url(pix/noname.jpg)}



A:link {text-decoration: none; color: #2b0ce8}
A:visited {text-decoration: none; color: #2b0ce8}
A:active {text-decoration: none; color: #2b0ce8}
A:hover {text-decoration: none; color: #2b0ce8;}
in the css file there is some notes in hebrew language
ignore that..

so again
my question is:
what should i do to match my website to any resolution


thx alot!!

Village Idiot 02-27-2010 04:50 PM
I don't understand what you mean by "match" your site to any resolution. As long as it displays good on a 1024x768 you are good.

godfather20071 02-27-2010 06:11 PM
Quote:
Originally Posted by Village Idiot (Post 30069)
I don't understand what you mean by "match" your site to any resolution. As long as it displays good on a 1024x768 you are good.
yes the website displays good on a 1024

but i tried in another pc with big screen and another resolution
it's not displaying good..

any help plz... :(

delayedinsanity 02-27-2010 08:02 PM
width: 100%

Displays 100% at any resolution.

tony 02-27-2010 08:21 PM
do you want to make your website fixed to 1 resolution or to extend depending one the clients resolution? If you want a fixed resolution like 1024x768 that is easy by using pixels in your widths, but with a expandable resolution you would need to setup a base font size for the body and then use either em units or percentages for the widths of your columns.

godfather20071 02-28-2010 11:47 AM
what i want is to setup my website to display good in any
resolution.

how could i do that ?

thank u 4 helping me and sorry because my english not so good.

Parvus 02-28-2010 12:49 PM
If your width is fixed (always stays the same) than you could center everything and use a normal background color.
If you want your width to adept(change on resolution) than you should use width % like 100% or whatever.

PS: I see your using position:absolute on your bottom right corner ... which i guess makes it look weird.

godfather20071 02-28-2010 01:13 PM
thank u i will try to do something

delayedinsanity 02-28-2010 03:59 PM
Quote:
PS: I see your using position:absolute on your bottom right corner ... which i guess makes it look weird.
That's because he's using css rounded corners to create the look of his site. They're absolute positioned inside of the rounded-box div and won't have an effect on where the actual content is being positioned.

css Code:
div.rounded-box {
        position:relative;
        width: 700px;height:100px;
        background-color: #65c9fe;
        margin: 0px 0px 0px 152px;
    }

This is where the problem may lie. You're positioning the main div 152 pixels from the left border, and while that may center it on certain displays, the larger the resolution, the more whitespace you're going to wind up with on the right side. Give this a try:

css Code:
div.rounded-box {
        position:relative;
        width: 700px;height:100px;
        background-color: #65c9fe;
        margin: 0 auto;
    }

On a side note, you don't have to specify the method of measurement, such as px or em, on 0 widths. Also, since you have a good handle on CSS so far, you might want to look into shorthand properties (http://www.w3schools.com/css/pr_margin.asp for example) so that you don't find yourself creating larger stylesheets than necessary.


All times are GMT. The time now is 12:22 AM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0