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.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy an obvious solution?

    Most likely. But seeing as though im an old timing htmler, css is new..and annoying

    http://www.blackworms.com.au/construction.html

    All i want is my stupid layout to align.. help?
    I designed this offline just using mainly notepad, but when I uploaded it, it suddenly decided to do its own thing and I cant fix it!
    Any other problems you may come across feel free to discuss - but go easy for my undeveloped css brain! lol.
    Thanks!

    Mina.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Hello Shannon,

    OK, the first thing you’re missing is a doctype. This is not just for the looks of your code it makes IE render your pages like modern browsers, not like the even older ones.
    Number two: This isn’t gonna work: <img src='D:\Documents and Settings\shannon\My Documents\My Webs\Australian Black Worms\Banners\logo.gif' width=283 height=99> The website, once it’s online, can’t get images from your personal hard drive. Also be aware that there are Adblockers that are blocking images with “ad” or “banner” in the file name. I had once had this and it took a while until I found out why my Firefox isn’t displaying an image.

    Your CSS looks alright from a short glimpse. Put a border around elements that make problems or that you are working on to see where they are and how they behave. For example, you forgot to clear your floats (e.g. for you footer).

    Don’t have too much time right now. I might look deeper into it later.

  • #3
    Regular Coder
    Join Date
    May 2007
    Posts
    118
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Mina ,

    I used Notepad too, but better html editor is for example http://www.pspad.com, it supports syntax highlighting thats a good thing.

    I edited your code little bit so you will see if you like it or not. I did a few modifications, I replaced for example <img src="images/space.jpg"> with margin-top of homebut.jpg, and I removed font and center tags.

    In your header div there is image with "D:\Documents and Settings\shannon\My Documents\My Webs\Australian Black Worms\Banners\logo.gif" source, I changed this source to "http://www.blackworms.com.au/images/logo.gif".

    Here is your main.css

    Code:
    * { padding: 0; margin: 0; }
    
    body {
     background-image: url('http://www.blackworms.com.au/images/back034.jpg');
     background-repeat: repeat-x;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     text-align: center;
    }
    #wrapper { 
     margin: 0 auto;
     margin-top: 20px;
     width: 922px;
     background-color: #4679BC;
    }
    #header {
     color: #333;
     text-align:left;
     border: 1px solid #CCCCCC;
     height: 100px;
     background-color: #4679BC;
     border: 1px solid #4672B4;
    }
    #leftcolumn { 
     padding: 9px;
     text-align:left;
     color: white;
     font-family: garamond;
     border-right: 1px solid #4672B4;
     background-color: #4679BC;
     width: 680px;
     float: left;
    
    }
    #rightcolumn { 
     float: right;
     color: #333;
     background-color: #4679BC;
     width: 218px;
     height: auto;
    }
    
    #homebut {
     margin-top: 30px;
    }
    
    #footer { 
     clear: both;
     height: 55px;
     border: 1px solid #4672B4;
     background-color: #4679BC;
    }
    
    #copy {
     padding: 9px;
     padding-top: 18px;
     color: white;
    }
    And constuction.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Blah</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    
    <body>
       <!-- Begin Wrapper -->
       <div id="wrapper">
       
           <!-- Begin Header -->
           <div id="header">
     	     <img src="http://www.blackworms.com.au/images/logo.gif" width=283 height=99>	 
    	 	   </div>
    		   <!-- End Header -->
    		 
    		 <!-- Begin Left Column -->
    		 <div id="leftcolumn">
    		 <img src="http://www.blackworms.com.au/images/welcome%20banner.jpg"><br>
         Le cheval (caballus d'Equus, parfois vu comme sous-espčce caballus de cheval, d'Equus de ferus sauvage) est un grand mammifčre impair-botté avec la pointe du pied d'ungulate, une de dix espčces modernes du genre Equus. Les chevaux ont longtemps été parmi les animaux domestiqués le plus économiquement importants ; bien que leur importance ait diminué avec la mécanisation, ils sont encore trouvés mondiaux, ajustage de précision dans l'humain vit dans diverses maničres. Le cheval est en avant dans la religion, la mythologie, et l'art ; il a joué un rôle important dans le transport, l'agriculture, et la guerre ; il a en plus servi de source de nourriture, de carburant, et d'habillement. <br><br>
         Presque toutes les races des chevaux peuvent, au moins dans la théorie, porter des humains sur leurs dos ou ętre armé pour tirer des objets tels que des chariots ou des charrues. Cependant, des races de cheval ont été développées pour permettre ŕ des chevaux d'ętre spécialisées pour certain chargent ; les chevaux de sang pour emballer ou monter, les chevaux plus lourds pour cultiver et autre charge l'exigence tirant la puissance. Dans quelques sociétés, les chevaux sont une source de nourriture, viande et lait ; dans d'autres elle est taboue pour les consommer. Dans les pays industrialisés des chevaux sont principalement gardés pour des loisirs et des poursuites sportives, alors qu'ils sont encore employés en tant qu'animaux travaillants dans beaucoup d'autres régions du monde.
         </div>
    		 <!-- End Left Column -->
    		 
    		 <!-- Begin Right Column -->
    		 <div id="rightcolumn">
         <img src="http://www.blackworms.com.au/images/homebut.jpg" id="homebut"><br>
         <img src="http://www.blackworms.com.au/images/about.jpg"><br>
         <img src="http://www.blackworms.com.au/images/products.jpg"><br>
         <img src="http://www.blackworms.com.au/images/contact.jpg"><br>
         </div>
    		 <!-- End Right Column -->
    		 <!-- Begin Footer -->
    
    		 <div id="footer" align="left">
    		 <div id="copy">&copy; spirited pony 2007</div>
         </div>
    		 <!-- End Footer -->
    		 
       </div>
       <!-- End Wrapper -->
    
    </body>
    </html>
    Last edited by smalldog; 05-29-2007 at 03:17 PM.
    Forum for webmasters and developers
    http://www.htmlfrenzy.com
    Are you an IT expert? Join our Reward system
    www.htmlfrenzy.com/reward-system.php

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by princess_mina View Post
    All i want is my stupid layout to align.. help?
    All I want is for you to read the Posting Guidelines before posing a new thread. Specifically, don't use vague titles like "an obvious solution."


  •  

    Posting Permissions

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