@Sandro_s

Почему текст footer в пределах основного текста? Как его спустить вниз?

index.html
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>Lending</title>

    <!-- Favicon -->
    <link rel="icon" href="img/core-img/favicon.ico">

    <!-- Core Stylesheet -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Responsive CSS -->
    <link href="css/responsive/responsive.css" rel="stylesheet">


    <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/select2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/animate.css">



    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>
    <!-- ***** Header Area Start ***** -->
    <div class="karkas">
        <div class="header">
            <!-- ***** Header Area End ***** -->

            <div class="section-table">
                <div class="section-row">
                    <div class="section-cell">
                        <div class="section-center">
                            <p class="logo">
                                <a href="#"><img class="logo" src="images/logo.jpg" alt="Company name" /></a>
                                <ul class="menu">
                                    <li><a href="#">Aktuelles</a></li>
                                    <li><a href="#">Philosophie</a></li>
                                    <li><a href="#">Besonderheiten </a></li>
                                    <li><a href="#"> Partner</a></li>
                                    <li><a href="#">Kontakt</a></li>
                                    <li><a href="#">Impressum</a></li>
                                </ul>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="main-content-img">
                    <img src="images/content-img.jpg" alt="" />




                </div>
            </div>
        </div>






        <div class="main-content">






            <!-- ****** Welcome Area Start ****** -->
            <section class="caviar-hero-area" id="home">
                <!-- Welcome Social Info -->
                <div class="welcome-social-info">
                    <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                </div>
        </div>
        </section>


        <!-- ****** About Us Area Start ****** -->
        <section class="caviar-about-us-area section-padding-150" id="about">
            <div class="container">
                <!-- About Us Single Area -->
                <div class="row align-items-center">



                    <div class="row">
                        <div class="col-md-6 wow fadeInDown">
                            <div class="content-left">
                                <h1>Sehr geehrte Patienten,</h1>

                                <p>wir freuen uns, dass Sie sich für unsere Praxis für moderne Zahnheilkunde interessieren – herzlich willkommen!</p>

                                <p>Die <a href="#"> Homepage </a> soll. Ihnen einen ersten Einblick in das Leistungsspektrum und die Behandlungsphilosophie vermitteln. Es wird Sie interessieren, wie schonend und sorgsam ein Zahnarztbesuch sein kann.</p>

                                <p>Sie sind herzlich eingeladen, sich bei einem Besuch in meiner Praxis mit ihren Fragen und Wünschen anzuvertrauen.</p>
                                <p>Ihre Dr. Dr. Günther Chmelitschek und Dr. Thomas Chmelitschek</p>
                            </div>
                        </div>




                        <div class="col-md-6 wow fadeInDown">
                            <div class="rigth-bar">
                                <h1 class="size">Sprechzeiten</h1>

                                <p class="font">Zahnarztpraxis Dr. Dr. Chmelitschek <br/> Stollstr. 6 <br/> 83022 Rosenheim</p>

                                <p>Mo-Fr von 08:00-18:00 Uhr <br/> und nach Vereinbarung</p>
                            </div>
                        </div>

                    </div>
                    <!--row-->



        </section>
        </div>
        <!--carcas-->



        <footer>
            <div class="container">

                <span class="foot">Zahnarztpraxis Chmelitschek © 2018</span>

            </div>
        </footer>



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/validator.min.js"></script>
        <script src="js/select2.full.min.js"></script>
        <script src="js/wow.min.js"></script>
        <script src="js/scripts.js"></script>

</body>

</html>


Style.css
*{
	padding:0; 
}



img{
	max-width: 100%;
	height: auto;
	border:none;
}
section{
	position: relative;
}

body {
	background:#f5f5f5; url(images/body-bg.jpg) top  repeat-x; font:12px Arial; color:#555555;
	line-height:1.3; 
}

a{
	color:#9dc5f0;
}

a:hover{
	text-decoration:none;
}
h1{ font: normal 24px 'Times New Roman'; margin-bottom:20px;
	}
h2 {
	font: normal 20px 'Times New Roman'; margin-bottom:20px;
}
h3 {
 font: normal 18px 'Times New Roman'; margin-bottom:20px;
 }	

.row{
	
}	
.size {
  font-family:Georgia, 'Times New Roman', Times, serif;
}

.karkas {
	width:755px; margin:0 auto;
}
.header{
	padding:30px 0 0 0; margin-bottom: 20px;
	height: 100%;
	min-height: 500px;
}
.logo{
	margin:0 auto 20px auto; display: block;
}

.menu{
	list-style:none; background:#fff; font-size:14px; font-weight:bold; overflow:hidden;
	border-left:1px solid #f3f3f3;
	border-top:1px solid #f3f3f3;
	border-right:1px solid #f3f3f3;
	border-bottom:1px solid #9dc5f0;
	position: centre;
	
	

}



.menu li{
	float:left; border-left:1px solid #f3f3f3; padding:8px 25px;
}
menu li:fist-child{
	float:left; border-left:none; #f3f3f3; padding:8px 25px;
}
.menu li a {
	color:#5f5d67; text-decoration:none;
}
.menu li a:hover{
	 text-decoration:underline; color:#9dc5f0;
}

.main-content{
	/*overflow:hidden;*/
}

 
.main-content p{
	margin-bottom:20px;
}
.main-content{
	margin-bottom:0px;
	img{
	max-width: 100%;
	height: auto;
	
	
}
	}

.main-content-img {
	position: centre;
}
	
	

#speakers{
	padding: 15px 0;
	border-bottom: 2px solid #f0f0f1;
}

#speakers h2{
	color: #828689;
}
.large{
	color: #828689;
	font-size: 22px;
	margin-bottom: 20px;
}

.content-left{
	background: #fff; padding:30px;  width:420px; height: 300px; float:left;
}
.rigth-bar{
	background: #fff; width:230px; height: 300px; padding:30px 10px 30px 25px; float:left;
	font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:13px ;
	
}

.right-bar .size {
 /* font-family:Georgia, 'Times New Roman', Times, serif;*/
}


.footer { 
	
    
	/*margin:100px;*/
	text-align: left; 
	
	
	
	
}
.footer span {
	/*position: absolute;*/
	/*left: 70px;*/
	

	color: #b4b3b7
	
	
}


@media all and (-webkit-min-device-pixel-ratio:0) {
  
 .foot {
   position:relative;
left:200px; color: #b4b3b7  /* для Chrome и Safari */
   }

}
/*@-moz-document url-prefix() {p {color: #f00;}}*/

/*.foot, x:-moz-any-link {
position:relative;
left:200px;
    padding:30px 20 20 20; color: #b4b3b7; text-align: left;/* для Firefox и IE7 */
 /* }
  
  /* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	#speakers,
	{
		padding: 20px 0;
	}
	
	/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	
}

@media only screen and (max-width : 600px) {
	#header{
		min-height: 300px;
	}
	.section-center{
		max-width: 320px;
	}
	
	#header h1{
		font-size: 20px;
	}
	
	
}

* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
	.row-item{
		margin-top: 10px;
	}
}
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ответы на вопрос 1
@vardoLP
Ват ю сэй эбаут май мама?!
вот этот парень тут лишний :)
5c034e1506f4b115604043.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы