1
in Ordnung, so habe ich diese Portfolio-Seite, ich arbeite an und aus irgendeinem Grund sind die Spalten auf der linken Seite, Ränder auf Auto nicht funktionieren, float: keine doesn arbeite nicht. Ich habe so ziemlich alles probiert. Weiß jemand, wie man das repariert?2 Artikel Zeilen nicht zentrieren und nicht wie vorgesehen
Problem Standort in Frage: https://jsfiddle.net/p3jgjnbr/
.Logo {
font-size: 20px;
color: white;
font-family: Monospace;
-webkit-transition: all ease 0.2s;
-moz-transition: all ease 0.2s;
-o-transition: all ease 0.2s;
transition: all ease 0.2s;
}
.Intro-Nav {
margin-bottom: 50px;
}
#Logo:hover {
font-size: 20px;
color: green;
font-family: Monospace;
background-color: white;
border-color: white;
border-bottom: solid green;
}
#Navlist li {
-moz-transition: all ease 0.2s -o-transition: all ease 0.2s;
-webkit-transition: all ease 0.2s;
transition: all ease 0.2s;
font-family: Monospace;
font-size: 20px;
}
#Navlist li:hover {
background-color: green;
font-family: Monospace;
border-bottom: solid white;
}
.slight-round {
border-radius: 10px;
}
.Anon {
width: 400px;
border-radius: 200px;
}
#ImgWrap {
padding-top: 50px;
}
.About {
padding-left: 20px;
padding-bottom: 30px;
background-color: white;
margin-top: 60px;
border-left: thick solid #ff0000;
font-family: Monospace;
font-size: ?px;
}
#Portfolio {
padding-top: 50px;
}
.Projects {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#row1 div p {
max-width: 306px;
background-color: lightgrey;
border-color: lightgrey;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding-left: 5px;
}
#row2 div p {
max-width: 306px;
background-color: lightgrey;
border-color: lightgrey;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding-left: 5px;
}
#row3 div p {
max-width: 306px;
background-color: lightgrey;
border-color: lightgrey;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding-left: 5px;
}
#row1 div img {
border: lightgrey solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#row2 div img {
border: lightgrey solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#row3 div img {
border: lightgrey solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#Me {
padding-bottom: 20px;
padding-top: 50px;
}
.Background1 {
background: url("https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg") center center fixed;
background-size: cover;
height: 700px;
text-align: center;
padding-bottom: 50px;
}
.Background2 {
background: url("http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2015/12/Wind-Turbine-at-Sunset.jpg") center center fixed;
height: ?px;
text-align: center;
padding-bottom: 50px;
}
.SocialMedia {
background-color: lightgrey;
}
.SocialButtons {
padding: 30px 30px;
padding-bottom: 100px;
}
.Head1 {
display: table;
margin: 0 auto;
}
.Head1 p {
font-family: Monospace;
font-size: 25px;
padding: 0px 0px;
margin: 0px 0px;
}
.btn-circle.btn-xl {
background-position: center;
position: relative;
width: 100px;
height: 100px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 65px;
-moz-transition: all ease 0.2s;
-webkit-transition: all ease 0.2s;
-o-transition: all ease 0.2s;
transition: all ease 0.2s;
}
.btn-circle.btn-xl:hover {
width: 155px;
height: 100px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
}
.btn-circle.btn-xl:hover .btnDes {
visibility: visible;
opacity: 1;
}
.btnDes {
position: absolute;
padding-top: 45px;
font-size: 20px;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
-webkit-transition: all ease 0.2s;
-o-transition: all ease 0.2s;
-moz-transition: all ease 0.2s;
transition: all ease 0.2s;
}
.btnWrap:hover .btnDes {
visibility: visible;
opacity: 1;
}
.SocialMed {
border-bottom: solid black;
}
.CntMeBtn {
font-size: 1.7em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="Background1 container-fluid">
<div class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top Intro-Nav">
<div class="container">
<a href="#" class="navbar-brand Logo" id="Logo">
StruckCroissant
</a>
<button class="navbar-toggle slight-round" type="button" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right" id="Navlist">
<li><a href="#Me">About Me</a>
</li>
<li><a href="#Portfolio">Portfolio</a>
</li>
<li><a href="#Contact">Contact Me</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid" id="Me">
<div class="row" id="AbtRow1">
<div class="col-md-12 col-sm-12" id="ImgWrap">
<img src="http://67.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_540.png" class="Anon">
<p class="anon"></p>
</div>
</div>
<div class="row" id="AbtRow2">
<div class="col-md-12 col-sm-12">
<p class="About">
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah</p>
</div>
</div>
</div>
</div>
</div>
<div class="Background2" id="Portfolio">
<div class="container-fluid">
<div class="row row-centered" id="row1">
<div class="col-md-6 col-centered">
<img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
<p>Go ahead and guess what this picture is...Thats right! A filler!</p>
</div>
<div class="col-md-6 col-centered">
<img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
<p>Being a filler is hard sometimes, but, at least im not looking at one...Oh wait!</p>
</div>
</div>
<div class="row row-centered" id="row2">
<div class="col-md-6 col-centered">
<img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
<p>Go ahead and guess what this picture is...Thats right! A filler!</p>
</div>
<div class="col-md-6 col-centered">
<img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
<p>Being a filler is hard sometimes, but, at least im not looking at one...Oh wait!</p>
</div>
</div>
<div class="row row-centered" id="row3">
<div class="col-md-6 col-centered">
<img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
<p>If you make it to the end of these fillers i might just give you a treat!</p>
</div>
<div class="col-md-6 col-centered">
<div class="Portfolio-content">
<img src="http://questionmark.guide/wp-content/uploads/2015/04/question-mark.png" class="img-responsive">
<p>I looked in the cupboards but alas, the treats were nowhere to be found</p>
</div>
</div>
</div>
</div>
</div>
<div class="SocialMedia" id="Contact">
<div class="row">
<div class="col-md-12 SocialMed">
<div class="Head1">
<p>Contact Me</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row row-centered SocialButtons">
<div class="col-md-3 col-sm-3">
<a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-facebook fa-fw Fb CntMeBtn"></i><p class="btnDes">Facebook</p></a>
</div>
<div class="col-md-3 col-sm-3">
<a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl Fire"><i class="fa fa-fire fa-fw Fb CntMeBtn"></i><p class="btnDes">FreeCodeCamp</p></a>
</div>
<div class="col-md-3 col-sm-3">
<a href="https://www.facebook.com/arduino12345" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-linkedin fa-fw Fb CntMeBtn"></i><p class="btnDes">LinkedIn</p></a>
</div>
<div class="col-md-3 col-sm-3">
<a href="https://github.com/StruckCroissant" class="btn btn-primary btn-circle btn-xl"><i class="fa fa-github fa-fw Fb CntMeBtn"></i><p class="btnDes">Github</p></a>
</div>
</div>
</div>
</div>
</body>, wie Sie einfach alle der Platzhalter Bilder und Social-Media-Tasten ausgerichtet sind links sehen können, schätze ich jedes bisschen Hilfe. Vielen Dank!