I have a pure CSS image script I use with my eBay listings, I'm changing the design of my template at the moment and have run into a major snag with the code, it seems that the large image can only be displayed directly below the thumbnail radio buttons, but I want to have the large image being displayed in a different table cell..
I don't know a great deal about CSS, so hopefully someone will know an easy fix? here's hoping..
<style type="text/css">
div.Image1BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 110px 92px; }
div.Image2BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 110px 92px; }
div.Image3BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 110px 92px; }
div.Image4BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image5BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image1BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 600px 500px; }
div.Image2BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 600px 500px; }
div.Image3BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 600px 500px; }
div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
section {
display: none;
}
input {
display: none;
}
label {
display: inline-block;
font-weight: 600;
color: #bbb;
border: 1px solid transparent;
}
label:hover {
cursor: hand;
border: 1px solid #1F7AB6;
box-shadow: 2px 2px 7px #d0d0d0;
}
label {
margin: 0px 5px 0px 0px;
}
input:checked + label {
border: 1px solid #155179;
box-shadow: 2px 2px 7px #c0c0c0;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: block;
}
</style>
<table border=1><tr><td>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><div class="Image1BlockS"></div></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><div class="Image2BlockS"></div></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><div class="Image3BlockS"></div></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><div class="Image4BlockS"></div></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5"><div class="Image5BlockS"></div></label>
<section id="content1">
<div class="Image1BlockB"></div>
</section>
<section id="content2">
<div class="Image2BlockB"></div>
</section>
<section id="content3">
<div class="Image3BlockB"></div>
</section>
<section id="content4">
<div class="Image4BlockB"></div>
</section>
<section id="content5">
<div class="Image5BlockB"></div>
</section>
</td></tr></table>
I need to rewrite it so that I can put the large image anywhere
throughout the template and still be able to have the small thumbnails
change it when they're clicked.
Well if this is the case then you can experiment with the positioning.
On the other hand you can imitate the table behavior with display: table and td with display: table-cell to get you closer to the desired result.
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
div.Image1BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 110px 92px; }
div.Image2BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 110px 92px; }
div.Image3BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 110px 92px; }
div.Image4BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image5BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image1BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 600px 500px; }
div.Image2BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 600px 500px; }
div.Image3BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 600px 500px; }
div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
#table {
display: table; /* imitates the table behavior */
border: 1px solid;
border: 1px outset grey;
padding: 1px;
}
.table-cell {
margin: 1;
border: thin inset grey;
display: table-cell;
}
section {
display: none;
}
input {
display: none;
}
label {
display: inline-block;
font-weight: 600;
color: #bbb;
border: 1px solid transparent;
}
label:hover {
cursor: hand;
border: 1px solid #eee;
box-shadow: 1px 1px 5px #000;
}
label {
margin: 0 5px 0 0;
}
input:checked + label {
border: 1px solid #155179;
box-shadow: 2px 2px 7px #c0c0c0;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: table-cell; /* imitates the td behavior */
border: thin inset grey;
margin: 1;
}
<div id="table">
<tr>
<td>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><div class="Image1BlockS"></div></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><div class="Image2BlockS"></div></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><div class="Image3BlockS"></div></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><div class="Image4BlockS"></div></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5"><div class="Image5BlockS"></div></label>
</td>
<div class="table-cell">
2nd cell
</div>
<td>
3rd cell with the td element but without the border which doesn't work if there's no table element
</td>
<div class="table-cell">
4th cell
</div>
<section id="content1">
<div class="Image1BlockB"></div>
</section>
<section id="content2">
<div class="Image2BlockB"></div>
</section>
<section id="content3">
<div class="Image3BlockB"></div>
</section>
<section id="content4">
<div class="Image4BlockB"></div>
</section>
<section id="content5">
<div class="Image5BlockB"></div>
</section>
</tr>
</div>
This is essentially what I want to do, but putting the large image elements into another cell breaks it, the large image no longer shows up, I need to rewrite it so that I can put the large image anywhere throughout the template and still be able to have the small thumbnails change it when they're clicked on.
<table border=1><tr><td>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><div class="Image1BlockS"></div></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><div class="Image2BlockS"></div></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><div class="Image3BlockS"></div></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><div class="Image4BlockS"></div></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5"><div class="Image5BlockS"></div></label>
</td>
<td>
<section id="content1">
<div class="Image1BlockB"></div>
</section>
<section id="content2">
<div class="Image2BlockB"></div>
</section>
<section id="content3">
<div class="Image3BlockB"></div>
</section>
<section id="content4">
<div class="Image4BlockB"></div>
</section>
<section id="content5">
<div class="Image5BlockB"></div>
</section>
</td>
</tr></table>
Related
my overall goal is to have different inputs inline which when clicked show a section. I try to rely solely on CSS in this case. Until now it worked quite good; however since the input is wrapped into several other divs the section remains not displayed even when input is checked.
I tried different approaches in CSS to overcome the wrappers around the input... none were successful.
main {
min-width: 320px;
max-width: 100%;
height: auto;
padding: 20px;
margin: 0 auto;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #f3f3f3;
}
#tab1,
#tab2,
#tab3,
#tab4 {
display: none;
}
.profile_overview {
margin-top: 2%;
width: 100%;
height: 40vh;
display: flex;
justify-content: space-between;
}
.profile_one,
.profile_two,
.profile_three,
.profile_four {
width: 22.5%;
height: 100%;
border-radius: 8px;
background-color: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.labeltab {
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
.labeltab:before {
font-weight: lighter;
margin-right: 10px;
}
.labeltab:hover {
color: white;
cursor: pointer;
}
input:checked + .labeltab {
color: white;
border: 1px solid #f3f3f3;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
<main>
<div class="profile_overview">
<div class="profile_one">
<input id="tab1" type="radio" name="tabs" value="a" />
<label class="labeltab" for="tab1">A</label>
</div>
<div class="profile_two">
<input id="tab2" type="radio" name="tabs" value="b" />
<label class="labeltab" for="tab2">B</label>
</div>
<div class="profile_three">
<input id="tab3" type="radio" name="tabs" value="c" />
<label class="labeltab" for="tab3">C</label>
</div>
<div class="profile_four">
<input id="tab4" type="radio" name="tabs" value="d" />
<label class="labeltab" for="tab4">D</label>
</div>
</div>
<section id="content1">
<p>1</p>
</section>
<section id="content2">
<p>2</p>
</section>
<section id="content3">
<p>3</p>
</section>
<section id="content4">
<p>4</p>
</section>
</main>
Since there is no parent's selector in CSS, your inputs have to be ahead in the code and sibblings for the closest position.
you have well linked your labels and inputs via the id and for attributes, you need to place your input as first children inside the parent container or just ahead where your content boxes are.
Your CSS selectors will then work fine.
main {
min-width: 320px;
max-width: 100%;
height: auto;
padding: 20px;
margin: 0 auto;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #f3f3f3;
}
#tab1,
#tab2,
#tab3,
#tab4 {
display: none;
}
.profile_overview {
margin-top: 2%;
width: 100%;
height: 40vh;
display: flex;
justify-content: space-between;
}
.profile_one,
.profile_two,
.profile_three,
.profile_four {
width: 22.5%;
height: 100%;
border-radius: 8px;
background-color: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.labeltab {
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
.labeltab:before {
font-weight: lighter;
margin-right: 10px;
}
.labeltab:hover {
color: white;
cursor: pointer;
}
input:checked+.labeltab {
color: white;
border: 1px solid #f3f3f3;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 {
display: block;
}
<main>
<!-- here is the HTML update structure to use the ::checked state to toggle display on next sibblings -->
<input id="tab1" type="radio" name="tabs" value="a" />
<input id="tab2" type="radio" name="tabs" value="b" />
<input id="tab3" type="radio" name="tabs" value="c" />
<input id="tab4" type="radio" name="tabs" value="d" />
<!-- end update -->
<div class="profile_overview">
<div class="profile_one">
<!-- input moved two level up in html tree -->
<label class="labeltab" for="tab1">A</label>
</div>
<div class="profile_two">
<!-- input moved two level up in html tree -->
<label class="labeltab" for="tab2">B</label>
</div>
<div class="profile_three">
<!-- input moved two level up in html tree -->
<label class="labeltab" for="tab3">C</label>
</div>
<div class="profile_four">
<!-- input moved two level up in html tree -->
<label class="labeltab" for="tab4">D</label>
</div>
</div>
<section id="content1">
<p>1</p>
</section>
<section id="content2">
<p>2</p>
</section>
<section id="content3">
<p>3</p>
</section>
<section id="content4">
<p>4</p>
</section>
</main>
The code below will allow me to alter the css of any sibling div element when the checkbox is checked:-
input[type="radio"]:checked ~ div{
display:none;
}
What i need to do is target a specific div either by its Id or its class when a specific radio button in the list is checked.
I want to try and to this Purely in CSS.
Ive tried doing this :-
input[type="radio"]:checked ~ #one.div{
display:none;
}
https://codepen.io/dyk3r5/pen/WOmxpV?editors=1111
<div class="container">
<input type="radio" id="opt1" name="radiolist" checked>
<label for='opt1'>New Account</label>
<input type="radio" id="opt2" name="radiolist">
<label for='opt2'>Existing Account</label>
<div id="one">Lorem Ipsum 1</div>
<div id="two">Lorem Ipsum 2</div>
</div>
html, body{
height :100%;
}
.container{
display:flex;
justify-content:center;
}
label{
color:#000;
font-weight:600;
height: 25px;
padding: 5px 10px;
border-bottom: 2px solid lightgrey;
margin: 5px 1px;
}
input[type="radio"]{
display:none;
}
input[type="radio"]:checked + label{
border-bottom: 2px solid red;
}
input[type="radio"]:checked ~ div{
display:none;
}
I updated the css to display the corresponding div when a certain radio button is selected. The problem is your selector for the div: #one.div. This targets the element with id "one" and class "div". It should be div#one instead.
html,
body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
}
label {
color: #000;
font-weight: 600;
height: 25px;
padding: 5px 10px;
border-bottom: 2px solid lightgrey;
margin: 5px 1px;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked+label {
border-bottom: 2px solid red;
}
input[type="radio"]~div {
display: none;
}
input[type="radio"][id="opt1"]:checked~div#one,
input[type="radio"][id="opt2"]:checked~div#two {
display: block;
}
<div class="container">
<input type="radio" id="opt1" name="radiolist" checked>
<label for='opt1'>New Account</label>
<input type="radio" id="opt2" name="radiolist">
<label for='opt2'>Existing Account</label>
<div id="one">Lorem Ipsum 1</div>
<div id="two">Lorem Ipsum 2</div>
</div>
I am trying to align some stuff in a login page. I want the pictures to appear left to the input boxes and the buttons on the down part of the div to be left and right. Something like this:
But this is what is happening (on Safari. Chrome works kinda OK as you can see on top image)
The problem is that although it partially works on Chrome, the input boxes are too small and I can't increase their size.
This is the code I am trying to use:
// Outer white DIV for the forms and buttons:
.login-form {
width: 360px;
height: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 19px 29px 29px 19px;
color: #444444;
background: rgba(253, 253, 253, 1.000);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: solid 1px rgba(144, 144, 144, 0.075);
}
// Login field for e-mail:
.login-field-up {
margin-bottom: 5px;
margin-top: 10px;
margin-right: 100px;
float: left;
display: inline-block;
}
/ Login field for password:
.login-field-down {
margin-top: 10px;
margin-bottom: 15px;
float: left;
}
// DIV for Icons of user credential and golden key:
.login-icon {
margin-top: 15px;
margin-right: 15px;
float: left;
display: inline-block;
}
// Right checbox:
.right-col {
float: right;
text-align: center;
margin-top: 10px;
}
Left blue login button:
.left-col {
float: left;
margin-left: 10px;
}
If there is any other easy way to do it, I am up to it. Since I have always worked with backend, I suck with CSS.
<section id="banner">
<h2>Title</h2>
<section>
<div id="skel-layers-wrapper" class="login-form">
<form method="post" action="{% url 'principal' %}">
<div class="login-icon">
<img src="{% static "icons/identity.png" %}" class="icons">
</div>
<div class="login-field-up">
<input type="text" name="username" id="username" placeholder="E-mail" />
</div>
<div class="login-icon">
<img src="{% static "icons/key_user.png" %}" class="icons">
</div>
<div class="login-field-down">
<input type="password" name="password" id="username" placeholder="Password" />
</div>
<div class="left-col">
<input type="submit" value="Login!" class="button" />
</div>
<div class="right-col">
<input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
<label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
</div>
</form>
</div>
</section>
</section>
You can increase the size of your input boxes by setting the "font-size" attribute in your style sheet, for example,
input {
font-size:2em;
}
And you can align images with input boxes by using <label></label>, for example,
<label for="email"><img src="image.png" /></label>
<input type="email" placeholder="E-mail" name="email" />
Or, you can also place the images in a separate div and the inputs in another div and then adjust the width, margin or padding to align them the way you want.
But as Billy said, if you post your html code, it will be easier to provide a solution.
EDIT: Thanks for your code. I think you wanted to achieve something like this. I added some borders to help you understand the positioning of the divs. Remove them and change the urls for the images once you are done debugging.
<!DOCTYPE html>
<html>
<head>
<style>
.login-form {
width: 360px;
height: 300px;
margin-left: auto;
margin-right: auto;
padding: 19px 29px 29px 19px;
color: #444444;
background: rgba(253, 253, 253, 1.000);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: solid 1px rgba(144, 144, 144, 0.075);
border:1px solid black;
}
#title-header {
text-align:center;
}
#username, #password {
margin-left:20px;
}
input {
font-size:1em;
}
img {
width:16px;
height:16px;
}
.login-field-up {
margin-left:50px;
width:250px;
border:1px solid black;
}
.login-field-down {
margin-left:50px;
width:250px;
border:1px solid black;
margin-top:20px;
margin-bottom:20px;
}
.login-icon {
border:1px solid black;
}
.right-col {
float:left;
width:160px;
margin-left:30px;
border:1px solid black;
}
.left-col {
margin-left:50px;
float:left;
width:60px;
border:1px solid red;
}
.inner-wrapper {
margin-top:50px;
width:350px;
height:150px;
border:1px solid red;
}
</style>
<section id="banner">
<h2 id="title-header">Title</h2>
<section>
<div id="skel-layers-wrapper" class="login-form">
<form method="post" action="{% url 'principal' %}">
<div class="inner-wrapper">
<div class="login-field-up">
<img src="image.png">
<input type="text" name="username" id="username" placeholder="E-mail" />
</div>
<div class="login-field-down">
<img src="image.png">
<input type="password" name="password" id="password" placeholder="Password" />
</div>
<div class="left-col">
<input type="submit" value="Login!" class="button" />
</div>
<div class="right-col">
<input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
<label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
</div>
</div>
</form>
</div>
</section>
</section>
http://jsfiddle.net/9FG4f/4/
I tried a different way to line up the labels and textfields in the form area along with the button horizontally, but the email label and txtfield is not aligned perfectly.
HTML
<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<div id="action3-fname">
<label class="nick-3">Full Name:</label>
<input type="text" class="name2" name="full_name" />
</div>
<div id="action3-email">
<label class="nick-4">Email Address:</label>
<input type="text" class="email2" name="email">
</div>
<div id="action3-button">
<input type="submit" class="btn2" value="JOIN NOW" name="submit">
</div>
</form>
</div>
CSS
#action3-fname {
display:inline-block;
}
#action3-email {
display:inline-block;
}
#action3-button {
display:inline-block;
}
.action3 .name2 {
border:thin #999 solid;
border-radius:5px;
float:left;
height:22px;
margin-bottom:10px;
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
.action3 .email2 {
border: thin #999 solid;
border-radius: 5px;
height: 22px;
margin-left: 22px;
margin-top: -8px;
padding: 4px;
width: 210px;
}
.action3 .nick-3 {
color:#000000;
}
.action3 .nick-4 {
margin-left:23px;
color:#000000;
}
.action3 .btn2 {
background: none repeat scroll 0 0 #ff8400;
border: medium none;
border-radius: 5px;
color: #FFFFFF;
cursor: pointer;
font-size: 22px;
font-weight: bold;
height: 40px;
margin-bottom: 15px;
text-align: center;
width: 140px;
margin-left:10px;
}
I'd get rid of the floats and the margin-tops. Like so:
.action3 .email2 {
border: thin #999 solid;
border-radius: 5px;
height: 22px;
margin-left: 22px;
padding: 4px;
width: 210px;
}
Here's a fiddle: http://jsfiddle.net/disinfor/9FG4f/8/
EDIT
Updated with fiddle that closes all tags correctly and combines the first three lines of CSS into a class.
.actionClass {
display:inline-block;
}
<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<div id="action3-fname" class="actionClass">
<label class="nick-3">Full Name:</label><br />
<input type="text" class="name2" name="full_name" />
</div>
<div id="action3-email" class="actionClass">
<label class="nick-4">Email Address:</label><br />
<input type="text" class="email2" name="email" />
</div>
<div id="action3-button" class="actionClass">
<input type="submit" class="btn2" value="JOIN NOW" name="submit" />
</div>
</form>
</div>
Get rid of the <br>, get rid of the float's and it should all line up nicely.
.action3 .name2 {
border:thin #999 solid;
border-radius:5px;
/* float:left; <-- remove this */
height:22px;
margin-bottom:10px;
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
Here is your updated fiddle
I actually made them float left and corrected a couple margins. Button and everything lined up together.
Here's my updated fiddle
#action3-fname {
float:left;
}
#action3-email {
float:left;
}
Please help me.
I have spent time trying to work out why joinform div doesn't sit nicely next to the div containing the myhomepageimage.jpg image.
I thought it was the width of the form.
The "Register now to join site" sits perfectly, but the form sits below the image.
What am I missing.
Also, I am new to CSS so please be tolerant of my stupidity.
Thanks!
<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"><img src="urlformylogo.png" alt="Hi Mom"><br>
</div>
<ul id="topmenu"><li>Join Now</li><li>Login Here</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>
It's simple. There's a typo:
#joinform {
width:550px*:*
float:right;
}
change it to ;
#joinform { width:550px; float:right; }