[英]I am having problems with CSS getting ads to line up
I am building a website and I have three ads towards the bottom of my page. 我正在建立一个网站,我的页面底部有三个广告。 They appear but on there own line.
他们出现但在那里有自己的路线。 I have tried everything from creating a floating div to removing divs.
我已经尝试了从创建浮动div到删除div的所有内容。 But I can't seem to figure out what part of the CSS isn't allowing these boxes to be straight across the page.
但我似乎无法弄清楚CSS的哪个部分不允许这些框在整个页面上直接显示。
Here is the code for the three boxes: 这是三个框的代码:
<div class="wrapper margin-bot1">
<div class="bg-3">
<div class="indent">
<div class="wrapper margin-bot">
<img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" />
<img src="http://www.webstertoolbox.com/media/wysiwyg/images/logo_archilume.png" alt="" width="150" height="41" />
</div>
<ul class="ul-1">
<li><a href="moreARCHI.html">Made in USA </a></li>
<li><a href="moreARCHI.html">Expert Domestic Tech Support</a></li>
<li><a href="moreARCHI.html">High-end installations</a></li>
<li>Robust features</li>
</ul>
<a class="button-1 margin-left" href="more.html">Click to Order Now!</a>
</div>
</div>
<div class="bg-3">
<div class="indent">
<div class="wrapper margin-bot">
<img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" />
<a href="moreGEN.html"> <img src="http://www.webstertoolbox.com/media/wysiwyg/images/GenLume-Logo.png" alt="" width="103" height="41" /></a>
<div class="extra-wrap"> </div>
</div>
<ul class="ul-1">
<li><a class="test123" href="moreGEN.html">Quick solutions</a></li>
<li><a href="moreGEN.html">Turn-key applications</a></li>
<li><a href="moreGEN.html">Certified</a></li>
<li><a href="moreGEN.html">Competitive pricing</a></li>
</ul>
<a class="button-1 margin-left" href="moreGEN.html">Click to Order Now!</a>
</div>
</div>
<div class="bg-3">
<div class="indent">
<div class="wrapper margin-bot">
<img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" />
<div class="extra-wrap">
<h4>DuraLume</h4>
<h5>Series</h5>
</div>
</div>
<ul class="ul-1">
<li><a href="more.html">Expert Domestic Tech Support</a></li>
<li><a href="more.html">Made in USA </a></li>
<li><a href="more.html">Custom solutions</a></li>
<li><a href="more.html">On-site Engineers</a></li>
</ul>
<a class="button-1 margin-left" href="more.html">Click to Order Now!</a>
</div>
</div>
</div>
I can't figure out how to properly show the CSS but you can find the actual site here: http://www.webstertoolbox.com/ 我无法弄清楚如何正确显示CSS,但你可以在这里找到实际的网站: http : //www.webstertoolbox.com/
If you look below the Big banner you will see an ArchiLume, GenLume and DuraLume boxes that run vertically down the page. 如果您在Big横幅下方看到,您将看到一个垂直向下运行的ArchiLume,GenLume和DuraLume框。 I want them to appear across the page.
我希望它们出现在整个页面中。
Can someone please tell me what I did wrong and how to fix it? 有人可以告诉我我做错了什么以及如何解决它?
Thanks, Frank G. 谢谢,弗兰克G.
Very easy and fast to fix it. 修复它非常容易和快速。 Just change your css file named homeads.css on line 128:
只需在第128行更改名为homeads.css的css文件:
.bg-3
{
background: url(../images/bg-4.png) left top no-repeat;
width: 33%; // Changed this from 100% to 33%
height: 322px; //Changed from 268px to 322px
overflow: hidden;
float: left; // Added the float left
}
Cheers, Thanos 干杯,Thanos
EDIT : After doing the change above you will need to add a couple more changes to fix a couple of things that will get a bit misaligned. 编辑 :完成上述更改后,您需要添加一些更改来修复一些会导致错位的事情。 Such as the right border will not be visible anymore.
如右边框将不再可见。 Below are the changes you will need to do to fix that as well.
以下是您需要做的修改以解决这个问题。
On homeads.css line 33: 在homeads.css第33行:
.main
{
width: 950px; // Reduced this to match with the parent's width
padding: 0;
margin: 0 auto;
position: relative;
}
On sceleton.css line 25: 在sceleton.css第25行:
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24
{
float: left;
display: inline;
//margin-left: 5px; Remove these 2
//margin-right: 5px; Remove these 2
}
EDIT2: The first box is getting pushed down a little bit. EDIT2:第一个盒子被推下了一点点。 That is caused because on the first box you are missing a div <-> on the second and third box you have an extra div inside them.
这是因为在第一个盒子上你缺少第二个和第三个盒子上的div < - >,你在里面有一个额外的div。
<div class="wrapper margin-bot">
<img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt=""><a href="moreGEN.html"> <img src="http://www.webstertoolbox.com/media/wysiwyg/images/duralume.gif" alt="" width="103" height="41"></a>
<div class="extra-wrap"> </div> // THIS IS THE EXTRA DIV
</div>
You have 2 choices here: 你有2个选择:
1) Add the div 1)添加div
<div class="extra-wrap"> </div>
to the first box 到第一个方框
2) Remove that div from box 2 and 3. 2)从方框2和3中删除该div。
.cms-home
class help you do not affect other pages layout. .cms-home
类帮助您不影响其他页面布局。 Add in your stylesheets: 添加样式表:
.cms-home .wrapper {
overflow: visible; //For big banner
}
.cms-home .bg-3 {
overflow: visible;
width: 33%;
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.