Adapter le footer en responsive design

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par seseba, 7 Février 2015.

  1. seseba
    seseba Nouveau WRInaute
    Inscrit:
    16 Janvier 2015
    Messages:
    30
    J'aime reçus:
    0
    Bonjour,

    je suis en train d'essayer de programmer mon footer sur la page suivante:
    http://testwebsite.physio-in-esslingen.de/

    Plus exactement je souhaiterais programmer mes coordonnées afin que les mots ne se séparent pas lors d'un changement de résolution d'écran p.e. sur un portable.

    Sur un ordinateur les coordonnées s'affichent comme ceci:
    Physio in Esslingen Richard-Hirschmann-Straße 15 73728 Esslingen am Neckar Tel. 0711/ 6868 41 65

    Je souhaiterais qu'ils s'affichent comme cela:
    Physio in Esslingen Richard-Hirschmann-Straße 15
    73728 Esslingen am Neckar Tel. 0711/ 6868 41 65
    Sur une tablette.

    Et comme ceci:
    Physio in Esslingen
    Richard-Hirschmann-Straße 15
    73728 Esslingen am Neckar
    Tel. 0711/ 6868 41 65
    Sur un Portable.

    J'ai essayer de programmer tout ceci avec des span mais sans succès est ce que quelqu'un pourrait me venir en aide?

    Merci.
     
  2. loubet
    loubet WRInaute impliqué
    Inscrit:
    19 Février 2003
    Messages:
    792
    J'aime reçus:
    0
    Re: Responsive

    une piste : remplacer les espaces par des espaces insécables :  
     
  3. seseba
    seseba Nouveau WRInaute
    Inscrit:
    16 Janvier 2015
    Messages:
    30
    J'aime reçus:
    0
    Re: Responsive

    Je vais essayer ca.
    Merci beaucoup.
     
  4. seseba
    seseba Nouveau WRInaute
    Inscrit:
    16 Janvier 2015
    Messages:
    30
    J'aime reçus:
    0
    Re: Responsive

    J ai essayer le problème c est qu il continu à me couper les mots. Le but serait de garder les groupes de mots pe physio in esslingen intacte et d'avoir la mise à la ligne entre 2 groupe de mots. quitte a diminuer la police sur une resolution inferieure
     
  5. houba_houbi
    houba_houbi WRInaute discret
    Inscrit:
    23 Juillet 2009
    Messages:
    79
    J'aime reçus:
    0
    Re: Responsive

    Bonjour

    Déjà ce que je ferai c'est sortir ton texte sous forme de liste :
    Code:
    <ul class="maclass"><li>nom></li><li>adresse</li><li>cp ville</li>
    plutôt qu'en vrac sous une balise H5

    Pour l'affichage sur grand écran, tu demandes dans ta css l'affichage en liste
    Code:
    ul.maclass li {display: in-line;}
    et pour les petits écrans
    Code:
    ul.maclass li {display: block;}
    et voit déjà ce que cela donne. On pourra améliorer ensuite
     
  6. seseba
    seseba Nouveau WRInaute
    Inscrit:
    16 Janvier 2015
    Messages:
    30
    J'aime reçus:
    0
    Ca reste malheureusement en liste.

    Voila ma page index:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Physio in Esslingen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- CSS
    ================================================== -->
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <link rel="stylesheet" href="css/prettyPhoto.css" />
    <link rel="stylesheet" href="css/flexslider.css" />
    <link rel="stylesheet" href="css/custom-styles.css">
    
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <link rel="stylesheet" href="css/style-ie.css"/>
    <![endif]--> 
    
    <!-- Favicons
    ================================================== -->
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
    
    <!-- JS
    ================================================== -->
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/jquery.flexslider.js"></script>
    <script src="js/jquery.custom.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    
        $("#btn-blog-next").click(function () {
          $('#blogCarousel').carousel('next')
        });
         $("#btn-blog-prev").click(function () {
          $('#blogCarousel').carousel('prev')
        });
    
         $("#btn-client-next").click(function () {
          $('#clientCarousel').carousel('next')
        });
         $("#btn-client-prev").click(function () {
          $('#clientCarousel').carousel('prev')
        });
        
    });
    
     $(window).load(function(){
    
        $('.flexslider').flexslider({
            animation: "slide",
            slideshow: true,
            start: function(slider){
              $('body').removeClass('loading');
            }
        });  
    });
    
    </script>
    
        <!-- SEO -->
    <meta name="msvalidate.01" content="C47C1CBBBC937FBEBFDA2EF0F54F061E">
    <meta name="google-site-verification" content="tfOwDaLIaQHY_1xaoya-KQbNWaRwJKsyF0t1aXWDUo8">
    <meta name="alexaVerifyID" content="AovAhm4ZnLG_YyOYyPzSZSnKuz4">
    
    </head>
    
    <body class="home">
        <!-- Color Bars (above header)-->
    	<div class="color-bar-1"></div>
        <div class="color-bar-2 color-bg"></div>
        
        <div class="container">
        
          <div class="row header"><!-- Begin Header -->
          
            <!-- Logo
            ================================================== -->
            <div class="span5 logo">
            	<a href="index"><img src="img/physio-in-esslingen-logo.png" alt="" /></a>
            </div>
            
            <!-- Main Navigation
            ================================================== -->
            <div class="span7 navigation">
                <div class="navbar hidden-phone">
                
                <ul class="nav">
                <li class="active"><a href="index">Startseite </a></li>
               <li><a href="ueber-uns">Über Uns</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="leistungen">Leistungen <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="leistungen/krankengymnastik">Krankengymnastik</a></li>
                        <li><a href="leistungen/manuelle-therapie">Manuelle Therapie</a></li>
                        <li><a href="leistungen/bobath">Therapie nach Bobath</a></li>
                        <li><a href="leistungen/manuelle-lymphdrainage">Manuelle Lymphdrainage</a></li>
    					<li><a href="leistungen/sportphysiotherapie">Sportphysiotherapie</a></li>
                        <li><a href="leistungen/massage">Massage</a></li>
                        <li><a href="leistungen/wellness">Wellness</a></li>
                        <li><a href="leistungen/hausbesuche">Hausbesuche</a></li>
                    </ul>
                </li>
                 <li><a href="unsere-praxis">Unsere Praxis </a></li>
                 <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="unser-team">Unser Team <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="unser-team/sebastien-fournereau">Sébastien Fournereau</a></li>
                        <li><a href="unser-team/fikreta-crnkic">Fikreta Crnkic'</a></li>
                    </ul>
                 </li>
                 <li><a href="kontakt">Kontakt</a></li>
                </ul>
               
                </div>
    
                  <!-- Mobile Nav
                ================================================== -->
                <form action="#" id="mobile-nav" class="visible-phone">
                    <div class="mobile-nav-select">
                    <select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
                        <option value="">Menu</option>
                        <option value="index">Startseite</option>
                        <option value="ueber-uns">Über Uns</option>
                        <option value="leistungen">Leistungen</option>
                            <option value="leistungen/krankengymnastik">- Krankengymnastik</option>
                            <option value="leistungen/manuelle-therapie">- Manuelle Therapie</option>
                            <option value="leistungen/bobath">- Therapie nach Bobath</option>
                            <option value="leistungen/manuelle-lymphdrainage">- Manuelle Lymphdrainage</option>
    						<option value="leistungen/sportphysiotherapie">- Sportphysiotherapie</option>
                            <option value="leistungen/massage">- Massage</option>
                            <option value="leistungen/wellness">- Wellness</option>
                            <option value="leistungen/hausbesuche">- Hausbesuche</option>
                        <option value="unsere-praxis">Unsere Praxis</option>
                        <option value="unser-team">Unser Team</option>
                            <option value="unser-team/sebastien-fournereau">Sébastien Fournereau</option>
                            <option value="unser-team/fikreta-crnkic">Fikreta Crnkic'</option>
                        <option value="kontakt">Kontakt</option>
                    </select>
                    </div>
                    </form>
                
            </div>
            
          </div><!-- End Header -->
         
        <div class="row headline"><!-- Begin Headline -->
        
    
            <!-- Headline Text
            ================================================== -->
                    <div class="span12"><div class="clearfix">
                    <img src="img/gallery/gallery-img-1-4col.jpg" class="thumbnail align-left" alt="Image" />
            	<h3>Herzlich willkommen bei Physio in Esslingen</h3>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium vulputate magna sit amet blandit.</p>
                <p>Cras rutrum, massa non blandit convallis, est lacus gravida enim, eu fermentum ligula orci et tortor. In sit amet nisl ac leo pulvinar molestie. Morbi blandit ultricies ultrices.</p>
            </div></div>
        </div><!-- End Headline -->
        
        
        </div> <!-- End Container -->
    
        <!-- Footer Area
            ================================================== -->
    
    	<div class="footer-container"><!-- Begin Footer -->
        	<div class="container">
            	<div class="footer-row" >
                    <div class="footer-col">
                       <ul class="maclass"><li>Esslingen</li><li>Richard-Hirschmann-Straße 15</li><li>73728 Esslingen am Neckar</li><li>Tel. 0711/ 6868 41 65</li></ul>
                    </div>
                </div>
    
                <div class="row"><!-- Begin Sub Footer -->
                    <div class="span12 footer-col footer-sub">
                        <div class="row no-margin">
                            <div class="span6"><span class="left">Copyright 2012 Piccolo Theme. All rights reserved.</span></div>
                            <div class="span6">
                                <span class="right">
                                <a href="index">Startseite</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="leistungen">Leistungen</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="unsere-praxis">Unsere Praxis</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="unser-team">Unser Team</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="kontakt">Kontakt</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="impressum">Impressum</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div><!-- End Sub Footer -->
    
            </div>
        </div><!-- End Footer -->
    
        <!-- Scroll to Top -->  
        <div id="toTop" class="hidden-phone hidden-tablet">Back to Top</div>
        
    </body>
    </html>
    
    Et mon code css:
    Code:
    html, body {
    	font-size:12px; 
    	line-height:18px;
    	height: 100%;
     }
    body {background: #f9f9f9 ;}
    
    .main-container {
    	height:auto; 
    	height: 100%;
    	min-height: 100%;
    }
    
    @media (max-width: 767px) {
      body { padding-right: 0px; padding-left: 0px; }
      .container {margin-right: 20px; margin-left: 20px;}
     }
    
    /***** Titles and Headings *****/
    h1, h2, h3, h4 , h5, h6 {
    	font-family: "'Josefin Sans", sans-serif; 
    	font-weight: normal;
    	text-transform:uppercase; 
    }	
    h1, h2, h3, h4, h5 
    h1.title-bg, h2.title-bg, h3.title-bg, h4.title-bg , h5.title-bg, h6.title-bg {
    	background:#f8f8f8; 
    	padding:10px 5px;
    	margin: 0px 0px 20px 0px;
    }
    h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {color:#7f7f7f;}
    h2 small {font-size: 30px;}
    h5 small {font-size: 14px;}
    h6 small {font-size: 12px;}
    
    h5.title-bg button {
    	float: right; 
    	text-transform: none;
    	margin-left:5px;
    }
    
    /***** Links *****/
    a, a:hover { color:#75D2DA; }
    
    /***** Misc *****/
    i {margin-right: 3px;}
    p {margin-bottom: 20px;}
    blockquote {
    	font-size:16px; 
    	line-height:24px; 
    	font-family:Georgia, "Times New Roman", Times, serif; 
    	font-style:italic;
    	border-left: 5px solid #999;
    }
    blockquote.pull-right {border-right: 5px solid #999;}
    
    
    /**************************************
    / Header
    **************************************/
    .logo { margin-top:40px; }
    .logo img { padding-right:20px; }
    .logo h5 { display: inline-block; }
    .headline { margin-bottom:20px; }
    
    /* Landscape phones and down */
    @media (max-width: 480px) {
    	.logo, .navigation {text-align: center;}
    	.row.header {margin-bottom: 30px;}
    	.logo h5 {display: block;}
    }
    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 1199px) {
    	.headline .lead {display: none;}
    }
    
    .navigation { margin-top:40px; }
    .navigation .navbar { 
    	float:right; background:#f8f8f8;
    	border-bottom: 1px dotted #a9a9a9;
    	border-top: 1px dotted #a9a9a9;
    }
    .navbar .nav > li > a { 
    	font-family: "'Josefin Sans", sans-serif; 
    	font-weight: normal;
    	text-shadow: none; 
    	text-transform:uppercase; 
    	font-size:12px; 
    	padding: 10px 15px 10px;
    }
    
    /* Portrait tablet */
    @media (min-width: 768px) and (max-width: 979px) {
    	.navbar .nav > li > a {padding: 10px 10px 10px;}
    }
    
    .navbar .nav > .active > a,
    .navbar .nav > .active > a:hover,
    .navbar .nav > .active > a:focus {
    	color:#FFF; 
    	background-color:#75D2DA;
    	-webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;  
    }
    
    .navbar .nav li.dropdown.open > .dropdown-toggle,
    .navbar .nav li.dropdown.active > .dropdown-toggle,
    .navbar .nav li.dropdown.open.active > .dropdown-toggle {
      	color:#FFF; 
    	background-color:#75D2DA;
    }
    
    ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; }
    .dropdown-menu{
    	font-family: "'Josefin Sans", sans-serif; 
    	font-weight: normal;
    	text-transform:uppercase; 
    	font-size:10px;
    	padding: 0px;
    	margin: 0px;
    	background-color: #383838;
    	border: none;
    	*border-right-width: none;
    	*border-bottom-width: none;
    	-webkit-border-radius: 0px;
         -moz-border-radius: 0px;
              border-radius: 0px;
    	-webkit-box-shadow: none;
         -moz-box-shadow: none;
              box-shadow: none;
    	-webkit-background-clip: none;
         -moz-background-clip: none;
              background-clip: none;
    }
    .navbar .nav > li > .dropdown-menu:before {
      border-right: 0px;
      border-bottom: 0px;
      border-left: 0px;
      border-bottom-color: none;
    }
    .dropdown-menu a {
    	color: #ababab; 
    	border-bottom:1px solid #474747;
    	padding: 10px 10px;
    	margin:0px 10px;
    }
    .dropdown-menu li > a:hover,
    .dropdown-menu li > a:focus,
    .dropdown-submenu:hover > a {
      color: #f9f9f9;
      text-decoration: none;
      background-color: #383838;
      background-image: none;
      filter: none;
    }
    .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
    .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
    .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
      border-top-color: #fff;
      border-bottom-color: #fff;
    }
    .navbar .nav > li > .dropdown-menu:before,
    .navbar .nav > li > .dropdown-menu:after {
      display: none;
    }
    
    
    /**************************************
    / Slider
    **************************************/
    .carousel-caption h4 { font-size: 14px; text-shadow:none; }
    .carousel-caption {background: url(../img/post-item-hover.png);}
    .carousel-control {border: none; top: 177px;}
    
    
    /**************************************
    / Gallery
    **************************************/
    .gallery-title { margin-bottom:15px; }
    .gallery-item { margin-bottom:15px; margin-top:15px; }
    
    .gallery-hover-6col,
    .gallery-hover-4col,
    .gallery-hover-3col,
    .gallery-hover-4col-cir { 
    	display:none; 
    	background:url(../img/gallery-item-hover.png);
    	position:absolute; 
    	z-index: 10;
    }
    .gallery-hover-4col-cir{
    	-webkit-border-radius: 500px;
         -moz-border-radius: 500px;
              border-radius: 500px;
    }
    
    /* Large Desktop Size */
    @media (min-width: 1200px) {
    	.gallery-hover-6col {width:170px; height:139px;}
    	.gallery-hover-4col {width:270px; height:220px;}
    	.gallery-hover-3col {width:370px; height:300px;}
    	.gallery-hover-4col-cir {width:270px; height:270px;}
    	.gallery-hover-4col-cir .gallery-icons {top: 45%; left:34%;}
    }
    
    /* Small Desktop Size */
    @media (min-width: 980px) and (max-width: 1199px) {
    	.gallery-hover-6col {width:140px; height:114px;}
    	.gallery-hover-4col {width:220px; height:180px;}
    	.gallery-hover-3col {width:300px; height:243px;}
    	.gallery-hover-4col-cir {width:220px; height:220px;}
    	.gallery-hover-4col-cir .gallery-icons {top: 42%; left:29%;}
    
    	/* Clip descriptions */
    	li.span4 .project-details {
    	    -o-text-overflow: ellipsis;
    	    text-overflow:    ellipsis;
    	    overflow:hidden;
    	    white-space:nowrap;
    	    width: 280px;
    	}
    	li.span3 .project-details {
    	    -o-text-overflow: ellipsis;
    	    text-overflow:    ellipsis;
    	    overflow:hidden;
    	    white-space:nowrap;
    	    width: 200px;
    	}
    	li.span2 .project-details {
    	    -o-text-overflow: ellipsis;
    	    text-overflow:    ellipsis;
    	    overflow:hidden;
    	    white-space:nowrap;
    	    width: 120px;
    	}
    }
    
    /* Portrait tablet to landscape */
    @media (min-width: 768px) and (max-width: 979px) {
    
    	/* Clip descriptions */
    	li.span2 .project-details {display:none;}
    	li.span3 .project-details {
    	    -o-text-overflow: ellipsis;
    	    text-overflow:    ellipsis;
    	    overflow:hidden;
    	    white-space:nowrap;
    	    width: 146px;
    	}
    	li.span4 .project-details {
    	    -o-text-overflow: ellipsis;
    	    text-overflow:    ellipsis;
    	    overflow:hidden;
    	    white-space:nowrap;
    	    width: 208px;
    	}
    }
    /* Landscape phones and down */
    @media (max-width: 480px) {
    	.project-details {width: 250px; text-align: center}
    	.gallery-post-grid {text-align: center}
    	.project-details {margin-left:auto; margin-right: auto;}
    	.gallery {text-align: center; }
    	.gallery-cats { display: none;}
    	li.span2 .project-details {
    	    -o-text-overflow: ellipsis;
    	    text-overflow:    ellipsis;
    	    overflow:hidden;
    	    white-space:nowrap;
    	    width: 150px;
    		}
    }
    /* Mobile Landscape Size */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    	li.span4 .project-details {width:350px;}
    }
    /* Mobile Portrait Size */
    @media only screen and (max-width: 479px) {
    	li.span4 .project-details {width:260px;}
    }
    
    .project-details {
    	background:#f8f8f8;
    	display: block;
    	padding:10px;
    	border-bottom: 1px dotted #a9a9a9;
    	font-family: Georgia;
    	font-style: italic;
    
    	width: auto\9;
        height: auto;
        max-width: 100%;
    }
    .project-details a {
    	margin: 0px; 
    	font-size: 12px; 
    	font-style: normal;
    	text-shadow:none;
    	display: block;
    	font-family: "'Josefin Sans", sans-serif; 
    	font-weight: normal;
    	text-transform:uppercase; 
    }
    .project-details {color: #6f6f6f;}
    .project-details a {color: #333333;}
    .project-details a:hover {color:#75D2DA; text-decoration: none;}
    
    .project-info {margin: 0px 0px 40px 0px;}
    .project-info li { 
    	list-style: none; 
    	border-bottom: 1px dashed #a9a9a9;;
    	padding: 10px; }
    .project-info li h6 {display: inline; margin-right: 5px;}
    
    .gallery-icons {
    	z-index: 9;
    	position:absolute;
    	bottom: 0px; 
    	right: 0px;
    	width: 89px;
    	height: 42px;
    	display: block;
    }
    a.item-zoom-link { 
    	height: 42px;
    	width: 42px;
    	background: #ffffff url(../img/gallery-item-icons.png) no-repeat;
    	background-position: 0px 0px;
    	position:absolute;
    	display: block;
    }
    a.item-details-link { 
    	height: 42px;
    	width: 42px;
    	background: #ffffff url(../img/gallery-item-icons.png) no-repeat;
    	background-position: -42px 0px;
    	position:absolute; 
    	left: 47px;
    	display: block;
    }
    a.item-zoom-link:hover {background: #75D2DA url(../img/gallery-item-icons.png) no-repeat;}
    a.item-details-link:hover {background: #75D2DA url(../img/gallery-item-icons.png) no-repeat; background-position: -42px 0px;}
    
    .gallery-post-grid {margin:0px;}
    .gallery-post-grid li {list-style: none; float: left; margin-bottom: 30px;}
    
    .gallery-cats {margin: 0px 0px 20px 0px;}
    .gallery-cats li{
    	list-style: none; 
    	float: left; 
    	padding: 0px 10px;
    	border-left: 1px dotted #a9a9a9;
    }
    .gallery-cats li:first-child{border-left:0px;}
    	
    	
    /**************************************
    / Blog
    **************************************/
    /*** Blog on Home Page ***/
    .blog-summary {line-height: 18px;}
    .post-info-shade { background:#f8f8f8; }
    .post-info { line-height:20px; padding-top:10px; }
    .post-info h4 {line-height: 26px; margin-top: 0px;}
    .post-info h4 a, .post-info h4 a:hover {color:#333; text-decoration: none;}
    .post-info ul li {list-style: none; padding-bottom: 2px; margin: 0px;}
    .post-preview {line-height: 20px;}
    
    /* All Sizes up to Large Desktop */
    @media only screen and (max-width: 1199px) {
    	.post-info h4 {clear:both;}
    	.blog-details-preview {display: none; border:1px solid #000;}
    }
    
    /*** Blog List Page ***/
    .blog article,
    .blog section {margin-bottom: 40px;}
    .blog article h3 {margin-top: 0px;}
    .blog article h3 a, .blog article h4 a,
    .blog article h3 a:hover, .blog article h4 a:hover {color:#333333; text-decoration: none;}
    .blog h4 {line-height: 26px;}
    
    /* Mobile Landscape Size */
    @media only screen and (max-width: 479px) {
    	.blog h4 {width:260px;}
    }
    
    .post-summary {background: #f8f8f8; padding-bottom: 20px; overflow: auto;}
    .post-summary p {padding:20px; margin:0px;}
    .post-summary-footer {margin: 0px; padding:0px 20px;}
    .post-summary-footer button {margin: 0px; float:left;}
    ul.post-data {float:right;}
    ul.post-data-3 {margin-top:20px;}
    ul.post-data li, ul.post-data-3 li {
    	list-style: none; 
    	float: left; 
    	padding: 0px 10px;
    	border-left: 1px dotted #a9a9a9;
    }
    ul.post-data li:first-child,
    ul.post-data-3 li:first-child {border: none; padding-left: 0px;}
    ul.post-data li:last-child {padding-right: 0px;}
    
    /* Small Desktop Size */
    @media (min-width: 980px) and (max-width: 1199px) {
    	ul.post-data-3 li:last-child {display: none;}
    }
    
    /* Portrait tablet */
    @media (min-width: 768px) and (max-width: 979px) {
    	.post-summary-footer button {float: none; margin-bottom: 20px;}
    	.blog article button {float: left; clear: both; margin-bottom: 20px;}
    	ul.post-data-3 {display: none;}
    	ul.post-data {float: none; clear: both; margin: 0px;}
    	ul.post-data li:last-child {
    		-o-text-overflow: ellipsis;
    	    text-overflow:    ellipsis;
    	    overflow:hidden;
    	    white-space:nowrap;
    	    width: 120px;
    	}
    }
    
    .blog-style-2 h4 {margin-top:0px; margin-bottom: 10px;}
    .blog-style-2 ul.post-data {margin:0px 0px 20px 0px;}
    .blog-style-2 ul.post-data li {
    	float: none; 
    	margin:0px; 
    	padding: 5px 0px 0px 0px;
    	border: none;
    }
    .blog-post-grid {margin:0px;}
    .blog-post-grid li {list-style: none; float: left; margin-bottom: 30px;}
    .blog-post-hover { 
    	display:none; 
    	width:270px; height:220px;
    	background:url(../img/post-item-hover.png);
    	position:absolute; 
    	z-index: 10;
    }
    .blog-post-hover p{
    	color: #f8f8f8;
    	padding:20px;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-style: italic;
    }
    .blog-post-hover a{
    	font-family: "'Josefin Sans", sans-serif; 
    	font-weight: normal;
    	text-transform:uppercase; 
    	font-size: 28px;
    	line-height: 32px;
    	font-style: normal;
    	color: #f8f8f8;
    }
    .blog-post-hover a:hover{ text-decoration: none; color: #75D2DA;}
    
    @media (min-width: 768px) and (max-width: 1199px) {
    	.blog-post-hover {width:220px; height:179px;}
    	.blog-post-hover a{ font-size: 20px; line-height: 24px;}
    	}
    
    /* All Mobile Sizes */
    @media only screen and (max-width: 767px) {
    	.post-summary-footer{display: none;}
    	.post-summary{padding-bottom: 0px;}
    	.blog-style-2 {display: none;}
    }
    
    /*** Blog Full Page ***/
    .post-content {background: #f8f8f8; overflow: auto;}
    .post-body {padding: 20px;}
    .about-author img {float: left; margin-right: 20px;}
    
    /*** Comments ***/
    .comments ul {margin:0px;}
    .comments ul li {
    	list-style: none;
    	padding: 20px;
    	background: #f8f8f8;
    	margin-bottom: 40px;
    	border-bottom: 1px dotted #a9a9a9;
    	border-top: 1px dotted #a9a9a9;
    }
    .comments ul li ul {margin-left:40px; padding-top: 20px;}
    .comments ul li ul li {
    	border-top: 1px dotted #a9a9a9;
    	border-bottom: none;
    	padding: 20px 20px;
    	margin-bottom:0px;
    }
    .comments ul li ul li:last-child {padding-bottom: 0px;}
    
    .comments ul li img {margin:0px 10px 10px 0px;}
    .comment-name {
    	font-family: "'Josefin Sans", sans-serif; 
    	font-weight: normal;
    	text-transform:uppercase; 
    }
    .comment-date {
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-style: italic;
    	clear: both;
    }
    .comment-content { clear:both; padding-top:10px; }
    .comment-form-container input,
    #contact-form input {margin-bottom: 12px;}
    .comment-form-container textarea,
    #contact-form textarea {height: 150px;}
    .comment-form-container .btn,
    #contact-form .btn {margin-top: 12px;}
    
    
    /**************************************
    / Sidebar
    **************************************/
    .sidebar input{width: 80%;}
    .sidebar h5 {margin-top: 40px;}
    .sidebar ul.post-category-list,
    .sidebar .tab-content .tab-pane ul {margin:0px;}
    .sidebar ul.post-category-list li,
    .sidebar .tab-content .tab-pane ul li {
    	list-style: none; 
    	border-bottom: 1px dashed #a9a9a9;
    	padding:10px 5px;
    }
    .sidebar ul.post-category-list li a{
    	font-family: "'Josefin Sans", sans-serif; 
    	font-weight: normal;
    	text-transform:uppercase; 
    }
    .sidebar ul.post-category-list li:first-child,
    .sidebar .tab-content .tab-pane ul li:first-child{ padding-top: 0px; }
    .sidebar ul.post-category-list li:last-child { padding-bottom: 0px; border-bottom:none; }
    .sidebar ul.post-category-list li i {padding-right: 5px; background-position: 0 -95px;}
    .sidebar .tab-content .tab-pane ul li i {padding-right: 5px;}
    
    .popular-posts{ margin: 0px;}
    .popular-posts li {
    	list-style: none; 
    	margin-bottom: 20px; 
    	clear: both;
    	display: block;
    	min-height: 70px;
    }
    .popular-posts li a, 
    .popular-posts li a:hover {color:#333333; text-decoration: none;}
    .popular-posts li img {float: left; margin-right: 20px;}
    .popular-posts li em {font-family:Georgia, "Times New Roman", Times, serif;}
    p.side {margin-bottom: 20px;}
    
    /* Mobile Portrait and Landscape Size */
    @media only screen and (max-width: 479px) {
    	iframe {width:270px;}
    }
    /* Tablet */
    @media (min-width: 768px) and (max-width: 979px) {
    	iframe {width:230px;}
    }
    /* Small Desktop Size */
    @media (min-width: 980px) and (max-width: 1199px) {
    	iframe {width:300px;}
    }
    
    
    /**************************************
    / Footer
    **************************************/
    .footer-container {
    	width:100%;
    	background:#333;
    	clear: both;
     	position: relative;
     	z-index: 10;
    }
    .footer-row { margin-top: 5px;}
    .footer-col {color:#ababab; font-size: 11px;}
    .footer-col a {color:#dcdcdc; font-weight: bold;}
    .footer-col a:hover {color:#75D2DA; text-decoration: none;}
    .footer-col h5, .footer-col strong {color:#f9f9f9; text-shadow:none;}
    .footer-col h5 {margin: 10px 0 10px;; font-size: 14px;}
    .footer-col ul {margin: 0px;}
    .footer-col ul li {list-style: none; padding-bottom: 20px;}
    .footer-col ul.post-list li {
    	border-bottom: 1px dashed #504f4f;
    	padding: 10px 0px;
    }
    /* All Mobile Sizes */
    @media only screen and (max-width: 767px) {
    	.footer-col {
    		clear:both;
    		overflow: auto;
    		margin-bottom: 20px;
    	}
    	.footer-sub .right {display: none;}
    }
    ul.img-feed li {
    	float: left; 
    	margin: 0px 7px 7px 0px; 
    	padding-bottom: 0px;
    }
    
    /* Portrait tablet */
    @media (min-width: 768px) and (max-width: 979px) {
    	ul.img-feed li:nth-last-child(-n+4) {display: none;}
    }
    
    /**** Social Icons ****/
    .social-icons {padding-top: 10px;}
    .social-icons li {
    	list-style: none; 
    	float: left;
    	margin-right: 6px;
    }
    /* Small Monitor */
    @media (min-width: 980px) and (max-width: 1199px) {
    	.social-icons li:last-child {display:none;}
    }
    a.social-icon { 
    	background: url(../img/social-icons.png);
    	display: block; 
    	width: 46px; 
    	height: 46px;
    }
    a.facebook {background-position: 0px 0px;}
    a.facebook:hover {background-position: 0px -47px;}
    a.twitter{background-position: -52px 0px;}
    a.twitter:hover {background-position: -52px -47px;}
    a.dribble{background-position: -104px 0px;}
    a.dribble:hover {background-position: -104px -47px;}
    a.rss{background-position: -156px 0px;}
    a.rss:hover {background-position: -156px -47px;}
    a.forrst{background-position: -208px 0px;}
    a.forrst:hover {background-position: -208px -47px;}
    
    /**** Sub Footer ****/
    .footer-sub {background: #1f1f1f; padding: 10px 0px;}
    .footer-sub div div span {padding: 0px 20px;}
    
    
    /**************************************
    / MISC
    **************************************/
    .row {margin-bottom:40px;}
    .sub-row30 {margin-bottom:30px;}
    .sub-row20 {margin-bottom:20px;}
    .no-margin {margin-bottom:0px;}
    
    a.accordion-toggle{background: #f5f5f5;}
    .nav-tabs li.active a{background:#f8f8f8;}
    
    @media only screen and  (max-width: 767px) {
    	.btn {margin-bottom: 20px;}
    }
    
    .left {float: left;}
    .right {float: right;}
    .align-left{float: left; margin: 0px 20px 20px 0px;}
    .align-right{float: right; margin: 0px 0px 20px 20px;}
    
    .color-bg { background:#75D2DA; }
    .color { color:#75D2DA; }
    .color-bar-1, .color-bar-2 { width:100% }
    .color-bar-1 { background:#414141; height:5px; }
    .color-bar-2 { height:3px; }
    .page-header { margin:0px }
    .lead {line-height:28px; margin: 20px 0px 30px 0px; }
    
    #toTop {
    	width:47px;
    	height:47px;
    	background:url(../img/back-top-btn.png) no-repeat;
    	text-align:center;
    	position:fixed;
    	bottom:25px;
    	right:20px;
    	cursor:pointer;
    	display:none;
    	text-indent:-9999px;
    	z-index:12; 
    }
    
    /***** Lightbox *****/
    #lightbox-image-details-caption {
    	font-family: "'Josefin Sans", sans-serif; 
    	font-weight: normal;
    	text-transform:uppercase;
    	font-size: 14px;
    }
    #lightbox-secNav-btnClose {width: 30px; padding-bottom: 0;}
    #lightbox-image-details-currentNumber {display: none; visibility: hidden;}
    
    /***** Testimonials *****/
    .quote-text { 
    	font-size:16px; 
    	line-height:24px; 
    	font-family:Georgia, "Times New Roman", Times, serif; 
    	font-style:italic;
    	margin:0px 20px; }
    .quote-text cite { 
    	font-size:12px;
    	color:#999;
    	display:block;
    	margin-top:5px; }
    
    #clientCarousel.carousel .item {
    	background: #f9f9f9;
    	padding:20px 0px;
        -webkit-transition: opacity 1s ease-in-out;
    	-moz-transition: opacity 1s ease-in-out;
    	-o-transition: opacity 1s ease-in-out;
    	transition: opacity 1s ease-in-out;
        left: 0 !important;
      }
    #clientCarousel.carousel .next.left, .carousel .prev.right {
        opacity: 1;
        z-index: 1;
      }
    #clientCarousel.carousel .active.left, .carousel .active.right {
        opacity: 0;
        z-index: 2;
      }
    
    /***** Client Logos *****/
    .client-link { 
    	display: block; 
    	width: 100px; 
    	height: 100px;
    	position: relative;
    }
    .client-mask {
    	display: block;
    	width: 100px; 
    	height: 100px;
    	position: absolute;
    	background: url(../img/rnd-client-mask.png);
    }
    .client-logos {margin: 20px 0px 0px 0px;}
    .client-logos li {list-style: none; float: left; margin: 0px 7px;}
    
    /* Small Monitor */
    @media (min-width: 980px) and (max-width: 1199px) {
    	.client-logos li:first-child {display: none;}
    }
    /* Portrait tablet */
    @media (min-width: 768px) and (max-width: 979px) {
    	.client-logos li:nth-last-child(-n+2) {display: none;}
    }
    
    /***** Features Page (these can be deleted)*****/
    .the-grid div {
    	background: #e4e4e4; 
    	padding:10px 0px; 
    	text-align: center;
    }
    .form-examples input { margin-bottom: 10px;}
    .the-icons {list-style: none; margin-left: 0;}
    .the-icons li {float: left; width: 25%; line-height: 25px;}
    
    /* Mobile Portrait Size to Tablet Portrait Size */
    @media only screen and  (max-width: 767px) {
    	.the-icons li {float: none; width: 100%; line-height: 25px;}	
    }
    
    /**************************************
    / Map
    **************************************/
    select,
    textarea,
    input[type="text"],
    .map {
      display: inline-block;
      height: 30px;
      padding: 4px 6px;
      margin-bottom: 9px;
      margin-right: 10px;
      margin-left: 10px;
      font-size: 14px;
      line-height: 20px;
      color: #555555;
      -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
              border-radius: 3px;
    }
    strong.start {
      margin-right: 10px;
    }
    strong.praxis {
      margin-right: 0px;
    }
    strong.kms {
      margin-right: 10px;
    }
    .suche {
      display: inline-block;
      height: 30px;
      padding: 4px 6px;
      margin-bottom: 9px;
      margin-right: 20px;
      margin-left: 48px;
      font-size: 14px;
      line-height: 20px;
      color: #555555;
      -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
              border-radius: 3px;
    }
    img.drucken
    {
      margin-bottom: 9px;
      margin-right: 20px;
      margin-left: 48px;
    
    }
    #map_canvas { width: 100%; height: 100%; border: 0px solid #333333 ; margin-top: 20px;}
    #directions {  height: 100%px; border: 0px solid #333333 ; margin: 2px; overflow: auto; width: auto; text-align: left; font-size: 9px; }
    .print { display:none; }
          #directions { width: 100%; height: auto; border: 0px solid #333333; margin: 2px; text-align: left; font-size: 9px; }
    	  
    /**************************************
    / 	  Footer
    **************************************/
    
    @media (min-width: 768px) and (max-width: 979px) {
    ul.maclass li {display: in-line;}
    }
    @media only screen and  (max-width: 767px) {
    ul.maclass li {display: block;}
    }
     
  7. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 190
    J'aime reçus:
    1
  8. seseba
    seseba Nouveau WRInaute
    Inscrit:
    16 Janvier 2015
    Messages:
    30
    J'aime reçus:
    0
    Le problème c est que ca n est pas compatible avec tout les broswer.
     
  9. concombre
    concombre Nouveau WRInaute
    Inscrit:
    14 Juillet 2014
    Messages:
    41
    J'aime reçus:
    0
    Salut,
    Tant qu'à utiliser Bootstrap autant le re-télécharger avec la grille responsive ou te construire ton propre système de grille.

    PHP:
    <span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">address class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'row text-center'</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">p class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'col-sm-6 col-md-3'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Esslingen</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">p class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'col-sm-6 col-md-3'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Richard</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">Hirschmann</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">Straße 15</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">p class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'col-sm-6 col-md-3'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">73728 Esslingen am Neckar</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">p class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'col-sm-6 col-md-3'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Tel</span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> 0711</span><span class="syntaxkeyword">/</span><span class="syntaxdefault"> 6868 41 65</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /></</span><span class="syntaxdefault">address</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault"> </span>
    Autrement tu peux mettre les "li" en display:inline-block et gérer les largeurs en pourcentage avec les media queries.

    Bonne chance !
     
  10. seseba
    seseba Nouveau WRInaute
    Inscrit:
    16 Janvier 2015
    Messages:
    30
    J'aime reçus:
    0
    Parfait! Merci!
     
Chargement...
Similar Threads - Adapter footer responsive Forum Date
Adapter les noms des catégories dans WP. URL Rewriting et .htaccess 24 Février 2018
adapter site web créer avec webacapella sur différent support Développement d'un site Web ou d'une appli mobile 2 Mai 2017
Adapter automatiquement à la résolution d'écran Débuter en référencement 8 Mars 2013
Internet mobile : adapter son site ou pas ? Développement d'un site Web ou d'une appli mobile 5 Février 2013
Annuaire Arfooo : adapter un template Wordpress Annuaires et moteurs 11 Avril 2012
Footer Random SEO ? Référencement Google Jeudi à 17:05
Stuffer keywords en pré-footer en 2020 ? Développement d'un site Web ou d'une appli mobile 12 Août 2020
Optimisation liens footer Netlinking, backlinks, liens et redirections 3 Janvier 2020
WordPress Cocon sémantique et CMS : liens menu et footer Référencement Google 18 Novembre 2019
WordPress Optim SEO - Quoi mettre dans un Footer ? Débuter en référencement 25 Octobre 2019