Web Development

15-Jun-05 21:53

I am trying to better understand CSS and am having problems. Maybe what I'm trying to do can't be done? Anyway, I am trying to recreate the look I've created at www.randommonkeyworks.com, and eliminating tables as much as possible. I finally saw the magic to 'div' tags, and their positioning tricks. But it appears they won't give me everything I want, unless I am overlooking something someone here may know.

I can see making the header a div, the sidebar a div, the footer a div, and the body a div, but then when I get to the purple frame I've placed along the top and left of the body, it blows up royally. Does anyone know any way to recreate that effect using only CSS?

(Even a bastardized conglomeration of a table inside of a div doesn't work, if I understand it correctly, as the div will not grow in height automatically unless there is text in it, and the top bar will not size right either. I won't go into much more details here, but I've tried.)

For a second question, how do you set up your navigation bar so that it is testable on your development hard drive, as well as on your actual site? What I mean is that if you use links like "/dir1/file1.html", in my case that would refer to "www.randommonkeyworks/dir1/file1.html", but on my development hard drive it refers to "D:\dir1\file1.html" (or something like that), so if the actual path is "D:\HtmlWork\Site3\dir1\file1.html", I can not test it on my development hard drive. And you have to use links like that on a navigation bar, because using relative links when your site has many subdirectories means that you have to massage the paths to the links on every page on a subdirectory basis, rather than just placing a chunk of code to absolute links. (That makes your site more brittle.) I've somewhat gotten around that with some JavaScript, but I want to know if there is a more elegant solution.

Thanks,
David

Mattias Olgerfelt20-Jun-05 0:20

20-Jun-05 0:20

Question 1.
Could be achieved in many ways.
One way is to use the background property of the div.

eg:
BACKGROUND-POSITION: right top;
BACKGROUND-IMAGE: url(../library/images/RCorner.gif);
BACKGROUND-REPEAT: no-repeat

Question 2.
I recommend using relative links my friend. Makes you happier and life easier in the long term.
However, you could use some server side code to create the path to your files, reading the path form a config file. That would not work from html tough.

/M

David O'Neil20-Jun-05 11:50

20-Jun-05 11:50

1) I can only get that to work inside tables. If it is not inside a cell, the image will not extend to the other side of the window. (It won't extend down the entire length of the left side of the screen, either.)

2) The problem with relative links rears its ugly head when you go to insert a 'standard' header/sidebar, as was implemented on randommonkeyworks. If your 'common' stuff is in a 'common' subdirectory, the relative path to that subdirectory changes for each subdirectory on your site, keeping you from inserting the same relative links through shtml or whatever, unless you take other measures, as I have. I am wondering if there is a better way, though. As you indicated, with Javascript disabled, my way blows up.

(I don't have access to the server, but can do php on it, I believe. I just have not wanted to learn that in addition to everything else. But if I do that, the php won't work on my machine while testing the site, I believe. The Javascript seems to be the cleanest solution. Grrrrr...., unless I am wrong.)

David

DavidNohejl20-Jun-05 12:50

DavidNohejl

20-Jun-05 12:50

David O'Neil wrote:
I don't have access to the server, but can do php on it, I believe. I just have not wanted to learn that in addition to everything else. But if I do that, the php won't work on my machine while testing the site, I believe.

why not? it's freeware... both server (Apache) and some PHP (e.g. PHP Triad http://sourceforge.net/projects/phptriad/[^] - all in one, even with DB, easy to set up - I used it while on high school... it sure won't be a problem for you Wink | ;)

).

David

Mattias Olgerfelt20-Jun-05 22:41

20-Jun-05 22:41

1. ok, change the attribute:
BACKGROUND-REPEAT: no-repeat to BACKGROUND-REPEAT: repeat-x

2.
Well.. I am using a CSS-file. and the path is relative to that CSS-file.
In C# I am able to specify which CSS to use in my page with the following code.

in the client-page..

<br />
<link id="styleLink" type="text/css" rel="stylesheet" runat="server"></link><br />

