4 Replies - 890 Views - Last Post: 27 February 2010 - 09:34 PM

#1 jallenscott  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 06-May 09

CSS resizing problem.

Posted 24 February 2010 - 10:30 PM

Hey, I need a quick pointer here. I've made this site for an assignment for class, and I'm just having a couple nit-picky issues with it. My background and column are both liquid, resizing to the window size. I realize that eventually it'll get too small and things will get out of whack, but my problem is with my image on the main page - when the window gets smaller, it doesn't and it screws up the layout. I doubt I'd lose points for this for class, but it's annoying me. Also, my img alt tag isn't working. Any help would be appreciated. I'll attach my html code and the external css file.
<?xml version="1.0"?>
<!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">
<!-- Name: John A. Scott-->
<!-- Description: Web page about my favorite tv show, The Big Bang Theory-->
<!-- URL: http://triton.towson.edu/~jscott3/trans.html-->
<head>
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" href="mystyles.css" type="text/css" media="screen"></link>
<meta http-equiv="Content-type" content='text/html; charset="utf-8"'/>
<meta name="author" content="John A. Scott" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Imagetoolbar" content="no"/>
<title>The Big Bang Theory</title>
<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>
<body>
<div id="bg"><img src="background4.jpg" width="100%" height="100%" alt=""></img></div>
<div id="content">
<div id="header">
<h1 class="transparent">
	The Big Bang Theory
</h1>
</div>
<ul id="navigation">
	<li><a href="trans.html">Home</a></li>
	<li><a href="cast.html">Cast</a></li>
	<li><a href="links.html">Links</a></li>
	<li><a href="show.html">About the Show</a></li>
</ul>
<div id="container"><div id="text"><p></p><br></br>
<center><img src="cast.jpg" alt="The cast of The Big Bang Theory" style="border:0"></img></center><br></br><hr></hr>
hwlkdfjlksdjlksajdlkajs lkasjdlkasjdlkjsaldjaslkjd lkasjdlkajslddjalskjdalskjd jdjdjd djdj apoupowqe ; msjspojaw ndaisjdoaisd naskndihjolja sna sajs<a href="mystyles.css">CSS File</a>
</div></div>
<div id="footer">
<center><a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px"
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a></center>
</div>
</div>
</body>
</html>
 body {
	font-family: Arial, Helvetica, times;
	font-size: 90%;
	color: #000;
	padding: 10px 0px;
	margin: 0px;
	background-color: #A2CD5A;
	}

/*.transparent {
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
	}*/

h1 {
	text-align: center;
	color: #ffffff;
	font-family: arial;
	background: #000000;
	margin: 0;
	padding: 0;
	margin-left: 30%;
	height: 30%;
	width: 40%;
	}
	
ul {
	}
	
ul#navigation {
	padding: 0;
	margin: 0;
	margin-left: 30%;
	list-style-type: none;
	float: left;
	width: 40%;
	color: #fff;
	background-color: #000;
	}
	
ul#navigation li {
	display: inline;
	}
	
ul#navigation li a {
	display: block;
	float: left;
	width: 9.66em;
	color: #fff;
	background-color: #000;
	padding: 0.2em 1em;
	text-decoration: none;
	text-align: center;
	/*border-right: 0.1px solid #fff;*/
	}
	
ul#navigation a:hover {
	color: #000;
	background: #fff;
	}

#container {
	margin-left: 30%;
	width: 40%;
	min-height: 500px;
	height: auto;
	background-color: #fff;
	}
	
#text {
	text-align: center;
	color: #000;
	margin-left: 5%;
	width: 90%;
	}
	
#footer{
	height:10%;
	color: #fff;
	background-color: #000;
	margin-left: 30%;
	width: 40%;
	}
	
hr {
	width: 80%;
	color: #000;
	background-color: #000;
	height: .1px;
	}


Is This A Good Question/Topic? 0
  • +

Replies To: CSS resizing problem.

#2 YoshiGoneMad  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 19-February 10

Re: CSS resizing problem.

Posted 25 February 2010 - 12:46 PM

Add this code:
width="100%" height=100%"


to that image (cast.jpg)

The alt attribute is working fine on my end, unless your referring to the title attribute.

This post has been edited by YoshiGoneMad: 25 February 2010 - 12:47 PM

Was This Post Helpful? 0
  • +
  • -

#3 jallenscott  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 06-May 09

Re: CSS resizing problem.

Posted 25 February 2010 - 01:38 PM

Thanks. I originally had the width: 100% and height:100% in there, but took them out because it made the whole thing look wrong in chrome. But, considering the page will be graded based on how it looks in firefox, I switched it back. Thanks. Also, I don't know if you looked at my css file, but for my "ul#navigation li a" I have the individual link box widths dialed in using 9.66em so that they span the bar perfectly (at least on my screen). Is there a way to do this automatically? I tried using "auto" for the margins, tried using a percentage in the width, but nothing is getting it right. Any tips?
Was This Post Helpful? 0
  • +
  • -

#4 YoshiGoneMad  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 19-February 10

Re: CSS resizing problem.

Posted 25 February 2010 - 03:18 PM

View Postjallenscott, on 25 February 2010 - 12:38 PM, said:

Thanks. I originally had the width: 100% and height:100% in there, but took them out because it made the whole thing look wrong in chrome. But, considering the page will be graded based on how it looks in firefox, I switched it back. Thanks. Also, I don't know if you looked at my css file, but for my "ul#navigation li a" I have the individual link box widths dialed in using 9.66em so that they span the bar perfectly (at least on my screen). Is there a way to do this automatically? I tried using "auto" for the margins, tried using a percentage in the width, but nothing is getting it right. Any tips?


To fix that in Chrome, add a class to the image and create a width:100%; for it with CSS.

There's seem to be an issue with your navigation jumping out of its intended position. See if you can keep everything in one container.
Was This Post Helpful? 0
  • +
  • -

#5 jallenscott  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 06-May 09

Re: CSS resizing problem.

Posted 27 February 2010 - 09:34 PM

I tried the width: 100% thing for chrome, still isn't working. It's annoying me, but the page is being graded in firefox, so I'm not bothering anymore. Thanks for your help.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1