www.webdeveloper.com
Results 1 to 5 of 5

Thread: How do I make my site look right in any resolution?

  1. #1
    Join Date
    Mar 2014
    Posts
    1

    How do I make my site look right in any resolution?

    I am very new to HTML and CSS and I created a site but it will only work right in my native resolution (1920x1080) and only when maximized.

    I can paste my HTML/CSS and I was curious if anyone can tell me where I am going wrong? Be kind as I know my stuff is probably a mess and I am open to any help outside of my original question.
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Michael Smith's - Intro</title>
    		<link rel="stylesheet" type="text/css" href="css/style.css">	
    	</head>
    	
    	<body>
    	<div id="page">
    	<div id="biography" title="My Biography" style="font-family: Arial; color: #330099; font-size: 12pt;">
    		<h1><u>Michael Smith's Biography</u></h1>
    		<img src="images/viking.png" alt="Viking Warrior">
    	</div>
    	<div id="parents" title="My Parents" style="font-family: Arial; color: #330099; font-size: 12pt;">	
    		<h2><u>A Little Bit About Myself</u></h2>
    		<p>Random typing I am just trying to create a lame bio for myself so something can be here. None of this stuff I am writing here makes sense so pleas
                     ignore all of this gibberish. Here is more blah blah blah blah blah blah blah blah blah blah blah blah</p>
    		<p>My father is 58 years old and has <span style="color:yellow">yellow</span> hair and <span style="color:gray">gray</span> eyes.
    		My mother is 53 years old and has <span style="color:brown">brown</span> hair and <span style="color:blue">blue</span> eyes.</p>
    	</div>
    	<div id="interests" title="My Interests" style="font-family: Comic Sans; color: #330099; font-size: 12pt; overflow:hidden;">
    		<img src="images/fish.png" alt="Fish Picture" style="float:right;"/>
    		<h3><u>Some of My Interests & Achievements</u></h3>
    		<p><a href="football/vikings.html">Minnesota Vikings</a></p>
    		<p><a href="outdoors/fishing.html">Fishing</a></p>
    		<p><a href="technology/certification.html">My Certifications</a></p>
    	</div>
    	</div>
    	</body>
    </html>
    Here is my CSS...
    Code:
    body {
    					background-color: #ccccff;
    					color: #330099;
    					margin-left: 30%;
    					margin-right: 30%;
    					border-color: #330099;
    					padding: 20px 20px 20px 20px;
    					font-family: Helvetica;
    					
    			}
    			
    	#interests
    	{
    			border: 4px solid black;
    			border-color: #330099;
    			position: absolute;
    			margin-left: 30px;
    			margin-right: 30px;
    			left:28%;
    			top: 26%;
    			bottom: 40%;
    			right: 29%;
    			left: 33%;
    			padding: 20px 20px 20px 20px;
    		}
    		#parents
    	{
    			border: 4px solid black;
    			border-color: #330099;
    			position: absolute;
    			margin-left: 30px;
    			margin-right: 30px;
    			top: 0%;
    			bottom: 75%;
    			right: 30%;
    			left: 33%;
    			padding: 20px 20px 20px 20px;
    		}
    		#biography
    	{
    			border: 4px solid black;
    			border-color: #330099;
    			position: absolute;
    			margin-left: 30px;
    			margin-right: 30px;
    			top: 0%;
    			bottom: 40%;
    			right: 64%;
    			left: -1%;
    			padding: 20px 20px 20px 20px;
    		}
    	{
    					#interests a:link {
    						color: #007e7e;
    			)
    			}
    			
    					#interests a:visited {
    						color: #333333;
    			)
    			}
    			
    					#interests a:hover {
    						background: #f88396;
    						color: #0d5353;
    			}

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    950
    Alright, there are quite a few things to cover so I'll try to keep this short.

    Just starting with your code itself, the CSS is kind of broken. There were a few syntax issues such as an extra '{' near the bottom as well as the closing parenthasis ')' near the end as well. I should also note, on a logical note, you don't need to apply a margin to an element if its position is absolute. The margin isn't really used at that point because the element will be placed in an exact location regardless of other elements. Margins are typically used for spacing between elements that are static or relative. Some other things to note would be in your padding, you don't have to repeat the number 4 times. Since it's the same for all 4 sides, entering 1 value will apply it to the top, right, bottom and left.

    Now for the answers. What you are wanting is called responsive design. Essentially it can be summed up as using CSS to adjust your page based on the user's window size/resolution. A few notable things to do for responsive design would be use percent based values, utilize the max-width and max-height properties and when necessary use media queries. Generally you don't want to use absolute positioning given the nature of how it works. For your case, I'd say you would firstly use 2 container divs to act as columns. So your HTML ends up looking like this:
    HTML Code:
    	<div class="styleColumn">
    		<div id="biography">
    			<h1><u>Michael Smith's Biography</u></h1>
    		</div>
    	</div>
    	<div class="styleColumn">
    		<div id="parents">	
    			<h2><u>A Little Bit About Myself</u></h2>
    			<p>Random typing I am just trying to create a lame bio for myself so something can be here. None of this stuff I am writing here makes sense so pleas ignore all of this gibberish. Here is more blah blah blah blah blah blah blah blah blah blah blah blah</p>
    			<p>My father is 58 years old and has <span style="color: yellow;">yellow</span> hair and <span style="color: gray;">gray</span> eyes.
    			My mother is 53 years old and has <span style="color: brown;">brown</span> hair and <span style="color: blue;">blue</span> eyes.</p>
    		</div>
    		<div id="interests">
    			<h3><u>Some of My Interests & Achievements</u></h3>
    			<p><a href="football/vikings.html">Minnesota Vikings</a></p>
    			<p><a href="outdoors/fishing.html">Fishing</a></p>
    			<p><a href="technology/certification.html">My Certifications</a></p>
    		</div>
    	</div>
    So essentially I've split your blocks in to the two columns treating it more like a table (but not really) rather than trying to position them exactly with absolute. The rest is all CSS and it will be where you control how this page will behave at different resolutions. I'd encourage that you read more about responsive design so you can get a better understanding of all the ways you can use it. For now your CSS would look something like:
    HTML Code:
    	body {
    		background: #CCF;
    		color: #309;
    		font-family: Helvetica;
    		margin: 0;
    		padding: 0;
    	}
    	
    	.styleColumn {
    		vertical-align: top;
    		width: 600px;
    		max-width: 100%;
    		margin: 0;
    		display: inline-block;
    		zoom: 1;
    		*display: inline;
    	}
    
    	#biography	{
    		min-height: 445px;
    		margin: 0 0 16px;
    		padding: 20px;
    		border: 4px solid #309;
    	}	
    	#parents {
    		margin: 0 0 16px;
    		padding: 20px;
    		border: 4px solid #309;
    	}
    	#interests {
    		margin: 0 0 16px;
    		padding: 20px;
    		border: 4px solid #309;
    	}
    	#interests a:link {
    		color: #007E7E;
    	}	
    	#interests a:visited {
    		color: #333;
    	}	
    	#interests a:hover {
    		background: #F88396;
    		color: #0D5353;
    	}
    I'd like to note that normally I would not use the 'min-height' property like I have, but for presentation purposes I was trying to match the 'appearance' you had initially. Realistically you would remove that and just let the box adjust heights as you added content. Also, this is a pretty basic version of what you probably would want. Once the window or resolution becomes to small, the two columns will break into 1, allowing everything to fit onto the page better. And using the max-width property we can prevent the boxes from becoming too wide if the window becomes too small (which is ideal for mobile devices).
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Mar 2012
    Posts
    1,641
    An alternative approach:

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Michael Smith's - Intro</title>
            <!-- link rel="stylesheet" type="text/css" href="css/style.css" --> 
        <style>
        *   
        {
            margin:0;
            padding:0;
            border:0;
            }   
        body
        {
                position: absolute;
                left:0;
                top:0;
                width: 100%;
                height:100%;
                background-color: #ccc;
            }
        h1, h2, h3, p
        {
                padding: 12px 20px 8px 20px;
            }            
        #page 
        {
                position: relative;
                top:0;
                width: 100%;
                max-width: 960px;
                min-width: 600px;
                height: 100%;
                max-height: 600px;
                min-height: 480px;
                margin: 0 auto;
                background-color: #ccf;
                color: #309;
                border-color: #309;
                font-family: Helvetica;
                }
        #interests
        {
                position: absolute;
                border: 4px solid black;
                border-color: #309;
                top: 300px;
                bottom: 0;
                right: 0;
                width: 360px;
            }
        #parents
        {
                position: absolute;
                border: 4px solid black;
                border-color: #309;
                top: 0;
                right: 0;
                width: 360px;
                height: 280px;
            }
        #biography
        {
                position: absolute;
                border: 4px solid black;
                border-color: #309;
                top: 0;
                bottom: 0;
                right: 380px;
                left: 0;
            }
        #interests a:link {
                color: #007e7e;
                
                }
                
        #interests a:visited {
                 color: #333;
        
                }
                
        #interests a:hover {
                background: #f88396;
                color: #0d5353;
                }
        </style>
        </head>
        
        <body>
        <div id="page">
        <div id="biography" title="My Biography" style="font-family: Arial; color: #330099; font-size: 12pt;">
            <h1><u>Michael Smith's Biography</u></h1>
            <!-- img src="images/viking.png" alt="Viking Warrior" -->
        </div>
        <div id="parents" title="My Parents" style="font-family: Arial; color: #330099; font-size: 12pt;">  
            <h2><u>A Little Bit About Myself</u></h2>
            <p>Random typing I am just trying to create a lame bio for myself so something can be here. None of this stuff I am writing here makes sense so please ignore all of this gibberish. Here is more blah blah blah blah blah blah blah blah blah blah blah blah</p>
            <p>My father is 58 years old and has <span style="color:yellow">yellow</span> hair and <span style="color:gray">gray</span> eyes.
            My mother is 53 years old and has <span style="color:brown">brown</span> hair and <span style="color:blue">blue</span> eyes.</p>
        </div>
        <div id="interests" title="My Interests" style="font-family: Comic Sans; color: #330099; font-size: 12pt; overflow:hidden;">
            <!-- img src="images/fish.png" alt="Fish Picture" style="float:right;" -->
            <h3><u>Some of My Interests &amp; Achievements</u></h3>
            <p><a href="football/vikings.html">Minnesota Vikings</a></p>
            <p><a href="outdoors/fishing.html">Fishing</a></p>
            <p><a href="technology/certification.html">My Certifications</a></p>
        </div>
        </div>
        </body>
    </html>
    In this I've made the div "parents" fixed width and height, because it contains most of the text. I've then made the div "page" responsive, with the spare space being taken up in the other two divs. Try both out and see which suits your needs best...

  4. #4
    Join Date
    Mar 2014
    Posts
    40
    You need to learn more about responsive web design

  5. #5
    Join Date
    Mar 2012
    Posts
    1,641
    Quote Originally Posted by Samphywii View Post
    You need to learn more about responsive web design
    Who is this comment addressed to?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles