Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Sep 2005
    Posts
    10
    Member #
    11205
    Hi !

    This is a template I designed and I seem to have a few problems which I don't understand :

    1. when I resize the IE window the text resizes along with it too, can I stop that ?

    2. The length of the menubar changes in IE and netscape even when I give it a fixed pixel length, can anyone tell me how to avoid that ?

    3. The margins between the first block and second and third block fail in opera I don't understand why ?

    Inroder to view the file properly please make a folder and name it "images" and place the .css files and the attached images in that folder. please name the html file "index.html" and the css file "index_style.css"

    Code for .html file :

    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>
       <title>Cohesive Design Studio - Template 1</title>
       <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
       <meta name="description" content="Cohesive Design Studios, is a renowned firm in Website and graphics design. We provide excellent services in 		
    		web site design and development, CSS (Style sheets) restructuring, SEO optimization, 2D and 3D designs and broadcast videos. Our goal is
    		to design and develop quality media solutions for a broad range of domestic and international clients." />
    	<meta name="keywords" content="web design, website design, website, html, xhtml, CSS, Cascading style sheets, style sheets, flash,
    		Macromedia flash design, broadcast flash, design studio, development, php, asp, jsp, java server pages, html design,  active server pages,
    		news media,  applications, virtual reality, broadcast video, 3D, animation, graphics, print, xml, web, ecommerce, development, top studio,
    		 best design, web site design, killer flash, cool design, interface design, flash developer, quicktime, QTVR, ,multimedia, motion graphics,
    		 corporate identity, branding, online marketing, web strategy"  />
       <link rel="stylesheet" title="default" type="text/css" href="images/index_style.css" />
    </head>
    <body>
    	
    	<!-- first block of the document  -->
    	<div id="content">
    	
    	<div id="header">
    	<div id="pagetitle">Cohesive Design Studios</div>
    	<div id="pageblurb">Customized web and graphics design</div>
    	</div>
    	
    	<div id="bodytext">
    	
    	<h3>Overview</h3>
    		
    		<div class="para_text">
    		<p>The past decade has seen significant technological advances sprouting from all parts of the world. As a result competition has become 
    		extremely fierce. A website is now considered almost a mandatory requirement, required to present an image of the company in vast sea of 
    		"the World Wide Web". A company always seeks cutting edge technology to present itself through the changing times to keep up with its 		
    		client's perception of new and fresh. Cascading Style Sheets is one such technology that has come to the rescue. In recent years it has 
    		emerged in web-design to remove the clutter of browser incompatibilities and to unify styling standards for the coming future. This 
    		template highlights the importance of CSS to generate appealing and unified designs.</p>
    
    		</div>
    		
    		<h3>Approach</h3>
    
    		<div class="para_text">
    		<p>This template that I have designed uses has more of a geometrical aspect to it with clear cut and smooth edges and well defined 
    		borders to encompass text and menu and uses CSS postioning instead of the traditional table format. The background and menu reflect close colors, where as the text are stands out bolder with a white 	
    		background. The image on the right stands out as a logo to generate a visual print of the client in the viewer's mind. The menu has 
    		been made interactive to some extent, as you hover your mouse over the links in the menu there is a subtle change in the background 
    		color and an image appears to let the user confirm visually as to where he his in the list. This creates a somewhat animated effect as the 
    		user moves his mouse down the links in the menu. The images can also be customized for each link generating a more personal feeling to 	
    		each link. All these features have been implemented using CSS.
    		</p></div>
    		
    		<h3>Dream</h3>
    		
    		<div class="para_text">
    		<p>It is important to remember that web-standards are continually evolving. In the field of HTML and CSS there are many great changes 
    		afoot as these words are being written. The recent formalization of XHTML 1.0 as a full W3C recommendation for example is a major 	
    		milestone in the area of World Wide Web. There are likely to be more additions and levels to CSS further extending the ability to style 
    		documents; major browsers have reached full CSS1 support and launched a full-scale assault on CSS2 and we can already see the some of 
    		the excellent features of CSS2 lurking around the horizon. Attributes like "media" and "positioning" in CSS2 have just given us a glimpse of 	
    		the power that's just about to unleash.</p>
    		
    		</div>
    	
    		<h3>Cohesive Design Services</h3>
    		
    		<div class="para_text">
    		<p>At Cohesive we have made it our mission to challenge the ordinary. Through extrodianry precision and our exacting quality we strive 
    		to continually produce enticing experinces and lasitng impression. By infusing unsurpassed detail and creativity into the complete spectrum 	
    		of the new media solutions from complex motion design for the web to cutting edge baked development we are dedicated to one true 
    		principle, delivering to our clients the perfect blend of form and function. Our services include: </p>
    			
    		<ul>
    			<li>Website Design</li>
    			<li>CSS Restructing</li>
    			<li>SEO Optimization</li>
    			<li>Graphic Desgin</li>
    			<li>Broadcast Video</li>
    		</ul>
    		</div>
    		
    	</div>
    	
    	<div class="legal"> 2001-2005 | <a href="http://www.cohesivedesignstudios.com" style="text-decoration:none">Cohesive Design 
    	Studios | </a>Validate: <a href="http://validator.w3.org">XHTML 1.0</a> ,  
    	<a href="http://jigsaw.w3.org/css-validator/">CSS</a></div>
    	
    	<!-- end of first block of the document  -->
    	
    	</div>
    
    	<!-- Second block  - image on top right -->
    	
    	<div class="top_image">
    		<img src="images/cohesive_logo.jpg"  alt="Cohesive Logo" title="Cohesive" width="190px" height="175px"/>
    	</div>
    	
    	<!-- end of Second block  - image on top right -->
    	
    	
    	<!--third block of the document - menu -->
    	
    	<div id="menu">
    		<div id="menu_title">Cohesive Design Studio</div>
    		
    		<div class="group">
    		<a href="history.html" id="history">History</a>
    		<a href="index.html" id="home">Home</a>
    		<a href="downloads.html" id="downloads">Downloads</a>
    		<a href="mentor.html" id="mentor">Cohesive Mentor</a>
    		<a href="forum.html" id="forum">Forum</a>
    		<a href="faq.html" id="faq">FAQ</a>
    		<a href="mailto:sauravbatra@hotmail.com" id="contact">Contact</a>
    		</div>
    		
    		<h4>Cohesive Design Services</h4>
    		
    		<div class="group">
    		<a href="webdesign.html">Web Site Design</a>
    		<a href="css.html">CSS Restructuring</a>
    		<a href="seo.html">SEO Optimization</a>
    		<a href="idnetity.html">Graphics Design</a>
    		<a href="broadcast.html">Broadcast Video</a>
    		</div>
    		
    		<h4>Cohesive Portfolio</h4>
    		
    		<div class="group">
    		<a href="site1.html">Site1</a>
    		<a href="site2.html">Site2</a>
    		<a href="site3.html">Site3</a>
    		<a href="site4.html">Site4</a>
    		</div>
    		
    		<h4>Cohesive Experiments</h4>
    		
    		<div class="group" style="border-bottom: none">
    		<a href="imagery.html">Imagery</a>
    		<a href="flashdesign.html">Flash</a>
    		<a href="video.html">Video</a>
    		<a href="styles.html">Styles</a>
    		<a href="scripts.html">Scripts</a>
    		</div>
    	</div>
    
    	<!--third block of the document - menu bar -->
    		
    
    </body>
    </html>
    Code for CSS file :

    Code:
    body {
    		background-color: 	#777a83;
    		color: 			black;
    		margin:			0px;
    		width: 			100%;
    		font-family: 		'Lucida Grande', 'Gill Sans', Verdana, sans-serif;
    		position: 			relative;
    
    	}
    
    #content {
    		border: 			#666 1px solid;
    		background-color: 	#fff;
    		padding-left: 		5px;
    		width: 			67%; 
    		margin-top: 		0px;
    		margin-right: 		0px;
    		margin-bottom:		0px; 
    		margin-left:		0px;
    		position: 			absolute; 
    		top: 				7px;
    		left: 			3%;
    	}
    
    #header {
    		padding-top: 	0px;
    		padding-right: 	0px;   
    		padding-bottom: 	0px;
    		padding-left: 	0px;
    		margin-top: 	0px; 
    		margin-right:	0px; 
    		margin-bottom:	10px;
    		margin-left:	0px;  
    		border-bottom: 	#ccc 1px solid;
    	}
    
    #pagetitle {
    		padding-top: 	10px;
    		padding-right: 	10px;   
    		padding-bottom: 	0px;
    		padding-left: 	10px;
    		font-weight: 	bold; 
    		font-size: 		22px; 
    		margin-bottom: 	4px;
    		color: 		black; 	
    	}
    
    #pageblurb {
    		padding-top: 	10px;
    		padding-right: 	10px;   
    		padding-bottom: 	10px;
    		padding-left: 	10px;
    		font-size: 		10px; 
    		color: 		#888; 
    	}
    
    #bodytext  {
    		padding-top: 	10px;
    		padding-right: 	0px;
    		padding-bottom: 	0px; 
    		padding-left: 	10px; 
    		margin: 		0px; 
    	}
    
    #bodytext h3 {
    		padding-top: 	0px;
    		padding-right: 	10%; 
    		padding-bottom: 	0px; 
    		padding-left: 	10px;
    		font-size: 		14px; 
    		margin-top: 	3px; 
    		margin-right:	0px; 
    		margin-bottom:	10px;
    		margin-left:	10px; 		
    	}
    
    .para_text	{	
    		padding-top: 	0px;
    		padding-right: 	10%; 
    		padding-bottom: 	0px; 
    		padding-left: 	10px;
    		font-size: 		12px; 
    		margin-top: 	3px; 
    		margin-right:	0px;
    		margin-bottom: 	10px;
    		margin-left:	10px;
    	}
    
    .para_text ul {
    			list-style: disc none outside;
    	}
    
    .legal {
    		clear: 		both; 
    		font-size: 		10px; 
    		margin-top: 	6px;
    		margin-right:	0px; 
    		margin-bottom:	10px;
    		margin-left:	10px; 
    		color: 		#aaa; 
    		text-align: 	center;
    	}
    
    .legal a {
    		color: 		#999; 
    		border-bottom: 	none; 
    		text-decoration: 	none;
    }
    
    .legal a:visited {
    			color: 		#aaa; 
    			border-bottom: 	none;
    			text-decoration: 	none;
    }
    
    .legal a:hover {
    			color: 		#666; 
    			border-bottom:	#bbb 1px solid; 
    			text-decoration: 	none;
    }
    
    .top_image {
    		text-align:		center;
    		border: 		#777a83 1px solid;
    		border-bottom:	#777a83 5px solid; 
    		padding-top: 	0px;   
    		margin: 		0px;
    		width: 		190px; 
    		position: 		absolute;
    		top:			7px;
    		left:			71%;
    		
    	}
    
    #menu {	
    		background-color: 	#b0b4ba;
    		font-size:			10px;
    		border:	 		#262626 1px solid;
    		padding:			0px;
    		text-align: 		left;
    		padding-bottom: 		0px; 
    		width: 			190px;
    		position: 			absolute;
    		top: 				190px;
    		left:				71%;
    
    	}
    
    #menu_title {	
    			font-weight:		bold;
    			text-align: 		center;
    			background-color : 	#eaebec;
    			border-bottom: 		#262626 1px solid; 
    			padding-top:		1px;
    			padding-right: 		0px; 
    			padding-bottom:		2px;
    			padding-left: 		0px; 
    			margin-bottom: 		4px;
    			color: 			#000; 
    	}
    
    #menu h4 {
    		font-weight: 		bold; 
    		font-size: 			10px; 
    		margin-top: 		4px;
    		margin-right:		0px; 
    		margin-bottom:		2px; 
    		margin-left:		4px; 
    		color: 			#333;
    	}
    
    #menu .group {
    		margin-bottom: 		10px;
    		margin-left:		4px; 
    		border-bottom: 		#7f7f7f 1px solid;
    	}
    
    .group a {
    		display: 			block;
    		color: 			#444;
    		background-color: 	transparent;  		
    		text-decoration: 		none;
    		padding-top: 		2px; 
    		padding-right: 		20px; 
    		padding-bottom: 		2px; 
    		padding-left: 		2px; 
    		border-top-style: 	none; 
    		border-right-style: 	none; 
    		border-bottom-style: 	none; 
    		border-left-style: 	none; 
    		margin-bottom: 		2px; 
    	}
    
    .group a:hover {
    			padding-top: 		2px; 
    			padding-right: 		20px; 
    			padding-bottom: 		2px; 
    			padding-left: 		2px;
    			display: 			block;
    			color: 			#000; 
    			background: 		url("folder_new.gif") #a7abb0 no-repeat top right;
    			border-top-style: 	none; 
    			border-right-style: 	none; 
    			border-bottom-style: 	none; 
    			border-left-style: 	none;
    			text-decoration: 		none;
    	}
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member audiofreak9's Avatar
    Join Date
    Apr 2005
    Location
    NJ
    Posts
    339
    Member #
    9584
    1) You need to set a minimum width in the css, Example: min-width: 450px;
    2) Sometimes can't be avoided, the browsers can render different with the same code. If it's only a minor difference, don't sweat it.
    3) ? - I'm at work without Opera loaded so i can't check this one, anyone else want to tackle it?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:08 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com