Programming Forums > Web Development and Design > HTML / XHTML / CSS

zanatos · Feb 12th, 2008, 3:56 PM

Hello,

I have a project for school due this week. I need to have a splash page and 2 other pages. One of those pages must not contain a link to CSS.

I have the main layout done with some text and effects. The problem is that I am positioning everything with CSS (including paragraphs). Therefore if I do not include a link to a css page, the layout will not look right (he wants it to look right even without CSS). The only way I can think of fixing this problem is just to include the <p> </p> in side the div but I want more control over position.

I also have another problem, When I preview my page using dreamweaver CS3 in FIrefox everything looks fine however when viewing in IE its looks messed and some effects do not work (bliking for example) and text font is different. How can I fix this.

Note: Content is dummy content.

Here is the code:

(Toggle Plain Text)

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>The City</title>

<style type="text/css">

body{
	background-image: url(images/DSC_2609.JPG);	
}

#banner{
	position:absolute;
	left:250px;
	top:0px;
	
}

#content{
	position:absolute; 
	top:178px;
	left:250px;
}

#navbar{
	position:absolute;
	top:149px;
	left:250px;
	
}

#footer{
	position:absolute;
	bottom:30px;
	left:250px;
}

h1{
	position:absolute;
	left:78px;
	font-family:Arnoldboecklin, fantasy;
	text-decoration:blink;
	color:#CC0000;
}

h2{
	position:absolute;
	top:200px;
	left:335px;	
	font-family:Arnoldboecklin, fantasy;
	text-decoration:underline;
	text-decoration:line-through;
	color:#CC0000;
}

p{
	position:absolute;
	top:230px;
	left:335px;
	font-family: Arnoldboecklin, fantasy;
	color:#0000CC;
	
}

</style>

</head>

<body>

<div id="banner"><img src="images/Banner.gif" /></div>
<h1> Welcome To </h1>

<div id="content"><img src="images/content1.gif" /></div>
<h2> About </h2>
<p>The city is a critically acclaimed PC game, developed by marionette design and published by EA Games.</p>

<div id="navbar"><img src="images/navbar.gif" /></div> 

<!-- <div id="leftwrapper"><img src="images/left_wrapper.gif" /></div>
<div id="homeoriginal"><img src="images/home_orignal.gif" /></div> -->

<div id="footer"><img src="images/Footer.gif" /></div>

</body>
</html>

MiKuS · Feb 12th, 2008, 4:26 PM

you can make a class for the paragraph tag, that way only paragraphs you assign the class to will be positioned differently.

here is the w3 schools part on css class syntax
http://www.w3schools.com/css/css_syntax.asp

Wizard1988 · Feb 12th, 2008, 5:04 PM

Are you not allowed to use CSS or are you not supposed to use an external file?

zanatos · Feb 12th, 2008, 8:35 PM

I now have a class for my paragraph. But can I somehow change the position of the body (which is an image from photoshop sliced) withouth using css? Can I somehow include it inside the div? That would help alot since the second page must not have a link to the CSS page.

MiKuS · Feb 12th, 2008, 8:47 PM

let me begin by saying that everything that can be done using an external style sheet can be done with internal styles.

without using css you can use the align attribute, i don't know how well that will work though.

zanatos · Feb 12th, 2008, 11:00 PM

Ok for the first page everything wokrs fine with css and for the second page I managed to align everything without CSS. However, If i wanted to write a paragraph on to the body how can I do this without CSS. It worked perfectly with CSS by making a a class and then positioning it over the body image. Is there a way to do this without CSS? like maybe change the body image intobackground but without reapeat? lol if you didn't notice I am new to this, but I'm learning fast!

MiKuS · Feb 12th, 2008, 11:21 PM

w3 schools is probably one of the most valuable references available,
http://www.w3schools.com/css/default.asp

if you need to position elements on the page without using css, you could use tables - positioning with css is highly recommended.

As for your background images, try setting the background="" attribute on the body tag, if the image is smaller than the page it will repeat itself.

itgalary · Feb 13th, 2008, 9:24 AM

IE is not following any rules.. They are going their own way. And will be thrown out soon..

MiKuS · Feb 13th, 2008, 3:01 PM

The new IE will have proper standards compliance, there is news that internal builds can already render the acid2 test properly.

Aside from that i just use tripoli mass css reset and everything is fine...

Feb 12th, 2008, 3:56 PM	#1
zanatos Newbie Join Date: Dec 2007 Posts: 11 Rep Power: 0	HTML/CSS project Hello, I have a project for school due this week. I need to have a splash page and 2 other pages. One of those pages must not contain a link to CSS. I have the main layout done with some text and effects. The problem is that I am positioning everything with CSS (including paragraphs). Therefore if I do not include a link to a css page, the layout will not look right (he wants it to look right even without CSS). The only way I can think of fixing this problem is just to include the <p> </p> in side the div but I want more control over position. I also have another problem, When I preview my page using dreamweaver CS3 in FIrefox everything looks fine however when viewing in IE its looks messed and some effects do not work (bliking for example) and text font is different. How can I fix this. Note: Content is dummy content. Here is the code: (Toggle Plain Text) <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The City</title> <style type="text/css"> body{ background-image: url(images/DSC_2609.JPG); } #banner{ position:absolute; left:250px; top:0px; } #content{ position:absolute; top:178px; left:250px; } #navbar{ position:absolute; top:149px; left:250px; } #footer{ position:absolute; bottom:30px; left:250px; } h1{ position:absolute; left:78px; font-family:Arnoldboecklin, fantasy; text-decoration:blink; color:#CC0000; } h2{ position:absolute; top:200px; left:335px; font-family:Arnoldboecklin, fantasy; text-decoration:underline; text-decoration:line-through; color:#CC0000; } p{ position:absolute; top:230px; left:335px; font-family: Arnoldboecklin, fantasy; color:#0000CC; } </style> </head> <body> <div id="banner"><img src="images/Banner.gif" /></div> <h1> Welcome To </h1> <div id="content"><img src="images/content1.gif" /></div> <h2> About </h2> <p>The city is a critically acclaimed PC game, developed by marionette design and published by EA Games.</p> <div id="navbar"><img src="images/navbar.gif" /></div> <!-- <div id="leftwrapper"><img src="images/left_wrapper.gif" /></div> <div id="homeoriginal"><img src="images/home_orignal.gif" /></div> --> <div id="footer"><img src="images/Footer.gif" /></div> </body> </html> <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The City</title> <style type="text/css"> body{ background-image: url(images/DSC_2609.JPG); } #banner{ position:absolute; left:250px; top:0px; } #content{ position:absolute; top:178px; left:250px; } #navbar{ position:absolute; top:149px; left:250px; } #footer{ position:absolute; bottom:30px; left:250px; } h1{ position:absolute; left:78px; font-family:Arnoldboecklin, fantasy; text-decoration:blink; color:#CC0000; } h2{ position:absolute; top:200px; left:335px; font-family:Arnoldboecklin, fantasy; text-decoration:underline; text-decoration:line-through; color:#CC0000; } p{ position:absolute; top:230px; left:335px; font-family: Arnoldboecklin, fantasy; color:#0000CC; } </style> </head> <body> <div id="banner"><img src="images/Banner.gif" /></div> <h1> Welcome To </h1> <div id="content"><img src="images/content1.gif" /></div> <h2> About </h2> <p>The city is a critically acclaimed PC game, developed by marionette design and published by EA Games.</p> <div id="navbar"><img src="images/navbar.gif" /></div> <!-- <div id="leftwrapper"><img src="images/left_wrapper.gif" /></div> <div id="homeoriginal"><img src="images/home_orignal.gif" /></div> --> <div id="footer"><img src="images/Footer.gif" /></div> </body> </html>

Feb 12th, 2008, 4:26 PM	#2
MiKuS Programmer Join Date: Jun 2007 Posts: 93 Rep Power: 2	Re: HTML/CSS project you can make a class for the paragraph tag, that way only paragraphs you assign the class to will be positioned differently. here is the w3 schools part on css class syntax http://www.w3schools.com/css/css_syntax.asp

Feb 12th, 2008, 5:04 PM	#3
Wizard1988 Professional Programmer Join Date: Oct 2005 Location: Chitown Posts: 416 Rep Power: 3	Re: HTML/CSS project Are you not allowed to use CSS or are you not supposed to use an external file? __________________ JG-Webdesign

Feb 12th, 2008, 8:35 PM	#4
zanatos Newbie Join Date: Dec 2007 Posts: 11 Rep Power: 0	Re: HTML/CSS project I now have a class for my paragraph. But can I somehow change the position of the body (which is an image from photoshop sliced) withouth using css? Can I somehow include it inside the div? That would help alot since the second page must not have a link to the CSS page.

Feb 12th, 2008, 8:47 PM	#5
MiKuS Programmer Join Date: Jun 2007 Posts: 93 Rep Power: 2	Re: HTML/CSS project let me begin by saying that everything that can be done using an external style sheet can be done with internal styles. without using css you can use the align attribute, i don't know how well that will work though.

Feb 12th, 2008, 11:00 PM	#6
zanatos Newbie Join Date: Dec 2007 Posts: 11 Rep Power: 0	Re: HTML/CSS project Ok for the first page everything wokrs fine with css and for the second page I managed to align everything without CSS. However, If i wanted to write a paragraph on to the body how can I do this without CSS. It worked perfectly with CSS by making a a class and then positioning it over the body image. Is there a way to do this without CSS? like maybe change the body image intobackground but without reapeat? lol if you didn't notice I am new to this, but I'm learning fast!

Feb 12th, 2008, 11:21 PM	#7
MiKuS Programmer Join Date: Jun 2007 Posts: 93 Rep Power: 2	Re: HTML/CSS project w3 schools is probably one of the most valuable references available, http://www.w3schools.com/css/default.asp if you need to position elements on the page without using css, you could use tables - positioning with css is highly recommended. As for your background images, try setting the background="" attribute on the body tag, if the image is smaller than the page it will repeat itself.

Feb 13th, 2008, 9:24 AM	#8
itgalary Newbie Join Date: Feb 2008 Posts: 11 Rep Power: 0	Re: HTML/CSS project IE is not following any rules.. They are going their own way. And will be thrown out soon.. __________________ Free Programming help http://www.itgalary.com Free Revenue Sharing http://blog.itgalary.com Online Site seeing http://www.itgalary.com/maps/

Feb 13th, 2008, 3:01 PM	#9
MiKuS Programmer Join Date: Jun 2007 Posts: 93 Rep Power: 2	Re: HTML/CSS project The new IE will have proper standards compliance, there is news that internal builds can already render the acid2 test properly. Aside from that i just use tripoli mass css reset and everything is fine...

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Web 2.0 Business Project	lalea	Existing Project Development	0	Feb 1st, 2008 7:35 PM
How to embed a web-based PHP project into a Java Program	Millhouse	Java	1	Jun 20th, 2006 1:33 PM
How to meet these cross-platform project goals?	mattengland	C++	1	Apr 3rd, 2006 4:01 AM
Project List!	raf_123	PHP	3	Mar 31st, 2006 2:32 PM
Project: Dedicated	Stack Overflow	Existing Project Development	0	Mar 31st, 2005 2:43 PM

Programming Forums > Web Development and Design > HTML / XHTML / CSS

HTML/CSS project