2009-11-10 52 views
1

我想在Firefox中使用CSS在我的网站上显示徽标和Flash横幅。使用CSS在Firefox中定位徽标和横幅的问题

徽标应为250 X 250,横幅800 X 250.两者应显示在同一行中。

这是我目前的CSS:

#logo{ 
    background:#FFFFFF; 
    position:absolute; 
    left: 0px; 
    top: 0px; 
    width: 250px; 
    height: 200px; 
} 

#Banner{ 
    background: #1071A6; 
    position:absolute; 
    left: 250px; 
    top: 200px; 
    width: 850px; 
    height: 250px; 
} 

不幸的是,在标志的下方所显示的旗帜。

有关如何正确定位这些元素的任何建议?

回答

0

这里亚去

<html> 
<head> 
    <style type="text/css"> 

    #logo{ 
     background:#FFFFFF; 
     position:absolute; 
     left: 0px; 
     top: 0px; 
     width: 250px; 
     height: 250px; 
    } 

    #Banner{ 
     background: #1071A6; 
     position:absolute; 
     left: 250px; 
     top: 0px; 
     width: 850px; 
     height: 250px; 
    } 
    </style> 

</head> 
<body> 
<div id ="logo"> 
</div> 
<div id="Banner"> 
</div> 
</body> 
</html> 
+0

横幅显示在徽标下方。我想让它一起展示。我的意思是在同一行。你能帮助...吗? – Flins 2009-11-10 14:55:49

+0

我不使用任何容器DIV ..所有代码都是在body标签之后出现的。

是新来的节目.. Thnks您耐心的帮助... – Flins 2009-11-10 14:59:35

5

让它:

#logo { 
    background:#FFFFFF; 
    position:absolute; 
    left: 0px; 
    top: 0px; 
    width: 250px; 
    height: 200px; 
} 

#Banner { 
    background: #1071A6; 
    position:absolute; 
    left: 250px; 
    top: 0px; 
    width: 850px; 
    height: 250px; 
} 

应该top: 0px;两个。

0

也可能是他的外部容器的宽度小于1100像素。也需要考虑利润空白和填充。

+0

我不使用任何容器DIV ..所有的代码来body标签之后。

对编程来说很陌生..为你的耐心提供帮助...... Coul你能帮我整理一下吗? – Flins 2009-11-10 15:01:27

0

我会做类似这样的标记:

<div id="Header"> 
    <div id="Banner"></div> 
    <div id="logo"></div> 
    <div style="clear: both;"></div> 
</div> <!-- /Header --> 

而像这样的CSS。

#Header { 
    width: 1120px; 
} 

#logo { 
    position: relative; 
    float: left; 
    width: 250px; 
    height: 200px; 
    margin: 0; 
    border: 1px solid blue; 
} 

#Banner { 
    position: relative; 
    float: right; 
    width: 850px; 
    height: 250px; 
    margin: 0; 
    border: 1px solid red; 
} 
+0

这些边界只是为了让他们更容易看到divs没有任何内容的时候。 – 2009-11-10 15:03:49