why is it that when I minimize my screen my website goes all out of whack?
sbronson37
0
Newbie Poster
Recommended Answers
Jump to Postmore information,
'out of whack'
is not a term recognized by IDtenT error reportingnor can we see this mysterious website to which there has been no link posted
Jump to Post2nd try ,, last try
what website,
of the billions of possibilities, which one can we look at
If you dont reply, likely no-one will assist youedit:, top right of the reply, 237 solved threads, 2000 posts, +3 reputation,
I mostly post in website reviews, html, php
you decide …
All 8 Replies
almostbob
866
Retired: passive income ROCKS
more information,
'out of whack'
is not a term recognized by IDtenT error reporting
nor can we see this mysterious website to which there has been no link posted
sbronson37
0
Newbie Poster
most websites out there keep mostly intact when you minimize, my website completely looks disorganized. My designer left me high and dry and now I'm trying to finish myself. Which obviously isn't going so well. Can anyone give me a clue.
almostbob
866
Retired: passive income ROCKS
2nd try ,, last try
what website,
of the billions of possibilities, which one can we look at
If you dont reply, likely no-one will assist you
edit:, top right of the reply, 237 solved threads, 2000 posts, +3 reputation,
I mostly post in website reviews, html, php
you decide whether you want help
sbronson37
0
Newbie Poster
The site is not finished yet. I can certainly post the code, just wasn't sure if I could do that or I would have done that in the first place. Let me know and I can post it ASAP.
almostbob
866
Retired: passive income ROCKS
please post the code
there are gurus out there in the wild world of DaniWeb, who can solve problems at a glance,
and many more like me who'll give it a bash
wrap the code in [code=html]
[/code] tags to show highlighting and make examining easy as below
<html>
<head><!-- etc -->like [b]makes this bold[/b] makes this bold
sbronson37
0
Newbie Poster
I know it needs more than a glance and its not finished yet by far still on the first page. I'm not a guru just need help with a solid start.
HTML:
<body>
<div id="header">
<h1>Arwebdesignetc.com</h1>
<p>Bringing Creativity to Life</p>
<div id="header_menu">
<div align="right">
<h6><a href="index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="services.html" target="_blank">Services
</a> | <a href="contact.php">Contact Us</a></h6>
</div>
</div>
</div>
<div id="upper_main">
<img src="images/mainimg.jpg"
align="left">
<h1>We Want You To Be Successful!</h1>
<p>Thank you for visiting our site.You have taken the first step in taking your business to the next level and we are here to help. Arwebdesignetc.com is a full service <strong> web design</strong> that is located in Arkansas and we are driven by our clients success. Th</p>
<p>Our <strong>web design</strong> and <strong>development</strong> team has the drive, knowledge, creativity and experience to show you how to get the best out of the web. This is how we look at it, we can't be successful unless you're successful. We are driven by your success. Here at Arwebdesignect.com we have the designing and marketing skills to help your business compete.</p>
<div id="middle_main">
<div id="middle_main_left">
<h2>Web Design</h2>
<p>dhfkdhflakdhfadlkjfhadslkfjhaldsfkhaldkfhaldskfh<br />aldskfhahkljhlkjhlkjhlkhjlkjh</p>
</div>
<div id="lower_main">
<h3>Graphic Design</h3>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body{background-image:url(images/bg.gif);background-repeat:repeat;padding:0px;margin:0px;}
#header{background-image: url(images/header_bg.jpg);background-repeat:no-repeat;margin-left:200px; margin-right:200px;}
#header h1{margin-left:20px;color:#953A27;font-size:28px;}
#header p{margin-left:100px;font-size:20px;color:#FFFFFF;margin-right:500px;}
#header_menu{padding-right:20px;}
#header_menu a{color:#953A27;font-size:16px;}
#header_menu a:hover{color:#000000;}
#upper_main{padding-bottom:100px;background-color:#E0CEAC;margin-left:200px;margin-right:200px;
border-left-style:solid; border-left-width:5px; border-left-color:#990000;border-right-style:solid; border-right-width:5px; border-right-color:#990000;}
#upper_main h1{font-size:32px;color:#953A27;border-bottom-style:solid;margin-left:300px;margin-right:100px;}
#upper_main img{padding-left:40px;padding-right:30px;padding-top:20px;}
#middle_main{background-color:#D1BF91;margin-top:40px;}
#middle_main_left{color:#FFFFFF;border-style:solid; border-width:1px;border-color:#000000;margin-right:600px;width:40%;}
#middle_main_left h2{padding-left:40px;border-style:solid;border-width:1px;}
#middle_main_left p{border-style:solid;border-width:1px;}
#lower_main{border-style:solid;border-width:1px;position:absolute;left:550px;bottom:90px;width:20%;}
I'm assuming you can tell, but I'm a marketing kind of guy not a designer nor a developer
almostbob
866
Retired: passive income ROCKS
In all the styles of your css section are set margin-left:200px; margin-right:500px; and other similar settings
if the window is less than 700px wide and you have a margin set at a total of 700px, the page will fail
likewise fixed size fonts will fail
fixed size ANYTHING will fail,
onresizing the window
current best practice per W3c guidelines is em and % for screen layout
margins are set in %, fonts are set in em
bot are relative sizes that adjust to user preference, screen resolution and window size, ensuring the page works in just about any device from a handheld ipad to a widescreen monitor
px are a ridiculous choice for sizing, on this monitor 10px is 0.08inch high, extremeley unreadable
the crappy layout chosen looks like it was lifted from Frontpage, a tool so pisspoor Microsoft give it away free with office, losing the designer seems to be a good thing,
this sample is not changed much
<html>
<head>
<style type='text/css'>
body{background-image:url(images/bg.gif);background-repeat:repeat;padding:0;margin:0;}
#header{background-image: url(images/header_bg.jpg);background-repeat:no-repeat;text-align:center;}
#header h1{margin-left:2%;color:#953A27;font-size:2em;}
#header p{margin-left:5%;font-size:1.5em;color:#FFFFFF;margin-right:5%;}
#header_menu{padding-right:1em;}
#header_menu a{color:#953A27;font-size:1.2em;}
#header_menu a:hover{color:#000000;}
#upper_main{padding-bottom:5%;background-color:#E0CEAC;margin-left:5%;margin-right:5%; border-left-style:solid; border-left-width:5px; border-left-color:#990000;border-right-style:solid; border-right-width:5px; border-right-color:#990000;}
#upper_main h1{font-size:2.2em;color:#953A27;border-bottom-style:solid;margin-left:5%;margin-right:5%;}
#upper_main img{padding-left:4%;padding-right:3%;padding-top:2%;}
#middle_main{background-color:#D1BF91;margin-top:4%;}
#middle_main_left{color:#FFFFFF;border-style:solid; border-width:1px;border-color:#000000;text-align:center;}
#middle_main_left h2{padding-left:4%;border-style:solid;border-width:1px;}
#middle_main_left p{border-style:solid;border-width:1px;}
#lower_main{border-style:solid;border-width:1px;position:fixed;right:5%;left:auto;bottom:5%; top:auto;width:20%;}
</style>
</head>
<body>
<div id="header">
<h1>Arwebdesignetc.com</h1>
<p>Bringing Creativity to Life</p>
<div id="header_menu">
<div style='text-align:right;'>
<h6><a href="index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="services.html" target="_blank">Services
</a> | <a href="contact.php">Contact Us</a></h6>
</div>
</div>
</div>
<div id="upper_main">
<img src="images/mainimg.jpg"
align="left">
<h1>We Want You To Be Successful!</h1>
<p>Thank you for visiting our site.You have taken the first step in taking your business to the next level and we are here to help. Arwebdesignetc.com is a full service <strong> web design</strong> that is located in Arkansas and we are driven by our clients success. Th</p>
<p>Our <strong>web design</strong> and <strong>development</strong> team has the drive, knowledge, creativity and experience to show you how to get the best out of the web. This is how we look at it, we can't be successful unless you're successful. We are driven by your success. Here at Arwebdesignect.com we have the designing and marketing skills to help your business compete.</p>
<div id="middle_main">
<div id="middle_main_left">
<h2>Web Design</h2>
<p>dhfkdhflakdhfadlkjfhadslkfjhaldsfkhaldkfhaldskfh<br />aldskfhahkljhlkjhlkjhlkhjlkjh</p>
</div>
<div id="lower_main">
<h3>Graphic Design</h3>
</div>
</div>
</div>
</div>
</body>
</html>just some of the css is reset to em and %
A graphic design or web design site has to be perfect, its the only chance you get to impress
these tools may assist you
http://analyze.websiteoptimization.com/authenticate.php?url=http://www.yoursite.com&/ Speed tweaks
http://demo.opera-mini.net/demo.html?www.yoursite.com handheld
http://www.browsershots.org other browsers
many problems (if present) will show
serious code errors in the w3c validator sites will produce blankscreens in browsershots
Valid code does not ensure the site will work ...
Invalid code ensures the site will not work ...
.. in all browser OS combinations
sbronson37
0
Newbie Poster
Thanks alot, I guess I need to get things lined out and keep a look out for another designer
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.