wbmkk

Alfie Thanks for your reply. Yep ! I shall be ditching the clock. Regarding the red, there is no reason for it at all, just that I like to color divs or put borders around them when wrinting the code, so I can see what's going on, when I look at a browser. I thought I had removed all of these, but obviously not. Can you clarify a wee bit about the color scheme. This is my first proper site, apart from my home site at williebee.co.uk. This test page was just added there as a temporary measure This is the color scheme I opted for, see link. Other pages will use the other shades of beige/brown http://colorschemedesigner.com/#1861Es4rXebwe Kind regards from the UK Brian

Thanks Andrea I took your advice and tried to validate the code. After initially getting 1 error and several warnings, I sorted everything out. Now it gets the green flag for XHTML 1.0 Strict. Yes ! I think I'll dump the clock idea. Regarding the red at the bottom, why is this not showing in Firefox. I know i could remove the code from the CSS, but surely there must be something wrong .. everything fine in Firefox, but the blue margin, reduced in IE. Regards ! Brian

Hello www.williebee.co.uk/brian44.html Can some kind folk on this forum please have a look at the link shown and advise me on a few things please. I am still a newbie regarding html, css etc and have just completed a basic web design course. This page will be the backbone of my site, so I obviously want to sort out any problems, before using it as a template. Are there any problems with ‘other browsers’ ? (I don’t have access to any apple machines to test it myself) Is the page centralized in other browsers, as it is with Firefox I tried to view the page on IE, but there is a red band below the bottom row of boxes, about 20px high. Why is this ? In Firefox, this is not there, instead, the blue gap at the bottom is equal to all other gaps, making page look ‘kind-of’ neat and tidy. (pure luck probably !) I know there are bugs and hacks etc, but I really don’t know enough about them, so haven’t used any. Are there any I should be adding. Is the colour scheme all right ? If you could change two things about this … what would they be I’m starting an Illustrator course tomorrow, so will be doing a proper title then. By the way .. It was the teacher who provided me with the javascript, which she said was needed for my side menu. (Why it was needed .. I don’t know and I suppose as long as it works, why do I need to know) I could have used one of the freely available menu codes available, but I wanted to do everything myself. Also, she provided the javascript for the clock, but I might dump that idea. It seems some computers do not show it, with some kind of ActiveX message popping up. That would only put viewers off. If it was just blank, I wouldn’t mind, but seems that &nbsp thing is required. And, I see now, one browser shows it in big writing (Firefox) but IE shows it small, with a red border. Puzzled I certainly am. Many many thanks for any input ! @charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0;} body{ background-color:black; font-family:Helvetica, Arial, sans-serif; } #header{ width:960px; height:120px; background-color:#372b8c; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; color: #FFFFFF; font-weight: bold; } #heading_wrap{ width:602px; height:70px; position:relative; left:276px; top:10px; } #container{ width:960px; /* height = 792 */ height:792px; background-color:red; margin:0px auto; } #leftnav{ width:198px; height:670px; float:left; background-color:#EFC552; border-top:2px solid black; border-right:2px solid black; } #contents{ background-color:#787fcd; border-top:2px solid black; width:760px; position:relative; float:right; } .boxey{ width:224px; height:140px; text-align:center; background:url(../images2/grad2.gif); float: left; margin-top: 22px; margin-right: 0px; margin-left: 22px; } .bottom{ margin-bottom:22px; } .boxeyindent{ width:224px; height:140px; text-align:center; background:url(../images2/grad2.gif); float: left; margin-top: 22px; margin-right: 0px; margin-left: 145px; } /* format writing in the box */ .boxey h1{ color:#192182; padding-top:10px; } .boxey h2{ color:#192182; /* next 4 lines an experiment <<<<< */ /* margin-top:10px; margin-left:35px; width:150px; background-color:#FFEACE; border:1px solid #bc8f12; */ } .boxey h3{ color:#192182; margin-top:5px; } .boxey p{ color:red; margin-top:5px; } .boxey p a{ color:red; } /* ------ end of writing style ------ */ /* --- menu style rules --- */ #navmenu { width:196px; float:left; margin-top:20px; } #navmenu ul{ list-style-type:none; padding:0px; } #navmenu ul li{ width:160px; height:25px; border-top:3px solid black; border-left:3px solid black; border-right:3px solid black; margin-top:0px; margin-left:15px; } .last{ border-bottom:3px solid black; } .penult{ margin-bottom:30px; border-bottom:3px solid black; } .lastfly{ border-bottom:3px solid black; } #navmenu ul li a, #navmenu ul li span{ display:block; width:160px; height;25px; line-height:25px; color:white; text-align:left; font-weight:bold; font-size:0.8em; background-color:#192182; /* background-image:url(../images2/menu3colors.gif); background-repeat:repeat-x; background-position:0px 0px; */ text-decoration:none; z-index:3; } #navmenu ul li a:hover, #navmenu ul li span:hover{ display:block; width:160px; height:25px; line-height;25px; color:white; text-align:left; font-weight:bold; font-size:0.8em; background-color:#bc8f12; /* background-image:url(../images2/menu3colors.gif); background-repeat:repeat-x; background-position:0px -40px; */ text-decoration:none; } #navmenu ul li ul{ position:relative; width:160px; /* fix here attempted */ margin-left:185px; /* next three values were -22 -39 none */ top:-28px; left:-40px; display:none; z-index:99; } #navmenu ul li ul li{ height:25px; border-top:3px solid black; border-left:3px solid black; border-right:3px solid black; margin-top:0px; z-index:3; } #navmenu ul li:hover ul{ /* ??? */ display:block; } #navmenu ul li ul li a{ display:block; width:160px; height:25px; line-height:25px; color:white; text-align:left; font-weight:bold; font-size:0.8em; background-color:#bc8f12; /* background-image:url(../images2/menu3colors.gif); background-repeat:repeat-x; background-position:0px -40px; */ } #navmenu ul li ul li a:hover{ display:block; width:160px; height:25px; line-height:25px; color:#192182; text-align:left; font-weight:bold; font-size:0.8em; background-color:#eed07c; /* background-image:url(../images2/menu3colors.gif); background-repeat:repeat-x; background-position:0px -80px; */ } /* trial for heading, but wrong image h1 { background:url(../images2/menu3colors.gif); font-size:0px; border:1px solid red; text-indent:-100000px; height:100px; width:300px; */ } #clock{ margin-right:80px; border:1px solid red; margin-top:4px; color:#ffeace; font-size:16px; font-weight:bold; } /* tab style rules atart here */ /* this is div for the tabbed menu */ #wrap{ /* 755 for 5 tabs or 604 for 4 tabs*/ width:604px; height:40px; margin:0 auto; z-index:100; margin-left:77px; margin-top:-42px; } #wrap ul { margin:0px; padding:0px; list-style-type:none; } #wrap li{ width:150px; height:40px; display:inline; float:left; } #wrap a{ display:block; width:150px; height:40px; text-align:center; color:#192182; font-weight:bold; line-height:40px; text-decoration:none; background-image:url(../images2/tabfeint.gif); outline:none; } #wrap a:hover{ display:block; width:150px; height:40px; color:white; font-weight:bold; background-image:url(../images2/tabmedium.gif); } /* footer section styles */ #footer{ width:100%; text-align:center; background-color:#192182; height:30px; color:#ffeace; line-height:30px;} /* general style rules for elements etc */ .clear{ clear:both;}

