html css resim yerleşimi hakkında cok kısa bir yardım? - Sayfa 2

26-02-2018, 15:56:07

#10

RiskForDream

Onur89TR adlı üyeden alıntı: mesajı görüntüle

Kodun önizlemesini görebileceğimiz şekilde bir siteye yüklersen daha kolay yardımcı oluruz.

nereye yukleyebılırım hocam
26-02-2018, 15:57:27

#11

Onur89TR

Kendi sitende yeni bir klasör açıp oraya yükleyebilirsin.

26-02-2018, 16:06:00

#12

Mira.Net.TR adlı üyeden alıntı: mesajı görüntüle

Kodunu at buraya bakalım bi,

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>PlayTube</title>
<!-- CSS-->
<link rel="stylesheet" href="css/framework7.ios.min.css">
<link rel="stylesheet" href="css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/ionicons.css">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<!-- Swipe Pannel -->
<div class="panel panel-right panel-reveal">
<span class="panel-title">Listeler</span>
<ul id="playlists"></ul>
</div>
<div class="views tabs">
<!-- Main view - Home -->
<div id="view-main" class="view view-main tab active">
<div class="navbar">
<div class="navbar-inner">
<div class="left back-hidden">
<a href="#" class="link back"><i class="demo-icon icon-reply"></i></a>
</div>
<div class="center"><img src="img/logo.png" alt=""></div>
<div class="right">
<a href="#" data-panel="right" class="link open-panel"><i class="demo-icon ion-navicon"></i></a>
</div>
</div>
</div>
<div class="pages navbar-fixed">
<div class="page">
<div id="content-posts" class="page-content pull-to-refresh-content infinite-scroll" data-distance="50">
<div class="pull-to-refresh-layer">
<span class="preloader"></span>
<div class="pull-to-refresh-arrow"></div>
</div>
<ul class="post-list" id="post-list"></ul>
<span id="infinite-loader" class="preloader"></span>
</div>
</div>
</div>
</div>
<!-- View About -->
<div id="view-about" class="view tab">
<div class="navbar">
<div class="navbar-inner">
<div class="center"><img src="img/logo.png" alt=""></div>
</div>
</div>
<div class="pages navbar-fixed">
<div data-page="index" class="page">
<div class="page-content">
<img class="about-banner" src="img/banner.jpg" alt="">
<img class="about-avatar" src="img/avatar.jpg" alt="">
<div class="about-content">
<div class="about-author">Xioyuna</div>
<div class="about-website"><i class="icon ion-ios-world-outline"></i><span class="about-website-text">youtube.com/username</span></div>
<div class="about-stats">
<div class="about-followers"><span class="about-count">12K</span><br /><span class="about-label">Takipçi</span></div>
<div class="about-videos"><span class="about-count">42</span><br /><span class="about-label">Video</span></div>
<div class="about-views"><span class="about-count">2.3M</span><br /><span class="about-label">izlenme</span></div>
</div>
<div class="about-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<div class="about-icons"></div>
</div>
</div>
</div>
</div>
<!-- View contact -->
<div id="view-contact" class="view tab">
<div class="navbar">
<div class="navbar-inner">
<div class="center"><img src="img/logo.png" alt=""></div>
</div>
</div>
<div class="pages navbar-fixed">
<div data-page="index" class="page">
<div class="page-content">
<h2>iletişim</h2>
<div class="form-block">
<i class="icon ion-ios-person-outline"></i>
<input id="contact-name" type="text" placeholder="Ad Soyad">
</div>
<div class="form-block">
<i class="icon ion-ios-email-outline"></i>
<input id="contact-email" type="text" placeholder="Email Adresi">
</div>
<div class="form-block">
<i class="icon ion-ios-grid-view-outline"></i>
<input id="contact-subject" type="text" placeholder="Konu">
</div>
<div class="form-block form-message">
<i class="icon ion-ios-chatbubble-outline"></i>
<textarea id="contact-message" placeholder="Mesajınız"></textarea>
</div>
<input id="contact-submit" type="submit" value="Gönder" class="submit-button">
</div>
</div>
</div>
</div>
<!-- Tab bar -->
<div id="banner"></div>
<div class="toolbar tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#view-main" class="tab-link active">
<i class="icon ion-home"></i>
</a>
<a href="#view-about" class="tab-link">
<i class="icon ion-person"></i>
</a>
<a href="#view-contact" class="tab-link">
<i class="icon ion-email"></i>
</a>
</div>
</div>
</div>
<!-- Scripts -->
<script type="text/javascript" src="js/framework7.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

CSS:

/************** Fonts **************/
@font-face {
    font-family: "Helvetica-Regular";
    src: url('../fonts/Helvetica-Regular.otf');
}
@font-face {
    font-family: "Montserrat-Light";
    src: url('../fonts/Montserrat-Light.otf');
}
@font-face {
    font-family: "Montserrat-Regular";
    src: url('../fonts/Montserrat-Regular.ttf');
}
@font-face {
    font-family: "Montserrat-SemiBold";
    src: url('../fonts/Montserrat-SemiBold.otf');
}
/************* General *************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  box-shadow: none !important;
}
body {
  font-family: "Montserrat-Regular", sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
}

p {
  font-size: 13px;
  color: #999999;
  line-height: 1.8em;
  font-family: "Montserrat-Light", sans-serif;
}
strong {
  font-family: "Montserrat-Regular", sans-serif;
}
.large-img {
  width: 100%;
  border-radius: 2px;
}
.full-width {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-top: 20px;
}
li {
  margin-bottom: 10px;
}
iframe {
  width: 100%;
  height: 190px;
}
iframe.full-width {
  height: 210px;
}
/*************** Tab Bar *************/
.toolbar::before {
  height: 0;
}
.toolbar-inner {
  background-color: #9a9a9a;
}
.toolbar-inner .icon{
  font-size: 28px;
  margin-top: 3px;
  color: #090909;
}
.toolbar-inner .active .icon{
  color: #FFF;
}
/************** Navbar *************/
.navbar-inner {
  color: #696e79;
  background-color: #9a9a9a;
}
.navbar:after {
  height: 0;
}
.navbar-inner img {
  height: 50px;
}
.navbar-inner .left a, .navbar-inner .right a{
  color: #d4dfed;
  padding: 5px 0 0 5px;
}
.navbar-inner .right a{
  font-size: 30px;
  padding-right: 7px;
  padding-left: 20px;
}
.navbar-inner .left a{
  font-size: 25px;
  margin-top: -2px;
  padding-left: 7px;
}
.navbar-inner .right, .navbar-inner .left {
  width: 50px;
  height: 40px;
}
.back-hidden {
  opacity: 0;
  transition: 0.2s;
}
.back-visible {
  opacity: 1;
  transition: 0.2s;
}
/************* All views ************/
.page {
  background-color: #FFF;
}
.page-content {
  padding-bottom: 50px;
}
/************* Main view ************/
.post-list {
  margin: 0 10px 10px 10px;
}
.post-list li {
  list-style-type:none;
  height:100px;
  width: 100%;
  margin: 10px 0 0 0;
  padding: 0 0 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.post-thumbnail {
  height:100%;
  float: left;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 2px;
}
.post-thumbnail img{
  width: 158px;
  height: auto;
  min-height: 90px;
  -o-object-fit: cover;
  object-fit: cover;
  margin-top: -15px;
}
.post-infos {
  height: 90px;
  padding-top: 3px;
}
.post-title span {
  color: #19283f;
  font-size: 16px;
  /* Overflow */
  display: -webkit-box;
  line-height: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 5px;
}
.preloader {
  margin: 20px 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.pull-to-refresh-layer .preloader{
  margin-top: -5px !important;
}
.post-date, .post-views {
  color: #b6bfca;
  font-size: 12px;
  margin-top: 2px;
  font-family: "Montserrat-Light", sans-serif;
}
.post-date i::before, .post-views i::before{
  font-size: 13px !important;
  margin-right: 4px;
  margin-top: -2px;
  line-height: 21px;
  vertical-align: middle;
}
.post-views i::before {
  margin-left: -1px;
  margin-right: 3px;
}
.post-list li:first-child {
  height: auto;
  padding-bottom: 0px;
}
.post-list li:first-child .post-thumbnail {
  height: 200px;
  float: none;
  margin-right: 0px;
}
.post-list li:first-child .post-thumbnail img{
  width: 100%;
  height: auto;
  min-height: 215px;
  margin-top: -40px;
}
.post-list li:first-child .post-infos {
  height: auto;
  padding-left: 2px;
  margin: 2px 0;
}
.post-list li:first-child .post-title {
  margin-top: 5px;
  padding: 0 5px 0 0px;
}
.post-list li:first-child .post-title span {
  -webkit-line-clamp: 1;
  margin-bottom: 2px;
}
.post-list li:first-child .post-date, .post-list li:first-child .post-views {
  display: inline-block;
  vertical-align: middle;
  height: 21px;
  line-height: 19px;
  margin-top: 0px;
}
.post-list li:first-child .post-views {
  margin-right: 10px;
}
/************ Page Post *************/
a {
  word-wrap: break-word;
}
.page-video {
  max-width: 100%;
}
.page-video-container {
  padding: 15px 20px;
  max-width: 100%;
  overflow: hidden;
}
.page-video-title {
  font-size: 18px;
  font-family: "Montserrat-SemiBold", sans-serif;
  color: #19283f
}
.page-video iframe {
  width: 100%;
  height: 220px;
}

/************ Page video ************/
.page-video-details {
  margin: 20px 0 0 0;
  height: 50px;
}
.page-video-left {
  float: left;
  margin-top: 4px;
}
.page-video-author-img {
  height: 40px;
  border-radius: 2px;
  margin-right: 8px;
}
.page-video-author {
  float: right;
  font-size: 15px;
  color: #19283f;
}
.page-video-username {
  max-width: 150px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-video-date {
  display: block;
  font-size: 12px;
  color: #b9c5d4;
  font-family: "Montserrat-Light", sans-serif;
}
.page-video-right {
  float: right;
}
.page-video-views {
  font-size: 17px;
  color: #56667b;
  display: block;
  text-align: right;
}
.page-video-progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 150px;
  height: 2px;
  margin: 4px 0 4px 0;
}
.page-video-progress::-webkit-progress-bar {
  background-color: #b9c5d4;
}
.page-video-progress::-webkit-progress-value {
  background-color: #2ca4e3;
}
.page-video-likes {
  display: block;
  text-align: right;
  color: #9aa8b8;
  font-weight: 400;
  font-size: 11px;
  font-family: "Montserrat-Light";
}
.page-video-likes .demo-icon {
  margin: 0 4px 0 16px;
  font-size: 15px;
}
.page-video-description {
  margin-top: 20px;
  display: block;
  overflow: hidden;
  border-bottom: 2px solid #cad4e0;
  padding: 0 0 30px 0;
  color: #999999;
  font-family: "Montserrat-Light";
  font-size: 13px;
}
.page-video-description a {
  color: #2ca4e3;
}
.page-video-comments-title {
  display: block;
  margin: auto;
  margin-top: -13px;
  margin-bottom: 15px;
  width: 150px;
  text-align: center;
  background-color: #FFF;
  color: #9aa8b8;
  font-family: "Montserrat-Regular";
  text-transform: uppercase;
  font-size: 11px;
}
.page-video-comments-title i {
  font-size: 20px;
  vertical-align: middle;
  margin: 0 5px 0 0;
}
.comments-list li {
  display: block;
  margin: 0 0 20px 0;
}
.comment-avatar {
  width: 40px;
  float: left;
  border-radius: 2px;
}
.comment-details {
  margin-left: 55px;
}
.comment-date {
  font-size: 12px;
  color: #b9c5d4;
  font-family: "Montserrat-Light", sans-serif;
  margin: 0 0 0 5px;
}
.comment-content {
  display: block;
  font-family: "Montserrat-Light", sans-serif;
  font-size: 13px;
  margin: 4px 0 6px 0;
  color: #999;
}
.comment-likes {
  display: block;
  color: #2ca4e3;
  font-size: 13px;
  font-family: "Montserrat-Light", sans-serif;
}
.icon-thumbs-up {
  margin-right: 4px;
}
/************* View About ***********/
.about-banner {
  width: 100%;
}
.banner {
   background:url(http://sehirdegundem.net/reklam/banner1.png) no-repeat left top;
   width:259px;
   height:147px;
   float:left;
   position:absolute;
   z-index:1;
}
.about-avatar {
  margin: 0 auto;
  display: block;
  margin-top: -35px;
  border-radius: 100px;
  border: 2px solid #fff;
  width: 60px;
}
.about-content {
  padding: 10px 15px;
  text-align: center;
  color: #19283f;
}
.about-author {
  font-size: 18px;
}
.about-website {
  font-size: 13px;
  font-family: "Montserrat-Light", sans-serif;
  color: #b9c5d4;
}
.about-website i::before {
  font-size: 18px;
  margin-right: 5px;
}
.about-stats {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 20px;
  padding: 10px 0;
  border-top: 1px solid #ced6e1;
  border-bottom: 1px solid #ced6e1;
}
.about-followers, .about-videos, .about-views {
  text-align: center;
  text-transform: uppercase;
  width: 32%;
  display: inline-block;
}
.about-count {
  font-size: 24px;
  font-family: "Montserrat-SemiBold";
}
.about-label {
  font-size: 14px;
  font-family: "Montserrat-Regular";
}
.about-description {
  font-family: "Montserrat-Light";
  color: #9b9b9b;
  max-width: 100%;
  overflow: hidden;
}
.about-icons {
  text-align: center;
  margin: 15px;
}
.about-icons .icon {
  font-size: 25px;
  margin: 0 5px;
  width: 45px;
  height: 45px;
  padding-top: 5px;
  padding-left: 1px;
  border-radius: 50px;
  color: #FFF;
  background-color: #f94c4c;
}
.ion-social-facebook {
  background-color: #4983da !important;
}
.ion-social-twitter {
  background-color: #4dcffb !important;
}
.ion-social-youtube {
  background-color: #fb5554 !important;
}
.ion-social-instagram {
  background-color: #fbc44f !important;
}
.ion-android-globe {
  background-color: #a0c4e5 !important
}
.ion-social-snapchat {
  background-color: #ffe242 !important
}
.ion-social-twitch {
  background-color: #ab75c0 !important
}
/*********** View Contact ***********/
#view-contact .page-content {
  padding: 80px 30px;
}
#view-contact h2 {
  color: #19283f;
  margin-bottom: 20px;
  text-align: center;
}
#view-contact .form-block {
  border-bottom: 1px solid #dededf;
}
::-webkit-input-placeholder {
  color: #b9c5d4;
}
::-moz-placeholder {
  color: #b9c5d4;
}
#view-contact input, #view-contact .form-message textarea  {
  border: none;
  width: calc(100% - 30px);
  padding: 20px 20px;
  font-size: 15px;
  font-family: "Montserrat-Light";
}
#view-contact .form-message textarea {
  height: 200px;
  max-width: calc(100% - 30px);
  padding: 20px 22px;
}
#view-contact i {
  width: 20px;
  font-size: 25px;
  color: #b9c5d4;
  padding: 0 5px;
}
#view-contact .ion-pound {
  font-size: 22px !important
}
#view-contact .form-message i {
  margin-top: 13px;
  float: left;
}
#view-contact .submit-button {
  background-color: #ff4e4e;
  cursor: pointer;
  margin-top: 30px;
  border-radius: 2px;
  color: #fff;
  width: 100%;
}
#view-contact .submit-button:active {
  background-color: #fb6f6f;
}
/*********** Swipe Panel ************/
.panel {
  background: #D31027; /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #e6243b , #EA384D); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #e6243b , #EA384D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #FFF !important;
  font-size: 14px;
  font-family: "Montserrat-Light", sans-serif;
}
.panel-title {
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  font-size: 12px;
  margin: 25px 0 15px 0;
}
.panel ul li {
  list-style-type:none;
  padding: 15px 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  margin-bottom: 0px;
}
.panel ul li:active {
  background-color: rgba(255, 255, 255, 0.2);
}
.panel a {
  text-decoration: none;
  color: #FFF;
}
.panel .playlist-count {
  opacity: 0.5;
  display: inline-block;
  margin-left: 3px
}
/******** No Connexion block ********/
.no-connexion {
  padding-top: 20px;
  text-align: center;
}
.no-connexion i {
  display: block;
  font-size: 50px;
}
/*********** Media Queries **********/
/* iPhone 5, 5S */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
  .post-list li:first-child {
    padding-bottom: 0px;
  }
  .post-list li:first-child .post-thumbnail {
    height: 160px;
  }
  .post-list li:first-child .post-thumbnail img{
    margin-top: -30px;
  }
  .post-list li:first-child .post-infos {
    padding-top: 5px;
  }
  .post-thumbnail img {
    width: 145px;
    height: auto;
    margin-top: -15px
  }
  .post-title span {
    font-size: 14px;
  }
  .post-infos {
    height: 90px;
    padding-bottom: 5px;
    padding-top: 0px;
  }
  .post-list li {
    height: 90px;
  }
  .page-video-views {
    font-size: 16px;
  }
  .page-video-progress {
    width: 120px;
    margin: 3px 0 3px 0;
  }
  .page-video iframe {
    height: 180px;
  }
  .page-video-username {
    max-width: 100px;
  }
  #view-contact .form-message textarea {
    height: 100px;
  }
}
/* iPhone 6 */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
  .post-list li {
    height: 100px;
  }
  .post-list li:first-child .post-thumbnail {
    height: 180px;
  }
  .post-list li:first-child .post-thumbnail img {
    margin-top: -40px;
  }
  .post-thumbnail img {
    width: 162px;
    height: auto;
    margin-top: -16px;
  }
  .post-title span {
    font-size: 15px;
  }
  .post-infos {
    height: 90px;
    padding-top: 3px;
  }
  .page-video-views {
    font-size: 17px;
  }
  .page-video-progress {
    width: 150px;
    margin: 3px 0 3px 0;
  }
  .page-video iframe {
    height: 205px;
  }
  .page-video-username {
    max-width: 130px;
  }
  #view-contact .form-message textarea {
    height: 180px;
  }
}
/* iPhone 6 Plus */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px){
  .post-list li:first-child .post-thumbnail {
    height: 210px;
  }
  .post-list li:first-child .post-thumbnail img {
    margin-top: -45px;
  }
  .page-video iframe {
    height: 220px;
    width: 100%;
  }
  .page-video-username {
    max-width: 170px;
  }
}
/* Tablets */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  .post-list li:first-child .post-thumbnail{
    height: 350px;
  }
  .post-list li:first-child .post-thumbnail img {
    margin-top: -100px;
  }
  .post-list li:first-child{
    width: calc(100% - 20px);
    display: block;
    margin-top: 20px;
    padding-bottom: 10px;
  }
  .post-list li {
    width: calc(50% - 25px);
    display: inline-block;
    margin: 10px;
    padding-bottom: 20px;
    height: 110px;
  }
  .page-video iframe {
    height: 400px;
  }
  .page-video-username {
    max-width: 250px;
  }
  .social-link {
    width: 40%;
    margin-bottom: 30px;
  }
}

@Onur89TR

26-02-2018, 16:38:22

#13

Onur89TR

Gönderdim kodları. İndirip dene bakalım.
26-02-2018, 16:39:51

#14

RiskForDream

Onur89TR adlı üyeden alıntı: mesajı görüntüle

Gönderdim kodları. İndirip dene bakalım.

hocam link açılıyor ama dosyayı ındır dedıgımde ındırmıyor baska bı yere upload sansınız var mı
26-02-2018, 16:46:40

#15

Onur89TR

Attım tekrar.
28-02-2018, 21:16:13

#16

Misafir

ne ozel resimmis