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

    Spacing out links in footer

    the code for my footer looks like below. All the linkson the footer appear very close together. I want to space them out. What is the best method, please?

    www.pintotours.net


    Code:
    ul><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>   <li><a href="../Pinto/logout.php"><h3>Logout</h3></a></li>
    		</ul>
    I've tried everything without success. Ideally, I would like the Logout link under the sidebar, the contact in the opposite corner, and the rest in the middle nicely spaced out.

    can you help, please?

    Thank you

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello qim,
    Some margin will spread those out a bit.
    Look at this -
    Code:
    footer ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    footer ul li {display: inline;}
    footer ul li + li {margin: 0 0 0 25px;}
    That's based on this demo on Adjacent Sibling Selectors.

    ...

    It might be easier if you just did this instead?
    Code:
    footer ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    footer ul li {
    margin: 0 0 0 25px;
    display: inline;
    }
    ...

    The only reason your Logout is under those other links is because the h3 that contains it is the full width of parent ul. If you think about it, it's not really a heading so it probably does not belong in h3 tags at all.
    Look at it this way once -
    Code:
    	
    	</div>
    
    	<footer>
    	
    
    
    		<ul>
    <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>   <!--<li><a href="../Pinto/logout.php"><h3>Logout</h3></a></li>-->
    		</ul>
    	<a href="../Pinto/logout.php">Logout</a>
    	</footer>
      
    </div>
    And the CSS changes that make that work -
    Code:
    footer {
    	background-color:#BABD98;
           	clear: both;
           	
    
    	/*text-align:center;*/
    	padding: 28px;
    }
    
    footer ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	text-align:center;
    }
    footer ul li {display: inline;}
    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

  • #3
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Excavator

    Looks a lot cleaner alreaday! How did you get hold of my css code?...

    Anyway, the next step, would be to try and get the Logout in one corner and the Contact in another. The idea is that at alater stage when I start playing around with buttons I would get large buttoins for those leavingn the other 3 links in the middle. Is that too difficult to do?

    I'll buy you a beer when I come to Alaska!

    qim

    PS I tried to move the Logout to the left but now it ended up on top. Guess better to get rid of the h3, but then it is not very prominent.
    Last edited by qim; 04-12-2013 at 08:42 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by qim View Post

    PS I tried to move the Logout to the left but now it ended up on top. Guess better to get rid of the h3, but then it is not very prominent.
    Give it an id or class name and you can style that anchor however you like.
    Like this - <a href="../Pinto/logout.php" class="ftrLinks">Logout</a>

    And some CSS to style it -
    Code:
    .ftrLinks:link,
    .ftrLinks:visited {
    	color: #00f;
    	font-size: 30px;
    	text-decoration: underline;
    }
    .ftrLinks:hover,
    .ftrLinks:active {
    	color: #f00;
    	text-decoration: none;
    }
    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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by qim View Post

    Looks a lot cleaner alreaday! How did you get hold of my css code?...
    When you provide a link, all your code/CSS is available.
    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

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

    two beers!

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

    One more question: I promise!

    I know how to move the Contact to the right with &nbsp; but how do I move the Logout to the left?

    have a look pintotours.net

    Cheers

    qim

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    [quote}
    I know how to move the Contact to the right with &nbsp; [/QUOTE]

    No!
    A non-breaking space it to put space in a line of text. It is not for creating space in your layout.

    On the same subject, <br><br><br><br><br><br><br><br><br><br><br><br><br> is not for creating space. Line breaks are for breaking a line of text to the next line.

    You need to learn how to use CSS to position things. Floats put elements beside other elements. See a float tutorial here. Margins make space between things.

    You should also learn how to write valid code. There are links to the validators, one for your markup and one for your CSS, in my signature line below.
    That would show you how it is invalid to include an anchor inside your ul.

    Look at it as if you were making a 3 column layout, like this -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 0 auto;
    	background: #999;
    }
    footer {
    	background: #babd98;
    	clear: both;
    	text-align: center;
    	padding: 28px 0;
    }
    footer a {width: 150px;}
    .left {float: left;}
    .right {float: right;}
    		.ftrLinks:link, .ftrLinks:visited {
    			font-size: 30px;
    			text-decoration: none;
    		}
    		footer a:link, footer a:visited {color: #00f;}
    		footer a:hover, footer a:active {color: #f00;}
    footer ul {
    	line-height: 40px;
    	margin: 0;
    	padding: 0;
    	overflow: auto;
    	list-style-type: none;
    }
    	footer ul li {
    	margin: 0 20px;
    	display: inline-block;
    	}
    		footer ul li a {white-space: nowrap;}
    </style>
    </head>
    <body>
        <div id="container">
    		<footer>
    			<a href="../Pinto/logout.php" class="ftrLinks left">Logout</a>
    			<a href="" class="ftrLinks right">Contact</a> 
    				<ul>
    					<li><a href="#">Privacy policy</a></li>     
    					<li><a href="#">User guidelines</a></li>    
    					<li><a href="#">Use of cookies</a></li> 
    				</ul>       
    		</footer>
        <!--end container--></div>
    </body>
    </html>

    Based on this 3-column example.
    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

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

    It's 2 am here and I'm falling asleep. Will deal with this tomorrrow.

    Thank you very much Excavator.

    qim

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

    Disaster!!!

    This is totally unrelated but I hope you're still around and can throw some light and suggestions, this way.

    last night just after my last message to you ALL three pages seem to have collapsed with the styling going all over the place, especially in the sidebars. I thought I might have been hacked or that the server had problems due to heavy traffic, but this motning I chatted with JustHost and they tell me that they had no problems, that there are no hacking codes and that my pages LOOK FINE!! Now, I tried somebody else's computer and the problem is there too.

    Fortunately I backed up just before this happened and hopefully I can recover, but am afraid that this might be due ti unstable code, although I cannot see how code on one script can affect unrelated scripts that are linked simply by links.

    Does this sound like somthing you have heard many times? Have a look at the site please. pintotours.net pintotours.net/Pinto/form.php pintotours.net/lasttest/third.html

    Thank you very much

    qim

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You must have fixed them? All three pages look good on FF21.
    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

  • #12
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good thing that you have midnight sun over there...

    releived to hear from you!

    No, I have not fixed anything. The pages look terrible. But I am glad that you are suggesting that the problem is with these two computers rather than the pages themselves.

    I have just found out that out friends from MS are trying to install IE10. maybe that's the problem!

    I have been having a look at my stylesheets in your suggested validator W3C CSS. It finds a few errors but I'm afraid of touching them as I believe some are part of code I got from that forum.

    /Pinto/style.css
    /Pinto/register.css
    /lasttest/style3.css

    can you see if they need doing anything to them?

    Thanks a lot Excavator

    qim

    PS - For instance look at the footing in the front page. The other pages are much worse

    PPS another one
    Attached Thumbnails Attached Thumbnails Spacing out  links in footer-disaster.jpg   Spacing out  links in footer-disaster2.jpg  
    Last edited by qim; 04-13-2013 at 10:07 AM. Reason: attachment

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

    You can go to bed now...

    Everything seems to be back to normal. I think the reason was that MS tried to update from IE9 to IE10 while I was working on the page.

    I have just installed IE10 and suddenly, hey Presto, all looks fine!

    DSorry, but I panick a lot. No good for living in Alaska with all those bears around...

    Thank you very much

    qim

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

    I've already amended the css file with the code that you sent me but I'm unsure on how to go about the Html code. You use id and the current css file uses class and the name of the maiin central part is 'maincontent' rather than 'container' although that of course is a question of changing the name. But nor being class I am not sure what would happen if I pasted the code in the html script.

    have a look at the code in the index file of www.pintotours.net

    After last night's disaster I'm not looking for another one.

    By the way I went through the article that you suggested and I learned more in an hour with it than in the last 5 weeks since I jumped in deep end without a life.jacket!!!

    Thanks

    qim

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by qim View Post
    Hi, back to work

    I've already amended the css file with the code that you sent me but I'm unsure on how to go about the Html code. You use id and the current css file uses class and the name of the maiin central part is 'maincontent' rather than 'container' although that of course is a question of changing the name. But nor being class I am not sure what would happen if I pasted the code in the html script.
    In that snippet I put up, parent #container is just what holds your <footer> for demonstration and you would not add that to your site, only make the changes shown in the <footer> and it's child elements.

    ...
    Have you checked your site with the validators yet? The markup validator finds a few things that you should have a look at, including the anchors inside the unordered list. See http://validator.w3.org/check?verbos...totours.net%2F
    Last edited by Excavator; 04-13-2013 at 09:47 PM.
    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


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