SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Non-Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    normally should go above since on the LEFT... BUT WANTED GO BELOW

    when i have media queries eg 480px and 768 px breakpoints and metaphorically footer is a grid of two columns (divs) and copyright on the left footer and menu on the right, how in smartphones go copyright below footer menu but not above. normally should go above since on the LEFT... BUT WANTED GO BELOW, HOW????

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you have two floated columns then the column that will automatically drop will be the one first in the html so simply reverse the order if the html.

    e.g.

    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=utf-8">
    <title>Untitled Document</title>
    <style>
    #footer {
    	width:50%;
    	margin:auto;
    	border:1px solid #000;
    	padding:10px;
    	overflow:hidden;
    }
    #footer ul {
    	float:right;
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #footer li { display:inline; }
    #footer p {
    	margin:0;
    	width:7em;
    	float:left
    }
    </style>
    </head>
    
    <body>
    <div id="footer">
    		<ul>
    				<li><a href="#">Menu link </a>|</li>
    				<li><a href="#">Menu link </a>|</li>
    				<li><a href="#">Menu link </a>|</li>
    		</ul>
    		<p class="copy">&copy; Me 2013</p>
    </div>
    </body>
    </html>
    At wide widths they are on one line but at small widths the copyright drops below.

  3. #3
    SitePoint Addict
    Join Date
    May 2013
    Posts
    204
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    is any way with float right copyright be the left column and floats below right column?

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You should have your markup structured as Paul suggested. not only because it will solve this tiny problem ( I normally loathe changing the markup for the sake of style) but because it is , semantically, what you want anyway.

    If CSS was OFF (no style sheets applied at all) your copyright would precede your footed nav, and that's not what you want so the first problem to solve is semantic.. which just so happens to essentially solve the problem that started this post.

    is any way with float right copyright be the left column and floats below right column?
    FLOATS cannot float ( be displayed) above elements that precede them in the source order. So, no ( or not really).


    HOWEVER:

    if you were certain of the height of your copyright you could use AP and padding to do a switcharoo. It's messy but if you have NO ACCESS to your source code then that the thing I'd do.

    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=utf-8">
    <title>Untitled Document</title>
    <style>
    #footer {
     	margin:0 25%;
    	border:1px solid #000;
    	padding:10px;
    	overflow:hidden;
    	position:relative;
    }
    #footer ul {
    	float:right;
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #footer li { display:inline; }
    #footer p {
    	margin:0;
    	float:left
    }
    
    @media screen and (max-width:480px){
     #footer p {
     	position:absolute;
    	heigh:2em;
    	bottom:0;
    	left:10px;
    	right:10px;
    }
    #footer {
    	padding-bottom:2em
    
    }
    </style>
    </head>
    
    <body>
    <div id="footer">
    		<p class="copy">&copy; Me 2013</p>
    
    		<ul>
    				<li><a href="#">Menu link </a>|</li>
    				<li><a href="#">Menu link </a>|</li>
    				<li><a href="#">Menu link </a></li>
    		</ul>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

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