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

bja888 · Oct 14th, 2005, 9:28 AM

Here is a challenge for you...
Align layer "goLeft" to the left and "goRight" to the right.
You can not add any tags, you can not subtract any tags.

You can only change CSS and tag attributes.

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title><style>
#largeBoxOne{position:absolute;left:100px;top:50px;width:500px;height:150px; background-color:#4B5F73;}
#goLeft{width:150px;height:150px; background-color:#3C6A5E;}
#goRight{width:150px;height:150px;background-color:#3C6A5E;}
</style></head>
<body>
<div id="largeBoxOne">
<div id="goLeft"></div>
<div id="goRight"></div>
</div>
</body>
</html>

[/html]

DaWei · Oct 14th, 2005, 9:58 AM

Actually, your proposition is foolish (to be expected), as it is based upon the validity of saying, "Change this, but don't change it," which is prima facie invalid. Nevertheless, a simple addition of float:right and reordering handles this particular problem. I took the liberty of adding the content, "Left", and "Right", as an aid to visualization.

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> 
<title>The Fix</title>
<style> 
#largeBoxOne{position:absolute;left:100px;top:50px ;width:500px;height:150px; background-color:#4B5F73;} #goLeft{width:150px;height:150px; background-color:#3C6A5E;} 
#goRight{width:150px;height:150px;float: right;background-color:#3C6A5E;} 
</style>
</head> 
<body> 
	<div id="largeBoxOne">  
		<div id="goRight">Right</div> 
		<div id="goLeft">Left</div>  
	</div> 
</body> 
</html>

I did nothing, actually, Dreamweaver wrote the code for me.

Pizentios · Oct 14th, 2005, 10:07 AM

**shakes his head**

once again, please make sure you know what your talking about before making claims like this.

the majority of users on here (regular ones, including myself) could have easyly gave the same answer as DaWei, not sure what point you were trying to make.

bja888 · Oct 14th, 2005, 10:09 AM

Ok, round one over. Next one is much harder. I'll post it when we get back from break (in class)
I still have yet to understand the consept of float. Not for lack of tring or asking for help.

bja888 · Oct 14th, 2005, 10:16 AM

Hold on a second, I know I diden't put this in the origional or the rules but it doesn't work with content.
[html]<div id="largeBoxOne"><div id="goRight">Right</div><div id="goLeft">Left</div>test</div>[/html]
[html]<div id="largeBoxOne">test<div id="goRight">Right</div><div id="goLeft">Left</div></div>[/html]
[html]<div id="largeBoxOne"><div id="goRight">Right</div>test<div id="goLeft">Left</div></div>[/html]
None of these are desplayed right in firefox.

Pizentios · Oct 14th, 2005, 10:19 AM

what are you talking about, DaWei's example work's fine with my Firefox.

I am running version 1.0.7 on a gentoo box, with fvwm, and it looks fine.

Also please relize that you gave it a set height. The text makes the div higher than what you told it to be, thus it just tacks it on the end.

if you gave largeBoxOne a height of 200px, you'll see that it works fine. I think your just used to coding for IE.

RTFM man.

bja888 · Oct 14th, 2005, 10:35 AM

Changeing the height changes what I want to do with it compleatly.
I want to have content in the middle of layer "largeBoxOne" ( added "text-align:center;" on my computer) I want the other layers to border the content. I want them to line up pirfectly. Lets just pretend the side boxes are images... so you cant just add a border to the main layer.

DaWei · Oct 14th, 2005, 12:17 PM

It's one thing to come to the forum in abject ignorance. None of us are born knowing any of this stuff, and none of us will die knowing all of this stuff. It's quite another thing to come in abject ignorance and proclaim your heavenly enlightenment. Any methodoloogy can be improved, beautified, or made more effective or elegant. So long as you remain irrational, you will not be the one to do it. I have judged you a fool. I doubt that I'm alone in that judgement. Any blame that accrues to that can be laid squarely at your own door. Your super challenge was ugly and more than it had to be, in the first place. Misusing a tool does not make the tool bad. It reflects only on the user. Mothers are quite rightly biased. Perhaps you should forget how wonderful you have been told you are, and face some facts with a rational mind.

bja888 · Oct 14th, 2005, 12:23 PM

Ok sure, I'm a fool. Why not... Now prove this to yourself, me and everyone else. Solve the proublem I posted. After all it should be possable becuse you guys think there is no need to replace the language.

Polyphemus_ · Oct 14th, 2005, 1:27 PM

You really don't get the point, do you..

