CSS 3-колоночный сайт, масштабирование искажает макет
Я очень плохо знаком с CSS и программированием в целом, поэтому извините, если это очевидно, я не знаю, о чем говорю.
Я создал 3-колоночный веб-сайт с использованием CSS, и он сильно зависит от атрибута «float» для левой и правой колонок. Тем не менее, я думаю, что из-за этого всякий раз, когда увеличение или уменьшение масштаба страницы сильно искажается.
Вот страница, уменьшенная на 90%:
Вот PHP:
<!DOCTYPE html>
<html>
<head>
<title>Gang Fight Collective</title>
<link href="/style.css" rel="stylesheet">
</head>
<body>
<!-- HEADER -->
<div id="header">
<a href="/"><img src="/img/misc/pokebattle300.jpg" alt="logo"></a><p>
</div>
<!-- LATEST UPDATE -->
<div id="parent">
<div id="update-left">latest update:</div>
<div id="colwrap">
<div id="update-right"><b>1/05/16</b></div>
</div>
</div>
<!-- BODY -->
<div id="biggysmalls">
<div id="leftside"><a href="#">Blog</a> <p><a href="#">Contact</a> <p><a href="/wp">SBboard Archive</a> <p> <a href="/sbboard">Top Secret</a></div>
<div id="colwrap">
<div id="rightside">RSS Feed <p> <a href="#">Significant Project</a> <p> <a href="#">Significant Project</a></div>
<div id="main"><a href="#latestproject"><img src="/img/site/transparent.png" height="460px" width="650px"></a></div>
</div>
</div><!-- ARCHIVE -->
<p>
<div id="arch">
<b><u>former projects</u></b><br>
Archive Here
</div>
<!-- FOOTER -->
<p>
<div id="footer">© 2016 <img src="/img/sbboard/paul_sig.png" alt="Colin Buffum">
</div>
</body>
</html>
Вот CSS:
a:link
{
color: #e00;
text-decoration: none;
}
a:visited
{
color: #e00;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
body
{
font-family: "Courier New", Courier, monospace;
font-size:1em;
margin: 0px;
padding: 0px;
}
html{ font-size:100%; }
/* Header and Logo */
#header {
text-align:center;
}
/* The Update Bar */
#update-left {
float: left;
}
#update-right {
text-align: right;
float: right;
}
#parent {
margin-left: auto;
margin-right: auto;
height: 18px;
width: 580px;
}
#colwrap{overflow:hidden; }
/* You Know What It Is */
#biggysmalls {
width: 950px;
margin-left: auto;
margin-right: auto;}
/* Left Sidebar */
#leftside {
text-align: center;
width: 150px;
float: left;
}/* Right Sidebar */
#rightside {
width: 150px;
float: right;
text-align:center;
}/* The Big Image */
#main {
width: 650px;
background-image: url("/img/site/filler/silk1.jpg");
background-size: 100% auto;
background-position: center;
-webkit-border-radius: 48px; font-size: 0; -moz-border-radius: 48px; border-radius: 48px;
}/* Archive */
#arch {
width: 650px;
margin-left: auto;
margin-right: auto;
text-align:center}
/* Footer */
#footer {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align:center
}
Спасибо за просмотр этого !!
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …