0
Web tasarımı için yeni bir fikir alıp, şimdi bir zevk almak ve zevk almak, şimdi bir süre için benim sorumu araştırdı ve onunla hiçbir yer alma bana yardımcı olabilir! Bu yüzden benim sorunum, sol kenar boşluğum% 25 olarak ayarlanmış ve sağ kenar boşluğu% 25 olarak ayarlanmış, div genişliğim 750px olarak ayarlanmış, böylece ekranı yeniden boyutlandırdığımda, sağ kenar boşluğu küçülüyor ama sol marj% 25 kalır! bu, cep telefonumda veya daha küçük bir ekranda görüntülendiğinde, web sitesinin sağ tarafına daha çok benzediği anlamına gelir ... Web sitem http://lawrencetrigg.tk benim sorunumun ne olduğunu önerebilir, yüklerimin yüklenmesine yardımcı olur! Teşekkürler çocuklar!, sol kenar boşluğu aynı kalır ve sağ kenar boşluğu, web tasarımı için yeni bir im im
a:-webkit-any-link{
text-decoration:none !important;
}
body {
\t background-color: black;
}
#top {
\t position: absolute;
\t \t top: 0px;
\t background-image: url("images/background-top-one.jpg");
\t background-repeat: repeat-x;
\t left: 25%;
\t right: 25%;
\t width: 750px;
\t height: 100%;
\t text-align:center;
\t
\t margin-left: auto;
\t margin-right: auto;
}
#bottom1 {
\t
\t position: fixed;
\t background-image: url("images/background-bottom-one.jpg");
\t
\t bottom: 0px;
left: 25%;
right: 25%;
width: 750px;
height: 150px;
\t color: black;
\t text-align:center;
\t margin-left: auto;
\t margin-right: auto;
}
div.transbox {
font-size: 16px;
margin: 30px;
background-color: #AAAAAA;
border: 1px solid black;
opacity: 0.7;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
div.col-top-one {
\t float: left;
\t width: 100%;
\t font-size: 20px;
\t padding: 1px;
\t height: 250px;
\t
\t border-color: white;
\t color: white;
\t top: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
\t top: 0px;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:60px; margin-left:-160px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute;
border:2px solid #FFF; color:#EEE;
background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:2px;
box-shadow: 0px 0px 8px 4px #666;
/*opacity: 0.8;*/
}
</style><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lawrence Trigg</title>
<link rel="images/favicon.ico" href="images/favicon.ico">
<style type="text/css">
a:-webkit-any-link{
text-decoration:none !important;
}
body {
\t background-color: black;
}
#top {
\t position: absolute;
\t \t top: 0px;
\t background-image: url("images/background-top-one.jpg");
\t background-repeat: repeat-x;
\t left: 25%;
\t right: 25%;
\t width: 750px;
\t height: 100%;
\t text-align:center;
\t
\t margin-left: auto;
\t margin-right: auto;
}
#bottom1 {
\t
\t position: fixed;
\t background-image: url("images/background-bottom-one.jpg");
\t
\t bottom: 0px;
left: 25%;
right: 25%;
width: 750px;
height: 150px;
\t color: black;
\t text-align:center;
\t margin-left: auto;
\t margin-right: auto;
}
div.transbox {
font-size: 16px;
margin: 30px;
background-color: #AAAAAA;
border: 1px solid black;
opacity: 0.7;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
div.col-top-one {
\t float: left;
\t width: 100%;
\t font-size: 20px;
\t padding: 1px;
\t height: 250px;
\t
\t border-color: white;
\t color: white;
\t top: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
\t top: 0px;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:60px; margin-left:-160px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute;
border:2px solid #FFF; color:#EEE;
background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:2px;
box-shadow: 0px 0px 8px 4px #666;
/*opacity: 0.8;*/
}
<div id="top">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="#skills.html">Skills</a></li>
<li><a href="#work.html">Work</a></li>
<li><a href="#gym.html">Gym</a></li>
<li><a href="images/cv/lawrencecv2016.docx">Download CV</a></li>
<a href="https://www.facebook.com/Lawrencetrigg" class="tooltip">
<img src="images/icons/social-facebook32.png" onmouseover="this.src='images/icons/social-facebook322.png'" onmouseout="this.src='images/icons/social-facebook32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-facebook32.png" style="float:right;" />
<strong>Facebook</strong><br />
</span>
</a>
<a href="https://www.steam.com" class="tooltip">
<img src="images/icons/social-steam32.png" onmouseover="this.src='images/icons/social-steam322.png'" onmouseout="this.src='images/icons/social-steam32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-steam32.png" style="float:right;" />
<strong>Steam</strong><br />
</span>
</a>
<a href="https://www.youtube.com" class="tooltip">
<img src="images/icons/social-youtube32.png" onmouseover="this.src='images/icons/social-youtube322.png'" onmouseout="this.src='images/icons/social-youtube32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-youtube32.png" style="float:right;" />
<strong>Youtube</strong><br />
</span>
</a>
<a href="https://www.dropbox.com" class="tooltip">
<img src="images/icons/social-dropbox32.png" onmouseover="this.src='images/icons/social-dropbox322.png'" onmouseout="this.src='images/icons/social-dropbox32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-dropbox32.png" style="float:right;" />
<strong>Dropbox</strong><br />
</span>
</a>
<a href="https://www.skype.com" class="tooltip">
<img src="images/icons/social-skype32.png" onmouseover="this.src='images/icons/social-skype322.png'" onmouseout="this.src='images/icons/social-skype32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-skype32.png" style="float:right;" />
<strong>Skype</strong><br />
</span>
</a>
<a href="https://www.google.com" class="tooltip">
<img src="images/icons/social-googleplus32.png" onmouseover="this.src='images/icons/social-googleplus322.png'" onmouseout="this.src='images/icons/social-googleplus32.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/social-googleplus32.png" style="float:right;" />
<strong>Google Plus</strong><br />
</span>
</a>
</ul>
<div class="col-top-one">
<div class="transbox">
<p>Lawrence William Trigg</p>
<p>I am a bright, young and ambitious individual who is self-motivated and organised. I can work well under pressure and am able to meet targets and deadlines, I am eager to learn new skills and feel the ones currently gained give a vast and varied history to draw from and implement in new situations. Working well within a team is something I enjoy, however I am also capable of working under my own initiative. </p>
</div>
<div class="transbox">
<p>Under Construction</p>
</div>
</div>
</div>
<div id="bottom1">
<a href="#" class="tooltip">
<img src="images/icons/icon-mobile1.png" onmouseover="this.src='images/icons/icon-mobile2.png'" onmouseout="this.src='images/icons/icon-mobile1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-mobile1.png" style="float:right;" />
<strong>Mobile Number</strong><br />
0481718550
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-email1.png" onmouseover="this.src='images/icons/icon-email2.png'" onmouseout="this.src='images/icons/icon-email1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-email1.png" style="float:right;" />
<strong>Email Address</strong><br />
[email protected]
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-picture1.png" onmouseover="this.src='images/icons/icon-picture2.png'" onmouseout="this.src='images/icons/icon-picture1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-picture1.png" style="float:right;" />
<strong>Name</strong><br />
Lawrence William Trigg
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-home1.png" onmouseover="this.src='images/icons/icon-home2.png'" onmouseout="this.src='images/icons/icon-home1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-home1.png" style="float:right;" />
<strong>Test</strong><br />
Home
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-favorite1.png" onmouseover="this.src='images/icons/icon-favorite2.png'" onmouseout="this.src='images/icons/icon-favorite1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-favorite1.png" style="float:right;" />
<strong>Test</strong><br />
Favorite
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-website1.png" onmouseover="this.src='images/icons/icon-website2.png'" onmouseout="this.src='images/icons/icon-website1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-website1.png" style="float:right;" />
<strong>Test</strong><br />
Website
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-dob1.png" onmouseover="this.src='images/icons/icon-dob2.png'" onmouseout="this.src='images/icons/icon-dob1.png'" />
<span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-dob1.png" style="float:right;" />
<strong>Date Of Birth</strong><br />
8th May 1989/26 Years old
</span>
</a>
<a href="#" class="tooltip">
<img src="images/icons/icon-location1.png" onmouseover="this.src='images/icons/icon-location2.png'"
<!-- begin snippet: js hide: false --><span>
<img class="callout" src="images/callout_black.gif" />
<img src="images/icons/icon-location1.png" style="float:right;" />
<strong>Test</strong><br />
Location
</span>
</a>
</div>
Site düzeni uygulamak için son derece zor bir şeydir sağ olsa bile HTML ve CSS konularında mevcut bazı uzmanlık. Web tasarımında yeniyseniz, [Bootstrap] (http://getbootstrap.com/) gibi eksiksiz çözümlerle başlamak ve özel tema ekleyerek değiştirmek en iyisidir. – Aristarhys