Oct 14th, 2005, 9:28 AM	#1
bja888 Hobbyist Programmer Join Date: Oct 2005 Location: Central, FL Posts: 213 Rep Power: 0	xhtml exercises Here is a challenge for you... Align layer "goLeft" to the left and "goRight" to the right. You can not add any tags, you can not subtract any tags. You can only change CSS and tag attributes. [html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title></title><style> #largeBoxOne{position:absolute;left:100px;top:50px;width:500px;height:150px; background-color:#4B5F73;} #goLeft{width:150px;height:150px; background-color:#3C6A5E;} #goRight{width:150px;height:150px;background-color:#3C6A5E;} </style></head> <body> <div id="largeBoxOne"> <div id="goLeft"></div> <div id="goRight"></div> </div> </body> </html> [/html]

Oct 14th, 2005, 9:58 AM	#2
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Actually, your proposition is foolish (to be expected), as it is based upon the validity of saying, "Change this, but don't change it," which is prima facie invalid. Nevertheless, a simple addition of float:right and reordering handles this particular problem. I took the liberty of adding the content, "Left", and "Right", as an aid to visualization. (Toggle Plain Text) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>The Fix</title> <style> #largeBoxOne{position:absolute;left:100px;top:50px ;width:500px;height:150px; background-color:#4B5F73;} #goLeft{width:150px;height:150px; background-color:#3C6A5E;} #goRight{width:150px;height:150px;float: right;background-color:#3C6A5E;} </style> </head> <body> <div id="largeBoxOne"> <div id="goRight">Right</div> <div id="goLeft">Left</div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>The Fix</title> <style> #largeBoxOne{position:absolute;left:100px;top:50px ;width:500px;height:150px; background-color:#4B5F73;} #goLeft{width:150px;height:150px; background-color:#3C6A5E;} #goRight{width:150px;height:150px;float: right;background-color:#3C6A5E;} </style> </head> <body> <div id="largeBoxOne"> <div id="goRight">Right</div> <div id="goLeft">Left</div> </div> </body> </html> I did nothing, actually, Dreamweaver wrote the code for me. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Oct 14th, 2005, 10:16 AM	#5
bja888 Hobbyist Programmer Join Date: Oct 2005 Location: Central, FL Posts: 213 Rep Power: 0	Hold on a second, I know I diden't put this in the origional or the rules but it doesn't work with content. [html]<div id="largeBoxOne"><div id="goRight">Right</div><div id="goLeft">Left</div>test</div>[/html] [html]<div id="largeBoxOne">test<div id="goRight">Right</div><div id="goLeft">Left</div></div>[/html] [html]<div id="largeBoxOne"><div id="goRight">Right</div>test<div id="goLeft">Left</div></div>[/html] None of these are desplayed right in firefox. Last edited by bja888; Oct 14th, 2005 at 10:36 AM.

Oct 14th, 2005, 10:19 AM	#6
Pizentios Programming Guru Join Date: May 2004 Location: Brandon, Manitoba, Canada Posts: 2,023 Rep Power: 7	what are you talking about, DaWei's example work's fine with my Firefox. I am running version 1.0.7 on a gentoo box, with fvwm, and it looks fine. Also please relize that you gave it a set height. The text makes the div higher than what you told it to be, thus it just tacks it on the end. if you gave largeBoxOne a height of 200px, you'll see that it works fine. I think your just used to coding for IE. RTFM man. __________________ Profanity is the one language that all programmers understand. Check out my Blog <---updated Nov 30 2007!

Oct 14th, 2005, 12:17 PM	#8
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	It's one thing to come to the forum in abject ignorance. None of us are born knowing any of this stuff, and none of us will die knowing all of this stuff. It's quite another thing to come in abject ignorance and proclaim your heavenly enlightenment. Any methodoloogy can be improved, beautified, or made more effective or elegant. So long as you remain irrational, you will not be the one to do it. I have judged you a fool. I doubt that I'm alone in that judgement. Any blame that accrues to that can be laid squarely at your own door. Your super challenge was ugly and more than it had to be, in the first place. Misusing a tool does not make the tool bad. It reflects only on the user. Mothers are quite rightly biased. Perhaps you should forget how wonderful you have been told you are, and face some facts with a rational mind. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Oct 14th, 2005, 10:07 AM	#3
Pizentios Programming Guru Join Date: May 2004 Location: Brandon, Manitoba, Canada Posts: 2,023 Rep Power: 7	shakes his head once again, please make sure you know what your talking about before making claims like this. the majority of users on here (regular ones, including myself) could have easyly gave the same answer as DaWei, not sure what point you were trying to make. __________________ Profanity is the one language that all programmers understand. Check out my Blog <---updated Nov 30 2007!

Oct 14th, 2005, 10:09 AM	#4
bja888 Hobbyist Programmer Join Date: Oct 2005 Location: Central, FL Posts: 213 Rep Power: 0	Ok, round one over. Next one is much harder. I'll post it when we get back from break (in class) I still have yet to understand the consept of float. Not for lack of tring or asking for help.

Oct 14th, 2005, 10:35 AM	#7
bja888 Hobbyist Programmer Join Date: Oct 2005 Location: Central, FL Posts: 213 Rep Power: 0	Changeing the height changes what I want to do with it compleatly. I want to have content in the middle of layer "largeBoxOne" ( added "text-align:center;" on my computer) I want the other layers to border the content. I want them to line up pirfectly. Lets just pretend the side boxes are images... so you cant just add a border to the main layer.

Oct 14th, 2005, 12:23 PM	#9
bja888 Hobbyist Programmer Join Date: Oct 2005 Location: Central, FL Posts: 213 Rep Power: 0	Ok sure, I'm a fool. Why not... Now prove this to yourself, me and everyone else. Solve the proublem I posted. After all it should be possable becuse you guys think there is no need to replace the language.

Oct 14th, 2005, 1:27 PM	#10
Polyphemus_ Expert Programmer Join Date: Aug 2005 Location: Rotterdam, the Netherlands Posts: 942 Rep Power: 4	You really don't get the point, do you..

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

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

xhtml exercises