in the Codebehind...

<br />
protected System.Web.UI.HtmlControls.HtmlGenericControl styleLink;<br />
private void Page_Load(object sender, System.EventArgs e)<br />
{<br />
   string style = HttpContext.Current.Request.ApplicationPath + "/" + <br />
      System.Configuration.ConfigurationSettings.AppSettings["GeneralStylePage"];<br />
   style = style.Replace("//","/");<br />
   styleLink.Attributes.Add("href", style);<br />

/Mattias

David O'Neil21-Jun-05 4:59

21-Jun-05 4:59

Mattias Olgerfelt wrote:
1. ok, change the attribute:
BACKGROUND-REPEAT: no-repeat to BACKGROUND-REPEAT: repeat-x

That will only repeat the background IN THE AREAS WHERE TEXT APPEARS. For this reason it won't work if you want the header to automatically expand itself to the right edge of the page. (If your line of text is: "My Text", and it is displayed in 10pt, the background will only be about 1" in width, and will end right after the final 't'.)

Mattias Olgerfelt wrote:
2.

I do not really understand what you are trying to do, and how it is different than my solution, or if it is better. What you imply is that you have a C# application running on your server, serving your pages, and that "ApplicationPath" gives you the root to the base directory of the site (I'm guessing). If I'm guessing correctly, that still doesn't explain how to overcome the problem I pointed out, in being able to test your site on your hard drive from any random subdirectory as you are designing it, and then having it work flawlessly upon moving it over to the final server location. (How does it know that the root isn't "D:\", but rather "D:\Documents\Work\PrototypeSite"? The code above does not seem to address that question.) But as I said, I cannot really understand what you are trying to do from the information you have given.

(In addition to that, I don't have access to the server, as I said, and I cannot run a C# application on it.)

Thank you for taking the time and trying to explain, though. I appreciate it.

David

Mattias Olgerfelt21-Jun-05 5:42

21-Jun-05 5:42

David O`Neil wrote:
That will only repeat the background IN THE AREAS WHERE TEXT APPEARS. For this reason it won't work if you want the header to automatically expand itself to the right edge of the page. (If your line of text is: "My Text", and it is displayed in 10pt, the background will only be about 1" in width, and will end right after the final 't'.)

Well, that depends on what type of element you have... If you show me the code that is not working I will fix it for you...

About the path to stuff...
Aha, you want the the path to be relative but varying...
Ok.. here is what i sugest...
Add a container DIV to your page holding the menu.
Create a Javascritpt function that crates the meny...
Load the script in the page tag (onLoad="buildMenu();")

Something like this...

<br />
<style><br />
	.menuItem { width: 100px; clear: both; float: left; BACKGROUND-COLOR: #FFF; border: #CCF; border: none; margin: 1px;}<br />
	.menuMouseOver { width: 100px; clear: both; float: left; BACKGROUND-COLOR: #CCC; border: solid 1px #CCF; margin: 0; }<br />
	.menuKeyDown { width: 100px; clear: both; float: left; BACKGROUND-COLOR: #444; border: solid 1px #CCF; margin: 0;}<br />
	#menu { height: 200px;  }<br />
</style>	<br />
<script><br />
	function initNavigation(sElementId, iLevel) {<br />
		if (!document.getElementById) return;<br />
<br />
		var sDir = '';<br />
		var i;<br />
		for (i=0; i<iLevel; i++) {<br />
			sDir += '../';<br />
		}<br />
		var arrNav = new Array();<br />
		arrNav[arrNav.length] = ['Main', sDir + './Page1.htm'];<br />
		arrNav[arrNav.length] = ['Medit', sDir + './medit/Page1.htm'];<br />
		// etc...<br />
<br />
		// Create Menu<br />
		var elm = document.getElementById(sElementId);<br />
		for (i=0; i<arrNav.length; i++) {<br />
			var r;<br />
			r = document.createElement('span');<br />
			r.className='menuItem';<br />
			r.innerHTML = '<a href=\''+arrNav[i][1]+'\'>'+arrNav[i][0]+'</a>';<br />
			r.onmouseover = function () { this.className = 'menuMouseOver'; }<br />
			r.onmouseout = function () { this.className = 'menuItem'; }<br />
			r.onmousedown = function () { this.className = 'menuKeyDown'; }<br />
			r.onclick = function () { this.className = 'menuKeyDown'; document.location.href = this.childNodes[0].href; }<br />
			elm.insertBefore(r,null);<br />
		}<br />
	}<br />
</script><br />
</HEAD><br />
<body onload="initNavigation('menu', 1)" ><br />
<form id=Form1 method=post runat="server"><br />
<div id="menuContainer"></div><br />

Level specifyes how deep the page is.

By the way...
I think that you realy shouldn't use absoulte path's to files and images. Instead use relative paths.

/M

David O'Neil21-Jun-05 7:34

21-Jun-05 7:34

I finally got the image to repeat, thanks to your prompting. I don't know what I was doing wrong earlier.

But just getting it to repeat doesn't solve the root problem, which is: "How would you create the purple border effect used on www.randommonkeyworks.com using only css elements?"

As for the paths: that is some great code you've posted, although I haven't tested it. (A 'for' loop end was sucked up by a "<".) But I don't see that it is any better than my solution, and it even appears that it will make loading pages more innefficient than my method, as there is a lot more computation that must take place.

And as for your belief that I should use relative paths: I would tend to agree, except that they get in the way of creating a site that is not brittle. You can see what I did to place the header and sidebar across all of the pages to my site, if you want. Here's a page I wrote up a while ago, briefly skimming the details. Of course, my css skills have improved since then, as well as some of my other skills, but I still can not see a simpler and easier to change method to accomplish what I have accomplished.

David

Mattias Olgerfelt21-Jun-05 22:12

21-Jun-05 22:12

Hi...

There are some differences between your code and mine...
Mine is general, you don't have to maintain a root-path.
And it is a little easier to add events and styles to the elements in my code.

About the page load, you don't need to worry; it is a lot faster then the web browsers are rendering the page.

However… I have looked into making your page not using tables. Well it is possible but not with the exact look... There are differences between how tables (and table-cells) behaves and how div and span elements behave.

Here are some of them.
A table cell always fills out the rest of the cell if the table has a size and the rest of the cells have size. That is currently not possible using CSS. (Quite annoying actually).

It is not possible to align a span or div between each other in the way cells are aligned to each other.

A span or div does not change size like a table and cells changes size.

So, if you want this very dynamic behavior of changing size you are stuck to table.
However, I have made a little recoding of your page. You will find it here:
http://www.olgerfelt.se/MonkeyCode/Monkey.zip[^]

Note also that you have to replace the corner image to get the look you want.

/Mattias

Mattias Olgerfelt22-Jun-05 6:39

22-Jun-05 6:39

Hi, again... corrected some small fuzzes... new version is downloadable...

/M

David O'Neil22-Jun-05 7:42

22-Jun-05 7:42

First, thank you, thank you, thank you, for taking the time to work on this and showing me something new. I really appreciate it.

I have been looking at it, and working with your first example, and just now looked at your second example. I'm trying to work out more futzes, and will get back with you on the results shortly. One thing I have noticed is that on your revision the corner jpg does not show up in Firefox, although I see Explorer presents yours very nicely. I'll explore this more deeply in a bit.

David

Mattias Olgerfelt22-Jun-05 8:40

22-Jun-05 8:40

David O`Neil wrote:
One thing I have noticed is that on your revision the corner jpg does not show up in Firefox, although I see Explorer presents yours very nicely.

You can count with that IE is doing wrong and FF is correct... Frown | :-(

Mattias Olgerfelt22-Jun-05 8:42

22-Jun-05 8:42

David O'Neil22-Jun-05 9:28

22-Jun-05 9:28

This is what I got so far. My back hurts, my stomach is upset, and I'm otherwise very tired - all from working on this problem too hard. What I have works in Firefox, but not quite right in IE... Grrrrrr..... I'm going to take a nap!

Note that when the page is made narrow, the top words stay where you would expect them to stay. That was a big issue I had with part of your approach that absolute positioning seemed to fix.

David

David O'Neil22-Jun-05 15:09

22-Jun-05 15:09

Well,... almost. I've updated that last link again, but I am getting to issues that I can't figure out how to overcome.

The bottom footer: I have left it tucked inside the ContentContainer division, because if I don't, I can't get it even close to being below the ContentContainer material if the page becomes so long that the right scrollbar appears.

Also, my best efforts (the way I left it) resulted in the page working beautifully in Firefox, but the bottom scrollbar activates itself in IE, even though there is _nothing_ to the right of the screen! I believe this is because the ContentContainer's left margin is 120px, combined with a width of 100%. This also makes it so that the screen content doesn't wrap properly in IE (but it works wonderfully in Firefox, as I said).

Any ideas how to place the footer below the ContentContainer? Any idea how to get rid of the bottom scrollbar in IE without blowing everything else up?

I would love to have my site as clean as possible, but I'm beginning to suspect that it is just too much work to get this complicated of a style going.

Thanks,
David

(ps - The more I look at your JavaScript, the more I like it. Thanks.)

(pps - Even though Firefox renders it nicely, it does strange things when you highlight text by dragging the mouse over it. IE is much more predictable in that regard.)

David O'Neil22-Jun-05 19:38

22-Jun-05 19:38

12:32 am, CST: I'm giving up? Reposted best code so far in order to accomplish footer. Used a table. (Attempted it using only divs many, many times.) Gnnn. In addition, the solution appears different between Firefox and IE. In this case, I believe IE is correct for once.

David

download executables from web page

DavidNohejl20-Jun-05 12:47

DavidNohejl

20-Jun-05 12:47

hi, I am too tired to understand your first problem now, but I understand second one perfectly - I've run exactly to same problem. I've solved it with full path. And yes, it's ASP.NET solution, so I have base URI in config file. I think that best solution would be if HTML base tag could be applied localy. That's not the case, and convince W3C would take some time Big Grin | :-D

Nah.. I've just looked at your JS - basicaly same idea as mine.

btw you can use some ideas from http://dnhsoftware.org/[^], if you like the layout. Not a single misused table there!

David

ask_you14-Jun-05 18:06

ask_you

14-Jun-05 18:06

i have uploaled my exe on the web server of our private net. now i want that whenever someone tries to download my exe, a pop-up box should come up which will ask for the license key. once the licence key is validated, only then the download should start. how do i implement it?

Secondly since the exe will be hosted on intranet, so whenever someone tries to download my exe, i need to know the IP address of the system which is trying to download it, check whether its a valid internal address and only then ask for licence input. how do i implement it?

Vasudevan Deepak Kumar14-Jun-05 19:11

Vasudevan Deepak Kumar

14-Jun-05 19:11

Hi:

Regarding your first query, you can implement a login like script and only after validation of license, you can Response.Redirect to the EXE or Stream the EXE with appropriate content-type set.

Regarding your second query, you can configure at the server level instead of validation of network IPs in ASP since it would be processor intensive operation.

Deepak Kumar Vasudevan
Personal Web: http://vdeepakkumar.netfirms.com/
I Blog At: http://deepak.blogdrive.com/

ask_you14-Jun-05 19:47

ask_you

14-Jun-05 19:47

i think i can handle the first part of the query.

now, let me re-phrase my second requirement. i want that everytime my EXE starts it should first validate with the server. how do i do? any sample code?

Vasudevan Deepak Kumar15-Jun-05 2:23

Vasudevan Deepak Kumar

15-Jun-05 2:23

Basically in the client workstation, each time the EXE is launched you want to check with the server.

Cool. You can have a Web Service exposed through your webserver and your application can contact the same.

Deepak Kumar Vasudevan
Personal Web: http://vdeepakkumar.netfirms.com/
I Blog At: http://deepak.blogdrive.com/