Thralni Posted August 12, 2009 Share Posted August 12, 2009 Hello,I'm a complete newbe in the field of website making. I understand basic HTML and I know what it all means when I see it, but that's about it. Now, I have my own website, but I made it with Dreamweaver (if I were to hand code it, I'm not sure I'd have ever finished it because of laziness...). Now comes the problem: I want to drastically redesign my website, but there are things I want to do of which I have no clue how to do them. looking through the tutorials on this site didn't really help out because I have no idea where even to start searching. Do I use Javascript, PHP, standard HTML...? No idea. So, here's what I want to do:1) index.html is a simple entry page. There is a picture of a Boeing 767, and you click on the windows to enter. That's easy, and that part is finished. Now comes part 2, which is the problem.2) What I want is a webpage that has certain marging, in which the content always stays, like W3schools has: The main content should be in the midde, and go to the sides roughly 500 pixels, so the entire 1000 pixels in the center of the screen display the actual content. There will be a bar at the top with the title of the webpage, and I figured I could do this with a frame, but any better suggestions are always welcome.3) The content that should be displayed in the middle, is a blurred background of a Boeing 767 cockpit, which I already prepared. On the left there will be a small computer like screen, which will be the main menu. It should be positions roughly 10 pixels from the top down, and 10 pixels from the left side of the webpage. On the right side of the content piece of the page, I want sort of the same thing, but it is a clipboard, also roughly 10 pixels from the top and from the right.4) The computer thingy will have clickable buttons. When you click a button, the image of the computer should be replaced by another image of that same computer, but with other text on the screen. So, the webpage itself should not become different, just the image! The buttons are part of the image, and will be done with image map hotspots, unless I get told this doesn't work and I should do it differently. I have ben thinking of cutting out the text which will change on the screen, and only refresh that, and put in Javascript code to asses what button has ben pressed and so what computer screen should be displayed. I have no idea if that's good though...5) Finally, when you come to a point where clicking on an option on the computer thingy on the left will give a page with additional information, this webpage has to be displayed "within" the clipboard on the right. So, basically, the clipboard is an image with a hole in it, in which scrollable text should appear. You could also say the clipboard is scrollable text, but with a frame of a clipboard like thing around it. I provided a shot below so you have an idea of what I intend to do. I hope somebody who understands my intentions can help me out on this, because I like the idea and would hate to throw it out. If you want to help but don't really understand what I mean, just ask, and I'll explain. Again though: I'm really a newbe on this and I'm not at all sure what to do. It's mainly the clipboard idea with the text and how to change the image of the computer when a button is clicked. Any help, but really, any constructive help at all is v er appreciated!Thanks in advance,Benjamin van Soldt Link to comment Share on other sites More sharing options...
Synook Posted August 12, 2009 Share Posted August 12, 2009 Do you know CSS? Everything you described (except 4 and 5 bit, which you'd use JS for) can be done with CSS. Link to comment Share on other sites More sharing options...
Thralni Posted August 13, 2009 Author Share Posted August 13, 2009 No, I don't really... But ultimately, that's why I posted this, so people could give me a hint in what direction I should be searching. Now that I know, I'll be looking at that for sure! Thanks!If anybody can give me a hint on the javascript business (outright instructions are not necesary, but again, a direction in what way I should be going with this, what calls perhaps), I would be interested in hearing that too. Link to comment Share on other sites More sharing options...
Thralni Posted August 13, 2009 Author Share Posted August 13, 2009 *sigh*I'm afraid I'll need some more help here. For some reason I just can't get the three images you see in the picture above (the computer, the white square with text and the clipboard) aligned in the middle. I've been trying for over five hours and I just can't get it done. Heck, I'm not even succeeding in gett a nice border around the background image. Please, can somebody help me sort this mess out? Below is the code of the stylesheet I'm using and of the code of the lower frame (the one with the computer etc.).What I want is very simple: I want a background in whatever color (I'll sort that out later), with on top of that the content itself, consisting of a background image of a cockpit, and on top of that the three images aligned in the center without spilling "of" of the cockpit image.here's how the page looks now: http://thralni.ermarian.net/fmcwebsite/home.htmlSo what I want is the three pic aligned in the middle, and the black 1px borders should be tight around the cockpit image.Lower frame 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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Welcome</title><link rel="stylesheet" type="text/css" href="body.css" /></head><body><div id=Content><p> <!--<img class=fmc src="jpg/fmc2_mainmenu.jpg" alt="FMCmain" width="300" height="500"/>--><img class=info src="jpg/info.jpg" alt="Info" width="200" height="220"/><!--<img class=clip src="jpg/clipboard.jpg" alt="Clipboard" width="300" height="500"/>--><!--<iframe id=scroll src="index.html" scrolling=yes></iframe>--></p></div></body></html> Stylesheet code: body { margin:0px 0px 0px; padding:0px; background-color: #D7D8C0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; }#Content { background-image:url('jpg/backgroundb2.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; width:800; margin-left:auto; margin-right:auto; border-right:1px solid #000000; border-left:1px solid #000000; border-top:0px solid #000000; border-bottom:1px solid #000000; }#pictures{ margin-left:auto; margin-right:auto; }img.info { }img.fmc { margin-left:25px; margin-right:50px; width:300; height:500; }img.clip { margin-left:50px; width:300; height:500; }#scroll { position:absolute; width:200px; height:200px; left:651px; top:29px; background-color: #000000; } I'm aware of the fact that one or two of things in above stylesheet are currently not used.If someboyd can explain to me what I exactly have to do to make it work the way I want, I'll be very grateful. I'm sure this is all very simple, but none of the methods of aligning that I found in the tutorials in this site did what I wanted it to do. I hope somebody can offer more help than the tutorials did...Thralni Link to comment Share on other sites More sharing options...
justsomeguy Posted August 13, 2009 Share Posted August 13, 2009 One thing I'll point out is that you might want to use absolute positioning. Absolute positioning usually doesn't work very well for most sites, but since your site is pretty much 3 boxes floating over a background then it might be the thing to use. You've got the CSS there for your scroll element which uses absolute positioning, so I won't bother explaining much about how it works, I think you've got the idea. If you gave your three main boxes an ID or class and set them up to be positioned in a certain spot then that would probably work. If you didn't want to use absolute positioning, you could use floating divs to set up a 3-column layout for the three boxes. If you do a search for CSS 3-column layouts you'll find plenty of examples. For the spot where you want to have scrolling text, instead of an iframe you can just use a regular div. If you give it specific dimensions then you can use the overflow property to get the scroll bar to show up when there is too much content to display. e.g.:<div style="width: 200px; height: 350px; overflow: auto;">...</div> Link to comment Share on other sites More sharing options...
Thralni Posted August 13, 2009 Author Share Posted August 13, 2009 absolute positions is indeed one of the things I tried, but I couldn't get it to work properly. Everything was just a jumbled mess of misaligned things and didn't manage to get it the way I wanted... Could you perhaps show me how you would code it? Link to comment Share on other sites More sharing options...
justsomeguy Posted August 13, 2009 Share Posted August 13, 2009 It's just sort of trial and error. You have your three boxes with a class or ID, and just play around with the top, left, width, and height until they're sitting in the right place. Your #scroll class is doing that. Link to comment Share on other sites More sharing options...
Thralni Posted August 14, 2009 Author Share Posted August 14, 2009 Well okay, I get that working rather well, but want everything aligned in the center, in such a way that it doesn't spill over the background image of the cockpit. The way it's now, there is a margin from the left side of the screen, meaning that it may be aligned nicely on my computer's screen, but on a screen with a different resolution it won't be centered anymore. How can I make it so that it's always at the center of whatever screen? That's what I can't understand, what I can't get to work.EDIT: SOmetimes, I'm so stupid... I found an error in the #Content piece of the code. Corrected that, and now everything is aligned in the center of the screen, except that my background image has mysteriously disappeared... Link to comment Share on other sites More sharing options...
justsomeguy Posted August 14, 2009 Share Posted August 14, 2009 With absolute positioning you can't get it to look the same on all resolutions, that's the problem with absolute positioning. You might want to look into using a regular 3-column layout. You could also use a table, where each of the three is in a column in the same row, and then center the entire table. If you want to post the code you're using now we can look at the background issue. Link to comment Share on other sites More sharing options...
Thralni Posted August 16, 2009 Author Share Posted August 16, 2009 Below is the code for the website. First the lower part of the page containing the three pics, then the CSS file that goes with it. i managed to get the pics centered by setting a width of 1000px, and adding margin-left and right:auto; to the CSS page. <!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>Welcome</title><link rel="stylesheet" type="text/css" href="body.css" /></head><body><div id=Content><p> <img class=fmc src="jpg/fmc2_mainmenu.jpg" alt="FMCmain" width="300" height="500"/><img class=info src="jpg/info.jpg" alt="Info" width="200" height="220"/><img class=clip src="jpg/clipboard.jpg" alt="Clipboard" width="300" height="500"/><div id=scroll></div></p></div></body></html> body { background-color:#D7D8C0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; }#Content { background-image:url('jpg/backgroundb2.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; width:950px; margin-left:auto; margin-right:auto; border-right:1px solid #000000; border-left:1px solid #000000; border-bottom:1px solid #000000; }img.info { position:absolute; margin-top:135px; margin-left:375px; }img.fmc { position:absolute; margin-left:25px; width:300; height:500; }img.clip { position:absolute; margin-left:625px; width:300; height:500; }#scroll { position:absolute; width:245px; height:400px; margin-left:651px; margin-top:65px; overflow:auto; background-color: #000000; } Sorry for the late reply, I was setting up my new external hard drive. Hope this helps... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.