CSS浮动图像 [英] CSS Floating image
问题描述
嘿，如果有人能帮助我，这将是很棒的，一直盯着
屏幕超过2小时，并且无法弄清楚为什么图像不会，对齐
到左上角并包裹文字。
任何帮助都会很棒。谢谢。
网址是
http://www.gadago.net/summersnow/scr...Submit=Proceed 。
我的CSS在下面， img.camp是我无法工作的。
..bodytext {
保证金：0px;
背景：＃FEEF39;
font-family：Verdana，Arial，Helvetica，sans-serif;
颜色：＃000000;
字体-size：12px;
}
..header {
保证金：0px;
font-family：Verdana，Arial，Helvetica，sans-serif;
颜色：#ffffff;
字体大小：12px;
}
p {
margin-top：4px;
margin-bottom：4px;
}
/ *以下是下拉样式* /
选项{
font-family：" Courier New" Courier，mono;
字体大小：12px;
颜色：＃996600;
背景：＃FFFF66;
}
option.one {
背景：＃FEEF39;
}
option.two {
背景：＃FFFF88;
}
/ *以下是按钮样式* /
button.btn {
颜色：＃996600;
font-family：''trebuchet ms''，helvetica，sans-serif;
font-size：84％;
font-weight：bold;
背景：＃FFFF66;
border：2px solid;
border-top-color：＃696;
border -left-color：＃696;
border-right-color：＃363;
border-bottom-color：＃363;
filter：progid：DXImageTransform.Microsoft.Gradient
（GradientType = 0，StartColorStr =''＃ffffffff''，EndColor Str =''＃ffeeddaa''）;
}
button.btnhov {
颜色：＃996600;
font-family：''trebuchet ms ''，helvetica，sans-serif;
font-size：84％;
font-weight：bold;
背景：＃FFFF66;
border：2px solid;
border-top-color：＃c63;
border-left-color： ＃c63;
border-right-color：＃930;
border-bottom-color：＃930;
filter：progid：DXImageTransform .Microsoft.Gradient
（GradientType = 0，StartColorStr =''＃ffffffff''，EndColor Str =''＃ffeeddaa''）;
}
..footer {
font-family：Verdana，Arial，Helvetica，sans-serif;
font-size：10px;
颜色：#CCCCCC;
}
..anchor {
背景：＃FEEF39;
font-family：Verdana，Arial，Helvetica，sans-serif;
颜色：#ffffff;
}
/ *锚定导航链接* /
ul {
list-style-type：none;
溢出：自动;
填充：0;
保证金：0;
}
ul li {
float：left;
border：1px solid＃333;
border-bottom：none;
保证金：0 5px;
背景：FFFF56;
}
ul li a {
显示：块;
填充：10px 20px;
text-decoration：none;
}
ul li a：悬停{
文字装饰：下划线;
背景：＃996600;
}
/ * -------------- * /
/ *在IE浏览器上进行上述工作是低于* /
* html ul li a {
宽度：1％;
}
/ *下方对齐和浮动图像* /
img.camp {
位置：绝对;
顶部：50px ;
剩余：50px;
浮动：正确;
清除：正确;
保证金权利：5px ;
保证金底部：5px;
}
Hey if anyone could help me this would be great, been staring at the
screen for over 2 hours and cant figure out why the image wont, align
to the top left and wrap the text around.
Any help would be great. Thanks.
The URL is
http://www.gadago.net/summersnow/scr...Submit=Proceed.
My CSS is below, and the img.camp is the one that I cant get to work.
..bodytext {
margin: 0px;
background: #FEEF39;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
font-size:12px;
}
..header {
margin: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:12px;
}
p {
margin-top: 4px;
margin-bottom: 4px;
}
/* below is the drop down styles */
option {
font-family:"Courier New", Courier, mono;
font-size:12px;
color:#996600;
background:#FFFF66;
}
option.one {
background: #FEEF39;
}
option.two {
background: #FFFF88;
}
/* below is the button styles */
button.btn{
color:#996600;
font-family:''trebuchet ms'',helvetica,sans-serif;
font-size:84%;
font-weight:bold;
background:#FFFF66;
border:2px solid;
border-top-color:#696;
border-left-color:#696;
border-right-color:#363;
border-bottom-color:#363;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr=''#ffffffff'',EndColor Str=''#ffeeddaa'');
}
button.btnhov{
color:#996600;
font-family:''trebuchet ms'',helvetica,sans-serif;
font-size:84%;
font-weight:bold;
background:#FFFF66;
border:2px solid;
border-top-color:#c63;
border-left-color:#c63;
border-right-color:#930;
border-bottom-color:#930;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr=''#ffffffff'',EndColor Str=''#ffeeddaa'');
}
..footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
}
..anchor {
background:#FEEF39;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
}
/* navigation links on anchor */
ul {
list-style-type: none;
overflow: auto;
padding: 0;
margin: 0;
}
ul li {
float: left;
border: 1px solid #333;
border-bottom: none;
margin: 0 5px;
background:FFFF56;
}
ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
}
ul li a:hover {
text-decoration: underline;
background:#996600;
}
/* --------------*/
/* to make the above work on IE browsers is below */
* html ul li a {
width: 1%;
}
/* below to align and float images */
img.camp {
position: absolute;
top:50px;
left:50px;
float:right;
clear:right;
margin-right:5px;
margin-bottom:5px;
}
推荐答案
一次在一段时间* Summersnow *写道：
Once upon a time *Summersnow* wrote:
嘿，如果有人能帮助我这将是伟大的，一直盯着
屏幕超过2小时并且无法弄清楚为什么图像不会，左上方对齐并包裹文字。
任何帮助都会很棒。谢谢。
网址是
http://www.gadago.net/summersnow/scr...Submit=Proceed 。
我的CSS在下面，img.camp是一个我无法上班。
.bodytext {
保证金：0px;
背景：＃FEEF39;
font-family：Verdana，Arial，Helvetica，sans -serif;
颜色：＃000000;
font-size：12px;
}
.header {
保证金：0px;
font-family：Verdana，Arial，Helvetica，sans-serif;
颜色：#ffffff;
font-size：12px;
}
p {
margin-top：4px;
margin-bottom：4px;
}
/ *下面是下拉样式* /
选项{
font-family：" Courier New"，Courier，mono;
font-size：12px;
颜色：＃996600;
背景：＃FFFF66;
}
option.one {
背景：＃FEEF39;
}
option.two {
背景：＃FFFF88;
}
/ *下面是按钮样式* /
button.btn {
颜色： ＃996600;
font-family：''trebuchet ms''，helvetica，sans-serif;
font-size：84％;
font-weight：bold;
background ：＃FFFF66;
border：2px solid;
border-top-color：＃696;
border-left-color：＃696;
border-right-color：＃ 363;
border-bottom-color：＃363;
filter：progid：DXImageTransform.Microsoft.Gradient
（GradientType = 0，StartColorStr =''#fffffff''， EndColor Str =''＃ffeeddaa''）;
button.btnhov {
颜色：＃996600;
font-family：''trebuchet ms' '，helvetica，sans-serif;
font-size：84％;
font-weight：bold;
背景：＃FFFF66;
border：2px solid;
border-top-color：＃c63;
border-left-color：＃c63;
border-right-color：＃930;
border-bottom-color：＃930; <过滤器：progid：DXImageT ransform.Microsoft.Gradient
（GradientType = 0，StartColorStr =''＃ffffffff''，EndColor Str =''＃ffeeddaa''）;
}
.footer {
font-family：Verdana，Arial，Helvetica，sans-serif;
font-size：10px;
颜色：#CCCCCC;
}
.anchor {
背景：＃FEEF39;
font-family：Verdana，Arial，Helvetica，sans-serif;
颜色：#ffffff;
}
/ *锚上的导航链接* /
ul {
list-style-type：none;
overflow：auto;
padding： 0;
边距：0;
}
ul li {
float：left;
border：1px solid＃333;
border -bottom：none;
margin：0 5px;
背景：FFFF56;
}
ul li a {
display：block;
填充：10px 20px;
text-decoration：none;
}
ul li a：hover {
text-decoration：underline;
background ：＃996600;
}
/ * -------------- * /
/ * e以上在IE浏览器上的工作低于* /
* html ul li {
宽度：1％;
}
/ *以下对齐和浮动图像* /
img.camp {
位置：绝对;
顶部：50px;
左：50px;
浮动：右;
明确：正确;
保证金权利：5px;
保证金底部：5px;
}
Hey if anyone could help me this would be great, been staring at the
screen for over 2 hours and cant figure out why the image wont, align
to the top left and wrap the text around.
Any help would be great. Thanks.
The URL is
http://www.gadago.net/summersnow/scr...Submit=Proceed.
My CSS is below, and the img.camp is the one that I cant get to work.
.bodytext {
margin: 0px;
background: #FEEF39;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
font-size:12px;
}
.header {
margin: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:12px;
}
p {
margin-top: 4px;
margin-bottom: 4px;
}
/* below is the drop down styles */
option {
font-family:"Courier New", Courier, mono;
font-size:12px;
color:#996600;
background:#FFFF66;
}
option.one {
background: #FEEF39;
}
option.two {
background: #FFFF88;
}
/* below is the button styles */
button.btn{
color:#996600;
font-family:''trebuchet ms'',helvetica,sans-serif;
font-size:84%;
font-weight:bold;
background:#FFFF66;
border:2px solid;
border-top-color:#696;
border-left-color:#696;
border-right-color:#363;
border-bottom-color:#363;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr=''#ffffffff'',EndColor Str=''#ffeeddaa'');
}
button.btnhov{
color:#996600;
font-family:''trebuchet ms'',helvetica,sans-serif;
font-size:84%;
font-weight:bold;
background:#FFFF66;
border:2px solid;
border-top-color:#c63;
border-left-color:#c63;
border-right-color:#930;
border-bottom-color:#930;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr=''#ffffffff'',EndColor Str=''#ffeeddaa'');
}
.footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
}
.anchor {
background:#FEEF39;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
}
/* navigation links on anchor */
ul {
list-style-type: none;
overflow: auto;
padding: 0;
margin: 0;
}
ul li {
float: left;
border: 1px solid #333;
border-bottom: none;
margin: 0 5px;
background:FFFF56;
}
ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
}
ul li a:hover {
text-decoration: underline;
background:#996600;
}
/* --------------*/
/* to make the above work on IE browsers is below */
* html ul li a {
width: 1%;
}
/* below to align and float images */
img.camp {
position: absolute;
top:50px;
left:50px;
float:right;
clear:right;
margin-right:5px;
margin-bottom:5px;
}
开始
http：//帮助清除代码中的混乱局面validator.w3.org/
例如，您复制了代码的最顶层部分
（包括计数器脚本），所以即将再次出现
进一步向下应该被删除。
-
/ Arne
现在查杀源自GoogleGroups的帖子
Start with clearing up the mess you have in the code, with the help of
http://validator.w3.org/
For example, you have duplicated the top most part of the code
(including the counter script), so the same that is coming up again
further down should be removed.
--
/Arne
Now killing posts originating at GoogleGroups
是的，我一直试图解决这个问题，因为有这样的事实
很多PHP包括，当我第一次启动该网站时我并没有真正好好计划它.b / b
Yeah ive been trying to sort that out, its due to the fact there are
alot of php includes and when I first started the site I didnt really
plan it very well.
你永远都不会猜到这一切是什么，清理它并重新审视
php包括现在它的工作原理，而不是这种弱类型
语言的巨大粉丝！谢谢你的帮助。
Youll never guess what thats all it took, cleaned it up and relooked at
the php includes and now it works, not a huge fan of this weakly typed
language! Thanks for your help.
这篇关于CSS浮动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
