Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation How many divs for this page. - We're getting there.

    Good morning!

    www.exitfegs.co.uk

    Looking at this site. How many div's should I use for this page. I am re-writing the page from scratch without reference to the original, but I am having a problem at this basic level. I am trying real hard to understand CSS at site design level.
    Any help would be appreciated.

    This is how I have started off.

    #body
    #wrapper{}
    #main{}
    #clock1{}
    #clock2{}
    #greet{}
    #img{}
    #footer{}
    #list{}

    Frank
    Last edited by effpeetee; 09-14-2007 at 11:50 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    I'm not sure why you have a div called #body? It's not a great idea to call a div the same name as an element that already exists. If you want to reference the body tag you don't need the # as it's not an id of anything.

    As for the others, looks like you have about as many as you need. A wrapper, a header?, a navigation section (which I presume is #list?), a 'content' section, and a footer. Then you may need some for the parts in the middle.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    HI THERE.

    I must admit I thought of that but I had seen a div called this and since the last post I find that it is in my original page. Don't know how it got there.

    I'll remove it. I decided not to start with a supplied model page as I have found that I don't learn well that way. I am taking your earlier advice and starting with a blank page. The only problem that I foresee is the Greeting and the two clocks. They come from the Javascript as does the random image.
    Should be fun though.

    In at the deep end.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Write the content using semantic HTML without divs first. Style the page as much as you can by adding ids and classes to the existing semantic tags. Ad only those divs that actually represent proper divisions within the page (their semantic use) plus as few as possible to allow you to apply the rest of the needed styles.

    Many people who have recovered from table-itis catch div-itis straight afterwards. Using divs where they are not needed is just as bad as using tables where they are not needed.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    #body
    { margin: 0px; padding: 0px;
    display: inline-block;
    background-color: #bbb;
    color:white; }

    ahallicks. If I remove this from my original index page
    www.exitfegs.co.uk
    The result is not acceptable. Where should these attributes go. There is also another css entry body. Quite confusing.

    Stephen. and ahallicks.
    I am finding all very confusing at the moment. Going to my original page (which was re-written for me) and modifying the settings does not seem to have any relation to what I think they should do. I think I will have to settle for something simpler at present, until I get a feel for it. Your help is most appreciated. It is more difficult than I first thought.

    Frank
    Last edited by effpeetee; 09-13-2007 at 11:18 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    According to my browser #body does not appear anywhere on your index page? I've used EditCSS to remove it and nothing changes? Are you sure you're working on the correct page/have the most up-to-date one uploaded?

    You seem to have a lot of redundant styles in your stylesheet that don't appear to be used anywhere. As well as that you have a few validation errors (including the vlink, alink etc on the body tag?) that need fixing and you need to find a basic layout for your page that you like and can start with. At the moment it really does look (and is probably the case) as though you have just stuck bits in and positioned them until they work. I'm not having a go at all because I know that you are new to this and it takes time. Here is what I suggest:

    Get a blank canvas. Add in the doctype and all of the elements that make up a basic (X)HTML page so that you have a nice template to start from. Add some content to the page in the structure you want. For example, your site has a header and navigation and content and footer, so stick some content in for each of these sections. Now, divide the page as you weant it. A head in a div, the navigation in a div etc. And wrap the whole thing in another containing div. As an example I have a VERY simple page here that you can copy and paste to preview:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Simple Div Layout</title>
    <style type="text/css">
    * {
    	padding: 0;
    	margin: 0;
    }
    
    html {
    	color: #FFFFFF;
    	background: #CCCCCC;
    	font: 11px Tahoma, Verdana, Arial, "times New Roman", sans-serif;
    }
    
    #wrapper {
    	width: 766px;
    	height: auto;
    	margin: 10px auto;
    	overflow: hidden;
    }
    
    #header {
    	width: 766px;
    	height: 100px;
    	background: #990000;
    	margin-bottom: 10px;
    }
    
    #leftnav {
    	width: 250px;
    	height: 500px;
    	background: #990000;
    	float: left;
    	margin-right: 10px;
    }
    
    #content {
    	width: 506px;
    	height: 500px;
    	background: #990000;
    	float: left;
    }
    
    #footer {
    	width: 766px;
    	height: 80px;
    	float: left;
    	background: #990000;
    	margin-top: 10px;
    }
    
    </style>
    	
    </head>
    
    <body>
    
    	<div id="wrapper">
    		
    		<div id="header">
    			A Header
    		</div>
    		
    		<div id="leftnav">
    			Navigation
    		</div>
    		
    		<div id="content">
    			Content
    		</div>
    		
    		<div id="footer">
    			Footer
    		</div>
    	
    	</div>
    </body>
    </html>
    I have no design skills whatsoever, but the ability to do this in CSS is something that is invaluable to know. Look at it and play with it and see what happens. I'm sure I've said this before but I'm going to reiterate the point because it really is one of the best ways to go.

    After you can create a nice little layout like this you can then build on it adding paragraphs, images, lists and all the other content and style elements that make your page look and read really good.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://www.exitfegs.co.uk/testindex.html

    This is where I have put the file.
    I have altered the size. I have also called up the javascript include.js, but I do not know what to do to call it up. Can you help. Not necessilarily in detail, but I have no idea at this stage.

    Frank

    last part of js code;


    window.onload = function() {
    showimage();
    GetClock();
    }
    }

    function greet() {
    var todaydate = new Date();
    var timeis = todaydate.getTime();
    todaydate.setTime(timeis);
    var houris = todaydate.getHours();
    if (houris >17) display = "Evening";
    else if (houris >11) display = "Afternoon";
    else display = "Morning";
    var title = document.title;
    var welcome = document.createTextNode("Good " + display + ". Welcome to the Taylor Website");
    document.getElementById('greet').appendChild(welcome);
    }
    Last edited by effpeetee; 09-13-2007 at 12:55 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    You'll need:

    <script type="text/javascript" src="include.js"></script> in your header to start with
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by ahallicks View Post
    You'll need:

    <script type="text/javascript" src="include.js"></script> in your header to start with
    Hello again.

    I've done that and tried to alter the colour and position of the greeting. Nothing that I do seems to work.
    I feel like an experienced driver who has got into a car where nothing does what I expect it to do. Can you just help me with the header/greeting for the moment. It should be centred and h1 red.

    Frank

    http://www.exitfegs.co.uk/testindex.html
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Okay, first change:

    Code:
    #header {
    	width: 1000px;
    	height: 50px;
    	background: #990000;
    	margin-bottom: 10px;
    }
    
    #header h1 
      { color:#ffffff; 
      text-align: center;}
    to

    Code:
    h1#header {
    	width: 1000px;
    	height: 50px;
    	text-align: center;
    	backgound-color: #990000;
    }
    And then your HTML should be something like:

    Code:
    <h1 id="header">
    	<script type="text/javascript">
    		greet();
    	</script>
    </h1>
    Try that and see what happens
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    The header has disappeared altogether.

    Frank

    http://www.exitfegs.co.uk/testindex.html
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    The top of your page should look like:

    Code:
    <body>
    
    	<div id="wrapper">
    		
    		<div id="header">
    			<h1 id="mainheader">
    				<script type="text/javascript">
    					greet();
    				</script>
    			</h1>
    		</div>
    Don't worry about the clockboxes for now. With this, use the following CSS (it was a typo, so my mistake )

    Code:
    #header {
    	width: 1000px;
    	height: 50px;
    	background: #990000;
    }
    
    #header h1 {
    	text-align: center;
    	color: #FFFFFF;
    }
    Edit: Okay, I'll just post the whole code as I have it. I don't have the greet js so can't test that though, sorry!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>The Frank and Steve Taylor Family website.</title>
    <script type="text/javascript" src="include.js"></script> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    * {
    	padding: 0;
    	margin: 0;
    }
    
    html {
    	color: #FFFFFF;
    	background: #CCCCCC;
    	font: 11px Tahoma, Verdana, Arial, "times New Roman", sans-serif;
    }
    
    #wrapper {
    	width: 1000px;
    	height: auto;
    	margin: 10px auto;
    	overflow: hidden;
    }
    
    #header {
    	width: 1000px;
    	height: 50px;
    	background-color: #990000;
    	margin-bottom: 10px;
    }
    
    h1#greet {
    	color:#ffffff;
    	padding-top: 10px;
    	text-align: center;
    }
      
    #leftnav {
    	width: 250px;
    	height: 500px;
    	background: #dddddd;
    	float: left;
    	margin-right: 10px;
    }
    
    #content {
    	width: 740px;
    	height: 500px;
    	background: #990000;
    	float: left;
    }
    
    #footer {
    	width: 1000px;
    	height: 80px;
    	float: left;
    	background: #990000;
    	margin-top: 10px;
    }
      
    #imgcaption {
    	text-align: center; 
    	color: #0FF; 
    	font-size:1.0em;
    }
      
    #links {
    	clear: left;
    	color: white;
    	font: 12px Georgia, "Times New Roman", Times, serif;
    } 
      
    #links ul {
    	color: #000; 
    	list-style: none;
    } 
      
    #links ul a {
    	color: #000;
    	font-size:1.2em;
    	font-weight: normal;
    	text-decoration: none;
    } 
      
    #links ul a:hover {
    	text-decoration: underline;
    } 
    
    </style>
     	
    </head>
    
    <body>
    
    	<div id="wrapper">
    
    		<div id="header">
    			<h1 id="greet">
    				<script type="text/javascript">
    					greet();
    				</script>
    			</h1>
    		</div>	
    	
    		<div id="leftnav">				
       			<div id="links">
    				<ul>
    					<li><a href="two.html">Betty and Frank.</a></li>
    			
    					 <li><a href="three.html">Little Ted and Dmitri.</a></li>
    					 <li><a href="four.html">Lovely Betty and Pussycat.</a></li>
    					 <li><a href="five.html">Betty and the Bears.</a></li>
    					 <li><a href="seven.html">Steven and Joyce and Mark.</a></li>
    					 <li><a href="twelve.html">Ritcroft family group.</a></li>
    					 <li><a href="Eddie.html">Eddie, relaxing at home.</a></li>
    			
    					 <li><a href="Bluebell1.html">Steven at ease.</a></li>
    					 <li><a href="Steveintrain.html">Steve on the Bluebell Line.</a></li>
    					 <li><a href="steveviewing.html">Steve at the box.</a></li>
    					 <li><a href="dadatpub.html">'Smile please' (your actual effpeetee)</a></li>
    					 <li><a href="Barker.html">Claire, Yvonne and Susan.</a></li>
    					 <li><a href="xmas2006.html">Christmas 2006 at Yvonne's.</a></li>
    			
    					 <li><a href="nine.html">Family photos.</a></li>
    					 <li><a href="hol1.html">Holiday snaps.</a></li>
    					 <li><a href="LittleBoyBlue.html">Little Boy Blue</a></li>
    					 <li><a href="Tarantella.html">Do you remember an inn.</a></li>
    					<li>(One of Betty's favourite poems.)</li>
    				</ul><br />
    
    				<ul>
    					<li><a href="Picchoose.html">Picture menu - complete.</a></li>
    					 <li><a href="Picchoosea.html">Picture menu part 1.</a></li>
    					 <li><a href="Picchooseb.html">Picture menu part 2.</a></li>
    					 <li><a href="Picchoosec.html">Picture menu part 3.</a></li>
    					 <li><a href="steve.html">Steven.</a></li>
    					 <li><a href="aaind.html">Random pictures - full screen. Use F11.</a></li>         
    				</ul>
     		   </div>
       		</div>
    		
    		<div id="footer">
    			I am not quite sure what I'll put
    		</div>
    	
    	</div>
    	
    </body>
    </html>
    Edit: 2: Okay, maybe I downloaded your javascript and tested it with that too The above should be what you are looking fro Frank. Hope it works, unlike my brain today!
    Last edited by ahallicks; 09-13-2007 at 04:15 PM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    That's a lot better.

    I aim to tighten the page up so that it does not need to scroll.
    I am willing to forego the clocks although I would rather keep them if the design seems right. As the random picture can be held and enlarged by the user; it would be OK to make the original image a bit smaller.

    I am really trying to feel easy with CSS. It's hard going for an 82 year old.
    Never say die!

    Frank (Tomorrow is my birthday)

    http://www.exitfegs.co.uk/testindex.html
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Found it!

    #links ul
    { margin: 0;
    padding-left:20px;
    color: white;
    list-style: none; }

    I had put - padding:0,0,0,20px; which didn't work

    ==============================================
    I have largely succeeded with reorganising my index page. But I do have a problem with the blue rounded box. I need to centre the text. Padding does not seem to work. I'm probably going at it wrong.



    Frank
    www.exitfegs.co.uk
    Last edited by effpeetee; 09-14-2007 at 10:50 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    That page is a little messed up in my firefox... the blue navigation section is below the content on the right? As for the UL, I take it you don't want the actual text centered, you just one everything shifted in to the center? If this is the case, then padding is probably the best way to go about this.

    Add this to the CSS:

    Code:
    #links ul li {
    padding-left: 20px;
    }
    Edit: Oh, and the reason padding:0,0,0,20px; didn't work is because you don't separate with commas, it should look like padding: 0 0 0 20px;


    Edit: HAPPY BIRTHDAY FRANK!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •