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 17
  1. #1
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts

    space-top does not work

    Sorry! Wrong title (should be margin-top)

    I am trying to space my footer fronm the areas above bit the following css code does not seem to work. Where am I goinf wrong?

    Code:
    footer {
    	background-color:#BABD98;
                margin-top: 18px;
    	clear: both;
    	text-align:center;
    	padding: 8px;
    }
    
    footer ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    footer ul li {
    	display: inline;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    What does the rest of the code look like? Could be any reason.

  • #3
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    body {
    	background-color: grey;
    	background-image: url("sea.jpg");
    	margin: 0;
    }
    
    h1, h2, h3 {
    	margin: 0;
    }
    
    
    footer {
    	background-color:#BABD98;
            margin-top: 18px;
    	clear: both;
    	text-align:center;
    	padding: 8px;
    }
    
    footer ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    footer ul li {
    	display: inline;
    }
    Last edited by qim; 04-09-2013 at 12:38 PM.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    All these new HTML 5 elements need to be set to display: block if you wanna do something useful to them.

  • #5
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, thanks

    But for the time being could you tell me why margin-top does not work in the fotter?

    Thanks

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    First of all, I told you that with display: block for a reason. Secondly: no, I can’t tell you because you didn’t post your full code. CSS alone does and means nothing without HTML.

  • #7
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry... here it goes:

    In fact, I've put a margin-bottom id 'sidebar' and it seems to work. I still don't understand why the margin-top doesn't work in the footer.



    <!DOCTYPE html>
    <html>
    <head>

    <meta charset="utf-8">

    <title>Page Title</title>

    <link rel="stylesheet" href="Pinto/style.css">


    </head>
    <body>

    <body background="Pinto/images/woodgrain.jpg">


    <div class="page">

    <header>
    <img title="Boats" alt="Boats" src="Pinto/images/Boats.JPG">
    <h1>Incoming Travel Agents and Tour Operators Worldwide</h1>
    </header>

    <div class="maincontent">
    <section>
    <br><br>
    <h2 style="color:red;background:white;">Exclusively for IATA Travel Agents</h2>



    <p><h3>Finding a partner in far-away places that can organize the travel arrangements of your clients, or changing an existing one because of poor service or excessive cost, is not always easy and the outcome is often unpredictable.</p>

    <p>This website attempts to solve the problem by providing essential information about incoming agencies in every country and region of the world. Besides, by relying on feedback from users (Travel Agencies) the links and information recveived play an important role in maintaining the confidence in those firms that are displayed in these pages.</p> </h3>




    <br>
    <img title="Llamas" alt="Llamas" src="Pinto/images/Llamas.jpg">
    <img title="Sydney" alt="Sydney" src="Pinto/images/Sydney.jpg" style="float:right">

    <br><br>
    <h4> <p>Their inclusion is free and is not the subject of any financial agreement. The criteria for acceptance are the belief that they can provide good service at a reasonable cost. Contact with any Incoming agency is a bilateral arrangement, with Pinto Tours remaining uninvolved, but generally available to help in the resolution of eventual disputes.

    Each of the country pages include also useful information about that territory, hoping to provide most of what you need in a concentrated space, to deal with enquiries and reservations in as little time as possible</p></h4>

    <br>

    <center><img title="London" alt="London" src="Pinto/images/London.jpg"></center>

    <br>
    </section>
    </div>

    <div class="sidebar">

    <img title="Logo" alt="Logo" src="Pinto/images/logo.jpg">

    <br><br><br>


    <div class="loginarea">

    <form>
    <div>
    <label for="IATA">IATA number or acceptance code *</label>
    <input name="IATA" id="username" type="text">
    <label for="username">Username:</label>
    <input name="username" id="username" type="text">
    <label for="password">Password:</label>
    <input name="password" id="password" type="password">
    <input type="submit" value="Login">

    <a href="#">Forgot Password?</a><br>
    <p> <a href="Pinto/form.php">Register</a> </p>

    </div>
    </form>

    </div>

    <nav>
    <ul>
    <li class="lh">Menu</li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    </nav>






    <nav>





    <ul>
    <li><a href="./Pinto/logout.php">Logout</a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    </ul>
    </nav>


    </div>

    <footer>



    <ul>
    <pre><li><a href="#">Privacy policy</a></li> <li><a href="#">User guidelines</a></li> <li><a href="#">Use of cookies</a></li> <li><a href="#">Contact</a></li></pre>
    </ul>
    </footer>

    </div>

    </body>
    </html>
    Last edited by qim; 04-09-2013 at 06:54 PM.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    OK, now, have you ever even tried to apply display: block to the footer?

  • #9
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, but I am too new to this (less then 1 month) and my priority now is to get the pages to work. I am learning as it goes along and no doubt I will have rto change it all eventually.

    meanwhile if you can help with the sort of code that you mean I would be very grateful.

    danke schoen!

    qim

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by qim View Post
    could you tell me why margin-top does not work in the fotter?
    You should know what uncollapsing margins are. That site shows a couple different ways of curing that bug.

    Your snippets are incomplete. The one you posted after VIPStephan asked to see your code is all but useless. To help us see what's happening, it's always good to post code that actually recreates the issue you're having.

    How is anyone to offer a suggestion for fixing your problem if you can't provide enough information to ask a valid question? There have already been 9 posts in this thread and you've gotten nowhere.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    First, you said you put margin-bottom on an id sidebar. Where is that? We don't see that anywhere in your code.

    First mistake in the HTML that you did show:
    Code:
    <	
    	<ul>
    		<li><a href="./Pinto/logout.php">Logout</a></li>
    		<li><a href="#"></a></li>
    		<li><a href="#"></a></li>
    		<li><a href="#"></a></li>
    	</ul>
    </nav>
    What is that opening angled bracket? Judging by the code, I'm guessing it's supposed to be <nav>. You should fix that.

    Right after that, you have:

    Code:
    </div>
    You never started/opened up a div so what are you closing? You should take that out.

    Code:
    <ul>
    <pre><li><a href="#">Privacy policy</a></li>     <li><a href="#">User guidelines</a></li>    <li><a href="#">Use of cookies</a></li>     <li><a href="#">Contact</a></li></pre>
    		</ul>
    Why do you have that pre tag? O.o

    Anyway, from the code you sent me, changing margin-top DOES work. I added this to footer

    Code:
    margin-top: 100px;
    and it got bumped down.
    My signature :)

  • #12
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, again

    I've been changing things all day and amending previous posts, with the result that they seem to have got truncated. I have restored it above.I'm not very good at this I'm afraid. This problem however has been resolved for the time being.

    If you could have a look at my other post, I would be grateful

  • #13
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Ok. Changing margin-top on the footer worked for me again. I'm guessing it's because you didn't provide your full CSS code. I'd recommend just giving us a link to your site. Lol.

    This also wasn't what you wanted, but I'm going to recommend making a some changes...to get you started in the right direction.

    Your code starts out like this:
    Code:
    <body>
    <body background="Pinto/images/woodgrain.jpg">
    You are only supposed to have one body. In addition to that, start using CSS to give your body a background. Something like...

    CSS
    Code:
    body{
        background: url('Pinto/images/woodgrain.jpg');
    }
    Next, the center tag has been deprecated since HTML4. So, instead of something like this:

    Code:
    <center><img title="London" alt="London" src="Pinto/images/London.jpg"></center>
    You should give your image a CSS class and style it with CSS like this:

    HTML:
    Code:
    <img class="centered-image" title="London" alt="London" src="Pinto/images/London.jpg">
    CSS:
    Code:
    .centered-image{
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    Think of HTML as the skeleton or the content. CSS is the design. If you want to make changes in the design, adjust the placement, change the width, or just do anything like that, you use CSS.

    Also, there is this section:

    Code:
    <p><h3>Finding a partner in far-away places that can organize the travel arrangements of your clients, or changing an existing one because of poor service or excessive cost, is not always easy and the outcome is often unpredictable.</p>
    
    <p>This website attempts to solve the problem by providing essential information about incoming agencies in every country and region of the world. Besides, by relying on feedback from users (Travel Agencies) the links and information recveived play an important role in maintaining the confidence in those firms that are displayed in these pages.</p> </h3>
    You open up a paragraph tag and then a heading 3 tag. That's odd. You should use one or the other. Then, before you even closed h3, you closed p. General rule: You close the nearest tag first.

    You're also using a ton of linebreaks. I can understand using them once in a while, but once again, you should stick with CSS.
    My signature :)

  • #14
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    Thank you very much for the time and trouble going over my poor code... I've only been at this one month and it shows!

    The site is www.pintotours.net

    Right now I am trying to sort out the Registration page. There are a couple of queries in my other post "Convert from "form" to "div" which is a couple of lines below this one in the forum.

    i will make the changes that you suggested

    Thank you again

    qim

  • #15
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've already started to make the changes you suggested. In my html file I got rid of the <body> leaving the <body background...>

    Meanwhile, the css file starts with


    Code:
    body {
    	background-color: grey;
    	background-image: url("sea.jpg");
    	margin: 0;
    }
    
    h1, h2, h3 {
    	margin: 0;
    }
    Should I get rid of the html <body background...> Funnily enough the page displays the html "woodgrain" image and not the "sea" that is in the css
    Last edited by qim; 04-09-2013 at 08:23 PM.


  •  
    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
    •