New Index, etc — OZONE Asylum, home of the Mad Scientists

This page's ID: 10401

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Ok, tyger... as I said before, learn the basics in html and CSS, what the different codes stand for and which ones are required. I will answer some of your questions, though. [quote]1) "exactly as you have it" In my pindex, there is a "space" between the Logo jpeg and the Logo Lettering but not in your example..is there a way to control that space and centering of the top box logo and lettering other than my fixes? Z index?..Absolute positioning? ... without a big top graphic I have seen lettering perfectly positioned next to top graphics but I don't know how to do it..[/quote] [b]position : absolute;[/b] = Puts the element (block) due to the coordinates you tell in top and left. It can contain other inline elements which follow if you change the coordinates. The default is [b]static[/b] which places the element according to the natural order in which it occurs in a document. [b]relative[/b] makes the element's position relative to its natural position in document flow. It could be confusing, so stick to absolute. [b]fixed[/b] acts like [b]absolute[/b], but doesn't allow the object to move off screen, like a fixed background picture. [b]inherit[/b] sets the positioning relative to the enclosing parent. [b]top : 50px;[/b] = this is the y coordinate position of the element in pixels. Increase this and the block will move downwards. In resolution 800x600 you have about 450-480px to play with that is visible without scrolling. If you want an object to start at the very top the number should be 0px. [b]left : 415px;[/b] = this is the x coordinate position of the element. Increase it and the element moves to the right. in 800x600 you have about 790px from left to right. Go farther than that and you get a scrolliethingie on the bottom. [b]width : 320px;[/b] = the width of your element. Is there only an image in the block, then the width should be the same as the picture's width. You can write text on top of it. [b]height : 249px;[/b] = same as above, but height. [b]padding : 10px;[/b] = the distance [i]inside[/i] the element from the edges to the contained object (text, picture). You can set different padding on each side like this: padding : 2px 4px 6px 8px; where the order is: top, right, bottom, left. Setting only two values tells top-bottom for value1 and right-left for value2. [b]text-align : left;[/b] = puts the text in the element to the left. Others are right, justify and center - just like html. [b]background-color : #01104a[/b] = tells the colour of the background. If you have a [b]transparent[/b] element you can say [b]red[/b] here when checking where it starts and ends. Maybe you want to move the object, and then it is good to know how big it really is. Change back to [b]transparent[/b] when you have placed the element where you want it. Remember that you HAVE TO tell the background color if you have told the text color and vice versa. [b]z-index : 1;[/b] = tells which order the elements will lay on top of eachother when they are overlapping. z.index 1 is in the bottom, 2, 3, 4, and so on will be put on top of eachother in order, where 4 is totally visible. After this long explanation of the different positioning styles (there is lots more to say of course), the answer of your above question is: Use the [b]top[/b] and [b]left[/b] values to move around elements in your html. If you put your logo at position 0px 0px, then the next block to the right would start where the logo-image ends. Check how many pixels wide the picture is. It's a lot about math in this world, you know. But real simple such. Don't try to move around object with align or indent. those are only text-related inside the box. [quote]and How do I center the footer box for the copyright..? The footer will expand as I add content but I want to keep it all centered in that one #box..inside #II[/quote] I haven't found any center command for elements. The best choice is to make a homepage for 800x600, since most people still use that resolution. As I said before, count with about 780-790px that you can use from left to right. The center of that is, let's say, 390. At 390px is the center of your text block as well as working area. If the text block is 400px wide, then the left coordinate for that block should be (390-200=)190px. That's how I do it. There are probably better ways. You could, of course make the block as wide as the working area (780-790px), and use right-left padding for example 200px, and see what happens... [quote]2) Anyone else have any thoughts about the "yellowish" middle main section where the writing is? How about a one color background with one font color?....the dark blue with the green font the same as what is used in the header? Any suggestions?[/quote] Experiment. Test different colours. It is your site. Be proud of your own ideas! [quote]The code itself must do for four pages..the fonts on the Main Page and the Sources Page may not be the same..so I am keeping it separate now..can combine it later rather than try to unravel what font goes to which page..but it is getting confusing..perhaps one style sheet page only works for very mono pages..[/quote] Use ONE style sheet for ALL your pages. Minimize blocks and fonts as much as you can, or it will get not only confusing for you, it will also be messy to look at when visiting. Beleive me, I learned from a similar mistake! Start over from the beginning, since you haven't come so far yet. Make four or five blocks, one h1, one p, one font with two or three sizes, and start playing around with what you have. You can do amazingly much with just a small number of tools. [quote]Why doesn't the first one fold in properly? OR does the entire site have to be done in absolute before it folds in as it should. Can a top box in absolute fold so fluidly...[/quote] What you have have set with "top", "left" and "width" stays = it doesn't fold in. I just noticed that I actually put between the words in "Design by Design" like this Design by Design which makes the sentance not wrap. That's why those words didn't "fold in" when you resized your window. The other objects shouldn't have either. [quote]Mozilla is awful..that is graphics and I am not certain the HTML has much to do with it..[/quote] I think the looks of the graphics are because of the low resolution of the screenshot, though. Netscape and Mozilla are about the same. However, there is a lot to say about those two engines and html-CSS. My opinion is that the rendering stinks. I am about to give up on trying to compromise with layouts, just to make it look about the same in Netscape and Mozilla as in other browsers. Bleh! I talk too much. Again I tell you: Go learn at the tutorial that DL-44 gave you. Good luck. Kasta sten i glashus? Jag? [edit] bah! a few wrong codings [/edit] [This message has been edited by Kartis Shone (edited 07-07-2003).] [This message has been edited by Kartis Shone (edited 07-07-2003).] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu