Jump to content

Graphics To Resize With Window


Recommended Posts

I REALLY need help on this guys! I have about four graphics and some text that are all layered over each other....see here: chavener.com... and I want them all to stay in the same position in relation to eachother and resize when you resize the browser window(in the same proportions), or at least stay exactly where I placed them. As you know, when I stretch the window in or the user has a small resolution, the links move off of the center graphic. Any suggestions for what I may be able to do? Is fixed position my only choice??VERY APPRECIATED!

Link to post
Share on other sites

Still desperately needing that help (I go crazy when I can't solve an issue, even after hours). I am reading other posts to try to find someone who has had a similar problem. Still confused. Should I use percentages somehow? I am gathering that absolute positioning is not good to use often but I see no alternative in order to keep the animations and text in the same spot on the background image. Help please!

Link to post
Share on other sites
try using percentages within a fixed width container. (percentages applied to padding and/or margin)
Thank you so much for the help! I am going to try this right now. I am cleaning up my CSS first because its crazy all over the place, then I will let you know how it goes. So let me see if I got this right: Say I have my main image in the background of a center container that is a specific size. For the links and animations inside would I then just need to guess percentages for padding until I get it in the right place? Can I still use z-index there (though I'm not sure yet if it is necessary because the image will be the background of the container). Then to center EVERYTHING, what would be your suggestion there without all the proportions going haywire?
Link to post
Share on other sites

I'm guessing you may want to put each image/link in its own div, as images are inline elements and div's are block level elements, and thus will have their own "line breaks." From there you can position the div, one after another with appropriate padding (or height) to space them within the container, and then space the images within them. So for three links/images, you have three divs, each with an image/link inside them, all wrapped in your container with the background image and fixed width. And using percentages for padding/margin spacing. I think this should work in theory, haha. Z-indexing will only work on absolute, fixed, or relatively position elements, which as you have learned, can be tricky to play with. If you can do it with margins, paddings, etc, then I would recommend that approach first.

Edited by thescientist
Link to post
Share on other sites
I'm guessing you may want to put each image/link in its own div, as images are inline elements and div's are block level elements, and thus will have their own "line breaks." From there you can position the div, one after another with appropriate padding (or height) to space them within the container, and then space the images within them. So for three links/images, you have three divs, each with an image/link inside them, all wrapped in your container with the background image and fixed width. And using percentages for padding/margin spacing. I think this should work in theory, haha. Z-indexing will only work on absolute, fixed, or relatively position elements, which as you have learned, can be tricky to play with. If you can do it with margins, paddings, etc, then I would recommend that approach first.
Thanks, you are so helpful! I will let you know how it goes!
Link to post
Share on other sites
Thanks, you are so helpful! I will let you know how it goes!
<div>'s can go within <div>'s right? Because I have a div with the background picture and then all the div's inside but they are still appearing below the background picture and not over it...
Link to post
Share on other sites

yup. post your code so far. or is the current code up on your site?

Edited by thescientist
Link to post
Share on other sites
yup. post your code so far. or is the current code up on your site?
No, it's not up yet. I seriously appreciate the help. See below:
<?xml version="1.0" encoding="UTF-8"?><!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" xml:lang="en" lang="en"><head>    <title>Caitlin Havener</title>    <link rel="shortcut icon" href="favicon.ico" />    <style type="text/css">        span{cursor:progress}                body{background-color:#1F7C99;}                a{text-decoration:none;}                a img{border:0;}                div.center {            background-image: url('images/index.jpg');            background-repeat:no-repeat;            width: 700px;             height: 800px;            text-align:center;            border-style:outset;            border-color:#241466;            border-width:4px;        }                div.header{            height:130px;            text-align:center;            background-color:#241466;            padding:15px;            font-family:Arial black;            font-size:30px;            letter-spacing:2px;            vertical-align: super;            line-height:0;            border-bottom:dotted;            border-color:#9E97F2;            color:#2DE288;        }                #tchest{           width:200px;           height:200px;        }               #fishanim{        }                #starfishanim{        }                a.portfolio, a.resume, a.contact{            color:#2DE288;            line-height:0;            font-family:Arial black;            font-size:35px;            letter-spacing:2px;        }                p.portfolio{         top:-720px;         left:50px;        }        p.resume{         top:-390px;         left:-185px;        }                p.contact{         top:-190px;         left:220px;        }        p.portfolioshad, p.resumeshad, p.contactshad{            color:#000033;            line-height:0;            font-family:Arial black;            font-size:35px;            letter-spacing:2px;        }                p.portfolioshad{}                p.resumeshad{}                p.contactshad{}                #c{            position:relative;            font-size:130px;            top:-70px;            left:-250px;        }        #a{            font-size:50px; filter:alpha(opacity=90); opacity:.9;            top:-200px;            left:-190px;            position:relative;        }        #i{            font-size:40px; filter:alpha(opacity=70); opacity:.7;            top:-250px;            left:-160px;            position:relative;        }        #t{            font-size:80px;            top:-330px;            left:-130px;            position:relative;        }        #l{            font-size:60px; filter:alpha(opacity=90); opacity:.9;            top:-410px;            left:-100px;            position:relative;        }        #i2{            font-size:50px; filter:alpha(opacity=80); opacity:.8;            top:-470px;            left:-80px;            position:relative;        }        #n{            font-size:40px; filter:alpha(opacity=70); opacity:.7;            top:-510px;            left:-50px;            position:relative;        }        #h{            font-size:100px;            top:-655px;            left:30px;            position:relative;        }        #a2{            font-size:50px; filter:alpha(opacity=90); opacity:.9;            top:-755px;            left:90px;            position:relative;        }        #v{            font-size:30px; filter:alpha(opacity=70); opacity:.7;            top:-805px;            left:120px;            position:relative;        }        #e{            font-size:50px; filter:alpha(opacity=90); opacity:.9;            top:-850px;            left:150px;            position:relative;        }        #n2{            font-size:60px; filter:alpha(opacity=95); opacity:.95;            top:-920px;            left:190px;            position:relative;        }        #e2{            font-size:40px; filter:alpha(opacity=80); opacity:.8;            top:-970px;            left:230px;            position:relative;        }        #r{            font-size:80px;            top:-1060px;            left:270px;            position:relative;        }        #caption{            color:#9E97F2;            top:-1075px;            left:0px;            position:relative;        }    </style>    <script type="text/javascript">    if (document.images)     {        img1 = new Image();        img2 = new Image();        img3 = new Image();        img4 = new Image();        img5 = new Image();        img6 = new Image();        img7 = new Image();        img1.src = "images/index.jpg";        img2.src = "images/fish.gif";        img3.src = "images/fishanim.gif";        img4.src = "images/starfish.gif";        img5.src = "images/starfishanim.gif";        img6.src = "images/chest.gif";        img7.src = "images/tchest.gif";            }    function mouseOver(x)    {        document.getElementById(x).src ="images/"+ x +".gif";            }    function mouseOut(x,y)    {        document.getElementById(x).src ="images/"+ y +".gif";            }</script><script type="text/javascript" src="progressbar.js"></script></head><body>    <div class="header">                    <p id="c">C</p>            <p id="a">a</p>            <p id="i">i</p>            <p id="t">t</p>            <p id="l">l</p>            <p id="i2">i</p>            <p id="n">n</p>           <p> </p>            <p id="h">H</p>            <p id="a2">a</p>            <p id="v">v</p>            <p id="e">e</p>            <p id="n2">n</p>            <p id="e2">e</p>            <p id="r">r</p>                <p id="caption">Print and Web Designer</p></div><div class="center"><img src="images/index.jpg" alt="You cannot see image!" />    <div class="portfolio">        <a href="http://www.chavener.com/portfolio"> <img id="fishanim" src="images/fish.gif" onmouseover="mouseOver('fishanim')," onmouseout="mouseOut('fishanim','fish')" alt="resume"/> </a>        <a href="http://www.chavener.com/portfolio" class="portfolio" onmouseover="mouseOver('fishanim')" onmouseout="mouseOut('fishanim','fish')">Portfolio</a>        <p class="portfolioshad">Portfolio</p>    </div>        <div class="resume">        <a href="http://www.chavener.com/resume"> <img id="starfishanim" src="images/starfish.gif" onmouseover="mouseOver('starfishanim')," onmouseout="mouseOut('starfishanim','starfish'), " alt="contact"/> </a>        <a href="http://www.chavener.com/resume" class="resume" onmouseover="mouseOver('starfishanim')" onmouseout="mouseOut('starfishanim','starfish')">Resume</a>        <p class="resumeshad">Resume</p>    </div>    <div class="contact">        <a href="http://www.chavener.com/contact"> <img id="tchest" src="images/chest.gif" onmouseover="mouseOver('tchest')," onmouseout="mouseOut('tchest','chest')," alt="portfolio"/> </a>        <a href="http://www.chavener.com/contact" class="contact" onmouseover="mouseOver('tchest')" onmouseout="mouseOut('tchest','chest')">Contact</a></span>        <p class="contactshad">Contact</p>    </div></div></body></html>

Link to post
Share on other sites
<?xml version="1.0" encoding="UTF-8"?><!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" xml:lang="en" lang="en"><head>	<title>Caitlin Havener</title>	<link rel="shortcut icon" href="favicon.ico" />	<style type="text/css">		span{cursor:progress}				body{background-color:#1F7C99;}				a{text-decoration:none;}				a img{border:0;}				div.center {			background-image: url('images/index.jpg');			background-repeat:no-repeat;			width: 700px; 			height: 800px;			text-align:center;			border-style:outset;			border-color:#241466;			border-width:4px;		}				div.header{			height:130px;			text-align:center;			background-color:#241466;			padding:15px;			font-family:Arial black;			font-size:30px;			letter-spacing:2px;			vertical-align: super;			line-height:0;			border-bottom:dotted;			border-color:#9E97F2;			color:#2DE288;		}				#tchest{		   width:200px;		   height:200px;		}	   		#fishanim{		}				#starfishanim{		}				a.portfolio, a.resume, a.contact{			color:#2DE288;			line-height:0;			font-family:Arial black;			font-size:35px;			letter-spacing:2px;		}				p.portfolio{		 top:-720px;		 left:50px;		}		p.resume{		 top:-390px;		 left:-185px;		}				p.contact{		 top:-190px;		 left:220px;		}		p.portfolioshad, p.resumeshad, p.contactshad{			color:#000033;			line-height:0;			font-family:Arial black;			font-size:35px;			letter-spacing:2px;		}				p.portfolioshad{}				p.resumeshad{}				p.contactshad{}				#c{			position:relative;			font-size:130px;			top:-70px;			left:-250px;		}		#a{			font-size:50px; filter:alpha(opacity=90); opacity:.9;			top:-200px;			left:-190px;			position:relative;		}		#i{			font-size:40px; filter:alpha(opacity=70); opacity:.7;			top:-250px;			left:-160px;			position:relative;		}		#t{			font-size:80px;			top:-330px;			left:-130px;			position:relative;		}		#l{			font-size:60px; filter:alpha(opacity=90); opacity:.9;			top:-410px;			left:-100px;			position:relative;		}		#i2{			font-size:50px; filter:alpha(opacity=80); opacity:.8;			top:-470px;			left:-80px;			position:relative;		}		#n{			font-size:40px; filter:alpha(opacity=70); opacity:.7;			top:-510px;			left:-50px;			position:relative;		}		#h{			font-size:100px;			top:-655px;			left:30px;			position:relative;		}		#a2{			font-size:50px; filter:alpha(opacity=90); opacity:.9;			top:-755px;			left:90px;			position:relative;		}		#v{			font-size:30px; filter:alpha(opacity=70); opacity:.7;			top:-805px;			left:120px;			position:relative;		}		#e{			font-size:50px; filter:alpha(opacity=90); opacity:.9;			top:-850px;			left:150px;			position:relative;		}		#n2{			font-size:60px; filter:alpha(opacity=95); opacity:.95;			top:-920px;			left:190px;			position:relative;		}		#e2{			font-size:40px; filter:alpha(opacity=80); opacity:.8;			top:-970px;			left:230px;			position:relative;		}		#r{			font-size:80px;			top:-1060px;			left:270px;			position:relative;		}		#caption{			color:#9E97F2;			top:-1075px;			left:0px;			position:relative;		}	</style>	<script type="text/javascript">	if (document.images) 	{		img1 = new Image();		img2 = new Image();		img3 = new Image();		img4 = new Image();		img5 = new Image();		img6 = new Image();		img7 = new Image();		img1.src = "images/index.jpg";		img2.src = "images/fish.gif";		img3.src = "images/fishanim.gif";		img4.src = "images/starfish.gif";		img5.src = "images/starfishanim.gif";		img6.src = "images/chest.gif";		img7.src = "images/tchest.gif";			}	function mouseOver(x)	{		document.getElementById(x).src ="images/"+ x +".gif";			}	function mouseOut(x,y)	{		document.getElementById(x).src ="images/"+ y +".gif";			}</script><script type="text/javascript" src="progressbar.js"></script></head><body>	<div class="header">					<p id="c">C</p>			<p id="a">a</p>			<p id="i">i</p>			<p id="t">t</p>			<p id="l">l</p>			<p id="i2">i</p>			<p id="n">n</p>		   <p> </p>			<p id="h">H</p>			<p id="a2">a</p>			<p id="v">v</p>			<p id="e">e</p>			<p id="n2">n</p>			<p id="e2">e</p>			<p id="r">r</p>				<p id="caption">Print and Web Designer</p></div><div class="center"><img src="images/index.jpg" alt="You cannot see image!" />	<div class="portfolio">		<a href="http://www.chavener.com/portfolio"> <img id="fishanim" src="images/fish.gif" onmouseover="mouseOver('fishanim')," onmouseout="mouseOut('fishanim','fish')" alt="resume"/> </a>		<a href="http://www.chavener.com/portfolio" class="portfolio" onmouseover="mouseOver('fishanim')" onmouseout="mouseOut('fishanim','fish')">Portfolio</a>		<p class="portfolioshad">Portfolio</p>	</div>		<div class="resume">		<a href="http://www.chavener.com/resume"> <img id="starfishanim" src="images/starfish.gif" onmouseover="mouseOver('starfishanim')," onmouseout="mouseOut('starfishanim','starfish'), " alt="contact"/> </a>		<a href="http://www.chavener.com/resume" class="resume" onmouseover="mouseOver('starfishanim')" onmouseout="mouseOut('starfishanim','starfish')">Resume</a>		<p class="resumeshad">Resume</p>	</div>	<div class="contact">		<a href="http://www.chavener.com/contact"> <img id="tchest" src="images/chest.gif" onmouseover="mouseOver('tchest')," onmouseout="mouseOut('tchest','chest')," alt="portfolio"/> </a>		<a href="http://www.chavener.com/contact" class="contact" onmouseover="mouseOver('tchest')" onmouseout="mouseOut('tchest','chest')">Contact</a></span>		<p class="contactshad">Contact</p>	</div></div></body></html>

sorry, had to do this because the codebox was driving me crazy

Link to post
Share on other sites

some comments: *you are already assigning index.jpg to the background, why are you displaying it again in an <img> tag too?*are there no styles for your link divs (resume, portfolio, and contact)? You give them a class (when I think you would want to use an ID instead) but I don't see where you are styling those specific classes in your style declarations.*I would consider using CSS for your hover/animations; with JS disabled no one will be able to see them*Consider a strict DTD and validate your CSS and HTML, (I didn't but I'm sure there will be errors)

Edited by thescientist
Link to post
Share on other sites
Is the body considered the containing element for a <div> anyone?? If so could I say body{width:100%,height:100%} to take up the whole screen area??
Can you make the font size scalable by the screen size? How do you resize a background picture to stretch to fit its container?
Link to post
Share on other sites
Can you make the font size scalable by the screen size? How do you resize a background picture to stretch to fit its container?
Em's is unit of measurement which will scale if font size is increased/decreased by the client. Basically, if you use em's as a unit of measurement, it will scale based on the users font size if they increase it or decrease it in their browser, as well as changing the spaceing of elements if used that way.As far as background images go, if they are smaller than their container, they can be set to repeat horizontally or vertically. To get an img to stretch out in its container, you need to use <img> unless you are using some sort of pattern that would look good repeating across a background.Also, body is a "container" div. Edited by thescientist
Link to post
Share on other sites
Em's is unit of measurement which will scale if font size is increased/decreased by the client. Basically, if you use em's as a unit of measurement, it will scale based on the users font size if they increase it or decrease it in their browser, as well as changing the spaceing of elements if used that way.As far as background images go, if they are smaller than their container, they can be set to repeat horizontally or vertically. To get an img to stretch out in its container, you need to use <img> unless you are using some sort of pattern that would look good repeating across a background.Also, body is a "container" div.
Can you layer images then if there is no positioning and instead of the background image being a background its just an image behind the others? Having a hard time with that...
Link to post
Share on other sites
Can you layer images then if there is no positioning and instead of the background image being a background its just an image behind the others? Having a hard time with that...
What I had to do was make the main picture a div and put a div inside of it with three more divs inside of that hahah nonsense! I ended up having to use positioning to layer... unfortunetely I did not get my desired effect of the image expanding with the window because I couldn't seem to get the inner div's to follow and layer at the same time... May program some javascript to get the pictures to expand depending on screen resolution, but it may be more effective to just move on to the next project- which is actually making pages for the links to go to!
Link to post
Share on other sites

well if you want pictures to expand then you can set their width/heights to percentages, but then they may look stretched. In theory what you're trying to do should be achievable with CSS, you just want things to move depending on the browser windows size. Using something like percentages will make all spacing relative, which in your case is what I think you want.

Link to post
Share on other sites

This is driving me absolutely crazy. I cannot get my website to look the same across resolutions and browsers! I'm thinking I'm going to just have to use flash. See chavener.com and code below:

<?xml version="1.0" encoding="UTF-8"?><!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" xml:lang="en" lang="en"><head>    <title>Caitlin Havener</title>    <link rel="shortcut icon" href="favicon.ico" />    <style type="text/css">        span{cursor:progress}                body{background-color:#1F7C99;}                a{text-decoration:none;}                        #whole{            text-align:center;            height:;}                #main {            padding:0;            border-style:outset;            width:1000px;            height:500px;            border-color:#241466;            border-width:5px;            margin-left:auto;            margin-right:auto;        }                #header{            height:130px;            text-align:center;            background-color:#241466;            padding:15px;            font-family:Arial black;            font-size:30px;            letter-spacing:2px;            vertical-align: super;            line-height:0;            border-bottom:dotted;            border-color:#9E97F2;            color:#2DE288;        }                #tchest, #fishanim, #starfishanim{border-style:none;}                #tchest{           width:50%;           height:50%;           position:relative;           z-index:200;           left:-30px;        }               #fishanim{            width:90%;           height:90%;        }                #starfishanim{            width:35%;           height:35%;           z-index:200;            position:relative;            left:80px;            top:45px;        }                a.portfolio, a.resume, a.contact{            color:#2DE288;            line-height:0;            font-family:Arial black;            font-size:35px;            letter-spacing:2px;        }        a.portfolio{            z-index:200;            position:relative;            top:32px;        }        a.resume{            z-index:200;            position:relative;            top:75px;            left:-53px;        }        p.resumeshad{            z-index:100;            position:relative;            top:25px;        }        a.contact{            z-index:200;            position: relative;            top: 20px;        }        p.contactshad{            z-index:100;            position: relative;            top: -12px;            left:2px;        }        #mainpic{            height:100%;            width:100%;        }        #portfolio{         margin-top:10%;         margin-bottom:8%;         margin-left:35%;         width:20%;        }        #resume{         float:left;         margin-left:20%;         padding:0;         margin-right:0;                 }                #contact{         margin-right:20%;         margin-left:0;         float:right;         padding:0;        }        #center{            position:relative;            z-index:100;            top:-500px;            width:100%;            height:100%;        }        p.portfolioshad, p.resumeshad, p.contactshad{            color:#000033;            line-height:0;            font-family:Arial black;            font-size:35px;            letter-spacing:2px;        }                    p.c{            position:relative;            font-size:130px;            top:-70px;            left:-250px;        }        p.a{            font-size:50px; filter:alpha(opacity=90); opacity:.9;            top:-200px;            left:-190px;            position:relative;        }        p.i{            font-size:40px; filter:alpha(opacity=70); opacity:.7;            top:-250px;            left:-160px;            position:relative;        }        p.t{            font-size:80px;            top:-330px;            left:-130px;            position:relative;        }        p.l{            font-size:60px; filter:alpha(opacity=90); opacity:.9;            top:-410px;            left:-100px;            position:relative;        }        p.i2{            font-size:50px; filter:alpha(opacity=80); opacity:.8;            top:-470px;            left:-80px;            position:relative;        }        p.n{            font-size:40px; filter:alpha(opacity=70); opacity:.7;            top:-510px;            left:-50px;            position:relative;        }        p.h{            font-size:100px;            top:-655px;            left:30px;            position:relative;        }        p.a2{            font-size:50px; filter:alpha(opacity=90); opacity:.9;            top:-755px;            left:90px;            position:relative;        }        p.v{            font-size:30px; filter:alpha(opacity=70); opacity:.7;            top:-805px;            left:120px;            position:relative;        }        p.e{            font-size:50px; filter:alpha(opacity=90); opacity:.9;            top:-850px;            left:150px;            position:relative;        }        p.n2{            font-size:60px; filter:alpha(opacity=95); opacity:.95;            top:-920px;            left:190px;            position:relative;        }        p.e2{            font-size:40px; filter:alpha(opacity=80); opacity:.8;            top:-970px;            left:230px;            position:relative;        }        p.r{            font-size:80px;            top:-1060px;            left:270px;            position:relative;        }        p.caption{            color:#9E97F2;            top:-1075px;            left:0px;            position:relative;        }    </style>    <script type="text/javascript">    if (document.images)     {        img1 = new Image();        img2 = new Image();        img3 = new Image();        img4 = new Image();        img5 = new Image();        img6 = new Image();        img7 = new Image();        img1.src = "images/main.jpg";        img2.src = "images/fish.gif";        img3.src = "images/fishanim.gif";        img4.src = "images/starfish.gif";        img5.src = "images/starfishanim.gif";        img6.src = "images/chest.gif";        img7.src = "images/tchest.gif";            }    function mouseOver(x)    {        document.getElementById(x).src ="images/"+ x +".gif";            }    function mouseOut(x,y)    {        document.getElementById(x).src ="images/"+ y +".gif";            }</script></head><body>    <div id="whole"><div id="header">                    <p class="c">C</p>            <p class="a">a</p>            <p class="i">i</p>            <p class="t">t</p>            <p class="l">l</p>            <p class="i2">i</p>            <p class="n">n</p>           <p> </p>            <p class="h">H</p>            <p class="a2">a</p>            <p class="v">v</p>            <p class="e">e</p>            <p class="n2">n</p>            <p class="e2">e</p>            <p class="r">r</p>                <p class="caption">Print and Web Designer</p></div><div id="main"> <img id="mainpic" src="images/main.jpg" /> <div id="center">     <div id="portfolio">        <a href="http://www.chavener.com/portfolio"> <img id="fishanim" src="images/fish.gif" onmouseover="mouseOver('fishanim')," onmouseout="mouseOut('fishanim','fish')" alt="resume"/> </a>         <a href="http://www.chavener.com/portfolio" class="portfolio" onmouseover="mouseOver('fishanim')" onmouseout="mouseOut('fishanim','fish')">Portfolio</a>        <p class="portfolioshad">Portfolio</p>    </div>        <div id="resume">        <a href="http://www.chavener.com/resume"> <img id="starfishanim" src="images/starfish.gif" onmouseover="mouseOver('starfishanim')," onmouseout="mouseOut('starfishanim','starfish'), " alt="contact"/> </a>        <a href="http://www.chavener.com/resume" class="resume" onmouseover="mouseOver('starfishanim')" onmouseout="mouseOut('starfishanim','starfish')">Resume</a>        <p class="resumeshad">Resume</p>    </div>    <div id="contact">        <a href="http://www.chavener.com/contact"> <img id="tchest" src="images/chest.gif" onmouseover="mouseOver('tchest')," onmouseout="mouseOut('tchest','chest')," alt="portfolio"/> </a>        <a href="http://www.chavener.com/contact" class="contact" onmouseover="mouseOver('tchest')" onmouseout="mouseOut('tchest','chest')">Contact</a>        <p class="contactshad">Contact</p>    </div></div></div></div></body></html>

Link to post
Share on other sites

did you try applying a Strict DTD and checking for errors? It would be at the minimum a good base point when trying to get a page to display consistently across all browsers. Currently I can't get your page to load and the [ codebox] drives me crazy... (maybe just use [ code] next time?) I'll keep checking your site every so often and hopefully it will show up and I can look at your progress so far. Don't be frustrated, you'll get it figured out! :)

Link to post
Share on other sites

also, have you considered just making an image to display your name and title in the header as opposed to making all those classes and <p>'s?

Link to post
Share on other sites
did you try applying a Strict DTD and checking for errors? It would be at the minimum a good base point when trying to get a page to display consistently across all browsers. Currently I can't get your page to load and the [ codebox] drives me crazy... (maybe just use [ code] next time?) I'll keep checking your site every so often and hopefully it will show up and I can look at your progress so far. Don't be frustrated, you'll get it figured out! :)
I'm changing it to strict and checking now. I guess I really didn't understand the difference between strict and transitional. I don't understand why it's loading sometimes and not at others. Why do you think that is? The files combined are about 150Kb. I couldn't optimize the images more without losing significant quality. What was the advantage of changing the javascript rollovers to CSS? I'd rather not because I was trying to display that I can do some Javascript, but if it will make the page load quicker I will change it.
Link to post
Share on other sites
I'm changing it to strict and checking now. I guess I really didn't understand the difference between strict and transitional. I don't understand why it's loading sometimes and not at others. Why do you think that is? The files combined are about 150Kb. I couldn't optimize the images more without losing significant quality. What was the advantage of changing the javascript rollovers to CSS? I'd rather not because I was trying to display that I can do some Javascript, but if it will make the page load quicker I will change it.
A strict doctype forces browsers to render to a stricter set of standards, one which will tame and reel in loose rendering browsers. The issues regarding loading could be because of the server. The practicality of CSS is that users can disable Javascript, and there's less code to deal with. If you want the best of both worlds, you can use Javascript to preload your images and then use CSS for your hovers.
Link to post
Share on other sites
A strict doctype forces browsers to render to a stricter set of standards, one which will tame and reel in loose rendering browsers. The issues regarding loading could be because of the server. The practicality of CSS is that users can disable Javascript, and there's less code to deal with. If you want the best of both worlds, you can use Javascript to preload your images and then use CSS for your hovers.
Would godaddy.com's server go down?
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...