Merhabalar, bu problemi çözmek için bayağı uğraştım ama sorunu çözemedim. Flex özelliğindeki eleman yüzünden site akışın dışına çıkıyor.
Sitenin temel hali böyle, ama bir sorun var. Yukarıdaki fotoğrafın alt kısmında sürükleme çubuğu var. Sürükleyince ise şöyle oluyor:
Buna neden olan eleman ise aşağıdaki fotoğrafttaki alttaki eleman. Flex özelliğinde ve margin-left değeri verilince siteyi taşırıyor.
Gözden kaçırdığım bir şey yok. Tekrar tekrar baktım. Düşünüyorum ama bir türlü çözümünü bulamıyorum. Bilmediğim bir şey olduğunu tahmin ediyorum.
Eklemek isterim sitenin iskeleti şu şekilde:
Başka bir bilgi veya dosya lazımsa söyleyin lütfen.
Technopat - Google Drive
Fotoğraflarla beraber dosyalar.
Sitenin temel hali böyle, ama bir sorun var. Yukarıdaki fotoğrafın alt kısmında sürükleme çubuğu var. Sürükleyince ise şöyle oluyor:
Buna neden olan eleman ise aşağıdaki fotoğrafttaki alttaki eleman. Flex özelliğinde ve margin-left değeri verilince siteyi taşırıyor.
Gözden kaçırdığım bir şey yok. Tekrar tekrar baktım. Düşünüyorum ama bir türlü çözümünü bulamıyorum. Bilmediğim bir şey olduğunu tahmin ediyorum.
[CODE lang="css" title="Genel.css"]* {
margin: 0px;
font-family: 'Work Sans', sans-serif;
font-weight: lighter;
}
body {
background-color: #2F3036;
}
nav {
display: flex;
position: sticky;
background-color: #2F303F;
opacity: 0.97;
height: 40px;
text-align: center;
align-items: center;
justify-content: center;
top: 0;
}[/CODE]
[CODE lang="html" title="technopat.html"]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Genel.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap" rel="stylesheet">
<title>rA9</title>
<style>
article {
color: ghostwhite;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 100px;
}
ul li a {
display: block;
text-decoration: none;
color: #d6d6d6;
font-family: 'Palanquin', sans-serif;
font-weight: lighter;
word-spacing: 5px;
min-width: 150px;
text-align: center;
}
ul li a:hover {
color: white;
transition: 500ms;
}
ul li {
list-style: none;
display: inline-block;
margin-right: 1px;
padding: 0px 20px;
}
#HeadImage {
background-image: url(img/AnimatedMicrochip2.gif);
background-size: cover;
background-position: center;
width: 100%;
height: 940px;
}
#HeadTitle {
color: ghostwhite;
font-family: 'Major Mono Display', monospace;
font-size: 100px;
display: inline-block;
position: relative;
font-weight: lighter;
margin: 20px;
}
#Logo {
text-align: left;
color: #d6d6d6;
font-family: 'Major Mono Display', monospace;
font-weight: bold;
text-decoration: none;
font-size: 20px;
}
#Logo:hover {
color: white;
transition: 500ms;
}
.Flex {
display: flex;
margin-top: 80px;
font-weight: lighter;
width: 100%;
margin-bottom: 300px;
}
.ArticleHeader {
display: inline-block;
margin-bottom: 40px;
font-size: 70px;
}
.ArticleText {
font-size: 24px;
}
.FirstArticle {
width: 40%;
}
.SecondArticle {
margin-left: 50px;
width: 40%;
}
</style>
</head>
<body>
<header>
<div id="HeadImage">
<h1 id="HeadTitle">
asd
</h1>
</div>
</header>
<nav>
<span><a id="Logo" href="MainMenu.html">asdf</a></span>
<ul>
<li><a href="NotFound.html">asdf</a></li>
<li><a href="NotFound.html">asdf</a></li>
<li><a href="#nedir">asdf/a></li>
<li><a href="NotFound.html">asdf</a></li>
</ul>
</nav>
<article>
<div class="Flex">
<div class="FirstArticle" id="nedir">
<p class="ArticleHeader">
asdfas
</p>
<p class="ArticleText">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta assumenda nobis eos aspernatur totam animi, nam, magni, voluptates esse ullam ea laboriosam veritatis repudiandae sed consequuntur vero repellendus placeat deserunt?
</p>
</div>
<div class="SecondArticle">
<img style=" width: 600px; border-radius: 5px;" src="img/anakart.gif" alt="Anakart">
</div>
</div>
<div style="" class="Flex">
<div class="FirstArticle">
<h2 class="ArticleHeader">
asdfs
</h2>
<p class="ArticleText">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. At quo nesciunt sed labore corrupti voluptatum corporis culpa iure necessitatibus. Impedit culpa tenetur repellat dolore, architecto eum tempora laborum quasi? Eum.
</p>
</div>
<div class="SecondArticle">
<a href=""><img style="width: 500px; border-radius: 5px;" src="img/HDD Gif.gif" alt="Sabit Disk"></a>
</div>
</div>
<div class="Flex">
<div class="FirstArticle" id="nedir">
<h2 class="ArticleHeader">
asdf
</h2>
<p class="ArticleText">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit unde quisquam ut doloremque similique repudiandae voluptatem recusandae, est fugit veritatis, magni omnis, officia incidunt cupiditate vero nobis sint dolores enim?
</p>
</div>
<div class="SecondArticle">
<a href=""><img style=" width: 650px; border-radius: 5px;" src="img/spinning-donut-featured.gif" alt="ASCII Donut">
</a>
</div>
</div>
<div style="margin-left: 27%;" class="Flex">
<div class="FirstArticle">
<h2 class="ArticleHeader">
Ddsgyf
</h2>
<p class="ArticleText">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo amet adipisci asperiores dicta consequuntur id rem porro? Doloremque quisquam facere assumenda excepturi tenetur in iure nisi corporis, quas illum omnis.
</p>
</div>
<div class="SecondArticle">
<a href=""> <img style="width: 500px; border-radius: 5px;" src="img/donate_dribbble.gif" alt="Sabit Disk"></a>
</div>
</div>
</article>
</body>
</html>[/CODE]
margin: 0px;
font-family: 'Work Sans', sans-serif;
font-weight: lighter;
}
body {
background-color: #2F3036;
}
nav {
display: flex;
position: sticky;
background-color: #2F303F;
opacity: 0.97;
height: 40px;
text-align: center;
align-items: center;
justify-content: center;
top: 0;
}[/CODE]
[CODE lang="html" title="technopat.html"]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Genel.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap" rel="stylesheet">
<title>rA9</title>
<style>
article {
color: ghostwhite;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 100px;
}
ul li a {
display: block;
text-decoration: none;
color: #d6d6d6;
font-family: 'Palanquin', sans-serif;
font-weight: lighter;
word-spacing: 5px;
min-width: 150px;
text-align: center;
}
ul li a:hover {
color: white;
transition: 500ms;
}
ul li {
list-style: none;
display: inline-block;
margin-right: 1px;
padding: 0px 20px;
}
#HeadImage {
background-image: url(img/AnimatedMicrochip2.gif);
background-size: cover;
background-position: center;
width: 100%;
height: 940px;
}
#HeadTitle {
color: ghostwhite;
font-family: 'Major Mono Display', monospace;
font-size: 100px;
display: inline-block;
position: relative;
font-weight: lighter;
margin: 20px;
}
#Logo {
text-align: left;
color: #d6d6d6;
font-family: 'Major Mono Display', monospace;
font-weight: bold;
text-decoration: none;
font-size: 20px;
}
#Logo:hover {
color: white;
transition: 500ms;
}
.Flex {
display: flex;
margin-top: 80px;
font-weight: lighter;
width: 100%;
margin-bottom: 300px;
}
.ArticleHeader {
display: inline-block;
margin-bottom: 40px;
font-size: 70px;
}
.ArticleText {
font-size: 24px;
}
.FirstArticle {
width: 40%;
}
.SecondArticle {
margin-left: 50px;
width: 40%;
}
</style>
</head>
<body>
<header>
<div id="HeadImage">
<h1 id="HeadTitle">
asd
</h1>
</div>
</header>
<nav>
<span><a id="Logo" href="MainMenu.html">asdf</a></span>
<ul>
<li><a href="NotFound.html">asdf</a></li>
<li><a href="NotFound.html">asdf</a></li>
<li><a href="#nedir">asdf/a></li>
<li><a href="NotFound.html">asdf</a></li>
</ul>
</nav>
<article>
<div class="Flex">
<div class="FirstArticle" id="nedir">
<p class="ArticleHeader">
asdfas
</p>
<p class="ArticleText">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta assumenda nobis eos aspernatur totam animi, nam, magni, voluptates esse ullam ea laboriosam veritatis repudiandae sed consequuntur vero repellendus placeat deserunt?
</p>
</div>
<div class="SecondArticle">
<img style=" width: 600px; border-radius: 5px;" src="img/anakart.gif" alt="Anakart">
</div>
</div>
<div style="" class="Flex">
<div class="FirstArticle">
<h2 class="ArticleHeader">
asdfs
</h2>
<p class="ArticleText">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. At quo nesciunt sed labore corrupti voluptatum corporis culpa iure necessitatibus. Impedit culpa tenetur repellat dolore, architecto eum tempora laborum quasi? Eum.
</p>
</div>
<div class="SecondArticle">
<a href=""><img style="width: 500px; border-radius: 5px;" src="img/HDD Gif.gif" alt="Sabit Disk"></a>
</div>
</div>
<div class="Flex">
<div class="FirstArticle" id="nedir">
<h2 class="ArticleHeader">
asdf
</h2>
<p class="ArticleText">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit unde quisquam ut doloremque similique repudiandae voluptatem recusandae, est fugit veritatis, magni omnis, officia incidunt cupiditate vero nobis sint dolores enim?
</p>
</div>
<div class="SecondArticle">
<a href=""><img style=" width: 650px; border-radius: 5px;" src="img/spinning-donut-featured.gif" alt="ASCII Donut">
</a>
</div>
</div>
<div style="margin-left: 27%;" class="Flex">
<div class="FirstArticle">
<h2 class="ArticleHeader">
Ddsgyf
</h2>
<p class="ArticleText">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo amet adipisci asperiores dicta consequuntur id rem porro? Doloremque quisquam facere assumenda excepturi tenetur in iure nisi corporis, quas illum omnis.
</p>
</div>
<div class="SecondArticle">
<a href=""> <img style="width: 500px; border-radius: 5px;" src="img/donate_dribbble.gif" alt="Sabit Disk"></a>
</div>
</div>
</article>
</body>
</html>[/CODE]
Eklemek isterim sitenin iskeleti şu şekilde:
Başka bir bilgi veya dosya lazımsa söyleyin lütfen.
Technopat - Google Drive
Fotoğraflarla beraber dosyalar.
Son düzenleme:
