Как сделать мой сайт адаптивным - текст таблицы идет поверх друг друга - PullRequest
Новая
       1

Как сделать мой сайт адаптивным - текст таблицы идет поверх друг друга

0 голосов
/ 22 января 2019

Я боролся с моим сайтом, когда дело касалось того, чтобы сделать его отзывчивым.У меня есть раздел div, который содержит таблицу (Awesome Clients), и когда я сжимаю браузер, текст идет поверх друг друга.Это происходит только в этом разделе, поэтому мне нужна ваша помощь.Я пытался использовать медиа-запросы, и я до сих пор не могу понять это.Может кто-нибудь показать мне, как заставить все реагировать?

PS Мне также нужна помощь с заголовком и его адаптацией, поэтому, если у кого-то есть идеи, дайте мне знать . 

body {
	margin: 0;
	padding: 0;
	background: radial-gradient(80% 40%, white, #cccccc);
}

header{
	overflow: hidden;
	height: 450px;
	display: block;
	margin: 0;
}

nav {
	width: 100%;
	height: 50px;
	background-color: rgba(192,192,192,0.3);
	margin: auto;
}


.wtf {
	padding-right: 50px;
	position: relative;
	bottom: 3px;
}

#logo {
	float: left;
	color: white;
	font-family: 'Concert One', cursive;
	padding-left: 20px;
}

p {
	margin: 0;
	padding: 0;
	text-align: center;
}

p.highlight {
	margin: 0;
	position: relative;
	bottom: 7px;
	cursor: pointer;
}

.learnMore {
	width: 13%;
	margin: 0 auto;
	cursor: pointer;
}

.learnMore h3:hover {
	background-color: #ddd;
  	color: black;
}

.learnMore h3 {
	border: 1px solid white;
	padding: 5% 15%;
}

ul {
	float:right;
}

li {
	display: inline;
	padding: 0 10px 0 10px;
	text-align: center;
}

a {
	text-decoration: none;
	color: white;
	font-size: 21px;
	margin: 0 0 3px 0;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
}

li a:hover {
  background-color: #ddd;
  color: black;
}

.image {
	background-image: url('nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg');
}

.main {
	width: 100%;
	height: 400px;
	color: white;
	text-align: justify;
	font-family: 'Montserrat', sans-serif;

}

.main p,h1,h3 {
	text-align: center;
	position: relative;
}

.main h1 {
	top: 100px;
	font-size: 50px;
}

.main h3 {
	top: 90px;
}

.main p {
	top: 90px;
	left: 210px;
	text-align: center;
	font-size: 20px;
}

.img1 {
	width: 210px;
	height: 210px;
	filter: opacity(50%);
	padding-left: 10px;
}

.img2 {
	width: 220px;
	height: 220px;
	filter: opacity(50%);
	padding-right: 10px;
}

.smallimg {
	width: 50px;
	height: 50px;
	border: 3px solid black;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
	padding: 3px;
	color: black;
}

table {
	margin: 35px 27% 35px 27%;
	padding-bottom: 15px;
	padding-top: 15px;
	border-spacing: 15px;
}

.table1 {
	margin: 10px 26% 10px 26%;
	border-spacing: 5px;
}

td {
	color: #595959;
	font-size: 15px;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
}

.theading {
	font-size: 40px;
	font-family: 'Yatra One', cursive;
	text-align: left;
}

.theading2 {
	font-size: 40px;
	font-family: 'Yatra One', cursive;
	text-align: right;
}

.alfaromeo {
	font-family: 'Rubik', sans-serif;
	font-size: 15px;
	text-align: center;
}

.opinions {
	width: 100%;
	height: 450px;
	background-color: rgba(255, 148, 77, 0.5);
}

.opinions h3 {
	color: snow;
	text-align: center;
}

.clients h1 {
	margin-top: 50px;
	padding-top: 40px;
	text-align: center;
	font-size: 35px;	
	font-family: 'Montserrat', sans-serif;
	text-shadow: 1px 1px 3px #000000;
	color: snow;
}

.clients h3 {
	text-align: center;
	bottom: 10px;
	font-size: 14px;	
	font-family: 'Montserrat', sans-serif;
}

