I have an unordered list which contains 3 list items (represented in my example as 3 green boxes). Each box has an image and 3 divs (title,location,price). I'm only concerned with each box's title div.
If the title is long enough so that it produces 2 lines, I want the top line to always be shorter than the bottom line. My demo site seen here shows boxes 1 & 2 with the wrong setup, and box #3 shows the correct setup.
I'm having trouble... this may require js to determine line length and then set the bottom line to be longer. Screen resolution will likely play a role but can't I make the lines consistent across different screen sizes?
Here is one of the list items, I'm interested in the div "titlebox":
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(http://www.ht-real-estate.com/template/ht2014/images/landscape/05.jpg)"></p>
<div class="titlebox">This line is longer than this line</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</li>
Any help is great, thanks!!
Screenshot attached too:
Here is a JS solution that might work for you in most instances (I say most instances because text characters can have varying widths). It basically splits your sentences into 2 lines with a dynamically inserted <br> tag. Comments in the code:
$(".titlebox").each(function(){
var len = $(this).text().length,
words = $(this).text().split(" "),
line1 = [],
line2 = [],
html = "";
// iterate through each word in the title
$.each(words, function(i,word){
// if line 1's current length plus the length of this word
// is less than half the total characters, add word to line 1
// else add to line 2
// (check index of word to maintain order)
if((line1.join(" ")+" "+word).length < (len/2) && (i == line1.length)){
line1.push(word);
} else {
line2.push(word);
}
});
// concatenate the results with a '<br>' separating the lines
html = line1.join(" ")+"<br>"+line2.join(" ");
// replace the .titlebox content with this new html string
$(this).html(html);
});
html
{
width: 100%;
height: 40%;
}
body
{
background-color: #FFFFFF;
overflow-y: scroll;
overflow-x: hidden;
}
/* JavaScript disabled */
html.no-js .list__item
{
width: 100%;
float: none;
}
html.no-js .list__item img
{
max-width: 9.375rem; /* 150 */
float: right;
margin-left: 1.25rem; /* 20 */
}
#supports ( display: -webkit-flex ) or ( display: -ms-flex ) or ( display: flex )
{
html.no-js .list__item
{
width: 25%;
float: left;
}
html.no-js .list__item img
{
max-width: none;
float: none;
margin-left: 0;
}
}
nav {
border: 1px solid #ccc;
border-right: none;
border-left-color: #006600;
width: 100%;
margin-bottom: 20px;
background-color: #006600;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #030303;
}
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
}
nav ul li:first-child {
border-left: none;
}
nav ul li:hover {
background: #9cb369;
}
nav ul li a {
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 10px 0;
}
nav {
display: table;
table-layout: fixed;
}
ul li {
flex-grow: 1;
}
.x {
display: none;
}
.p {
text-align: center;
font-size: 14px;
margin-top: 80px;
}
.d {
color: #ccc;
}
nav ul li {
display: block;
border-bottom: 1px solid #ccc;
}
.whywelove img{
margin-top: 1%;
height: auto;
width: 50%;
}
.font3 {
margin-top: 2%;
color: #030;
font-family: "Times New Roman", Times;
font-size: 8vh;
}
.font4 {
font-size: 3.5vh;
font-weight: bolder;
font-family: "Times New Roman", Times;
color: #002B00;
line-height:25px;
margin-top: -0.5%;
margin-bottom: 2%
}
.vignette {
width: 90%;
margin-top:5%;
margin-left:auto;
margin-right:auto;
box-shadow: 15px 15px 40px #defeec inset,-15px -15px 40px #defeec inset;
height: 240px;
background-size: cover;
background-repeat: no-repeat;
}
.vignette2 {
width: 800px;
margin-top:3%;
margin-left:auto;
margin-right:auto;
box-shadow: 75px 75px 50px #defeec inset,-75px -75px 50px #FFFF inset;
height: 600px;
background-size: cover;
background-repeat: no-repeat;
}
.container
{
width: 100%;
max-width: 76rem;
font-size: 0.875rem; /* 14 */
line-height: 1.375rem; /* 22 */
margin: 0 auto;
padding: 0.625rem; /* 10 */
}
.container,
.container a
{
color: #cfd7db;
}
.container a:hover
{
color: #fff;
}
h1
{
font-size: 2.5rem; /* 40 */
font-weight: 300;
line-height: 2.875rem; /* 46 */
text-align: center;
margin-bottom: 2.5rem; /* 40 */
}
a.divLink {
text-decoration: none;
}
.list
{
width: 100%;
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.list__item
{
width: 32%;
float: left; /* 10 */
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-top: 0.625em;
padding-bottom: 0.825em;
margin-left:1%;
margin-right:0%;
position:relative;
line-height:40px;
}
.list__item .caption {
position: absolute;
width: 20%;
height: 10%;
top: 30%;
left: 32%;
font-size: 3.3em;
font-weight:bold;
color: red;
}
.list__item__inner
{
width: 100%;
color: #474d51;
background-color: #DEFEEC;
border: 1px groove #F8F8F8;
overflow: hidden;
margin-left:2%;
margin-right:2%;
-webkit-box-shadow: 0 0.125rem 0.313rem rgba( 0, 0, 0, .2 ); /* 2 5 */
box-shadow: 0 0.125rem 0.313rem rgba( 0, 0, 0, .2 ); /* 2 5 */
}
.list__item figcaption
{
padding: 1.25rem; /* 20 */
}
.img-shadow {
position: relative;
max-width: 100%;
float: left;
}
.img-shadow::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 80px rgba(0,0,0,.6);
-moz-box-shadow: inset 0 0 80px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 0 80px rgba(0,0,0,.6);
}
.img-shadow img {
float: left;
}
.titlebox{
width: 80%;
height: 10%;
display: inline-block;
font-size: 4.2vh;
font-family: Garamond;
color: #002000;
text-align: center;
line-height: 35px;
font-weight:bold;
margin-top: 5%;
margin-right: 10%;
margin-bottom: 5%;
margin-left: 10%;
background-color:grey;
}
.locationbox{
width: 80%;
display: inline-block;
font-size: 3.7vh;
text-align: center;
font-weight:bold;
margin-top: 10%;
margin-right: 10%;
margin-bottom: 5%;
margin-left: 10%;
font-family: Garamond;
color: #002000;
font-style: italic;
}
.pricebox{
width: 80%;
font-size: 4.2vh;
text-align: center;
font-family: Garamond;
font-weight:bold;
color: #002000;
margin-top: 10%;
margin-right: 10%;
margin-bottom: 5%;
margin-left: 10%;
}
.footer
{
text-align: center;
margin: 2.5rem 0.625rem 0; /* 40 10 */
}
.footer a
{
border-bottom: 1px solid #cfd7db;
}
#media screen and (max-width: 1950px){
.list__item
{
width: 32%;
}
.container
{
padding: 0; /* 10 */
}
.titlebox{font-size:28px;}
.locationbox{font-size:28px;}
.pricebox{font-size:28px;}
}
#media screen and (max-width: 1700px){
.list__item
{
width: 32%;
}
.vignette {
width: 92%;
margin-top:5%;
margin-left:auto;
margin-right:auto;
box-shadow: 15px 15px 40px #defeec inset,-15px -15px 40px #defeec inset;
height: 240px;
background-size: cover;
background-repeat: no-repeat;
}
.container
{
padding: -10em; /* 10 */
}
.titlebox{font-size:27px;}
.locationbox{font-size:27px;}
.pricebox{font-size:27px;}
}
#media screen and (max-width: 1440px){
.list__item
{
width: 32%;
}
.container
{
padding: 2.2em /* 10 */
}
.titlebox{font-size:27px;}
.locationbox{font-size:27px;}
.pricebox{font-size:27px;}
nav {
border: 1px solid #ccc;
border-right: none;
border-left-color: #006600;
width: 100%;
margin-bottom: 20px;
background-color: #006600;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #030303;
}
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
}
nav ul li:first-child {
border-left: none;
}
nav ul li:hover {
background: #9cb369;
}
nav ul li a {
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 10px 0;
}
nav {
display: table;
table-layout: fixed;
}
ul li {
flex-grow: 1;
}
.x {
display: none;
}
.p {
text-align: center;
font-size: 14px;
margin-top: 80px;
}
.d {
color: #ccc;
}
nav ul li {
display: block;
border-bottom: 1px solid #ccc;
}
}
#media screen and (max-width: 64em ) /* 1024 */
{
.list__item
{
margin-right:2%;
margin-left:-1%;
}
.titlebox{font-size:24px;}
.locationbox{font-size:24px;}
.pricebox{font-size:24px;}
.list__item .caption {
font-size: 2em;
}
body
{
padding: 2.5rem 0; /* 40 */
}
.list__item
{
width: 30%; /* 1 item per row */
float: none;
}
#supports ( display: -webkit-flex ) or ( display: -ms-flex ) or ( display: flex )
{
html.no-js .list__item
{
width: 30%;
}
}
html.no-js .list__item img
{
max-width: none;
float: none;
margin-left: 0;
}
}
#media screen and ( max-width: 50em ) /* 800 */
{
.vignette {
height: 400px;
}
.titlebox{font-size:23px;}
.locationbox{font-size:23px;}
.pricebox{font-size:23px;}
.list__item
{
width: 70%; /* 1 items per row */
}
}
#media screen and ( max-width: 40em ) /* 640 */
{
.vignette {
width: 80%
height: 300px;
}
.titlebox{font-size:21px;line-height:25px;}
.locationbox{font-size:21px;}
.pricebox{font-size:21px;line-height:25px;}
.list__item
{
width: 70%;/* 1 items per row */
}
}
<div class="container" role="main">
<ul class="list">
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(http://www.ht-real-estate.com/template/ht2014/images/landscape/05.jpg)"></p>
<div class="titlebox">This line is <BR/> shorter than this :)</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</a>
</li>
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/c/ce/James_Wadsworth_Rossetter_House_Front_1.jpg)"></p>
<div class="titlebox">Thisssss Lineeeeee is longer too</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</a>
</li>
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(http://www.mytickerz.com/wp-content/uploads/prairie-style-house-plans-2.jpg)"></p>
<div class="titlebox">This line is shorter likeeeeeeeee it should be</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</a>
</li>
</ul>
</div>
I'm not really sure if there is any way to limit the top line width. The only way I can think of, is to add a <br/> tag in a place where you would like to break down the title and then just set the text-align: center; for the .titlebox.
<div class="titlebox">This line is <br/> longer than this line</div>
Related
I am using GTM's "Custom HTML Tag" option with the my below code but it is giving me the following error when I try to publish it: Invalid HTML, CSS, or JavaScript found in template.
I've seen other threads where it looks like GTM doesn't support or recognize certain tag attributes. I have tested my code, and no error prompts show up in the console either. It is a standard bootstrap modal:
function myFunction() {
var copyText = document.getElementById("myInput");
navigator.clipboard.writeText(copyText.innerHTML);
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copied: " + copyText.innerHTML;
}
function outFunc() {
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copy";
}
$("#myModal").modal();
body {
font-family: 'Varela Round', sans-serif
}
.modal-login {
color: #636363;
max-width: 850px;
width: 100%;
margin: 30px auto;
background-image: none!important
}
.modal-login .modal-content {
padding: 20px;
min-height: 586px;
border-radius: 5px;
margin: 1rem;
background-color: #eaebeb;
background-image: url(https://media-services.dcm-inc.com/couponsites/static/resources/img/festival.png);
background-size: 100%;
background-repeat: no-repeat
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
margin-top: 130px
}
.modal-login img {
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 40%
}
.modal-login .form-group {
position: relative
}
.modal-login h4 {
text-align: center;
font-size: 20px;
width: 80%;
display: block;
margin-left: auto;
margin-right: auto
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px
}
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%
}
#media screen and (max-width:600px) {
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%
}
}
.modal-login .form-control:focus {
border-color: #fcda7b
}
.modal-login .btn,
.modal-login .form-control {
min-height: 40px;
border-radius: 30px
}
.modal-login .hint-text {
text-align: center;
padding-top: 10px
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px
}
.button,
.modal-login .btn {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%);
border: none;
line-height: normal
}
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%
}
#media screen and (max-width:600px) {
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%
}
}
.modal-login .custom-social {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%
}
.modal-login .btn:focus,
.modal-login .btn:hover {
opacity: .7
}
.trigger-btn {
display: inline-block;
margin: 100px auto
}
.contest-social {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%
}
.modal-login .fa:hover {
opacity: .7
}
.modal-login .contest-social-facebook {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-twitter {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-youtube {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-instagram {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.flexC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
-webkit-flex-flow: row wrap
}
.modal-title img {
margin: 1rem;
max-width: 100px;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ddd
}
.modal-title p {
font-size: 20px;
font-weight: 500;
max-width: 300px;
color: #000
}
.ccme {
color: #fd5c88
}
.codelinkbox {
margin: 0;
position: relative;
text-align: center;
width: auto;
position: relative
}
.codeValue {
border: 2px dashed currentColor;
font-size: 28px;
height: 50px;
line-height: 48px;
padding: 0 15px;
border-right: none;
border-radius: 0;
display: inline-block;
white-space: nowrap;
cursor: pointer;
border-radius: 6px 0 0 6px!important;
font-weight: 700;
color: #000
}
.buttonBtn.copy {
background-color: currentColor;
cursor: pointer;
font-size: 16px;
height: 50px;
line-height: 42px;
margin: 0;
padding: 0 15px;
position: relative;
text-transform: capitalize;
overflow: hidden;
min-width: 0;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
border-radius: 0 6px 6px 0
}
.buttonBtn.copy:hover {
background: #6ba62c;
color: #fff
}
.copy span {
color: #fff
}
.m1 {
margin: 1rem auto
}
.txtC {
text-align: center
}
.buttonBtn {
position: relative;
cursor: pointer;
font-size: 15px;
left: 0;
top: 0;
margin: 0;
height: 54px;
min-width: 180px;
border: 0;
outline: 0;
padding: 0 15px;
border-radius: 10px;
line-height: 54px
}
.arrRight {
color: #fff;
font-weight: 700
}
.arrRight:after {
content: '\2192';
display: inline-block;
color: #fff
}
.emailIcon {
width: 24px;
max-width: 24px;
margin: 0 5px
}
.termsto {
margin: 3rem 0
}
.sendemail {
font-size: 13px;
margin: 10px 0
}
#media all and (max-width:540px) {
.modal-title {
text-align: center
}
.modal-login .modal-header {
margin-top: 40px
}
}
.testtip {
position: relative;
display: inline-block;
}
.testtip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.testtip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.testtip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto%7CVarela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login border">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<div class="flexC">
<img src="https://res.cloudinary.com/csnetworkco/image/upload/c_scale,h_150,w_150/csnimages/Noon_568012.jpg" alt="Noon Discount Code" title="Noon Discount Code" width="150" height="150" loading="lazy">
<p>Up To 70% Off Sale + 10% Off Using Noon Coupon Code</p>
</div>
</div>
<div class="modal-body">
<div class="codelinkbox flexC m1">
<div id="myInput" class="codeValue">YB26</div>
<div class="testtip">
<button class="buttonBtn copy ccme" onclick="myFunction()" onmouseout="outFunc()"><span id="myTooltip">Copy</span></button>
</div>
</div>
</div>
<div class="row termsto">
<div class="col-sm-8">
<p><strong>Things to remember:</strong></p>
<ul>
<li>Don't forget to paste the code in the checkout during the purchase</li>
<li>Get 10% Off for New Customers & 5% Off for Returning Customers. </li>
<li>Code Usage: 2 times per customer.</li>
<li>Always contact our customer support team if there is any issues</li>
<li>You can always share the code</li>
</ul>
</div>
<div class="col-sm-4 txtC ">
<button class="buttonBtn ccme button" id=""><span class="arrRight">VISIT SITE </span></button>
</div>
</div>
</div>
</div>
</div>
</div>
I found what the issue was, in the img tag I was adding an attribute loading="lazy" due to which the invalid HTML CSS or JS error was being thrown
They really need to highlight what part of the code is the problem
I removed the above mentioned attribute and am now able to publish the tag
I am just trying to get the grid row to look the way I want and I have a large CSS and can't seem to get the column with three rows of the text right. There's the photo to indicate where the obvious entry should read from.
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,
code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
.underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body {
background-image: url(https://i.imgur.com/sCfeeeY.png) ;
background-position: top 1em right 1em, bottom 1em left 1em;
background-repeat: no-repeat;
}
.row {
flex: 2 auto;
grid-column: 1 30em;
display: flex;
margin: auto;
}
.active {
margin: 1em;
}
.fullwebpage .section {
display: grid;
grid-gap: .4rem;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
/* grid-template-columns: repeat(auto-fit, minmax(40em, ifr)); */
grid-column: 1;
flex: 0 1 28em;
}
.box {
display: flex;
align-items:center;
grid-column: 4;
flex: 3 auto;
width: 100%;
padding-top:1.5em;
padding-left: 2em;
}
.sectionheader {
display: flex;
flex: 8 auto;
grid-row: auto 1;
width: 100%;
margin: 1em;
/* padding-left: 3em; */
margin-right: 3em;
}
.sectionfirst {
margin-left: 5em;
/*margin-right:2em;
height:39em; */
padding-top: 1em;
}
.head_bg {
padding-top:1.5em;
padding-left: 2em;
}
.section_bg .head_bg a:active {
color: black;
}
.header {
padding-left: 2em;
padding-right:3em;
}
.logo {
margin-left: 3em;
margin-right: 2em;
}
.links {
padding-bottom:1em;
}
.links li a {
color: white;
}
.footer a:active {
color: white;
}
.promo_slogan_mid {
font-weight: bold;
font-size: 40px;
align-items: start;
text-align: start;
}
.promo_slogan_mid p {
font-size: 1vw;
font-weight: normal;
}
.promo_slogan {
font-weight: bold;
font-size: 3vw;
align-items: center;
word-wrap: break-word;
}
.promo_slogan p {
font-size: 1vw;
font-weight: normal;
}
.nav_menu {
float: left;
/* margin-left: 0em;*/
margin-right: 1.5em;
justify-content: space-around;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
display: flex;
z-index: 1;
}
.nav_menu a {
margin: .3em 1.3em;
}
.updateinput#gsbutton {
float: right;
text-decoration: none;
/* display: inline-block; */
z-index: 1;
}
.gsbutton:hover .gsbutton:active {
border: none;
outline: none;
}
.wrap {
display: inline-flex;
width:100%;
margin-top:1em;
}
.wrap a {
display: flex;
flex: 3 auto;
flex-flow: row;
grid-row: 1;
float: start;
color: black;
text-decoration: none;
font-size: 17px;
}
.footerbanner {
display: flex;
justify-content: space-between;
}
.container1 {
width: 100%;
display: flex;
}
.col-xs {
width:20%;
}
.sectionsecond {
padding-top: 2em;
display: grid;
grid-template-columns: 3;
align-items: center;
text-align: center;
width: 100%;
padding-top: 1em;
/* display: flex;
flex: 3 auto;
grid-row: auto 1;
width: 100%; */
margin: 1em;
height:39em;
margin-right: 3em;
}
.mycolumn_header .row_header {
margin-bottom: 2em;
display: block;
text-align: center;
}
.foot-row h1 {
display: flex;
/* height: 8em; */
padding-top: 2.1em;
padding-bottom: 0em;
margin: 1em 2em;
width: 100%;
z-index:1;
}
.updateinput#email_validate {
text-align: end;
padding-top: 2.1em;
margin: 1em 2em;
}
.updateinput {
font-weight: bold;
font-size: 20px;
padding-bottom: 0em;
}
.topfooterbanner div {
font-weight: bold;
font-size: 20px;
height: 12em;
}
.modal-content {
border-radius: 1rem
}
.modal-content:hover {
box-shadow: 2px 2px 2px black
}
.btn:hover a:active {
border: none;
}
.btn {
text-decoration: none;
}
.fa {
color: #2b84be;
font-size: 90px;
padding: 30px 0px
}
.form {
display: grid;
place-items: center;
width: 100%;
height: 100vh;
background-image: linear-gradient(to bottom right, rgb(10, 153, 209), rgb(5, 76, 122));
text-align: center;
font-size: 16px;
}
.b1 {
background-color: #2b84be;
box-shadow: 0px 4px #337095;
font-size: 17px
}
.r3 {
color: #c1c1c1;
font-weight: 500
}
.topfooterbanner {
text-decoration: none;
width: 100%;
}
.row_header h1 {
/* vertical-align: bottom; */
font-size: 3em;
font-weight:bold;
/* padding-bottom: 0; */
}
.foot-row h1 {
/* vertical-align: bottom; */
font-size: 3em;
font-weight:bold;
/* padding-bottom: 0; */
}
.foot-row {
/* padding-top: 2.6em; */
text-align: end;
background-color: #F97419;
display: flex;
}
.foot-row::before {
position: absolute;
width: 100%;
}
.statementnews {
width: 300px;
height: 300px;
padding-top: 1em;
padding-left: 30px;
box-shadow: 0 0 10px;
border-radius: 10px;
margin: 10px;
overflow: hidden;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.statementnews p {
text-align: wrap;
margin-left: 1em;
margin-right: 1em;
background-color: #f0f0f0;
}
.statementnews:hover {
transform: rotate(360deg);
}
.col {
min-width:15vw;
min-height: 60vh;
}
.mycolumn2 {
display: flex;
flex: 4 auto;
grid-row: 1 2;
width: 100%;
padding-left: 4em;
margin: 1em;
}
.sectionthird#gsbutton_3 {
align-items: center;
}
.sectionthird {
padding-top: 8em;
display: flex;
/* grid-row: auto 3; */
}
.col-md-6#sidebar1 {
width:60%;
padding-top: 0em;
padding-left: 0em;
padding-right: 0em;
align-items: center;
}
.middle_id_img {
padding-left:1em;
}
.col-md-4 {
font-weight: bold;
font-size: 40px;
align-items: start;
text-align: start;
/* font-size: 1vw; */
/* font-weight: normal; */
}
.col-md-6 {
height: 8em;
width: 45%;
display: flex;
/* justify-content: space-between; */
margin-left: 2em;
/* padding-left: 5em; */
padding-top: 2em;
}
.table-row {
padding-top: 2em;
display: flex;
text-align: center;
}
.table-row#content {
height: 14em;
}
.mycolumn_header {
font-weight: bold;
font-size: 45px;
}
.sectionthird {
padding-top: 2em;
display: grid;
grid-template-columns: 3;
align-items: center;
text-align: center;
width: 100%;
}
.mycolumn#userresponse {
font-size: 8em;
font-weight: bold;
}
.mycolumn#content_gsbutton {
font-size: .4em;
align-items: center;
margin-bottom: 0;
}
.mycolumn {
height: 8em;
align-items:center;
text-align: start;
display: table-cell;
margin-left: 2em;
padding-left: 1em;
padding-top: 2em;
}
#sidebar {
height: 9em;
box-shadow: -.4em 1em #888888;
width:30%;
}
#align_bottom {
padding-top: 10em;
padding-left: 40em;
margin: 0;
font-size: 1vh;
font-family: Verdana;
font-weight: normal;
}
.footer_column ul {
padding-top: 1em;
display: block;
text-align: center;
}
.gsbutton_footer {
position: center;
}
.footer_column {
display: inline-block;
width: 100%;
color: white;
font-size: 1.7vh;
font-family: Verdana;
font-weight: bold;
padding-left: 19em;
margin: 0em 1em;
}
.sectiontopfooter {
margin-top: 15em;
}
.sectionfooter {
width: 100%;
display: flex;
background-color: black;
}
.sectionfooter li {
padding-top: 1em;
vertical-align: bottom;
}
.wrap-row#middle_id_img {
width: 20%;
}
.wrap-row {
padding-top: 2em;
display: flex;
text-align: center;
}
.wrap-row#sidebar_col {
display: grid;
grid-template-columns: 3;
padding-top: 8em;
}
.wrap-row#box-md-3 {
padding-top: 8em;
width: 100%;
display: flex;
}
<section class="sectionsecond">
<div class="wrap-row">
<div class="box" id="box-md-3">
<div class="col-md-6 " id="table-element1">
<div class="promo_slogan_mid" id="sidebar_col">
<h1> What’s different about Manage?</h1>
<br>
<p>Manage provides all the functionality your team needs, without the complexity. Our software is tailor-made for modern digital product teams.</p>
</div>
</div>
<div class="col-xs" id="middle_id_img">
<img src="https://i.imgur.com/99FIu0U.png" alt="">
</div>
<div class="col-md-6 col-md-4 promo_slogan" id="feedback_slogan">
<h2>Track company-wide progress</h2>
<p class="text_slogan">See how your day-to-day tasks fit into the wider vision. Go from
tracking progress at the milestone level all the way done to the
smallest of details. Never lose sight of the bigger picture again.</p>
<br>
<h2>Advanced built-in reports</h2>
<p class="text_slogan">Set internal delivery estimates and track progress toward company
goals. Our customizable dashboard helps you build out the reports
you need to keep key stakeholders informed.</p>
<br>
<h2> Everything you need in one place</h2>
<p class="text_slogan"> Stop jumping from one service to another to communicate, store files,
track tasks and share documents. Manage offers an all-in-one team
productivity solution.</p>
</div>
</div>
</div>
</section>
I'd really like to have the transition animation from CSS slide the row onload() but I can't seem to get that
I had an issue with the blank space below the footer. I've managed to solve this by adding a jQuery sticky footer as the CSS methods doesn't work for me.
However, I do have a problem with main content of the webpage. If I adjust .bg-photo's height, it will affect how low or high the footer's placement will go.
Any content within .bg-photo will not affect the footer's placement at all.
I'm thinking it could be my HTML or CSS that's doing this sort of issue. Although, I'm not sure.
What I want is that the page automatically adjust to any screen's height and the user doesn't have to scroll down to view just the footer.
Here's the webpage:
http://planet.nu/dev/test/index.html
Here's the jsFiddle:
https://jsfiddle.net/mqfrnjaa/
And the codes if you need to view them right away.
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $(".footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
html, body {
height: 100%;
}
*{
margin: 0;
}
body {
background: #fff;
min-height: 600px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #393c3d;
line-height: 22px;
}
#fw_header {
margin: 0 auto;
position: relative;
width: 980px;
}
#fw_header ul {
list-style-type: none;
}
.forums #fw_header {
margin-bottom: 0;
}
#fw_header ul {
padding-left: 12px;
padding-top: 6px;
}
#fw_header li {
float: left;
padding: 0 3px;
}
#fw_header li a {
padding: 0 8px;
}
#fw_header li a:hover {
border-bottom: 5px solid #829AC6;
text-decoration: none;
}
#fw_header li a.active {
border-bottom: 5px solid #4E6CA3;
}
#fw_header ul.submenu li a.active,
#fw_header ul.subsubmenu li a.active {
border-bottom: 5px solid #829AC6;
}
#fw_header ul.submenu,
#fw_header ul.subsubmenu {
margin-top: 1em;
padding-top: 0;
}
#fw_header ul.submenu_usage {
padding-left: 32px;
}
#fw_header ul.submenu_plugins {
padding-left: 20px;
}
#fw_header ul.submenu_development {
padding-left: 23px;
}
#fw_header ul.submenu_extras {
padding-left: 14px;
}
#fw_header ul.submenu_testing {
padding-left: 480px;
}
#fw_header ul.submenu_styling {
padding-left: 80px;
}
#fw_header ul.subsubmenu {
padding-left: 120px;
}
#fw_header ul.submenu li,
#fw_header ul.subsubmenu li {
font-size: 80%;
}
#fw_header {
font-size: 16px;
}
#fw_header a {
color: #4E6CA3 !important;
}
#fw_header h1 {
border-bottom: medium none;
color: black;
font-size: 2em;
line-height: 1.45em;
margin-top: 32px;
vertical-align: middle;
}
#fw_header h1 img {
margin-top: -5px;
vertical-align: middle;
}
#fw_header h1 a {
color: black !important;
}
#fw_header h1 a:hover {
text-decoration: none;
}
#header_options {
position: absolute;
right: 150px;
top: -32px;
width: 495px;
}
#header_options .option {
float: left;
padding: 12px 0;
text-align: center;
width: 165px;
}
#header_options a:hover {
text-decoration: none;
}
#header_options .option:hover {
background-color: #F5F7FA;
}
#header_options div.option img {
margin-right: 7px;
vertical-align: middle;
}
#header_options .option table {
margin: 0 auto;
}
#header_options .option table td {} #header_options #options_search {
padding: 7px 0;
width: 495px;
}
#header_options #options_download {} #options_search input[type="text"] {
height: 20px;
width: 350px;
}
#header_download {
background: url("../images/dl_button_220.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 0;
text-align: center;
top: -8px;
width: 220px;
}
#header_donate {
background: url("../images/donate_button.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 220px;
text-align: center;
top: -8px;
width: 220px;
}
#header_download a,
#header_donate a {
color: white;
}
#header_download a:hover,
#header_donate a:hover {
text-decoration: none;
}
#dontate_wrapper {
background-color: #FCFCFC;
border: 1px dotted #A5A5A5;
color: #555555;
font-size: 0.8em;
margin: 0 0 1.5em;
padding: 5px;
text-align: center;
}
#header_advert {
background-color: white;
height: 200px;
overflow: visible;
position: absolute;
right: 0;
top: -32px;
width: 150px;
}
body .adpacks {} body .one .bsa_it_ad {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #999999;
margin: 0;
text-align: left;
}
body .one .bsa_it_ad:hover {
background-color: #F5F7FA;
color: black;
}
body .one .bsa_it_ad .bsa_it_i {
display: block;
float: none;
font-size: 11px !important;
margin: 0;
padding: 0;
text-align: center;
}
body .one .bsa_it_ad .bsa_it_d {
font-size: 11px !important;
}
body .one .bsa_it_ad .bsa_it_i img {
border: medium none;
padding: 0;
}
body .one .bsa_it_ad .bsa_it_t {
padding: 6px 0 0;
}
body .one .bsa_it_p {
display: none;
}
.one .bsa_it_ad {
color: #F5F7FA;
padding: 4px 0 0 !important;
}
body #bsap_aplink,
body #bsap_aplink:hover {
display: block;
font-size: 10px;
left: 104px;
position: absolute;
text-decoration: none;
top: 45px;
transform: rotate(90deg);
width: 100px;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}
#dt_example #container {
margin: 64px auto 30px !important;
}
.header {
width: 100%;
background: rgba(255, 255, 255, 0.6);
color: #034e7c;
text-align: center;
padding: 20px 0;
height: 115px;
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D73000', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}
.header img.logo {
height: 105px;
}
.header ul.breadcrumb li a {
font-family: 'Open Sans';
font-size: 23px;
color: #4a4a4a
}
.header ul.log-in {
list-style-type: none;
display: inline;
float: right;
margin-top: 55px;
margin-right: 40px;
}
.header ul li {
display: inline;
color: red;
margin-right: 35px;
}
.header ul.log-in li,
.header ul.log-in li a {
display: inline;
font-size: 19px;
color: red;
text-decoration: none
}
.header .dateButton,
.dateButton {
width: 300px;
height: 45px;
background: #e63308;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e63308), color-stop(100%, #db3304));
background: -webkit-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -o-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -ms-linear-gradient(top, #e63308 0%, #db3304 100%);
background: linear-gradient(to bottom, #e63308 0%, #db3304 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e63308', endColorstr='#db3304', GradientType=0);
float: right;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-right: 70px;
text-align: center;
cursor: pointer;
margin-top: -8px;
}
.header .dateButton a,
.dateButton a {
height: 30px;
vertical-align: middle;
line-height: 45px;
font-weight: bold;
color: #f0f0f0;
font-size: 23px;
}
.header .dateButton img,
.dateButton img {
padding-right: 5px
}
.footer {
width: 100%;
background: #FFF;
text-align: center;
height: 40px;
}
.footer p {
color: #4a4a4a;
font-family: 'Open Sans', sans-serif;
padding: 30px 0;
}
.footer p a {
color: #9fcf64;
}
.navigation {
min-width: 1300px;
width: 100%;
border-top: solid 1px #d6d6d6;
border-bottom: solid 1px #d6d6d6;
height: 60px;
background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 10%, #ededed 100%);
}
.navigation ul.breadcrumb {
padding: 0px;
margin: 0;
margin-left: 50px;
margin-top: 15px;
margin-right: 0px;
width: 1000px;
}
.navigation ul li {
list-style-type: none;
}
.navigation ul li a {
color: #4a4a4a;
text-decoration: none;
font-weight: bold;
font-size: 23px;
float: left;
margin-right: 10px;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 3px 0 3px 5.2px;
border-color: transparent transparent transparent #4a4a4a;
float: left;
margin-top: 8px;
margin-right: 10px;
}
.top-section {
height: 100px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #393c3d;
line-height: 22px;
}
.bg-photo{
background:url(http://planet.nu/dev/test/images/bg.jpg);
background-size: cover;
height: 75%;
text-align: center;
}
.bg-photo:before{
content: '';
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
}
.loginText{
font-size: 16px;
}
#createCampaignButton {
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
font-size: 18px;
/* font-weight: bold; */
color: #fff;
background: #8bbd3a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table{
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.9);
}
h1{
color: #4a4a4a;
font-size: 48px;
}
table th{
color: #666666;
padding-top: 10px;
text-align: left;
padding-left: 15px;
}
table td {
padding-left: 15px;
}
table td input{
padding-left: 5px;
height: 30px;
font-size: 22px;
margin-bottom: 20px;
width: 100%;
}
tbody{
width: 95%;
display: table;
}
<div class="header">
<div class="top-section">
<img class="logo" src="http://planet.nu/dev/test/images/littleforest_logo.jpg">
</div>
</div>
<div class="bg-photo col-md-12 col-xs-12">
<div class="col-md-6 col-sm-9">
<h1 style="font-size: 35px; text-align:center; color:#FFF;margin:20px 0 0 0">
Welcome to LFi
</h1>
<p style="text-align:center; color: #FFF; font-size: 20px; padding: 28px 0 0 0;">Insight that drives web success</p>
<br>
<form method="post" action="/crawler/LoginServlet">
<table style="width: 40%; padding: 20px 30px; display: inline-block; vertical-align: middle; margin: 30px 0 0 0; background: rgba(255,255,255, 0.9);">
<tbody>
<tr>
<th>
User Name
</th>
</tr>
<tr>
<td>
<input type="text" name="username" class="textInput loginText" placeholder="User Name">
</td>
</tr>
<tr>
<th>
Password
</th>
</tr>
<tr>
<td>
<input type="password" name="password" value="" class="textInput loginText" placeholder="Password">
</td>
</tr>
</tbody>
</table>
<div>
<p class="submit">
<input type="submit" name="commit" class="button" id="createCampaignButton" value="Log in" style="width:260px; display: inline-block; vertical-align: middle; margin: 20px 0 0 0;">
</p>
</div>
</form>
</div>
</div>
<div class="footer col-md-12 col-xs-12">
<p>
Powered by Little Forest a tool that encourages continuous improvement towards web success.
</p>
</div>
What can come in handy in situation like this is css property vh.
Depends on which browsers you have to support, but to adjust to height of view port you can do height: 100vh or vmin.
More details on browser support: http://caniuse.com/#feat=viewport-units
You could achieve sticky-footer without any plugins. Here i did "sticky footer and header" only with css. One can add up more content under the form and get assured that the page stretches right down while content stays above the footer - here.
/**sticky-footer layout**/
body {
min-height: 500px;
}
.header,
#main,
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
height:120px !important;
overflow:hidden;
background:#ffffff !important;
position:relative;
z-index: 10;
padding:0 !important;
opacity:0.9;
}
.footer {
height:100px !important;
background:#ffffff !important;
overflow:hidden;
opacity:0.9;
padding:0 !important;
}
#main {
min-height:100%;
margin:-120px 0 -100px;
height:auto !important;
}
#main:after,
#main:before {
content:"";
display:block !important;
margin:0;
}
#main:before {
height:120px;
}
#main:after {
height:100px;
}
However, you might not like the fact that your bg container .bg-photo#main lays underneath header and footer (which i made opaque on purpose to demonstrate, how the blocks are positioned), thus cutting bits of your leaves background.
You would instinctively wish to transfer the background to an inner immediate div inside the main section. I've sketched this eventuality as well, however since it's uses vh units,
min-height: calc( 100vh - 220px);
it might not work in all browsers, so beware, i also used calc to subtract the header and the footer. I hope it'll work reliably for you.
I'm trying to center my form but it's got a magic margin on the right. I've tried to make my form responsive but when I resize my window down, my submit button just doesn't want to center either, any tips?
http://jsfiddle.net/z85687ne/1/ - use SCSS on languages
a
You're generally lacking box-sizing property to be set to border-box, so your elements could include margins and paddings into overall calculations of their sizes.
Then you can set them up to width:100% as so:
CSS:
#import "elements.less";
#import "normalize.less";
#import "var.less";
#main {
p {
a {
}
}
}
body {
.font();
}
header img {
margin: 0 auto;
display: block;
margin-top: 3%;
border: 4px #blue solid;
}
section p {
.font(20px);
text-align: center;
}
section > p {
margin-bottom: 5px;
}
.contact-info {
border: 2px black solid;
margin: 20px auto 20px auto;
width: 80%;
}
#contact-area {
width: 600px;
margin-top: 25px;
margin: 0 auto;
border: 2px black solid;
padding: 15px;
input, textarea {
padding: 5px;
width: 471px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
textarea {
height: 200px;
}
textarea:focus, input:focus {
border: 2px solid #900;
}
input.submit-button {
width: 100px;
float: right;
background-color: #0066FF;
text-transform: uppercase;
}
}
label {
float: left;
text-align: left;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
#main {
p {
}
}
.post-it{
margin-top: 50px;
}
.note {
color: #333;
position: relative;
width: 300px;
margin: 0 auto;
padding: 20px;
font-family: Satisfy;
font-size: 30px;
box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
background: #eae672;
}
ul.share-buttons{
list-style: none;
padding: 0;
text-align: center;
}
ul.share-buttons li{
display: inline;
}
p {
color: black;
.tr(all 0.3s linear);
&.class1 {
}
&:hover {
color: lime;
.tr(all 0.3s linear);
}
}
#media screen and (max-width: 1000px) {
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#contact-area {
width: 100%;
input, textarea {
width: 100%;
}
input.submit-button {
width: 100%;
margin: 0 auto;
float: left;
background-color: #0066FF;
text-transform: uppercase;
}
}
}
JSFiddle for that
It seems to me that you need some extra level of control over your elements. It could be done with a div within your form.
<form>
<div class="form-element">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" />
</div>
</form>
Then you can control the form with
#contact-area {
width: 100%;
max-width: 600px;
.form-element {
width: 470px;
margin: 0 auto;
> label {
width: 125px;
display: inline-block;
}
> input,
> textarea {
display: inline-block;
}
}
}
And don't float your submit button right if you want it to be centered.
I have this css for my horizontal menu:
nav {
height: 40px;
width: 100%;
background: #F00;
font-size: 11pt;
font-family: Arial;
font-weight: bold;
position: relative;
border-bottom: 2px solid #FFFFFF;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #000000;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li a {
border-right: 1px solid #FFFFFF;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #000000;
color:#FFFFFF;
}
nav a#pull {
display: none;
}
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #FF0;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
rightright: 15px;
top: 10px;
}
}
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #FFFFFF;
}
}
how can i make the li links display in the centre?
here is a fiddle of the menu: http://jsfiddle.net/zJq52/
I would do this:
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
text-align: center; // add text-align
}
nav li {
display: inline; // no more float in here
}
DEMO HERE
Update 1:
To make the width auto:
nav a {
color: #000000;
display: inline-block;
width: auto; // changed this from width: 100px; to auto.
text-align: center;
text-decoration: none;
line-height: 40px;
}
DEMO HERE
Update 2:
Finished Version!
DEMO HERE
Live demo
Change nav a to this:
nav a {
text-align: center;
width: 100%;
}
I also have to mention that you have two nav as. You should merge them into one and apply a little change:
nav a {
color: #000000;
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 40px;
width: 100%;
padding: 0 10px;
}
jsFiddle for the merged one and the result for me:
If you want to center the buttons as a row in the horizontal bar then just simply apply a width to the <ul> so add a new class: <ul class="clearfix cont"> and style it in a media rule so it won't affect the other layouts:
#media screen and (min-width: 600px) {
.cont {width: 380px;}
}
jsFiddle and the result:
Not sure exactly what you mean, but if you mean centering all the li in relation to its parent change the width from 600px to 400px
nav ul {
padding: 0;
width: 400px;
height: 40px;
display: block;
margin: 0 auto;
position: relative;
}
demo: - http://jsfiddle.net/zQehH/2/
UPDATED DEMO JSFiddle
Here is the correct way to do the stuff you want
CSS-
nav ul {
padding: 0;
margin: 0 auto;
width:800px;
text-align:center;
height: 40px;
}
nav li {
display: inline-block; //use inline block
}
nav a {
color: #000000;
display: inline-block;
padding: 0 20px; //use padding instead of width
text-decoration: none;
line-height: 40px;
}
Making the choice for a float isn't always the right one.
Your example contains a fixed width of 600px on the "nav ul" element is weird when you only have 4 elements of ~100px width. You can't center that...
I basically removed the float, and the clearfixes.
And then I've made it to contain the following based on how I'd do it..
nav {
margin: 0 auto;
text-align: center;
}
nav ul {
margin: 0 auto;
text-align: center;
width: auto;
}
nav ul li {
display: inline;
display: inline-block;
}
nav ul li a {
/*width: 100px;*/
width: auto;
padding: 0 10px;
}
My example:
http://jsfiddle.net/xewl/4CrdN/1/
I see that you have other versions that do kinda work as planned:
http://jsfiddle.net/zJq52/6/
You didn't set a width on "nav ul li a" here.
But why is there a width on "nav ul" of 400px?
Try This
nav li a {
border-right: 1px solid #FFFFFF;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
text-align:center; /*Added Line*/
}
Super simple.
Add text-align: center to nav ul and remove float: left from nav li.
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
text-align: center;
}
nav li {
display: inline;
}
Here's an updated fiddle: http://jsfiddle.net/qwUF7/