I have a problem I can not rearrange the boxes one below the other and there is a distance between them can you help me. The boxes have a gap meanings are arranged in one row and not one below the other as I have.
time, .time {
font-size: 10px;
color:gray;
border-bottom: 1px solid #E7EBF2;
min-width:350px;
height:20px;
padding-bottom: 5px;
}
#timeline {
width:846px;
list-style:none;
list-style-type: none;
background: url('../imgs/timeline.png') top center repeat-y;
margin: 0 auto;
padding:20px;
margin-bottom:10px;
}
#timeline li {
width:390px;
-moz-border-radius:2px;
border-radius:2px;
webkit-border-radius:2px;
border:1px solid #c3ccdf;
padding:5px;
background-color:#FFF;
}
#timeline li:nth-of-type(odd) {
clear: both;
float:right;
}
#timeline li:nth-of-type(odd), #timeline li:nth-of-type(even) {
margin:-10px 0 20px 0;
}
#timeline li:nth-of-type(even) .corner {
position:absolute;
display:block;
margin-left:383px;
width:20px;
height:15px;
background:url('../imgs/right.png');
}
#timeline li:nth-of-type(odd) .corner {
position:absolute;
display:block;
margin-left:-25px;
width:20px;
height:15px;
background:url('../imgs/left.png');
}
Here is demo http://jsfiddle.net/jT5e9/1/
That's because you had clear: both; in here:
#timeline li:nth-of-type(odd) {
clear: both;
float:right;
}
Plus I've added float:left to #timeline li and it worked for me.
http://jsfiddle.net/jT5e9/2/
Related
I have a big problem and I can't solve it.
I have a top menu with a image on the left and a search box on the right.
I want this search box to stay in the middle, but line-height is not working there... I don't know what to do.
http://jsfiddle.net/5mdz2zp9/
body {
margin: 0;
padding: 0;
//background-color:#eee;
background-color:#F5F6FA;
font-family: 'Open Sans', sans-serif;
font-size:12px;
}
*{
margin: 0;
padding: 0;
list-style: none;
}
#menu {
background-color: rgba(35,35,35,.9);
//border-bottom:1px solid #eee;
position:fixed;
width:100%;
top:0;
margin:0;
//padding: 0;
color: #fff;
text-align: center;
height:50px;
z-index:100;
}
#menu a:link, #menu a:visited, #menu a:hover{
color: #fff;
}
#menu ul{
display:table;
width:100%;
list-style-type: none;
}
#menu li{
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
}
.right{
text-align:right !important;
padding-right:10px;
}
#menu img{
margin-left:10px;
max-height:40px;
}
.search{
padding-left:10px;
padding-right:10px;
padding-top:4px;
padding-bottom:4px;
border:1px solid #fff;
border-radius:7px;
color:#555;
font-weight:bold;
}
html
<div id="menu">
<ul>
<li><img src="https://infooab.examtime.com/wp-content/themes/learn/img/flashcard_shortcode_icon.png"></li>
<li class=right><form class="searchform"><input type="text" name="search" class="search" placeholder="search"></form></li>
</ul>
</div>
How can I align input in the middle vertically without let image size on the left interfearing?
Thank you friends!
So posting as answer..
Please add this in your css and your box will be in middle..please be in mind when you are using display;table-cell then use vertical-align..hope it will help..:)
#menu li{vertical-align:middle;}
Change this:
#menu ul {
display:table;
width:100%;
list-style-type: none;
}
to this:
#menu ul {
display:table;
width:100%;
list-style-type: none;
height: 100%;
}
and this:
#menu li {
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
}
to this:
#menu li {
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
vertical-align: middle;
}
Here is the JSFiddle demo
css
#menu li {
border: 1px solid yellow;
display: table-cell;
text-align: left;
vertical-align: middle;
width: 50%;
}
working jsfiddle
I have a simple horizontal list menu that was working fine when I had a global (*) setting of padding: 0. For other reasons, I needed to take out that padding as a global setting, but I can't figure out how to make it apply to the list.
Now, each entry in the list has a blank block of maybe half an inch to the left of the first entry. If I can get rid of that, I'll be set. Here is a fiddle (http://jsfiddle.net/eha77way/), and I'll paste the code.
Thank you!
CSS
* {
border:0;
margin:0;
}
/* navigation */
#navigation, #episodenav, #pivotnav {
border-top:3px solid #FFF;
border-right:1px solid #FFF;
margin:0 auto;
list-style:none;
}
#pivotnav {
background:#F0F0F0;
border-top:3px solid #FFF;
border-right:1px solid #FFF;
margin:0 auto;
width:755px;
height:25px;
list-style:none;
}
#navigation {
background:#E0E0E0;
width:755px;
height:40px;
}
#episodenav {
width:756px;
background:#F0F0F0;
height:25px;
}
#pivotnav {
width:755px;
background:#F0F0F0;
height:25px;
}
#navigation li, #episodenav li, #pivotnav li {
border-left:1px solid #FFF;
float:left;
list-style:none;
}
#navigation li, #pivotnav li {
width:150px;
}
#episodenav li {
width:41px;
}
#navigation a, #episodenav a, #pivotnav a {
color:#000;
display:block;
text-align:center;
}
#navigation a {
line-height:40px;
}
#episodenav a, #pivotnav a {
line-height:25px;
}
/* content */
#content {
height:auto;
margin:50px auto;
position: relative;
padding:30px;
width:751px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}
#content h1 {
border-bottom:1px dashed #999;
font-size:2em;
padding:25px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h2 {
font-size:1.6em;
padding:25px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h3 {
font-size:1.1em;
padding:20px 5px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content p {
padding: 10px 5px;
line-height: 21px;
}
#content textarea {
border: 1px solid #cccccc;
}
#list {
margin-left: 50px;
}
HTML
<body>
<div id="content">
<div id="navigation">
<ul>
<li><i>Ulysses</i> by Episode</a></li>
<li>Pivot Points</a></li>
<li>Projects</a></li>
<li>Collections</a></li>
<li>About Ashplant</a></li>
</ul>
</div>
<h2>TEST</h2>
</div>
</body>
</html>
Is this what you mean?
#navigation ul{
padding: 0;
}
The padding is in the ul element, not the lis. This is a default of the browser, that is much needed when bullets are visible.
You can add a css rule-set such as:
#navigation ul {
padding: 0;
}
at least on my jsbin, this does the trick.
Maybe you want to remove padding-left without {padding-left:0px}?
Please use it
ul > li {position: relative; left: -20px;}
i am using this CSS for my footer:
/* FOOTER */
#footer {
width:100%;
height:580px;
border-top:4px solid #666666;
background-color:#eeeeee;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footerTop {
width:100%;
height:480px;
padding-top:10px;
border-bottom:2px #000000 solid;
}
#footerTopLeft {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopMid {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopRight {
width:30%;
height:420px;
float:left;
display:inline;
padding:0 15px 10px 15px;
}
#enquiryForm { clear:both; padding:8px 40px 0 0; }
.enquiryField { clear:both; padding:5px 0; }
.enquiryField label { clear:none; float:left; }
.enquiryField input { clear:none; font-family:Calibri; float:right; padding:3px; width:189px; }
.enquiryField textarea { clear:none; float:right; font-family:Calibri; padding:5px; width:189px; }
.enquiryError { clear:both; color:#fff; font-family:Calibri; }
#enquirySent { color:#fff; font-family:Calibri; }
but it is not moving down the page automatically depending on how much content is above it. here is a fiddle with the full css/HTML:
http://jsfiddle.net/ctmGT/
i seem to have to change the div height that i have depending on the amount of content i have
you need to change
<div style="clear: both; height:500px;"></div>
to
<div class="push"></div>
I have some navigation links at the top of the page that I am having trouble placing in the centre of the screen. Can anybody suggest where I'm going wrong in the CSS?
Image:
http://i.imgur.com/SUTWr.png
Here's the CSS:
#nav {
list-style-type:none;
text-align:center
}
ul li {
display:inline-block;
border-radius:10px;
background:#EEE;
margin:5px;
}
li a {
float:left;
padding:30px;
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
box-shadow:3px 3px black;
}
li a:hover {
background:#CCC;
color:#333;
}
li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}
Thanks
Hi actually i have updated your css now i hope this work will for you :-
DEMO
CSS
#nav {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: none repeat scroll 0 0 #B8B8B8;
height: 400px;
list-style-type: none;
margin: auto;
padding: 40px 0;
width: 400px;
}
ul li {
display:inline;
}
li a {
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
background:#EEE;
margin:5px;
padding:30px;
box-shadow:3px 3px black;
}
li a:hover {
background:#CCC;
color:#333;
}
li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}
Here's a quick demo of how to center a UL: http://jsfiddle.net/73Mum/1/
<div class="wrap">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
.wrap {
text-align:center;
background:#999;
padding:100px 0;
}
ul {
width:500px;
margin:0 auto;
}
ul li {
display:inline-block;
padding:10px;
background:#ccc;
}
Try wrapping these <ul>-tags with a <div style="margin-left: auto; margin-right: auto">.
This way you center all <ul>-tags at once.
If "1,2,3,4,5" in your picture are the ul-elements and #nav is the id of your surrounding div, you can just add margin-left: auto; margin-right: auto to #nav in your stylesheet.
Why is my footer not displaying full page
width in IE8:
Display:
http://cl.ly/0J2Z0l1w3S1e0A3d3Q1V
HTML:
<footer>
content
</footer
/*Reset */
html, body, #wrapper, #main h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset { padding: 0; margin: 0; }
/* Main CSS */
html, body,#wrapper{
width:990px;
height:100%;
min-height:100%;
margin: 0 auto;
}
#wrapper{
position: absolute;
}
#header{
position:relative z-index:500;
background:url('../images/header.png');
width:990px;
height:220px;
}
/*Menu */
nav{
float:left;
width:190px;
margin:0 0 0 0;
}
nav ul{
float:left;
margin:0;
list-style:none;
font-size:14px;
width:190px;
}
nav li a{
font-size:14px;
color:#fff;
line-height:25px; /*Text Hight On Button */
text-decoration:none;
text-indent:25px;
display:block;
width:190px;
height:27px;
background-image:url('../images/normal.png');
}
nav a:hover{
background-image:url('../images/onclick.png');
}
/*Content */
#content{
margin: 0 0 0 190px;
background:url('../images/mainbg.png') no-repeat;
width:815px;
height:555px;
}
#content h1{
margin: 5px 0 0 10px;
font-family: 'Josefin Slab', arial, serif;
font-size:24px;
}
#content p{
margin:0 0 0 15px;
}
#content li{
margin:0 0 0 35px;
}
.clear{
clear:both;
margin:0;
padding:0;
}
footer{
clear:both;
overflow:hidden;
bottom:0;
background:url('../images/footer.png') no-repeat #000;
width:100%;
height:20px;
border: 6px solid pink;
}
/* Misc*/
#metal{
float:left;
margin:160px 0 0 -190px;
background:url('../images/metalnavbg.png');
height:400px;
width:190px;
}
/* Text Formatting */
#companyName{
text-align:center;
padding-top:45px;
font-size:35px;
color:#f0f0ef;
}
#companyQuote{
text-align:center;
font-size:18px;
color:#a5a4a2;
}
/*Forms */
/*General*/
#validation{
font-weight:bold;
color:#ff0101;
}
.contactForm{
width: 450px;
height:425px;
padding: 15px 25px;
margin: 0 auto 10px;
color: #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: hidden;
}
#validation{
font-weight:bold;
color:#ff0101;
}
.form{
width: 400px;
height:100%;
padding: 15px 25px;
margin: 0 auto 10px;
color: #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: hidden;
}
.borderradius.form{
width: 400px;
height:100%;
padding: 15px 25px;
margin: 0 auto 10px;
color: #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: hidden;
}
fieldset{
border:none;
}
#formLayout{
border:2px solid #000;
}
#formLayout label{
clear: both;
display: block;
}
#formLayout input{
font-size:12px;
border: 2px solid #999;
padding: 6px 8px;
background-color: #fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
color: #000;
width: 250px;
}
#formLayout .small{
color:#ff0101;
display:block;
font-size:11px;
font-weight:bold;
text-align:left;
width:140px;
}
#formLayout textarea{
width:250px;
}
#error{
width:250px;
height:20px;
margin:-30px 0 0 270px;
padding-bottom:10px;
}
#error p{
color:#ff0101;
text-align:left;
}
/* Specific Form Class's */
.login{
width: 470px;
height:250px;
padding: 15px 25px;
margin: 0 auto 10px;
color: #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: hidden;
}
.login label{
font-weight:bold;
}
.login .loginSubmit{
margin-top:25px;
}
/*Gallery CSS */
#gallery{
width:120px;
margin-left:5px;
display: inline;
}
#gallery .thumbnail{
margin:0 auto;
display:inline;
}
#gallery img{
margin:5px;
}
#sales{
width:190px;
height:195px;
margin-left:15px;
display:inline-block;
border: 1px solid red;
}
#sales .location{
float:left;
text-align:center;
font-weight:bold;
margin-left:15px;
}
#sales .price{
float:left;
text-align:left;
font-weight:bold;
padding-left:5px;
color:#ff0101;
}
If you're using <footer> (a fancy schmancy HTML5 tag) sometimes IE does not like it. This is how I've fixed issues like this. Add this to your <head>:
<script>document.createElement('footer');</script>
It may not be what's causing your issue, but I've notice when trying to use HTML5 tags, IE pretty much ignores them or renders them strangely.
Add display: block to your footer tag.
In fact, all fancy schmancy HTML5 tags should be set up.
/* HTML5 block-level reset for enhanced structural tag support in older browsers */
header, footer, section, aside, nav, article, figure { display: block; padding: 0; margin: 0; }
I have fixed this issue by floating my footer div to the left
Download Modernizr and put this script to the head of HTML site. Basically this script will register all HTML5 elements for browser. Consequently IE won't break any more unknown elements.