I created a temporary snapshot of my site for the time being: http://hunpony.hu/today/
The problem is, in the right panel, the first div, div#randomTile.tile is kind of misplaced.
I don't know why. Here is some related HTML, CSS and JavaScript:
<div id="slideoutWrapper">
<div id="slideout">
<div id="slideoutTitle">
<h1 class="dyn"></h1>
</div>
<div id="slideoutInner">
<div id="randomTile" class="tile" style="">
<img class="small" src="img/small/vs.svg">
<h4>Random<br> </h4>
</div>
</div>
</div>
</div>
... in the CSS mean vendor prefixed attributes, I removed them because it makes the code block too long.
#slideoutInner .tile {
cursor: pointer;
margin:.5em;
text-align:center;
display:inline-block;
width:95px;
text-overflow: ellipsis;
...
transition-duration: 0.3s;
box-shadow:0;
height:127px;
white-space:nowrap;
...
filter: contrast(100%);
}
#slideoutInner .tile:hover { box-shadow:0px 0px 15px; ...; filter: contrast(150%) }
#slideoutInner .tile .small {
height:75px;
width:75px;
margin:5px auto;
display:block;
}
#randomTile { color:#777; background-color: #777 }
#slideoutInner .tile h4 {
line-height: 20px;
padding:0;
margin:0px auto 2px;
display:block;
text-shadow:none;
color:white;
}
Some referenced variables are too long to include here, the main js file is here, where all the code is.
$('#randomTile').on('click',function(){
changeBGImage(rndCharNumber);
}).hover(function(){
rndCharNumber = randomize(0,backImage.length-1);
$(this).css({color:colorz[rndCharNumber],backgroundColor:colorz[rndCharNumber]});
$(this).find('img.small').attr('src','img/small/'+backImage[rndCharNumber]+'.svg');
$(this).find('h4').html((longNames[rndCharNumber].indexOf(' ') != -1) ? longNames[rndCharNumber].split(' ').join('<br>') : longNames[rndCharNumber]+'<br> ');
},function(){
$(this).css({color:'',backgroundColor:''});
$(this).find('h4').html(locStr.randomTile[locale]);
$(this).find('img.small').attr('src','img/small/vs.svg');
});
$(document).ready(function(){
...
for (i=0;i<backImage.length;i++){
imgArray.push('<img class="small" src="img/small/'+backImage[i]+'.svg">');
}
for (i=0;i<longNames.length;i++){
h4Array.push('<h4>'+((longNames[i].split(' ').join('<br>').indexOf('<br>') != -1) ? longNames[i].split(' ').join('<br>') : longNames[i]+'<br> ')+'</h4>');
}
for (i=0;i < imgArray.length;i++){
htmlArray.push('<div class="tile" style="color:'+colorz[i]+';background-color:'+colorz[i]+';">'+imgArray[i]+h4Array[i]+'</div>');
}
$('#slideoutInner').append(htmlArray.join(''));
...
});
The issue is caused by white-spaces, they affect inline elements (.tile blocks). To fix it add font-size: 0 to #slideoutInner (parent container):
#slideoutInner {
overflow-x: hidden;
text-align: center;
font-size: 0;
}
and change margin of the #slideoutInner .tile rule, make it e.g. 4px. It will fix your problem.
Related
I have created HTML Page which I will be make dynamic using Spring MVC.
I am new to HTML, CSS,JS as well but I need to create banner images which will slide with certain internal.
I need to do following things:
Bannner Image shoule slide with certain interval.
I need to put Fixed HTML Search form on the top of sliding images.
Currently banner image is coming as center of the page I need to stretch to total with with of the page I have tried to change like ".imageslide{width:100%;.." width 100% but it did not work.
I Need to create exactly like bellow image:
Sliding banner Image I am able to make with the below HTML and JS code but Search Form on the top of sliding banner image I am not getting idea how can i make it:
I have seeing this link but I could not make solution out if it :(.
index.html
<htm ng-app>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="./angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="withinheader">
this is header
</div>
</div>
<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<img src="./S_43_HomeDestinationImages_FriMar0420161099.jpg" alt="">
</div>
<div class="slider-content" ng-switch-when="2">
<img src="./S_43_HomeDestinationImages_FriMar042016420.jpg" alt="">
</div>
<div class="slider-content" ng-switch-when="3">
<img src="./S_43_HomeDestinationImages_FriMar042016575.jpg" alt="">
</div>
<div class="slider-content" ng-switch-when="4">
<img src="./S_43_HomeDestinationImages_FriMar0420161099.jpg" alt="">
</div>
</div>
<div id="mainbody">
this is body
</div>
</body>
</html>
script.js
function slideShowController($scope, $timeout) {
var slidesInSlideshow = 4;
var slidesTimeIntervalInMs = 3000;
$scope.slideshow = 1;
var slideTimer =
$timeout(function interval() {
$scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
slideTimer = $timeout(interval, slidesTimeIntervalInMs);
}, slidesTimeIntervalInMs);
}
style.css
/* Styles go here */
#header {
background-color: #FFFFFF;
width:100%;
height:100px;
border-bottom: 4px solid #EE514B;
}
.slideshow {
font-family: "Arial", sans-serif;
text-align: center;
position:relative;
width:600px;
overflow:hidden;
background: #1a1a1a;
margin: 0 auto;
color: white;
text-shadow: 1px 1px 1px #000;
border-radius: .3em;
margin-top: 30px;
}
#withinheader {
width:60%;
margin: 0 auto;
height: 100px;
}
.imageslide{
width:100%;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
overflow:hidden;
position:relative;
text-align: center;
}
.imageslide .slider-content {
position: absolute;
width:100%;
height:400px;
}
.animate-enter,.animate-leave {
-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}
.animate-enter {
left:100%;
}
.animate-enter.animate-enter-active {
left:0;
}
.animate-leave {
left:0;
}
.animate-leave.animate-leave-active {
margin-left:-100%;
}
#mainbody {
background-color: #FFFFFF;
width:50%;
min-height:1024px;
height: auto;
border-radius: 5px;
border: 1px solid #EEEEEE;
margin: 0 auto;
}
Please help me on this
I need make this webpage using Angular JS, and MVC, how should I approach.
Thanks in advance for help and information to make it work.
Without seeing the complete HTML, I daresay this may just be a case of adding position: relative to the wrapper div css (.imageslide), and position: absolute (along with left/right/top/bottom css declarations as appropriate) to the search form container tag css.
I have used a popup script so that popup appear on my screen when I load my html file now I want a close sign on the top right corner on the popup screen like in the picture shown below
The code I have used is
("jsfiddle.net/sGeVT/10/")
this script code is an example of my code I have further modified it but the basic of the popup is same.
Hope you understand and can give solution.
(1) Add a span with a x inside, × the best looking one IMO.
<span class="deleteMeetingClose">×</span>
(2) Set up some styles for it.
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
(3) Add it to the jQuery code along with other close triggers.
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
//close action
});
Updated demo: http://jsfiddle.net/zj0yL9me/
$('.deleteMeeting').click(function () {
$('#overlay').fadeIn('slow');
$('#popupBox').fadeIn('slow');
$('#popupContent').fadeIn('slow');
});
// added .deleteMeetingClose into the selectors
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
$('#overlay').fadeOut('slow');
$('#popupBox').fadeOut('slow');
$('#popupContent').fadeOut('slow');
});
$('.deleteMeetingButton').click(function () {
$('#popupContent').fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeIn('slow');
$('#overlay').delay(1300).fadeOut('slow');
$('#popupBox').delay(1300).fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeOut('slow');
});
#overlay {
display:none;
opacity:0.5;
background-color:black;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index: 999;
}
#popupBox {
display:none;
position: relative;
margin-left:auto;
margin-right:auto;
margin-top:100px;
width:600px;
height: 500px;
color: #000000;
border:5px solid #4E93A2;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:#FFFFFF;
z-index: 1000;
}
#popupContent {
display:none;
font-family:Arial, Helvetica, sans-serif;
color: #4E93A2;
margin-top:30px;
margin-left:30px;
margin-right:30px;
}
.deleteMeetingButton {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
.deleteMeetingCancel {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
content:"XXXX";
}
#deleteMeetingConfirmDeleted {
display:none;
}
/* added code below */
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">Content Obscured By Overlay
<button class="deleteMeeting">Delete</button>
</div>
<div id="overlay"></div>
<div id="popupBox">
<div id="popupContent">
<i>Are you sure you want to delete this meeting?</i>
<br />
<span style="text-align:center;color:black;font-size:40px;">YO</span>
<br />
<button class="deleteMeetingButton">Delete</button>
<button class="deleteMeetingCancel">Cancel</button>
</div>
<div id="deleteMeetingConfirmDeleted">Meeting Deleted</div>
<span class="deleteMeetingClose">×</span> <!-- <= added this line -->
</div>
First, put in image element in your popup div
<img id="ClosePopup" src="insert-image-url-here"/>
Then, style it with position:absolute. Also, make sure the popup div has position:relative
#ClosePopup{
position: absolute;
right:0px;
}
Finally, attach your click handler
$('#ClosePopup').click(function(){
$('#overlay,#popupBox,#popupContent').fadeOut('slow');
});
See it working in this fiddle
If you want a pure css solution without images, see
Pure css close button
Simply create a span element containing × char for the x, put some style and bind the click event to the popup close action:
HTML
<span class="cancel-icon" >×</span>
CSS:
.cancel-icon{
float:right;
cursor:pointer;
}
JS
$('.cancel-icon').click(function () {
//Close the popup
});
Using your Fiddle: http://jsfiddle.net/sGeVT/118/
I'm trying to make a web page to time a race and I had the idea to make the html page with the timer slide from the right with hitting a button
here's the html of the main menu:
<!DOCTYPE HTML>
<body style="background:#f2f2f2;">
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu" onclick="openChronometre()" ></div>
</div>
</body>
here's a js fiddle of the main menu (without images)
here's a js fiddle of the timer (the layout isn't that great, still WIP)
when hitting the black bar in the main menu, the entire page html page for the timer should come from the right, is there any way to do that?
Sorry I didn't do the animation part. But as a basic idea...
You're probably better off keeping the timer as a div on the main menu page.
If it has to be another page then use an iframe or ajax to load the contents to the div I guess.
Either way it should be contained in the element you're clicking on. Then you can use some JavaScript to modify the CSS and show it/slide it on the page. The jQuery library has a lot of animation/slide functions for example.
I basically combined your 2 fiddles into one and added:
#options {position: absolute; left: 90%; }
and
onclick="opts = document.getElementById('options'); if (opts.style.left == '0px') { opts.style.left = '90%'; } else { opts.style.left = '0px';}"
html {
overflow: hidden;
}
body {
font-family: 'Century Gothic';
font-size: 34px;
}
#options {
box-shadow: 0 0 5px 1px;
margin-top: 100px;
margin-right: -8px;
height: 450px;
cursor: pointer;
position: absolute;
left: 90%;
}
#Chrono1,
#Chrono2 {
overflow: hidden;
background-color: #2d2d2d;
box-shadow: 0 0 4px 0 #0c0c0c;
padding: 6px 20px;
}
#Panel1,
#Panel2 {
overflow: hidden;
background-color: #2d2d2d;
box-shadow: 0 0 4px 0 #0c0c0c;
width: 400px;
height: 450px;
}
#Panel1:hover,
#Panel2:hover {
transition: opacity 0.5s;
-webkit-animation: PanelSlide 2s;
/* Chrome, Safari, Opera */
animation: PanelSlide 2s;
/* IE */
}
<body style="background:#f2f2f2;">
<div id="options" style="background-color: #262626; font-family: Century Gothic; color: #8c8c8c;" onclick="opts = document.getElementById('options');
if (opts.style.left == '0px') {
opts.style.left = '90%';
} else {
opts.style.left = '0px';
}
">
<div id="Title" style="font-size: 55px; text-align: center; margin-top: 3%">Timer</div>
<div id="Temps" style="text-align: center; font-size: 30px; margin: 7%;">
<div id="Chrono1" style="display: inline-block; margin-right: 540px; position:relative;">
00:00:00
</div>
<div id="Chrono2" style="display: inline-block; position:relative;">
00:00:00
</div>
</div>
<div id="Panels" style="text-align: center; font-size: 30px; margin-top: -5%;">
<div id="Panel1" style="display: inline-block; position:relative; margin-right: 300px; opacity: 0;">
</div>
<div id="Panel2" style="display: inline-block; position:relative; opacity: 0;">
</div>
</div>
</div>
</body>
Just have (or load) the chronometre page in a div that is outside of the visibility, then use the animations to slide it in:
#next_page {
position:fixed;
top:0px;
left:100%;
z-index:222;
height:100%;
width:100%;
background:rgba(0,0,0,0.6);
}
And then with JS (I used jQuery for convenience):
function openChronometre(){
$("#next_page").stop(0,0).animate(
{ left: 0 },
1000
);
}
You can see it working here: http://jsfiddle.net/1uggfw32/5/ (I made the options as a green box so you can click on them).
Please, Please answer / help me.
I have three divs with CSS and it is generated dynamically.
And I call them wincontainer, smalldiv and largediv. wincontainer is a container of smalldiv and largediv as we can see in the image.
properties of divs
<!-- wincontainer -->
<ol class="wincontainer" style="width: 938px;float: left;border: 2px solid #CCC;"></ol>
<!-- smalldiv -->
<div id="smalldiv" style="
width: 420px;
margin: 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 13px;
text-align: justify;
word-wrap: break-word;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
border: 1px solid #BFBFBF;
float: right;
clear: right;"> </div>
<!-- largediv -->
<div id="largediv" style="
width: 408px;
margin: 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 13px;
min-height: 50px;
text-align: justify;
word-wrap: break-word;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
box-shadow: 0px 1px 1px #CCC;
border: 1px solid #BFBFBF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;">
As we can see we have 2 largedivs and 4 smalldivs which is dynamically generated yet
Question: I want to arrange small and large div in a proper way. As like this picture. fig (1). but they are coming like as fig (2)
As i said I cannot create sub wrappers because they are dynamically and very important serial wise generated...if i make the subwrapper then it cant be in serial wise
Note: I can not make another special div to contain smalldiv or largediv to separate it, because that small and large div is in a serial wise so we cant put them in a special container and they are dynamic.
In JSFIDDLE -> http://jsfiddle.net/jwy3c3n5/ when you delete the upper most smalldiv then it will work fine but when you add smalldiv on top it goes mad.. i want to fix it and make it proper way at unlimited div
a div will either be largediv or smalldiv, there will could be a variable number of each and can appear in any order. All largediv and smalldiv are contained within wincontainer. Additional markup is not allowed.
Here's an option that requires JavaScript:
$(document).ready(function(){
var containerTop = $('.container')[0].offsetTop,
lpos = containerTop,
rpos = containerTop;
$('.container > div').each(function(){
var $el = $(this),
el = $el[0];
if($el.hasClass('large')){
if(lpos < el.offsetTop){
$el.css('margin-top', (lpos - el.offsetTop) + "px");
}
lpos += $el.height();
}else if($el.hasClass('small')){
if(rpos < el.offsetTop){
$el.css('margin-top', (rpos - el.offsetTop) + "px");
}
rpos += $el.height();
}
});
});
.container{
}
.container > div{
width:50%;
box-sizing:border-box;
position:relative;
}
.container .large{
height:400px;
display:inline-block;
float:left;
clear:left;
position:relative;
}
.container .small{
height:150px;
display:inline-block;
float:right;
clear:right;
position:relative;
}
.red{background-color:red}
.blue{background-color:blue}
.green{background-color:green}
.yellow{background-color:yellow}
.purple{background-color:purple}
.orange{background-color:orange}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='large red'></div>
<div class='small blue'></div>
<div class='small green'></div>
<div class='large yellow'></div>
<div class='small purple'></div>
<div class='small orange'></div>
</div>
note: I think it would be better to use a div for your "wincontainer" than an ordered list.
I haven't tried this in a similar stituation, but you could set display:inline-block on largediv and smalldiv. Maybe that would do it.
Edit: and remove the float attribute. But now that i think about it, depending on the order of the divs, this could not be the best solution.
You need to change the id's to classes on your dynamic divs, and then layout the code to flow in div order.
Your css and html worked really.
See the fiddle
http://jsfiddle.net/jwy3c3n5/2/
<div id="container">
<div id="leftwrapper">
<div class="large">test<br />test<br />test<br />test<br />test<br /></div>
<div class="large">testtest<br />test<br />test<br />test<br /></div>
</div>
<div id="rightwrapper">
<div class="small">test</div>
<div class="small">test</div>
<div class="small">test</div>
<div class="small">test</div>
</div>
</div>
#container {
width: 500px
}
#rightwrapper {
float: right;
width: 35%;
}
#leftwrapper {
float: left;
width: 55%;
}
.large {
background: gray;
margin-bottom:10px;
}
.small{
background: gray;
margin-bottom:10px;
}
I created a js-fiddle with the information you provided, plus a small edit on the margin for the large div, and the layout appears to be behaving the way you want it to.
Here is the example: http://jsfiddle.net/uaeb0Lmv/
I revised the margins as such:
#largediv {
margin: 10px 30px 30px;
}
For some reason, the follow-up top margin didn't override the original declaration. Let me know if that works for you. Otherwise, we may need more info on the div contents.
I understand your problem and i try to solve your problems. You can use this code. It is working.
Live Working Demo
HTML Code
<div id="main">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
</div>
CSS Code:
#main
{
height:410px;
width:450px;
border:5px solid black;
}
#one
{
height:150px;
width:150px;
background-color:red;
border:5px solid black;
position:relative;
margin-left:20px;
margin-top:20px;
}
#two
{
height:150px;
width:150px;
background-color:green;
border:5px solid black;
margin-top:20px;
position:relative;
float:left;
margin-left:20px;
margin-top:20px;
}
#three
{
height:60px;
width:200px;
background-color:blue;
border:5px solid black;
margin-left:20px;
margin-top:10px;
position:relative;
float:left;
display:table-cell;
margin-top:-160px;
}
#four
{
height:60px;
width:200px;
background-color:gold;
border:5px solid black;
margin-left:20px;
margin-top:10px;
position:relative;
float:left;
display:table-cell;
margin-top:-60px;
}
#five
{
height:60px;
width:200px;
background-color:purple;
border:5px solid black;
position:relative;
float:left;
display:table-cell;
margin-top:40px;
margin-left:-210px;
}
#six
{
height:60px;
width:200px;
background-color:gray;
border:5px solid black;
margin-left:-210px;
margin-top:140px;
position:relative;
float:left;
display:table-cell;
}
Result:
Edit: Plunker preview here - http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview
Probably a terrible title but after a minute I haven't been able to come up with better.
I have created a simple page with angularjs and some html. The issue I'm having is actually with css. When you click on a menu item, it highlights the block, but I'm getting a weird 1-2 px border that isn't highlighted along the bottom.
Been at this for hours and seriously going up the wall with it...
My html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link type="text/css" rel="stylesheet" href="css.css" />
<!--AngularJS code-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>
<!-- The navigation menu will get the value of the "active" variable as a class.
The $event.preventDefault() stops the page from jumping when a link is clicked. -->
<div id="header">
<div id="title">
<h3 class="pull-left company-heading">Tool Title</h3>
</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
Contact
</nav>
</div>
<!-- ng-show will show an element if the value in the quotes is truthful,
while ng-hide does the opposite. Because the active variable is not set
initially, this will cause the first paragraph to be visible. -->
<p ng-hide="active">Please click a menu item</p>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
fd
</body>
</html>
My css:
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
}
#header {
position: relative;
background: none repeat scroll 0% 0% #185A82;
margin-bottom:45px;
line-height: normal;
}
#title {
display:inline-block;
padding: 18px 200px;
color:#fff;
font-weight:bold;
font-size:18px;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
/*-------------------------
The menu
--------------------------*/
nav{
display:inline-block;
border-radius:2px;
}
nav a{
color:#fff;
text-transform: uppercase;
display:inline-block;
padding: 18px 30px;
text-decoration:none !important;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
nav a:first-child{
border-radius:2px 0 0 2px;
}
nav a:last-child{
border-radius:0 2px 2px 0;
}
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
background-color:#e35885;
}
p{
font-size:22px;
font-weight:bold;
color:#7d9098;
}
p b{
color:#ffffff;
display:inline-block;
padding:5px 10px;
background-color:#c4d7e0;
border-radius:2px;
text-transform:uppercase;
font-size:18px;
}
You can try to add on your a tags the following css
line-height: 60px;/*height of your header*/
padding: 0px 30px;/*remove the top and bottom padding*/
hope it will help you
Update the below css values with:
nav a{
color:#fff;
text-transform: uppercase;
display:inline-block;
padding: 22px 30px;
text-decoration:none !important;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
Your titles padding is the problem
This will work:
#title {
display: inline-block;
padding: 14px 200px;
color: #fff;
font-weight: bold;
font-size: 18px;
}
Update your css style of nav > a with this:
nav a {
color: #fff;
display: inline-block;
padding: 23px 30px 19px;
text-decoration: none !important;
text-transform: uppercase;
-webkit-transition: background-color 0.25s;
-moz-transition: background-color 0.25s;
transition: background-color 0.25s;
}
Otherwise you can set a custom height to the a.
Trying to adjust the size of the elements by using padding can be tricky. In this case it is better that the size is determined by the content of the elements. I propose the following changes:
First remove the padding of #tittle and instead add the desired positioning.
#title {
display:inline-block;
position: relative;
top: 18px;
left: 200px;
color:#fff;
font-weight:bold;
font-size:18px;
}
For the height of #header match the height of the child elements, we must include an element with style clear: both. This is so because #nav has float: right and the floats algorithm will extract the box from the normal flow. (reference: Visual formatting model )
HTML:
<div id="header">
<div id="title">...</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">...</nav>
<div class="clear"></div>
...
</div>
CSS:
.clear {
clear: both;
}
Finally, the elements contained in #header that we do not want in the normal flow are include in a div with the style float: left.
I updated your example:
http://embed.plnkr.co/ekxYOXLp4UUZD7ikHMHM/preview
I hope this helps.
When you use floats, you need to add a "clear" style to clear the floats:
<br style="clear:both" />
This is because anything inside of a div that's floated does not take space inside the div. The clear float CSS instructs the DIV to ensure that it encloses its floated children.
For example:
<div id="header">
<div id="title">
<h3 class="pull-left company-heading">Tool Title</h3>
</div>
<nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
Contact
</nav>
<br style="clear:both" />
</div>
You also have to remove the margin-bottom CSS style for your header.
#header {
position: relative;
background: none repeat scroll 0% 0% #185A82;
line-height: normal;
}
Demo Plunker
Change the padding of nav a to
nav a {
padding: 21.5px 30px;
}