Wed, 2003-12-17 03:33
Well I just viewed a page on my site at 1024x 768 and it was out of wack!!! views properly at 800x600 never have had this problem because at the larger resolution is actually forceing content in. somewhat miffed???
Wed, 2003-12-17 03:49
#1
Oh the problem with resolutions!!!!!!
Ok now it is good at 1024x768 but out of whack at 800x600 and if there are some better way to position my paragraphs please point it out!! Thanks
Wed, 2003-12-17 10:26
#2
Oh the problem with resolutions!!!!!!
Bigdawg
The problem is that you web site does not resize very well, so when looking at different resolutions you are going to have problems.
For example I notice that for one (maybe more) you use a margin of "margin-right:345". As a huge FIXED margin it will not really perform correctly when being resized, as you have already seen.
I found it a little difficult to give you an answer as many of you styles are in the body and not as CSS.
I promised my wife I would go to bed a bit earlier tonight so will have another look at it tomorrow.
What we need to do is get all of the styles out of the body and into the head as CSS to make it easier to manipulate and the use classes and some Divs to contain Nav, content, and right hand column.
Also when I look at this site with resolution of 1024*768 si that how you want it to look?
Regards
Day
Wed, 2003-12-17 10:47
#3
Oh the problem with resolutions!!!!!!
The basic thing to do, rather than have the bar on the right absolutely positioned, is to float it right... then it will move with the page. Then the fixed margin-right will at least be there for a reason!
Wed, 2003-12-17 21:34
#4
Oh the problem with resolutions!!!!!!
Toys are coming in faster than I can handle the deliveries. This year it is a very Dell Christmas. So this brings me to the page in question. I am not spending as much time as I should dedicate thus the extra problems. Day I did the gallery in pure css and the body styling comes from me cheating a little with the program to style the paragraphs. I hope you got your rest because you have to keep the wife happy.
I think I have two wives the nice one and the "OTHER" one!!!
The page in question will render itself correctly in either resolution if it is designed in that res. however neither are friendly to changeing the resolution.
Djomp you are right and I removed it the absolute. Thanks in advance
Thu, 2003-12-18 01:13
#5
Oh the problem with resolutions!!!!!!
what there is a nice one, wow :twisted:
nah she just looking after me - making sure I get some sleep.
Ok - based on some of the text you had in there it looked like you wanted the menu to be horizontal so I did it that way, although you had it vertically in the site I was looking at.
Bigdawg - be aware that the template in 1st page has an old Doc Type, that makes browsers render your page in Quirly mode - so I replaced the doc type with a current one.
I knocked this up quick so should be ok and looks ok in IE6 and FB0.7
I did not put in any hacks for IE5.x - leave that one to you, and did not validate it - you probably want to move CSS to a stylesheet as well.
You can play around with the sizes I used, to whatever you want.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welcome to BIGDAWG Your Web Design Headquarters Free Google search engine. Baseball caps</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="Latinagear,websites,web sites,web design,webdesign,caps,hats,embroidery,music,photos,video,videos,hosting,bigdawgcaps,">
<meta name="generator" content="Adobe go live">
<style type="text/css">
body { color:rgb(128,128,128); font-family:sans-serif; background-color: #CCCCCC; font-size: 14px;}
ul {margin: 0px; padding: 0px;}
li {margin: 0px; padding: 0px;}
#navlist
{
font-family: sans-serif;
margin: 0px;
padding: 5px;
border: 1px #666666 solid;
background-color: #E1E1E1;
}
#navlist a:link
{
color:#666666;
background-color: #E1E1E1;
margin: 0px;
padding: 0px;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
#navlist a:visited { color: #666666; }
#navlist a:hover { color: #0066CC; }
#navlist ul
{
margin: 0px;
padding: 0px;
}
#navlist li
{
display: inline;
list-style: none;
margin: 0px;
padding: 0px 5px 0px 10px;
border-right: 1px #666666 solid;
}
.mcontent
{
width: 50%;
float: left;
margin-right: 1%;
}
.mcontent p
{
border-right: 1px #333333 solid;
}
.rhcontent
{
width: 48%;
float: left;
}
.rhcontent h2, .rhcontent p
{
color: #336666;
Font-family: "MS Sans Serif", Arial, sans serif;
}
.clear {clear: both;}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="index.htm" id="current">HOME</a></li>
<li><a href="webdesign.htm">PORTFOLIO</a></li>
<li><a href="mailto:[email protected]">CONTACT US</a></li>
<li><a href="Linktous.htm">LINKS</a></li>
<li><a href="photo.htm">PHOTO</a></li>
<li><a href="SPI.htm">SPI</a></li>
<li><a href="webdesign.htm">WEB DESIGN</a></li>
</ul>
<br />
<div class="mcontent">
<p>We will help you with your ideas to design a web site that will reflect the image that you want to convey. We are a small web design company and cater to those who need a creative site. We like to work with people just starting out who are just trying to have their presence on the web. </p>
<br />
<p>Our goal is to get your site up and running as quickly as possible. We can do this in couple of days usually depending on how complex your site is. We will work with you to design your logo and optimize yourgraphics so that your site is web friendly. A well thought out site is key to your success in doing a web site.</p>
<br />
<p>It can be very confusing when trying to start a site so we try to simplify things for you from selecting a host to search engine optimization. We can help with getting your site noticed with the market you are aiming for. If you would like to get in touch with us about a project please use the contact us on the main menu.</p>
</div>
<div class="rhcontent">
<h2>Current Projects</h2>
<p>We are designing a site for an artist so that she can display her artwork on the web. Not a single table or frame is used throughout her site which utilizes a pure css liquid layout even for her galleries. This site is in the beginning stages and will give you insite into the development of a web site.Click the China girl</p>
<p><a href="jeannie.htm"><img src="thumbchina.jpg" width="75" height="90" border="0"></a></p>
<p>We are designing and promoting a site for spring break 2004. This site will become more complete as businesses gear up for spring break.</p>
</div>
<div class="clear"></div>
</body>
</html>
Regards
Day
Thu, 2003-12-18 02:17
#6
Oh the problem with resolutions!!!!!!
That worked I just put it in the web editor I use except I want the vertical menu. The reason I have chosen to leave the css in the html page instead of externally linking it is because when I am working on a page I like it internal until I get it how I like and then I add it as an external style sheet. Thanks for the Help!!!!
A funny thing if you do a google search on Bigdawg and Nicole Hilton or Nicole Richie or Paris Hilton and even just plain Hilton I come back #!1 in all searches. 
Thu, 2003-12-18 02:50
#7
Oh the problem with resolutions!!!!!!
Do you want all the text up beside the vertical menu, or below it as you had?
Regards
Day
Thu, 2003-12-18 03:05
#8
Oh the problem with resolutions!!!!!!
Actually I am just getting a grasp on this css thing I would like to do a box 1 px around main content . Went from tables to layers and now on to css positioning which I find can be quite tricky. If you have the time play with it and lets see what you come up with. I would like more defined margins but when I tried to change too much the page got out of whack. Thanks for your help!!!
PS I really do not care for the line on the paragraphs but would rather have a box around all three in main content. Have an editor that is not as friendly towards css as Dreamweaver was. I had just started getting the hang of it when my trial expired. So I am learning it by hand coding everything versus relying on the program. Said I cheated and the lines on the side were done with the program.
Thu, 2003-12-18 03:22
#9
Oh the problem with resolutions!!!!!!
Simple enough I have the box but it is around all three how do I get just one. I realize the p tag is why I have three but what change would I make so I have one?
Thu, 2003-12-18 03:32
#10
Oh the problem with resolutions!!!!!!
OK I got one box but all paragraphs are together oh so little tweaking I need!
I put it up so this is what I have now.
Thu, 2003-12-18 05:46
#11
Oh the problem with resolutions!!!!!!
code it the other way around -
1) Replace all the P tags around each paragraph.
2) Take out the border: 1px #333333 solid; from the .mcontent p and put it in .mcontent like below
.mcontent
{
width: 50%;
float: left;
margin-right: 1%;
border: 1px #333333 solid;
}
.mcontent p
{
padding:1em;
margin-left:15px;
}
Regards
Day
Thu, 2003-12-18 17:17
#12
Oh the problem with resolutions!!!!!!
Thanks Day that worked. I just have to get a better feel on this css!