-2
請幫幫我。
我花了一些時間試圖找出爲什麼joinform div不能很好地坐在包含myhomepageimage.jpg圖像的div旁邊。
我認爲這是表格的width。
「立即註冊加入網站」完美無瑕，但表格位於圖片下方。
我錯過了什麼。
此外，我是新來的CSS，請容忍我的愚蠢。
謝謝！窗體不在圖像旁邊對齊，爲什麼不呢？
<style type="text/css">
body {
background-image: url(bg.jpg);
background-attachment: fixed;
}
.styled-button-10 {
background:#5CCD00;
background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0);
padding:10px 15px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:16px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #459A00;
text-decoration: none;
}
#header {
width: 990px;
height: 75px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1px;
}
#logo {
float:left;
}
#topmenu {
float:right;
}
#topmenu li {
margin-left:10px;
display:inline;
}
#intro {
width: 990px;
margin-left: auto;
margin-right: auto;
background-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.5);
padding:8px;
font-size:30px;
border:1px solid #e3e3e3;
}
#joinform {
width:550px:
float:right;
}
#details {
width: 990px;
margin-left: auto;
margin-right: auto;
}
</style>
<style type="text/css">
/* This CSS is used to format the page. */
fieldset {border:0px;}
#lbform {height: auto;margin: 0px auto;padding: 0;position: relative;width: 500px;}
#lbform label {color: #000000;display: inline;float: left;font-family: Arial,Helvetica,sans-serif;font-size: 14px;font-weight: bold;margin: 5px 10px 5px 0;width: 90px;}
#lbform .row {display: block;margin-bottom: 7px;padding-top: 7px;width: 475px;}
#lbform input {border: 1px solid #9C8A7B;font-size: 14px;padding: 5px;width: 208px;}
#lbform select {border: 1px solid #9C8A7B;font-size: 14px;height: 25px;}
#lbform input.blur {color: #999999;font-style: italic;}
#lbform input.focus, #lbform input.complete {color: #000000;font-style: normal;font-weight: bold;}
.gender {width: 220px;}
.day {width: 63px;}
.month {width: 80px;}
.year {width: 70px;}
.note {color: #666666;font-family: Arial,Helvetica,sans-serif;font-size: 11px;position:relative;right: 0;top: -10px;width: 300px;}
</style>
<style type="text/css">
/* This CSS is used for the Show/Hide functionality. */
.more {display: none;}
a.showLink, a.hideLink {cursor: pointer; display: block; height: 45px; margin: 5px 0 0 104px; width: 214px;}
a.hideLink {}
a.showLink:hover, a.hideLink:hover {}
</style>
<script src="jsforstep2.js"></script>
</head>
<body>
<div id="header">
<div id="logo"><a href="http://www.mysite.com"><img src="urlformylogo.png" alt="Hi Mom"></a><br>
</div>
<ul id="topmenu"><li><a href="#" class="styled-button-10">Join Now</a></li><li><a href="#" class="styled-button-10">Login Here</a></li></ul>
</div>
<div id="intro">
<div style="float:left; padding-right:10px; width:440px;"><img src="myhomepageimage.jpg">
</div>
<div id="joinform">
<div style="margin-top:0px;">Register now to join site</div>
<!-- Make sure you update the URL -->
<form id="lbform" class="formlayout" action="theformurl" method="post">
<fieldset>
<div class="magic">
<input type="hidden" value="1" name="sexuality">
</div>
<div class="row cf">
<label>I prefer:</label>
<select class="gender" name="gender">
<option>Please select</option>
<option value="1">Cheese</option>
<option value="2">Ham</option>
</select>
</div>
<div class="row cf">
<label>First name:</label>
<input type="text" class="text blur" name="firstname">
</div>
<div class="row cf">
<label>D.O.B.:</label>
<select class="day" name="dobday">
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
</select>
<select class="month" name="dobmonth">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
</select>
<select class="year" name="dobyear">
<option value="">Year</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
</select>
</div>
<div class="continue-btn">
<a onclick="showHide('example');return false;" class="showLink" id="example-show" href="#">
<!-- The <p> tags below can be swapped from an image. -->
<p>CONTINUE</p>
</a>
</div>
<!-- Anything that sits in the div class=more will be hidden until the Continue link is clicked -->
<div class="more" id="example">
<div class="row cf">
<label for="email">Email:</label>
<input type="text" class="text blur" name="email" id="email">
</div>
<div class="row cf">
<label for="password">Password:</label>
<input type="password" value="" name="password" id="password">
</div>
<div class="row cf">
<button class="header" type="submit">submit</button>
</div>
<div class="row cf">
<p class="note">My TOS link</a>.</p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="details">
Some text here.
</div>
</body>
</html>
你可以看看這個，因爲我看不出哪裏是目前的問題。 http://jsfiddle.net/tgKmb/ – drip
「我喜歡：」顯示在圖像下方，而不是旁邊。你沒有看到？ – Tim
[下面是它看起來像和我想要的形式的截圖，我認爲這將是顯而易見的！再次感謝您檢查！]（http://imgur.com/ixJ1rT4） – Tim