I am trying to show a CSS only vertical accordion inside a page having other things. Only the accordion is not showing properly - the las / bottom-most link opens the intended text - other links do not. But this same code works when written in a different HTML document having only the accordion.
I have gut feeling that the problem is in the CSS and about sizing or positioning (absolute / relative) - but cannot find it out.
Hope to get some light ...
My HTML and CSS are like below:
HTML:
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" type="text/css" href="main1(with-accordion).css" media="screen">
</head>
<body>
<div id="header">
We do things to help you
<div id="inner_header">
to your satisfaction ....
</div>
</div>
<div id="nav">
<ul>
<li>
<input type="radio" name="tabs" checked id="tab1">
<label for="tab1">Who are we</label>
<div class="content">
<span>
Contents of tab1 goes here:
Visions etc.
</span>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">What we do</label>
<div class="content">
<span>Contents of tab2 goes here:
Credentials, visions etc.
</span>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Contact us</label>
<div class="content">
<span>
Contents of tab3 goes here:
Contents etc.
</span>
</div>
<form method="post" id="data">
<fieldset > <legend> Data </legend>
<br>
<span class="inputs">
<label>First Name :</label>
<input type="text" name="First_Name" size="50">
</span>
<br>
<br>
<span class="inputs">
<label>Middle Name :</label>
<input type="text" name="Middle_Name" size="50">
</span>
<br>
<br>
<span class="inputs">
<label>Last Name :</label>
<input type="text" name="Last_Name" size="50">
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Address 1 : </label>
<input type="text" name="Address1" size="50">
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Address 2 :</label>
<input type="text" name="Address2" size="50">
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Pincode :</label>
<input type="text" name="pincode" size="20">
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Country :</label>
<select>
<option value="Afghanistan" title="Afghanistan">Afghanistan</option>
<option value="Åland Islands" title="Aland Islands">Aland Islands</option>
<option value="Albania" title="Albania">Albania</option>
<option value="Algeria" title="Algeria">Algeria</option>
<option value="American Samoa" title="American Samoa">American Samoa</option>
<option value="Andorra" title="Andorra">Andorra</option>
<option value="Angola" title="Angola">Angola</option>
<option value="Anguilla"
</select>
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Email ID :</label>
<input type="email" name="email" size="30">
</span>
<br>
<br>
</fieldset>
</form>
<input class="cancel_button" type="button" name="Cancel" value="Cancel">
<input class="submit_button" type="button" name="Submit" value="Submit">
</li>
</ul>
</div>
<!-- The following code block is the problem area-->
<div id="accordion">
<ul>
<li> Tab1</li>
<div id ="tab1" class="accordion-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
</div>
<li> Tab2</li>
<div id ="tab2" class="accordion-content">
Cum eu oporteat voluptatum, mandamus explicari ius eu. Discere
</div>
<li> Tab3</li>
<div id ="tab3" class="accordion-content">
No amet nullam detracto usu, vix posse iracundia deterruisset
</div>
<li> Tab4</li>
<div id ="tab4" class="accordion-content">
In a professional context it often happens that private or
</div>
</ul>
</div>
<!-- The above code block is the problem area-->
<div id="right_bar">Fixed contents here ... </div>
<div id="footer">Page created by: Sukalyan Ghoshal. Email:sukalayn_g#yahoo.com </div>
</body>
</html>
CSS:
#header {
position: absolute;
left: 0;
top: 0;
padding-top: 0;
height: 200px;
line-height: 250%; /**** This line is used to control spacing between the two lines in the header *****/
white-space: nowrap;
text-align: right;
font-size: 3em;
font-style: italic;
font-weight: bold;
color: navy;
width: 100%;
background: -webkit-linear-gradient (to right, mediumblue, darkturquoise);
background: -o-linear-gradient(to right, mediumblue, darkturquoise);
background: -moz-linear-gradient(to right, mediumblue, darkturquoise);
background: linear-gradient(to right, mediumblue, darkturquoise);
}
#inner_header {
display: block;
margin-top: 0;
line-height: 20%; /**** This line is also used to control spacing between the two lines in the header *****/
}
/*accordion css*/
#accordion {
position: absolute;
left: 0;
top: 200px;
}
#accordion ul {
position: relative;
top: 0;
list-style-type: none;
}
#accordion ul a {
display: block;
}
#accordion div {
display: none;
}
#accordion ul li + div:target {
display: inline-block;
margin-top: 10px;
}
.accordion-content {
width: 200px;
}
/* end of accordion css */
#nav {
position: absolute;
left: 225px;
top: 200px;
eight: 600px;
width: 775px;
border-style: solid;
border-width: 1px;
border-color: green;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
display: inline-block; /******* Display property of the li must be set to inline-block along with that of the labels for showing labels side by side *****/
height: 30px;
}
#nav ul li input[type="radio"] {
display: none;
}
#nav ul li label {
float: left;
display:inline-block;
vertical-align: middle;
padding-top: 5px;
padding-bottom: -5px;
margin-bottom: -15px;
width: 125px;
height: 2.1em;
text-align: center;
font-size: 1em;
overflow: auto;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: green;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-width: 0;
line-height: 2.1em;
white-space: nowrap; /****** height=line-height with white-space=nowrap makes text inside an element vertically centered ********/
}
#nav div {
display: none;
position: absolute;
top: 56px;
left: 35px;
width: 700px;
height: 543px;
border-style: solid;
border-width: 1px;
border-color: green;
text-align: center;
}
#nav .content span {
vertical-align: middle;
}
/****** The next two block must be like this to the minimum to show a behaviour of tabs and tabbed content showing not to have a seperation between them ******/
#nav input[type="radio"]:checked ~ div {
display: block;
background-color: pink;
z-index: -1; /****The z-index property of the labels and the <div> element showing tab content must be staggered like this *****/
}
#nav input[type="radio"]:checked ~ label {
border-bottom-width: 0;
height: 2.2em; /*** In this particular design em has been used for height of labels for ease of toggling border between tab and content *****/
background-color: pink;
z-index: 2; /****The z-index property of the labels and the <div> element showing tab content must have staggered z-index like this *****/
}
/****** The previous two block must be like this to the minimum to show a behaviour of tabs and tabbed content showing not to have a seperation between them ******/
#data {
position: absolute;
left: 100px;
top: 100px;
width: 500px;
height: 550px;
display: none;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs {
position: relative;
left: 50px;
width: 100px;
}
#nav input[id="tab3"]:checked ~ form { /**** This styling is required for showing the form. Without this the fields in the form do not show up. *****/
display:inline-block;
}
#nav input[id="tab3"]:checked ~ form > fieldset {
position: absolute;
width: 565px;
left: -10px;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > label {
display: block;
float: left;
margin: 0;
padding: 3px 13px 0 0;
text-align: right;
width: 140px;
background-color:pink;
border-width: 0;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > input[type="text"] {
padding-top: -5px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
height:25px;
line-height:25px;
width:200px;
text-indent:5px;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > select {
padding-top: -5px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
height:25px;
line-height:25px;
width:200px;
text-indent:5px;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > input[type="email"] {
padding-top: -5px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
height:25px;
line-height:25px;
width:200px;
text-indent:5px;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > select {
width: 250px;
}
#nav input[id="tab3"]:not(:checked) ~ .cancel_button {
display: none;
}
#nav input[id="tab3"]:not(:checked) ~ .submit_button {
display: none;
}
#nav input[id="tab3"]:checked ~ .cancel_button {
position: absolute;
width: 100px;
left: 400px;
top: 540px;
height: 30px;
border-radius: 5px;
}
#nav input[id="tab3"]:checked ~ .submit_button {
position: absolute;
width: 100px;
left: 550px;
top: 540px;
height: 30px;
border-radius: 5px;
}
#right_bar {
position: absolute;
top: 200px;
left: 1002px;
height: 600px;
width: 340px;
border-style: solid;
border-color: orange;
}
#footer {
position:absolute;
left: 0;
top: 1200px;
width: 100%;
/*border-style: solid;
border-width: 1px;
border-color: black;*/
font-size: 1.25em;
font-style: italic;
font-weight: bold;
text-align: center;
color: white;
background-color: mediumorchid;
height: 100px; /***** The next three lines together vertically center the writing in the <div> ******/
line-height: 100px; /**** height and line-height must be same with white-space having a value of "nowrap" *****/
white-space: nowrap;
background: -webkit-linear-gradient (mediumorchid, violet);
background: -o-linear-gradient(mediumorchid, violet);
background: -moz-linear-gradient(mediumorchid, violet);
background: linear-gradient(mediumorchid, violet);
}
...Sorry for the long HTML and CSS ...
If you set multiple bookmarks with the same ID html never work, remember to set your code well or you'll never find the errors, also have left open many tags, (I've closed myself), click the JSFiddle link below for the correction .
The problem was in this part of code:
HTML
<div id="accordion">
<ul>
<li> Tab1</li>
<div id="tab10" class="accordion-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
</div>
<li> Tab2</li>
<div id="tab20" class="accordion-content">
Cum eu oporteat voluptatum, mandamus explicari ius eu. Discere
</div>
<li> Tab3</li>
<div id="tab30" class="accordion-content">
No amet nullam detracto usu, vix posse iracundia deterruisset
</div>
<li> Tab4</li>
<div id="tab40" class="accordion-content">
In a professional context it often happens that private or
</div>
</ul>
</div>
http://jsfiddle.net/Lsbeuv59/4/
I set hashtag with big characters to make sure the resolution of the problem in future cases
Related
I am trying to achieve borders on each print page, on chrome it works fine but in safari border is getting chopped.
I have created a div which is fixed. That div has borders so when window print is triggered, borders comes on all the pages on chrome, but not on safari.
Anyone has solution for this??
my code:
<div class="loading-mask" data-role="loader" style="display: none !important">
<div class="loader">
</div>
</div>
<div class="cutom-container"></div>
<div class="content-div">
<div>
<div class="logo-content">
<div class="logo-div">
<img class="print-logo" src="<?= $this->getViewFileUrl('images/cart-page-print-logo.png'); ?>" alt="<?= __('Print Header Logo'); ?>"/>
<p>
----- </h3>
</p>
<div class="input-container">
<label>Company Name : </label><span id="pcname"> </span>
</div>
<div class="input-container">
<label>Contact : </label><span id="pcontact"> </span>
</div>
<div class="input-container">
<label>Phone : </label><span id="pphone"> </span>
</div>
</div>
</div>
<div class="img-content">
<img class="promotional-img" src="<?= $this->getViewFileUrl('images/PRT-offer graphic.png'); ?>" alt="<?= __('Print Offer'); ?>"/>
</div>
</div>
<div>
<div class="input-container">
<label>Email : </label><span id="pemail"> </span>
</div>
<div class="input-container">
<label>Delivery Address : </label><span id="daddress"> </span>
</div>
<div class="input-container">
<label>Mailing Address : </label><span id="maddress"> </span>
</div>
</div>
<div>
<table id="product-list-print">
</table>
</div>
<div id="sub-total-print">
</div>
<div>
<div class="logo-content">
<p>
Shipping (Shipping rates are appox and apply to US Mainland ONLY)</br> - Please see Sales Specialist for exact quote. Shipping rates for Aff ordable Advantage Trailers do not apply. Park Model Units will require additional shipping fee. <strong>Estimate is valid for 7 days.</strong>
</p>
</div>
<div class="img-content">
<div>
To order this unit sign here
</div>
<div>
<canvas id="myCanvas" style="width: 100%">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
</div>
</div>
</div>
css :
/* Print page css */
.cutom-container{
border : solid #670827 5px;
border-radius: 10px;
position:fixed;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
/*border: 5px solid red;*/
}
.content-div{
padding: 10px 5px 5px 5px;
display: none;
}
.logo-content{
display: inline-block;
width: 64%
}
.img-content{
display: inline-block;
width: 35%
}
.print-logo{
width: 50%;
}
.logo-div{
text-align: center;
}
.promotional-img{
width: 100%;
}
.img-content{
text-align: center;
}
.input-container{
padding: 8px;
text-align: left;
border:solid #670827 1px;
font-size: 15px;
margin: 10px;
}
/* end */
.warranty-container{
padding: 10px;
font-size: 16px;
border: solid;
border-width: 1px;
}
.cart-product-warrenty{
display: none;
}
.center-align{
text-align: center;
}
#signArea{
margin-bottom:20px ;
}
#media print {
#page {
border : solid #670827 5px;
border-radius: 10px; }
.cart-container{
display: none;
}
.cutom-container{
display: block !important;
padding: 15px;
}
.content-div{
display: block !important;
padding: 15px;
}
.cart-product-warrenty{
display: contents;
}
.summary.title{
display: none;
}
#sub-total-print>.fieldset{
display: none;
}
#block-shipping{
display: none;
}
input.qty{
width: 50px !important;
padding: 0 !important;
text-align: center;
}
.product-item-name{
text-decoration: unset;
font-size: 1.8rem;
line-height: 1;
font-weight: 700;
padding-top: 0px;
}
.messages{
display: none;
}
a{
text-decoration: none !important;
}
}
#media only screen and (max-width: 600px) {
.modal-content{
width: 80%;
}
.current{
width: 250px !important;
}
.sign-pad{
width: 247px !important;
}
.modal-content{
margin-bottom: 55px;
}
.cart-product-warrenty{
display: none;
}
}
My body, including the content and aside is not aligned with the right edge of the navigation bar. How do I modify my code so that it's aligned as I add content to the aside? Should I alter the navigation bar or body itself? How will the css look like?
->>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Birdwatching</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
html
{ height: 100%;
}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #F0EFE2 url(background.png) repeat;
color: #000;
width: 70%;
min-width: 800px;
margin: 0 auto;
}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
img
{ border: 0;}
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #7E2451;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}
h2
{ font: normal 175% 'century gothic', arial, sans-serif;}
h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: normal 120% arial, sans-serif;}
h5, h6
{ font: italic 95% arial, sans-serif;
padding: 0 0 15px 0;}
nav ul {
background: url(transparent.png) ;
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #fff;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
margin: 5px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display:inline-block;
position: relative;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align:left;
}
.dropdown-content a:hover {
background: #bada55;
left:auto;
right:0;
margin-right:-10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
main
{ width: 854px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 0 24px 20px 20px;
background: transparent url(transparent_light.png) repeat;}
article
{ text-align: left;
float: left;
width: 595px;
padding: 0;}
article ul
{ margin: 2px 0 22px 0px;}
article ul li
{ list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 6px 0;
padding: 0 0 4px 25px;
line-height: 1.5em;}
aside
{ float: right;
width: 210px;
padding: 0 15px 20px 15px;}
aside ul
{ width: 198px;
padding: 4px 0 0 0;
margin: 4px 0 30px 0;}
aside li
{ list-style: none;
padding: 0 0 7px 0; }
aside li a, .sidebar li a:hover
{ padding: 0 0 0 40px;
display: block;
background: transparent url(link.png) no-repeat left center;}
aside li a.selected
{ color: #7E2451;
text-decoration: none;}
</style>
</head>
<body>
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown">Get started
<div class="dropdown-content">
Preparation
D-Day
Useful Resources
</div>
</li>
<li class="dropdown">Gallery
<div class="dropdown-content">
MUN 2015
MUN 2016
MUN 2017
</div>
</li>
<li class="dropdown">Contact Us
<div class="dropdown-content">
Ask A Question
Contact Information
Map
</div>
</li>
<li class="dropdown">Forum
<div class="dropdown-content">
About
Sign-Up
Community
</div>
</li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Welcome</h2>
<p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>
<p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ojcNcvb1olg" frameborder="0" allowfullscreen sandbox></iframe>
<h2>Rocking the free web</h2>
<p>Mozilla are a global community of technologists, thinkers, and builders, working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Click on the images below to find more information about the cool stuff Mozilla does. Red panda picture by Mathias Appel.</p>
</article>
<aside>
<h2>Favourite photos</h2>
<img src="favorite-1_th.jpg" alt="Small black bird, black claws, long black slender beak, links to larger version of the image">
<img src="favorite-2_th.jpg" alt="Top half of a pretty bird with bright blue plumage on neck, light colored beak, blue headdress, links to larger version of the image">
<img src="favorite-3_th.jpg" alt="Top half of a large bird with white plumage, very long curved narrow light colored break, links to larger version of the image">
<img src="favorite-4_th.jpg" alt="Large bird, mostly white plumage with black plumage on back and rear, long straight white beak, links to larger version of the image">
</aside>
<aside>
<form>
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Contact information</h2>
<fieldset>
<legend>Title</legend>
<ul>
<li>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." >
Mister
</label>
</li>
<li>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms.">
Miss
</label>
</li>
</ul>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="pwd">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Payment information</h2>
<p>
<label for="card">
<span>Card type:</span>
</label>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Card number:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Expiration date:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/yy</em>
</label>
<input type="text" id="date" name="expiration">
</p>
</section>
<p> <button type="submit">Validate the payment</button> </p>
</form>
</aside>
</main>
</body>
Note: Click full page when testing.
As you can see by the snippet, the section with the class "common" is set to a fixed position, but it seems to be relative to the other section. How do I fix it so that the common section is fixed relative to the browser?
Jsfiddle:
https://jsfiddle.net/my1c76vb/?utm_source=website&utm_medium=embed&utm_campaign=my1c76vb
Code:
HTML5:
<?php session_start(); ?>
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Log in</title>
<body>
<section class="common">
<header>
<img src="resources/header.png" alt="Sqeaking Duck"/>
</header>
<aside class="menu">
<h3>Guest</h3>
<hr>
<nav>
<ul>
<li>Home</li>
<li>Log in</li>
<li>Register</li>
</ul>
</nav>
</aside>
</section>
<section class="login">
<form action="loginManager.php" method="post">
<fieldset>
<legend>Log in</legend>
User: <input type="text" name="username" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['userErr'] : '';?></span><br>
Password: <input type="password" name="password" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['passErr'] : '';?></span><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>
<p><span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?></span></p>
</section>
</body>
CSS:
/*Common pages */
.common {
z-index: 1;
margin-top: 10px;
position: fixed;
width: 100%;
}
header {
width: 100%;
text-align: center;
background-color: CornflowerBlue;
}
.menu {
margin-top: 25px;
width: 80px;
background-color: black;
text-align: center;
}
.menu h3 {
color: white;
display: inline-block;
margin: 0;
padding-top: 5px;
}
.menu hr {border-color: white;}
.menu nav {
display: inline-block;
text-align: left;
width: 100%
}
.menu ul {
list-style: none;
padding: 0px 0px 0px 10px;
margin: 0;
}
.menu li {
padding-bottom: 10px;
}
.menu a {
text-decoration: none;
color: white;
}
/*Log in page*/
.login {
text-align: center;
z-index: 0;
margin-top: 300px;
}
/*General*/
body {
background-color: grey;
}
First thing I noticed is that the fixed element is having a margin-collapse. Google how to fix margin-collapsing. I added,
padding-top: 1px;
to the body.
Next I added,
height: 2000px to the body so the body can scroll and you can see the position:fixed in play
https://jsfiddle.net/my1c76vb/1/
I am guessing you want a layout which somewhat represents YouTubes layout (with a fixed header and a side bar).
The elements that have a fixed positioning are "lifted up" from the page so the rest of the page renders as if those elements wouldn't even be there. That in mind you have to adjust your layout a little:
CSS
* {
padding: 0;
margin: 0;
}
header {
background-color: #222;
position: fixed;
top: 0;
width: 100%;
height: 150px;
}
.container {
margin-top: 150px; /*Same as header height*/
margin-left: 150px; /*Same as menu width*/
}
.menu {
background-color: #333;
position: fixed;
left: 0;
width: 150px;
}
.content {
padding: 10px;
}
HTML
<header></header>
<section class="container">
<aside class="menu">
<!-- Menu here -->
</aside>
<div class="content">
<!-- Content here -->
</div>
</section>
Here is a demo
The content must have a margin (or padding) so that it wont get buried under the fixed elements.
/*Common pages */
.common {
z-index: 1;
margin-top: 10px;
position: relative;
width: 100%;
}
header {
width: 100%;
text-align: center;
background-color: CornflowerBlue;
}
.menu {
margin-top: 25px;
width: 80px;
background-color: black;
text-align: center;
}
.menu h3 {
color: white;
display: inline-block;
margin: 0;
padding-top: 5px;
}
.menu hr {border-color: white;}
.menu nav {
display: inline-block;
text-align: left;
width: 100%
}
.menu ul {
list-style: none;
padding: 0px 0px 0px 10px;
margin: 0;
}
.menu li {
padding-bottom: 10px;
}
.menu a {
text-decoration: none;
color: white;
}
/*Log in page*/
.login {
text-align: center;
z-index: 0;
margin-top: 320px;
}
/*General*/
body {
background-color: grey;
}
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Log in</title>
</head>
<body>
<section class="common">
<header>
<img src="resources/header.png" alt="Sqeaking Duck"/>
</header>
<aside class="menu">
<h3>Guest</h3>
<hr>
<nav>
<ul>
<li>Home</li>
<li>Log in</li>
<li>Register</li>
</ul>
</nav>
</aside>
</section>
<section class="login">
<form action="loginManager.php" method="post">
<fieldset>
<legend>Log in</legend>
User: <input type="text" name="username" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['userErr'] : '';?></span><br>
Password: <input type="password" name="password" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['passErr'] : '';?></span><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>
<p><span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?></span></p>
</section>
</body>
</html>
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;
}
OK, so my stupid little login form almost looks how I want it to look. (This is basically my first CSS project ever and first HTML project since updating attempting to update my 15 year old HTML skills.) For the life of me, I can't figure out how to get the "forgot password?" link to move down, either aligned with the middle or bottom of the "Login" button. I've tried moving the display: inline; and vertical-align: middle; to all kinds of different selectors and none of them work! I've even tried setting the height of the anchor and/or the <li> elements. I don't understand what the deal is! Any help is greatly appreciated!
Here is my code:
form.login {
margin: 10px 10px 20px 20px;
padding: 0 0 0 0;
}
form.login fieldset{
margin: 0 0 0 0;
padding: 2px 2px 2px 2px;
border:2px solid;
border-radius: 5px;
width: 348px;
height: 90px;
}
form.login fieldset legend {
font-weight: bold;
font-size: 1.2em;
margin-left: 10px;
}
form.login fieldset ul {
margin: 0;
padding:0;
}
form.login fieldset fieldset {
border: 0;
width: 100%;
height: 40%;
display: inline;
vertical-align: middle;
}
form.login fieldset fieldset li{
float: left;
list-style: none;
width: 165px;
margin: 0 4px 0 4px;
}
form.login input {
width: 165px;
}
form.login label {
display: none;
}
form.login a:link,
form.login a:visited {
color: black;
font-size: 0.8em;
}
form.login a:hover {
color: blue;
}
form.login a:active {
color: blue;
}
form.login fieldset ul fieldset li button#submitLogin {
float: right;
}
and the HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="formstyle.css" />
</head>
<body>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="login">
<fieldset>
<legend>Login</legend>
<ul>
<fieldset>
<li>
<label for="email">Email Address</label>
</li>
<li>
<input id="email" type="text" name="email">
</li>
<li>
<label for="password">Password</label>
</li>
<li>
<input id="password" type="password" name="password">
</li>
</fieldset>
<fieldset>
<li>
Forgot Password?
</li>
<li>
<button id="submitLogin" value="submit" name="submitLogin" type="submit">Login</button>
</li>
</fieldset>
</ul>
</fieldset>
</form>
</body>
</html>
EDIT:
Here's a screen shot of what it looks like with the code above.
Try changing:
<li class="middle">
Forgot Password?
</li>
<li class="middle">
<button id="submitLogin" value="submit" name="submitLogin" type="submit">Login</button>
</li>
and add this to your css:
.middle {
height: 22px;
line-height: 22px;
}
This explicitly gives it a set-height and and then through the line-heightproperty tells it to center the text and form objects in the li vertically.
I reworked your markup to remove the fieldsets and to make the style's more consistent. What I am doing here is making the li's all half of the width and height of the UL. That way, if you want to changed the fieldset's height and/or width, you just have to change the one spot and maybe tweak your other styles.
I also condensed and removed some other unnecessary property declarations (padding: 0 0 0 0 to padding: 0). Let me know if you have any questions.
EDIT
I worked on it to make it more consistent between Chrome and Firefox.
And I actually think you'd be better putting the height on the li elements:
http://jsfiddle.net/QRNBg/13/
Try viewing the above and run it while commenting out the display: none on the CSS .hide class declaration.
CSS
form.login {
margin: 10px 10px 20px 20px;
padding: 0;
font-size: 1.2em;
}
form.login fieldset {
margin: 0;
padding: 5px;
border: 2px solid;
border-radius: 9px;
display: inline-block;
}
form.login fieldset legend {
font-weight: bold;
font-size: 1.2em;
margin-left: 10px;
}
form.login fieldset ul {
margin: 0;
padding: 0;
height: 90px;
width: 348px;
}
form.login fieldset ul li {
width: 50%;
height: 45%;
float: left;
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
form.login input {
border: 1px solid #aaa;
}
form.login input,
form.login li.common a {
width: 93%;
height: 80%;
display: block;
margin: 5px;
font-size: 1em;
}
form.login .hide {
display: none;
}
form.login a:link,
form.login a:visited {
color: black;
font-size: 0.8em;
}
form.login a:hover,
form.login a:active {
color: blue;
}
form.login li.common {
text-align: left;
display: table-cell;
line-height: 2.5em;
}
#submitLogin {
text-align: right;
margin: 0 5px 0 -5px;
}
#submitLogin button {
padding: 5px 8px;
}
HTML
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="login">
<fieldset>
<legend>Login</legend>
<ul>
<li class="hide">
<label for="email">Email Address</label>
</li>
<li>
<input id="email" type="text" name="email">
</li>
<li class="hide">
<label for="password">Password</label>
</li>
<li>
<input id="password" type="password" name="password">
</li>
<li class="common">
Forgot Password?
</li>
<li id="submitLogin" class="common">
<button value="submit" name="submitLogin" type="submit">Login</button>
</li>
</ul>
</fieldset>
</form>
http://jsfiddle.net/QRNBg/11/
you want it beside the login button, yet you define it in an 'li' tag before the login button? have you tried putting that anchor in the same 'li'? using a 'table' and putting them in the same 'tr' would work for sure.
Here's a quick fix. http://jsfiddle.net/xNAnz/
I offset the li 10px from the top.