 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
joekinslow
Joined: 02 Sep 2009
Posts: 6
|
 Posted: Fri Nov 13, 2009 10:40 pm Main Container DIVQuestion (Coding for Multiple Resolutions) |
 |
|
|
Folks: See: http://joeyworldfamous.com/development/contact.html
and its page source.
I am trying to ensure that visitors to this page (and eventually the entire site) have optimal views of my site no matter what resolution their monitors are set for.
The related CSS style sheet is named "main content.css" and its content is:
***************************
@charset "utf-8";
/* CSS Document */
#maincontainer {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
}
***************************
(without the asterisks)
Please help me understand the specific code error that is not allowing my web page to display properly at various resolutions. My monitor is set for 1920 by 1200 but I need the web page to display properly at 800 by 600, 1024 by 768, 1280 by 800, etc.... |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 4289
Location: MS
|
|
sticks464
Joined: 31 Dec 2006
Posts: 2629
|
| Posted: Sat Nov 14, 2009 5:13 am |
|
|
|
This will work for all resolutions 1024 and higher
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>
<style type="text/css">
<!--
* {
padding:0;
margin:0;
}
html {overflow-y: scroll;}
img {border:0;}
body {
background: #000;
font:100%/1.5 Verdana, Geneva, sans-serif;
color: #FFF;
}
#maincontainer {
width:850px;
margin:10px auto;
}
#menu {
text-align:center;
margin-bottom:20px;
}
#menu a {
margin:0 20px;
}
#menu .first {margin-left:0;}
#menu .last {margin-right:0;}
a {color: #FFF;}
a:hover {color:#06C;}
a:focus {outline:none;}
#content p {margin-bottom:20px;}
.left {text-align:left;}
.center {text-align:center;}
-->
</style>
</head>
<body >
<div id="maincontainer">
<div id="menu">
<a href="http://joeyworldfmous.com/about" class="first">About</a> | <a href="http://joeyworldfamous.com/sold">Sold</a> | <a href="http://joeyworldfamous.com/blog">Blog</a> | <a href="http://joeyworldfamous.com/news">News</a> | <a href="http://joeyworldfamous.com/about" class="last">Links</a>
</div>
<div id="content"
<p class="center"><img src="The Artist.jpg" width="306" height="460" alt="The Artist" /></p>
<p class="center">For all questions regarding my art, background or general interest please contact me by email, facebook, or phone.</p>
</div>
<div id="footer">
<p class="center">All inquiries to<br />
Joseph Ryan Gourniak<br />
<a href="mailto:minaatjoeyworldfamous.com">minaatjoeyworldfamous.com</a><br />
Cellular: <span id="Node214-[0]">(908) 674-0152</span> </p>
</div>
</div>
</body>
</html> |
|
|
joekinslow
Joined: 02 Sep 2009
Posts: 6
|
| Posted: Sat Nov 14, 2009 8:13 am Thanks (another question) |
|
|
|
I got this to work (thank you.) I had to add a close ">" to <div id="content" but after that it worked.
Is there a way to use your solution to size/resize page content so that there is no need to scroll vertically (at certain resolutions) or is that just unavoidable? |
|
joekinslow
Joined: 02 Sep 2009
Posts: 6
|
| Posted: Sat Nov 14, 2009 8:15 am Payneless |
|
|
|
| I wanted to thank you for your reply. I'll take a look at these articles later. At first glance it looks like a bit more involved than I have the time to give, but I'll take a look. |
|
sticks464
Joined: 31 Dec 2006
Posts: 2629
|
| Posted: Sat Nov 14, 2009 9:15 am |
|
|
|
| Quote: |
| Is there a way to use your solution to size/resize page content so that there is no need to scroll vertically (at certain resolutions) or is that just unavoidable? |
No.
You can set different font-sizes to make the content use less space
| Code: |
| font:14px/1.5 Verdana, Geneva, sans-serif; |
use less top/bottom margins or padding to bring elements closer together.
Other than that you could make the image smaller. As other pages are developed there may be more content that will push the content beyond the bottom of the screen which will then automatically add a scrollbar. Maybe what we need is taller monitors instead of wider. |
|
joekinslow
Joined: 02 Sep 2009
Posts: 6
|
| Posted: Sat Nov 14, 2009 12:59 pm I see... |
|
|
|
| Thanks for the explanation... |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
