Ricklord

Hi Ober, I never said it was an original idea and although that site has got the look to perfection the loading time is something else, i almost didnt want to wait but i must admit it was worth it once it had loaded. Just because you have one example doesn't give me a good enough reason not to give it ago, although its not an original idea its still something which is not done very ofton. Plus the look we will be looking for is the more professional look rather than a medievil/fantasy look. Thanks for the link to the other site though, was very impressed. IMO i dont care if i can top that site or beat that site that would not be my goal. I would simply be supplying a design to suit my customers needs. Rick

Thanks Steve, Very quick response. The idea is to have additional pages behind the front pages so it looks more like a book but yes this will come in a later design. Good point about content restrictions we have thought about this and are still looking for ideas on how to over come this, probably a next button rather than the scroll bar as scroll bar will ruin the design IMO but thanks for them comments. Curved corners on the corner of the book will be lost completely with just square edges on next design if there is one depending on feedback. As for making the content appealing, we may try have the book as the background image and faded down a little so the text is more appealing but your right were going to have problems with images becuase of the curves on the pages and available space but might over come this problem when we make the page curves smaller. thanks for the comment good start in my eyes. Rick

Hi Guys, Ive got a website deal with a virtual document company and between us have come up with the idea to have the layout like an open book. I have put a 10 minute image together and just wanted peoples feedback on if they thinks a good idea and if they can see any problems we might come accross later down the line. We dont want to put the time and effort into the design yet until we have got some initial feedback. You can see the first draft here [url=http://www.creativecogs.co.uk/web_design/open_book.html]www.creativecogs.co.uk/web_design/open_book.html[/url] Thanks for looking and hope you like the story. Rick PS. just wanted to stress that this is the very first draft so actual design here is not important it is more the idea were looking for feedback on. cheers

anyone got any suggestions on getting the rounded edges neater? The graphics have been created in photoshop and the images are the originals so i've not lost quality by copying them multiple times. when ever i create a rectangle shape with rounded edges and add a boarder using the stroke feature they always appear jagged. If anyone has any techniques how to stop this from happening i would be greatful. i have tried sharpening the images but this doesnt do anything for it. Cheers Rick

site is actually live now it can be seen at [url=http://www.creativecogs.co.uk/web_design/index.html]www.creativecogs.co.uk/web_design/index.html[/url] some minor changes were made before it went live. Cheers for all the comments Rick

Elo, I like the logo and the orange but im not to sure about the navigation. Maybe a backgorund colour and changes to orange on hover just an idea dont know what it would like but i dont think the line underneath does anything for me. Also the lofin button i would customise to fit in better with the site. Apart from that it is very simple which is the image your going for. Rick

Ok i tried your second option and i still cant click on the content behind the actual image. here is the code [code]#logo{ position:absolute; width:0px; height:0px; padding: 430px 410px 0 0; background-image:url(images/logo.gif); background-position:left; background-repeat:no-repeat; z-index:1; }[/code] Also a screenshot of the area i am concerend about is here. [url=http://www.creativecogs.co.uk/web_design/problem1.html]http://www.creativecogs.co.uk/web_design/problem1.html[/url] The monitors are going to be clickable and need them to stay in that position but as you can see the red outline is my logo size. Can you see where im going wrong in my code or have another suggestion? i dont know anything about layers so wouldnt know where to start on the other option. Also if i take out absolute positioning it pushes the rest of my content divs down. they are all in the same container div already, i dont mind leaving it as absolute for now as i only have 9 hours til ive got to show the site to someone and its 1am here and im still without sleep. :( Cheers Rick

Cheers for comments I meant the content rather than the menu but i think what you have mentioned might work. I'm going to give it a try now. Will let you know how i get on. Thanks Agian Rick

Hi guys, I'm using a strange shaped logo which in design view is a sort of an upside down back to front L shape. You can see it here [url=http://www.creativecogs.co.uk/web_design/new_design3.html]http://www.creativecogs.co.uk/web_design/new_design3.html[/url] Just wondering how to make the background transparent so that i can click on things behind it? No big rush on this one as its working at the moment i just cant click on images behind the square image or select the text. If anyone knows how to make the blank space transparant i would appreciate it. Rick

Cheers moberemk, I've just taken out the center tags and added the margin left/right to auto in my style sheet. works a treat. Rick

Ive just been having a similar problem and i found that in your html if you do the following it centers the whole container and not just the text within the container. [code] <center><div id="bottomslogancontainer"> blah blah blah </div></center> [/code] this wont work with your width is 100% Dont know if this will help, im a begginer to CSS as well but this might be what your looking for it works for my template which i needed the whole thing centered. Rick

Res is at 800 wide, its just the background which is bigger and wont be displayed on a computer running at 800 x 600. Rick

Hi, I know i been asking for alot of feedback recently but its has all been on different design revisions and this one i think is the best so far so deleted the old thread and started a fresh. I have created a new design in photoshop and just wanted to know what people thought before i convert it to html. I had quite a few bad comments about the old site and even the new one which is now up and i wasnt happy with it either. So this afternoon i sat down and have created a whole new design and feel to the Design part of my site. You can view it by going directly here. [url=http://www.creativecogs.co.uk/web_design/new_design.html]http://www.creativecogs.co.uk/web_design/new_design.html[/url] still in photoshop format until final desision is made. Cheers in advance Rick

Solved

Still can't get it at the bootom, im sure im doing something wrong but cant spot what. here is my html code [code]<body> <div id="banner"></div> <div id="top_bar"></div> <div id="logo"></div> <div id="processor"></div> <div id="navigation"><a href="index.html">HOME</a> <a href="services.html">SERVICES</a> <a href="case_studies.html">CASE STUDIES</a> <a href="about_us.html">ABOUT US</a> <a href="contact_us.html">CONTACT US</a></div> <div id="news"></div> <div id="content"></div> <div id="bottom_bar"></div> </body>[/code] here is my CSS Code [code]body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color:#F7F7F7; } #banner { position:absolute; width:100%; height:150px; padding: o o o o; background-image:url(images/top_background.gif); background-repeat:repeat-x; z-index:10; } #top_bar { position:absolute; width:100%; height:30px; top: 150px; background-image:url(images/top_bar.gif); background-repeat:repeat-x; z-index:11; } #processor { position:absolute; width:100%; height:175px; background-image:url(images/processor.gif); background-position:right; background-repeat:no-repeat; z-index:12; } #logo { position:absolute; width:325px; height:150px; padding: 0 0 0 20px; background-image:url(images/logo.gif); background-repeat:no-repeat; z-index:13; } #navigation { position:absolute; width:550px; height:30px; top:150px; padding:5px 0 0 0; z-index:14; } #navigation a { font-family:Tahoma; font-size: 13px; font-weight: bold; color:#287683; padding:0 0 0 40px; text-decoration: none; background-color: transparent; } #navigation a:hover { font-family:Tahoma; font-size: 13px; font-weight: bold; color:#0F2D73; padding:0 0 0 40px; text-decoration: none; background-color: transparent; } #news { position:absolute; width:190px; height:500px; top:200px; background-image:url(images/news_background.gif); background-repeat:no-repeat; z-index:15; } #content { position:absolute; width : 570px; height:500px; left:220px; top:200px; bottom : 50px; padding-left : 230px; z-index:15; } #bottom_bar { float:left; bottom : 20px; width : 100%; height: 10px; background-image:url(images/bottom_bar.gif); background-repeat:repeat-x; z-index:16; } [/code] Can anyone spot what im doing wrong and if so please correct me. Thanks Rick

What instead of padding? what do i need in teh code, would i still use poistion relation or change back to absolute? Rick

Hi Guys, Im trying to align a 10px high bar to the bottom of the screen with a 50px gap. example of what im after is [url=http://www.creativecogs.co.uk/web_design/packages.html]http://www.creativecogs.co.uk/web_design/packages.html[/url] this is the position i want but the css rule im using for it is wrong becuase it does not hold its position correctly. Probably becuase i used position relative. Anyone know what position i should use and if you could correct my code below i would appreciate it. I need it to work in IE and FF. [code]#bottom_bar {    position:relative;    padding-bottom : 0px;            width : 100%;    height: 10px;    background-image:url(images/bottom_bar.gif);    background-repeat:repeat-x; } [/code] The above code works on the site i have used as an example for some reason but not a my new site and it moves up and down the page anyway without keeping the bottom padding to 50px. Cheers Rick

it is text but when i style it, it comes up behind the nav bar image. I have totally messed around with things i don't have a clue about and this is what ive now got which doesnt work at all but will hopefully better explain what im trying to do. This is the nav bar image [code]#top_bar {   position:absolute;   text-align: right;   height: 35px;   width: 100%;   padding: 150px 0 0 0;   background-position: bottom;   background-image: url(../web_design/images/top_bar.gif);   background-repeat:repeat-x;   z-index:20; }[/code] within in the div tags in the html ive not got anything. This is the nav bar text [code]#navigation {   float: right;   text-align: right;   height: 5px;   padding: 150px 0 0 0;   width: 100%;   z-index:21; }[/code] In the div tag here i have got text links. I have played around with many variations of different rules which postion teh image/text and i cant get any to work properly for me. What is the best one to use and what is the best way to posiotion it around the page. is padding the only way? Hope someone can help me as this one is starting to annoy me.  :( Cheers Rick

Hi Guys, Ok im having a problem with the layout of my images. I have got a number of images which will be on top of each other ie navigation bar background styled in style sheet and then the text and links which is also in the style sheet. Which would be the best rule to use for these to over lap and work in other browsers apart from IE, as i can get them to work in IE but not Firefox, they appear misaligned so im recoding the the site to work in firefox. Some body suggested the float style but this puts the image behind my nav bar. ive tried using z-index but dont fully understand how that works apart from i guess z-index:1 is furthest in the background and z-index:2 would be on top of index 1. if this is the case it doesnt seem to be working. Any suggestions are welcome. Rick

lol Ruby... Yes its fine for people to comment. As i am continuing to learn new things its a good idea to get input from other people. Yes tables were used  :o i didnt know of CSS then. Rick Creative Cogs

thanks

Hi, I've got a problem with my bullet points and i just can't figure out why. The style i am using is: [code].style1 { font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #000000; }[/code] The code for where i have used bullet points is below: [code] <p align="left">All of our packages include the following:</p>   <ul>     <li><P class="style1">Professional web site design</P></li> <li><P class="style1">Update's to your site included in monthly maintenance plan</P></li>   <li><P class="style1">Design around your Logo or Branding</P></li>   <li><P class="style1">Multiple design revisions</P></li>   <li><P class="style1">Website Hosting & Management (included for an additional £30.00 for 12 months)</P></li>   <li><P class="style1">Domain Name Registration & Management (also included in the additional £30.00 for 12 months)</P></li>   <li><P class="style1">Multiple eMail accounts</P></li>   <li><P class="style1">Photography provided</P></li>   <li><P class="style1">Visitor statistics</P></li>   </ul>[/code] The bullets and text style is working fine but the gaps in between is like double line spacing in microsoft word. Any ideas how i can get the text to be closer together without the appearance of double line spacing? I'm thinking ive got to change some thing with style1 but i cant work out what??? Cheers in adavance Rick

Hi I have solved this problem now. I had to set the background on the content to the left background and applied most of the same css rules and just used cell padding to keep the content furth from the left, which still keep the left back in the correct place. :):):):):) Rick

Hi, Im using CSS for the first time and i have managed to get most of the template layed out the way i want it. Im having a problem with one of the images though. I have used a background image on body which goes accross the top of the page and im trying to use another image to go down the left hand side of the page but to strech to 100% of the screens height. Is there anyway of getting this to happen? currently ive got. [code]#left_background {       position : absolute;       top : 150px;       left : 0px;       width : 200px;       height: 100px;       background-image:url(images/left_background.gif);       background-repeat:repeat-y }[/code] The image its self is only 10px high which is why ive got the repeat-y. If i change the heght to 500px it stretches fine but i want it to fill the page so that when content grows so does the left background. Cheers Rick

thanks