我带着一个关于这些 CSS 块的新问题回来了......
我正在做这个网站设计,我正在使用这些图像作为文本块......(这是一个例子......) http://brentatech.net/WebDesign/index.html (尝试缩放出去)
而且,缩小时的块会四处移动……我只是想知道如何解决这个问题?我希望他们留在下面的图像?
我也刚刚注意到,在网上看它顶部的蓝色条并没有跨越整个布局(虽然在本地?)
如果您需要 HTML/CSS
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BrentATech- Freelance Graphics Artist</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type='text/css' href="fonts.css" />
</head>
<body>
<div id="site-container">
<!-- We Will start with the Container Div -->
<div class="container">
<div id="header"><!-- Header -->
<div id="nav"><!-- Nav -->
<ul>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="portfolio.html">Portfolio</a>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</div>
<div id="logo"><!-- Logo -->
<a href="#"><img src="images/logo.png" /></a>
</div>
</div>
<div id="mainproject"> <!-- Main Slider (Images) -->
<div id="mainimage">
<a href="concept.png"><img src="images/slider/image1.png" alt="noimage" /></a>
</div>
<div id="topleftimage">
<a href="concept.png"><img src="images/slider/image_car.png" alt="noimage" /></a>
</div>
<div id="bottomleftimage">
<a href="concept.png"><img src="images/slider/image_fire.png" alt="noimage" /></a>
</div>
<div id="toprightimage">
<a href="concept.png"><img src="images/slider/image_bike.png" alt="noimage" /></a>
</div>
<div id="bottomrightimage">
<a href="concept.png"><img src="images/slider/image_plane.png" alt="noimage" /></a>
</div>
</div>
<br />
<div id="mostrecent"> <!-- My Most recent finished designs-->
<div id="leftimage">
<img src="images/left_logo.png" alt="noimage" class="over" />
<a href="#"><img src="images/leftimage.png" alt="notext" class="under" />
</a>
</div>
<div id="middleimage">
<img src="images/middle_logo.png" alt="noimage" class="over1" />
<a href="#"> <img src="images/middleimage.png" alt="notext" class="under" />
</a>
</div>
<div id="rightimage">
<img src="images/right_logo.png" alt="noimage" class="over2" />
<a href="#"><img src="images/rightimage.png" alt="notext" />
</a>
</div>
<div id="textarea">
<img src="images/lefttext.png" alt="noimage" />
<h2><span class="lefttop">Rubiks Simple<br /></h2>
</span>
<h4><span class="leftbottom">Web Design</span></h4>
</div>
<div id="textarea1">
<img src="images/textarea1.png" alt="noimage" />
<h2><span class="topright">Relax<br /></h2>
</span>
<h4><span class="topbottom">Concept</span></h4>
</div>
<div id="textarea2">
<img src="images/textarea2.png" alt="noimage" />
<h2><span class="topmiddle">We are Triton<br /></h2>
</span>
<h4><span class="bottommiddle">Logo Design</span></h4>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</h4>
</div>
</body>
</html>
CSS`/* CSS Main Style Sheet */
@media screen and (min-width: 480px) {
/* Set the body elements */
body {
background-color: #1c1f26;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #bababa;
background-image: url(images/bg.png);
background-repeat: repeat-x, repeat-y;
margin: 0; padding: 0;
}
/* ----------------------------------------- */
/* Container Div */
#site-container {
margin: auto;
}
/* ----------------------- */
/* Header & Nav Bar */
#header {
background-color: #2c303b;
/*background-image: url(image/header.png);*/
background-repeat: repeat-x;
height: 135px;
}
#logo {
float: left;
margin-top: 55px;
margin-left: 250px;
}
#nav {
float: right;
margin-top: 55px;
margin-right: 250px;
}
#nav ul {
list-style: none;
margin: 0;
}
#nav li {
display: inline-block;
margin: 0;
padding-right: 40px;
}
#nav a {
display: block;
line-height: 0px;
letter-spacing: 1px;
text-decoration: none;
font-size: 16px;
font-weight: 300;
color: #838383;
}
#nav .active a
{
background: #01A9DC;
color: #FFF;
}
#nav a:hover
{
background-color: #3C9;
text-decoration: none;
color: #FFF;
}
/* ---------------------------------- */
#mainproject {
height: 260px;
margin-left: auto;
margin-right: auto;
}
#mainimage {
float: left;
margin-top: 25px;
margin-left: 300px;
}
#topleftimage {
float: left;
margin-top: 25px;
margin-left: 5px;
}
#bottomleftimage {
float: left;
margin-top: 157px;
margin-left: -328px;
}
#toprightimage {
float: left;
margin-top: 25px;
margin-left: 4px;
}
#bottomrightimage {
float: left;
margin-top: 157px;
margin-left: -330px;
}
/*----------------------*/
/* Middle Buy Button */
#mostrecent {
height: 250px;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
#leftimage {
float: left;
margin-top: 45px;
margin-left: 300px;
}
#middleimage {
float: left;
margin-top: 45px;
margin-left: 50px;
}
#rightimage {
float: left;
margin-top: 45px;
margin-left: 50px;
}
/* Text Areas - Implement CMS...*/
#textarea {
float: left;
margin-top: -75px;
margin-left: 300px;
}
#textarea1 {
float: left;
margin-top: -75px;
margin-left: 375px;
}
#textarea2 { /* Middle */
float: left;
margin-top: -80px;
margin-left: 625px;
}
.under {
z-index: 1
}
.over {
position: absolute;
top: 530px;
left: 410px;
z-index: 2;
}
.over1 {
position: absolute;
top: 525px;
left: 723px;
z-index: 2;
}
.over2 {
position: absolute;
top: 525px;
left: 1053px;
z-index: 2;
}
h2 {
position: absolute;
top: 670px;
left: 645px;
width: 100%;
}
h4 {
position: absolute;
top: 690px;
left: 645px;
width: 100%;
}
.topright {
color: #53565c;
font: bold 18px/18px Arial, Helvetica, sans-serif;
letter-spacing: 0.5px;
position: absolute;
width: 100%
}
.topbottom {
color: #53565c;
font: bold 12px/18px Arial, Helvetica, sans-serif;
letter-spacing: 0.5px;
position: absolute;
}
.lefttop {
color: #53565c;
font: bold 18px/18px Arial, Helvetica, sans-serif;
letter-spacing: 0.5px;
position: absolute;
top: 0px;
left: -330px;
width: 100%
}
.leftbottom {
color: #53565c;
font: bold 12px/18px Arial, Helvetica, sans-serif;
letter-spacing: 0.5px;
position: absolute;
top: 0px;
left: -330px;
width: 100%;
}
.topmiddle {
color: #53565c;
font: bold 18px/18px Arial, Helvetica, sans-serif;
letter-spacing: 0.5px;
position: absolute;
top: 0px;
left: 320px;
width: 100%;
}
.bottommiddle {
font: bold 12px/18px Arial, Helvetica, sans-serif;
color: #53565c;
letter-spacing: 0.5px;
position: absolute;
top: 0px;
left: 320px;
width: 100%;
}`