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.
Related
I am trying to size a navbar logo on the left side of the horizontal navbar and then have the rest of the navbar items take the same vertical space and be vertically centered in the space. The navbar items currently do not use the full vertical space. Every sizing attribute that I've tried has created another problem. Thanks for all help.
Note: Can't use bootstrap. Wish I could.
/****************************************/
/* Fixed top navbar with dropdowns */
/****************************************/
.m-navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
/*.m-navbar li {
float: left;
}*/
.m-navbar-right {
float: right;
}
.m-navbar-left {
float: left;
}
.m-navbar li a, .m-menu-form {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: none;
font-size: 100%;
font-family: "Lato", sans-serif;
}
.m-navbar li a:hover:not(.active), .m-dropdown:hover, .m-menu-form:hover {
/*background-color: #ddd;*/
background-color: #9dd0f0;
}
.m-navbar-logo-img {
padding: 3px 0px 4px 4px;
width: auto;
max-height: 33px;
position: relative;
}
.m-navbar li a.active {
color: white;
background-color: #00719c;
}
.m-navbar li.m-dropdown {
display: inline-block;
}
.m-dropdown-content {
display: none;
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="navbar.css">
<title>Navbar Problem</title>
</head>
<body>
<div class="m-outer">
<div class="m-fixed-header">
<div class="m-navbar">
<ul>
<li class="m-navbar-left"><img class="m-navbar-logo-img" src="bugicon.png"></img></li>
<li class="m-navbar-left">
<form name="idForm" method="post" action="">
<input type="submit" name="action" class="m-menu-form" value="Home">
</form>
</li>
<li class="m-dropdown m-navbar-left">
Menu 1
<div class="m-dropdown-content">
Drop 1<br>
Drop 2<br>
Drop 3<br>
</div>
</li>
<li class="m-dropdown m-navbar-left">
Menu 2
<div class="m-dropdown-content">
Drop 1<br>
Drop 2<br>
Drop 3<br>
Drop 4<br>
Drop 5<br>
</div>
</li>
<li class="m-navbar-right"><a href='#'>Logoff </a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
did you try it with display:flex;
/****************************************/
/* Fixed top navbar with dropdowns */
/****************************************/
.m-navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
display: flex;
flex-shrink: 1;
display: -webkit-flex;
-webkit-justify-content: space-around;
justify-content: space-around;
}
/*.m-navbar li {
float: left;
}*/
.m-navbar-right {
float: right;
}
.m-navbar-left {
float: left;
}
.m-navbar li a, .m-menu-form {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: none;
font-size: 100%;
font-family: "Lato", sans-serif;
}
.m-navbar li a:hover:not(.active), .m-dropdown:hover, .m-menu-form:hover {
/*background-color: #ddd;*/
background-color: #9dd0f0;
}
.m-navbar-logo-img {
padding: 3px 0px 4px 4px;
width: auto;
max-height: 33px;
position: relative;
}
.m-navbar li a.active {
color: white;
background-color: #00719c;
}
.m-navbar li.m-dropdown {
display: inline-block;
}
.m-dropdown-content {
display: none;}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="navbar.css">
<title>Navbar Problem</title>
</head>
<body>
<div class="m-outer">
<div class="m-fixed-header">
<div class="m-navbar">
<ul>
<li class="m-navbar-left"><img class="m-navbar-logo-img" src="bugicon.png"></img></li>
<li class="m-navbar-left">
<form name="idForm" method="post" action="">
<input type="submit" name="action" class="m-menu-form" value="Home">
</form>
</li>
<li class="m-dropdown m-navbar-left">
Menu 1
<div class="m-dropdown-content">
Drop 1<br>
Drop 2<br>
Drop 3<br>
</div>
</li>
<li class="m-dropdown m-navbar-left">
Menu 2
<div class="m-dropdown-content">
Drop 1<br>
Drop 2<br>
Drop 3<br>
Drop 4<br>
Drop 5<br>
</div>
</li>
<li class="m-navbar-right"><a href='#'>Logoff </a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
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>
I am currently using collapsible contents from Bootstrap. So this is the actual visualization when I clicked on the background of collapsible-header.
1st part ( not yet collapsed)
2nd part (After collapsed)
As you noticed, the icon wasn't changed when I clicked on the collapsible-header background. The lists collapsed but I want the icon to be changed along by pressing the background afterwards.
However, there is no problem if i clicked on the icon itself and i will have the icon changed to plus sign and the contents will be collapsed as well.
But I would like to have my collapsible-header background to be responsive along with the icon as well. Please do help. Here's the sample code but I cant have proper visualization and I would like to apologize for the inconvenience.
<div class="col-md-12" style="margin:20px 0 0 0">
<ul class="collapsible collapsible-landing" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<span class="pull-left"><h3>Categories</h3></span>
<span class="pull-right">
<i class="zmdi zmdi-plus"></i>
<i class="zmdi zmdi-minus"></i>
</span>
</div>
<div class="collapsible-body">
<ul class="collapsible-list">
<li> Sample 1 </li>
<li> Sample 2 </li>
<li> Sample 3 </li>
<li> Sample 4 </li>
<li> Sample 5 </li>
<li> Sample 6 </li>
<li> Sample 7 </li>
<li> Sample 8 </li>
<li class="clearfix"></li>
</ul>
</div>
</li>
</ul>
</div>/
Heres the css part
.catehide2, .cateshow2 {
float: right;
font-size: 20px;
color: #000000;
text-align: center;
padding:0;
}
.catehide2:hover, .cateshow2:hover {
color: #9e9e9e;
text-decoration: none;
opacity: 1;
}
.categorybox1 ul{
list-style-type:none;
margin:0;
padding:0;
display:none;
height:auto;
font-family: 'Roboto', sans-serif;
font-weight:450;
font-size:15px;
color:#424242;
border:0;
}
.categorybox1 ul li{
float: left;
width: 25%;
padding: 0 0 15px 40px;
}
.categorybox1 ul li a:link, .categorybox1 ul li a:visited {
color:#424242;
text-decoration: none;
}
.categorybox1 ul li a:hover, .categorybox1 ul li a:active {
color:#9e9e9e;
text-decoration: none;
}
.collapsible-landing {
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
margin: 0.5rem 0 1rem 0;
box-shadow: none;
}
.collapsible-landing .collapsible-header {
display: block;
cursor: pointer;
height: 60px;
line-height: 60px;
padding: 0 24px;
background-color: #fff;
border-bottom: none;
}
.collapsible-landing .collapsible-header h3 {
font-size: 16px;
font-weight: 500;
padding:0;margin: 0;
line-height: 60px;
}
.collapsible-landing .collapsible-header i {
width: auto;
font-size: 1.6rem;
line-height: 60px;
display: block;
float: left;
text-align: center;
margin-right: 0;
}
.collapsible-landing .collapsible-body {
background: #ffffff;
display: none;
border-bottom: none;
box-sizing: border-box;
}
.collapsible-list li a {
width:25%;
padding:10px 24px;
float:left;
color:#424242;
}
.collapsible-list li a:hover {
text-decoration: none;
border-bottom: none;
color:#9e9e9e;
}
.collapsible-list li.clearfix {
clear:both;
padding: 0 0 20px 0;
}
UPDATED
Pure CSS Way
Problem of icon change on expand and collapse of accordion has been resolved.
Check example code at CODEPEN
HTML:
<div class="col-md-12 " style="margin:20px 0 0 0">
<ul class="collapsible collapsible-landing">
<li>
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#test">
<h3 class="panel-title accordion-toggle">Categories</h3>
</div>
<div class="collapsible-body collapsible-body panel-collapse collapse" id="test">
<ul class="collapsible-list">
<li> Sample 1 </li>
<li> Sample 2 </li>
<li> Sample 3 </li>
<li> Sample 4 </li>
<li> Sample 5 </li>
<li> Sample 6 </li>
<li> Sample 7 </li>
<li> Sample 8 </li>
<li class="clearfix"></li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
ul {
list-style: none;
margin: 0;
padding: 0;
height: auto;
font-family: 'Roboto', sans-serif;
font-weight: 450;
font-size: 15px;
color: #424242;
border: 0;
}
.collapsible-landing {
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
margin: 0.5rem 0 1rem 0;
box-shadow: none;
}
.collapsible-list {
background: #efefef;
}
.collapsible-list li a {
width: 25%;
padding: 10px 24px;
float: left;
color: #424242;
}
.collapsible-list li a:hover {
text-decoration: none;
border-bottom: none;
color: #9e9e9e;
}
.collapsible-list li.clearfix {
clear: both;
padding: 0 0 20px 0;
}
.accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Material-Design-Iconic-Font';
content: "\f273";
float: right;
color: inherit;
}
.panel-heading.collapsed .accordion-toggle:after {
/* symbol for "collapsed" panels */
content: "\f278";
}
you have a lot of css while a small jquery function just solve your problem easily.
Hoping it will help you!
$(function(){
$('#collapse1').on('hide.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-chevron-down"></span> Show');
})
$('#collapse1').on('show.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-chevron-up"></span> Hide');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Collapsible Panel</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="button" data-toggle="collapse" data-target="#collapse1">
<span class="glyphicon glyphicon-chevron-down"></span> show
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
</div>
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>
I am new to CSS so please excuse if this s basic question ,
I am trying to develop a similar User Interface as show in this picture below
This is my code
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li><span>NASDAQ</span><br>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li><span>DJIA</span><br>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
But could you please tell me why only the first span is visible and others are hidden ??
http://jsfiddle.net/Wf43X/319/
I have tried something like this..
body {
margin: 0px;
padding: 0px;
background-color: #fff;
}
.marquee {
margin: 10px;
padding: 10px;
}
span {
display: inline-block;
margin:0px;
padding:0px;
}
.container{
display: flex;
justify-content: center;
list-style-type: none;
}
.ind-cont {
background-color: #000;
width: 200px;
height: 100px;
margin: 0px;
padding:0px;
}
.txtcolor {
color: #fff;
}
.txtcolorb {
color: #aaa;
}
.ind-name {
margin: 20px;
}
.capital {
float: right;
margin: 20px;
}
.floatright {
float: right;
margin: 10px;
margin-right: 20px;
}
.one-share {
margin: 10px;
margin-left: 20px;
}
<div class="container">
<div class="marquee-sibling"> </div>
<div class="marquee">
<span class="ind-cont">
<span class="ind-name txtcolor ">NASDAQ</span>
<span Class="capital txtcolor">4655.92</span>
<span class="one-share txtcolorb">17.93</span>
<span class="per txtcolorb floatright">0.39%</span>
</span>
<span class="ind-cont">
<span class="ind-name txtcolor ">DJIA</span>
<span Class="capital txtcolor">16414.39</span>
<span class="one-share txtcolorb">15.82</span>
<span class="per txtcolorb floatright">0.1%</span>
</span>
</div>
</div>
You can do this with Flexbox
ul {
display: flex;
justify-content: center;
list-style-type: none;
}
li {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
background: black;
color: white;
border: 1px solid white;
paddgin: 10px;
}
li span {
flex: 50%;
padding: 5px;
box-sizing: border-box;
}
li > span:nth-child(4n+2),
li > span:nth-child(4n+4) {
text-align: right;
}
li > span:nth-child(4n+1),
li > span:nth-child(4n+2) {
font-size: 16px;
font-weight: bold;
}
li > span:nth-child(4n+3),
li > span:nth-child(4n+4) {
font-size: 14px;
color: #aaa;
}
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li>
<span>NASDAQ</span>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li>
<span>DJIA</span>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
You are breaking a line after the first span, and this code is hiding whatever is after the first line:
.container {
overflow: hidden;
height: 45px;
}
I also think that the flexbox ideas is the best but if you still want to stay with your code, I think you should try changing the size height of your .container in your css. you will be able to see the rest of your 'li' element. The text is in white color and you can't really see it when you run your code cause the background is white.