A quick update Wickham I?ve been messing about with your code etc and it all seems remarkably easy. Many many thanks I opted to just use the ?left classes? mainly because I couldn?t see how the right class fitted in and everything seemed to work all right. Please tell me if I?m missing something, as you obviously used it for a good reason I added a border to each and have been adding some text and still all is OK. But I?ve hit a snag. I want to use different border and background colours for each box. Would the easiest way, be just for me to re-write your code and styles, but instead of a single class (or two if I need the right one) write for each box, for example ?row1box1? ?row1box2? ? ?row4box4? etc etc There?ll be more code, but, hey who cares if it works

Thanks for that Im, I'll investigate that option Thanks too Wickham, but a couple of points I copied your coding to try it out, adding background colours as required, so i could see it. For some reasdon, the 3rd box on each line was coming out slightly higher, but I noticed your margin figures were slightly different, so that was easily sorted. I added another row and all was well Now, I would like every other row to be offset by half a width, as bricks would be in a wall, so rows 2 4 6 etc would have one box fewer Is this straightforward ? Also, are the height fixed as I don't see any box height code. I need them fixed: I can add an overflow option as required thanks!

Hi I am developing a web site, but need some advice please. I am a beginner, by the way, only reading my first HTML and CSS book within the past few weeks. I found this forum from the CSSTutorial web site On my site, there will obviously be a header, with horizontal navigation buttons directly underneath. Now the tricky bit ? Below, I want each page to be made up of numerous text boxes, each coloured differently, but not quite touching each other Imagine a wall built with different coloured bricks. between thick beds of black mortar How would I do this ? Reading on line comments I note that there is a serious problem with some old IE browsers, meaning boxers can be a bit problematic to position, especially for a learner, hence my request for some assistance. I understand the ?box problem? concerns margins and padding, so I was thinking of keeping the padding and margin properties at zero for each of my boxes, set sizes for each box and make sure the font inside is small enough not to force the boxes to extend. Maybe it would just be easier for me to try to use tables and use the colspan property to join cells. I thought though, that using tables for layout was a bit frowned upon. Although a learner, I am sure I could do it this way, without any help, but this option seems to me, as being a bit of a defeatist way of doing the job. I may add a left hand navigation section too, but this should not prove difficult for me Many thanks for any input given !!

Thanks for that I have downloaded Notepad++ and also PSPad, which both look to be pretty good, judging by reviews on various web sites. The CoffeeCup editor, although quite popular doesn't seem to get as many good reviews. Thanks again!

Hi Everbody, this is my first posting I am learning HTML and so far have been using notepad only I opted against the idea of buying a ?full on? web page creator, such as Dreamweaver due to (a) cost ( my amateur / learner status as well as © the learning effect of actually hand typing in of the . Now I am getting there, so to speak, I fancy a text editor to help a bit, but still leaving the opportunity for direct HTML / CSS input. Another reason, is that having coding in different colours is always useful Do any readers have thoughts on the numerous free / cheap programs that are available. CoffeeCup is one option which keeps coming up on the internet, but how good is it Are there any better options Nothing fancy is required, and free would be nice. THANKS IN ANTICIPATION FOR ANY ADVICE !!!