.person1 {
	width: 100px;
	height: 100px;
	border: 1px solid grey;
	border-radius: 100%;
	margin-right: 20px;
	color: snow;
	overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.person2 {
	width: 100px;
	height: 100px;
	border: 1px solid grey;
	border-radius: 100%;
	margin-right: 20px;
	color: snow;
	overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.clientsTable {
	margin: 35px 27% 35px 27%;
	position: relative;
	padding-bottom: 5px;
}

.sayHello {
	width: 100%;
	height: 620px;
	background-color: #99ccff;
}

.sayHello div {
	margin: 0px 27% 0px 27%;
	padding-top: 40px;
}

.sayHello p {
	padding-top: 40px;
	color: snow;
	font-family: 'Montserrat', sans-serif;
	font-size: 50px;
}

.sayHello h3 {
	color: snow;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	width: 65%;
	text-align: left;
	float: left;
}

.sayHello table {
	float: left;
	border-spacing: 20px;
	color: snow;
	position: relative;
	bottom: 20px;
	overflow: hidden;
}

.sayHelloTable img {
	width: 30px;
	height: 30px;
	border: 2px solid black;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
	padding: 3px;
	background-color: snow;
}

.sayHelloTable td {
	color: snow;
}

.contactForm {
	border-radius: 7px;
  	background-color: snow;
  	padding: 20px;
  	float: right;
  	width: 200px;
  	height: 300px;
  	position: absolute;
  	left: 650px;
}

form {
	width: 180px;
	height: 350px;
}

input[type=text], select, textarea {
 	width: 100%;
  	padding: 12px;
  	border: 1px solid #ccc;
  	border-radius: 4px;
 	margin-top: 6px;
 	margin-bottom: 16px;
 	resize: none;
}

label {
    font: normal 12px 'Montserrat', sans-serif !important;
}

footer {
	position: absolute;
	color: white;
	text-align: center;
	width: 100%;
	height: 50px;
	background-color: rgba(153, 204, 255, 0.8);
	border-top: 1px solid snow;
}

.copyright {
	font-size: 20px;
	font-family: 'Concert One', cursive;
	text-align: center;
	margin: 0px 27% 0px 27%;
	padding-top: 10px;
}


/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
		
		.clientsTable {
			width: 60%;
			margin: 0 auto;
			position: relative;
			padding-bottom: 20%
		}

		.opinions {
			width: 100%;
			height: 450px;
			margin: 0 auto;
			position: relative;
}
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

		.clientsTable td {
			width: 60%;
			margin: 0 auto;
			padding-bottom: 20%
		}
}

/* Landscape phones nad portrait tablets*/

@media (max-width: 767px) {
		.clientsTable {
			width: 60%;
			margin: 0 auto;
			padding-bottom: 20%
		}
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Упражнение</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" integrity="sha384-+0VIRx+yz1WBcCTXBkVQYIBVNEFH1eP6Zknm16roZCyeNg2maWEpk/l/KsyFKs7G" crossorigin="anonymous">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/fontawesome.css" integrity="sha384-jLuaxTTBR42U2qJ/pm4JRouHkEDHkVqH0T1nyQXn1mZ7Snycpf6Rl25VBNthU4z0" crossorigin="anonymous">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Yatra+One" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
</head>

<body>

<header>
	<div class="image">
     <nav>
     	<div id="logo">
     	<h1><p class="highlight">A|Developing</p></h1>
    	</div>
    	
    	<div class="wtf">
    	<ul> 
    		<li class="current">
    			<a href="#">Home</a>
    		</li>
    		<li>
    			<a href="#">Services</a>
    		</li>
    		<li>
    			<a href="#">Clients</a>
    		</li>
    		<li>
				<a href="#">Team</a>
    		</li>
    		<li>
    			<a href="#">Contact</a>
    		</li>
    	</ul>
    	</div>
    </nav>
	
	<div class="main">
		<p>Can you build the website of my dreams?</p>
		<h1>YUP, WE CAN DO THAT.</h1>
		<section class="learnMore"><h3>Learn More</h3></section>
	</div>
	</div>
</header>

	<table align="center">
		<tr>
			<td class="theading"><font color="black">Web <b>Development</b></font></td>

		</tr>
		<tr>
			<td style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin. Pellentesque posuere iaculis neque, sit amet convallis neque convallis quis.
		<br><br><br>
			Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
			<td><img class="img1" src="search.png" width="150" height="150" align="right"></td>
		</tr>
	</table>

	<table align="center"  class="table1">
		<tr>
			<td class="theading2" colspan="2"><font color="black">Identity <b>Branding</b></font></td>
		</tr>
		<tr>
			<td><img class="img2" src="wireless-connection-free-technology-icons-174546.png" width="150" height="150" align="right"></td>
			<td style="text-align: right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin. Pellentesque posuer  e iaculis neque, sit amet convallis neque convallis quis.
		<br><br><br>
			Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
		</tr>
		<br><br>
	</table>

	<table>
		<tr>
			<td rowspan="2"><img class="smallimg" src="businessman.png"></td>
			<td class="alfaromeo"><b>Branding & Identity</b></td>
			<td rowspan="2"><img class="smallimg" src="un-anniversaire-assez-remarqu--dans-le-monde-du-web-celui-des-20-ans--16.png"></td>
			<td class="alfaromeo"><b>Web & Graphic Design</b></td>
		</tr>
		<tr>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.  
		</tr>

		<tr>
			<td rowspan="2"><img class="smallimg" src="Mobile-Smartphone-Tablet-icon.png"></td>
			<td class="alfaromeo"><b>Mobile App Development</b></td>
			<td rowspan="2"><img class="smallimg" src="005399d32e87304799aa0f1ae8f47159.png"></td>
			<td class="alfaromeo"><b>Animations</b></td>
		</tr>
		<tr>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. 
		</tr>

		<tr>
			<td rowspan="2"><img class="smallimg" src="star-png-star-png-image-2156.png"></td>
			<td class="alfaromeo"><b>UI/UX</b></td>
			<td rowspan="2"><img class="smallimg" src="black-camera-logo-icon-download-4.png"></td>
			<td class="alfaromeo"><b>Photography</b></td>
		</tr>
		<tr>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. 
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. 
		</tr>
	</table>

	<div class="opinions">
		<div class="clients">
			<h1>Awesome</font> <b>Clients</b></h1>
			<h3>See some nice things our clients said about us.</h3>
		</div>

		<table class="clientsTable" style="height: 50%;">
		<tr>
			<td style="width: 20%"><img class="person1" src="v9Y4ptj.jpg"></td>
			<td style="width: 60%"><font color="snow">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.</font></td>
		</tr>

		<tr>
			<td colspan="2" style="width: 60%"><font color="snow">Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Aenean nec ullamcorper nisi, a sodales lorem.</font></td>
			<td style="width: 20%"><img class="person2" src="Mityo-Pishtova-01.jpg"></td>
		</tr>
		</table>
	</div>

	<div class="sayHello">
		<div>
		
			<p>Say <b>Hello</b></p>
			<br>
			<h3>Don't be shy, drop us an e-mail and say hello! We are a really nice 
				bunch of people. :)</h3>

		</div>

		<table class="sayHelloTable">
			<tr>
				<td><img src="phone.png"></td>
				<td>(416)555-0000</td>
				<td><img src="e-mail-logo.png"></td>
				<td>hello@adeveloping.com</td>
			</tr>

			<tr>
				<td><img src="twitter.png"></td>
				<td>@NAKATA</td>
				<td><img src="facebook.png"></td>
				<td>@NAKATA</td>
			</tr>

			<tr>
				<td><img src="80-google-plus-512.png"></td>
				<td>naskuuu123@gmail.com</td>
				<td><img src="pinterest-logo-E994F3A9FB-seeklogo.com.png"></td>
				<td>/NAKATA</td>
			</tr>
		</table>

		<div class="contactForm">
  			<form action="/action_page.php">
   			 	<label for="fname">First Name</label>
    			<input type="text" id="fname" name="firstname" placeholder="Your name..">

    			<label for="lname">Last Name</label>
    			<input type="text" id="lname" name="lastname" placeholder="Your last name..">

    			<label for="subject">Subject</label>
   				 <textarea id="subject" name="subject" placeholder="Write something.." style="height:50px"></textarea>

    			<input type="submit" value="Submit">
  			</form>
  			
		</div>
	</div>
	
	<footer>
		<p class="copyright">&copy; 2019 Made by Atanas Ivanov &diams; A|Developing</p>
	</footer>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 22 января 2019 
nav {

padding:0 10px;
width: 100%;
height: 50px;
background-color: rgba(192,192,192,0.3);
margin: auto;
display: flex;
float: left;
justify-content: space-between;
align-items: center;

}

Здесь я сделал свою версию вашего header / main JSFiddle

Надеюсь, это даст вам определенное представление о том, как сделать элементы отзывчивыми.Этот пример - только один из способов сделать это.

0 голосов
/ 22 января 2019

В ряде постов, приведенных выше, будут исправлены некоторые проблемы с макетом, с которыми вы сталкиваетесь, но если вы хотите научиться правильно создавать адаптивные веб-сайты (а не просто вставить несколько дыр в этот веб-сайт в частности), то прежде всего вам следует прекратить использовать tables для чего-либо, кроме табличных данных. Вы, кажется, используете тег table выше для общих целей макета, который действительно ограничивает общую адаптивность, удобство обслуживания и оптимизируемость веб-сайта.

Для создания макетов сетки вы должны использовать div теги и CSS, а не таблицы, например: 

<table>
    <tr>
        <td>This is a grid item</td>
        <td>This is another one!</td>
    </tr>
</table>

становится: 

<div class="column">
    <div class="row">This is a grid item</div>
    <div class="row">This is another one!</div>
</div>

И добавьте в CSS что-то вроде: 

@media (min-width: 768px) {
    .column {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

В качестве альтернативы, если вам требуется поддержка старых браузеров, вы можете float строки вместо использования объявления css float: left/right. Объявление CSS grid поддерживается во всех вечнозеленых браузерах, но полностью не в IE11 и не ниже (IE10-11 имеет некоторую поддержку, но чертовски глючит).

Конечно, вы можете использовать CSS, чтобы сделать table крах, например: 

@media (max-width: 767px) {
    table {
        display: block;
    }
}

Но с этим связано множество проблем (особенно при оптимизации для технологии чтения с экрана) и ряд ошибок в различных браузерах.

Короче говоря, не используйте таблицы для макетов - используйте их только для табличных данных (таких как таблица ингредиентов). Это самая большая оптимизация, которую вы можете сделать, чтобы сделать ваш сайт действительно адаптивным.

0 голосов
/ 22 января 2019

Я проверил ваш код, я думаю, что я исправил вашу проблему.Добавьте приведенный ниже код в style.css, если у вас возникнут какие-либо проблемы, прокомментируйте его ниже. 

.main p { display: inline-block;}
...