I am having trouble centering my navigation bar, I have tried display:inline-block and then align center like most posts suggest but it doesn't seem to be working.
HTML:
<!--Navigation-->
<div class="band navigation">
<nav class="container primary">
<div class="sixteen columns">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Projects</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
CSS:
nav.primary{
display: table;
margin: 0 auto;
}
nav.primary ul, nav.primary ul li {
margin: 0px;
}
nav.primary select {
display: none;
width: 100%;
height: 28px;
margin: 21px 0;
}
nav.primary ul li {
display: inline;
float: left;
position: relative;
}
nav.primary ul li a {
display: inline-block;
line-height: 49px;
padding: 0 14px;
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
background: ##999999;
}
nav.primary ul li a:hover {
background: #2ecc71;
cursor: pointer;
}
Ok finally got it:
nav.primary ul li {
display: inline;
float: left; <---
position: relative;
Remove the float: left;
Since the navigation is the full width of the containing div, there is no need to mess with floats, the list items will line up with just display: inline;
I tried something else that works... It seems to work better than trying to build in something custom thus far in my experience with Skeleton... Although it produces a bit less pretty markup for the HTML, the rigidity of the final result works for me. Here is my code so that you can see what I did to achieve the desired effect:
<div class="row">
<div class="two columns offset-by-three">
Portfolio
</div>
<div class="two columns">
About
</div>
<div class="two columns">
Contact
</div>
</div>
What you can see here is that the skeleton framework allows for the columns to operate naturally and restack at lower resolutions without any extra code. The only tricky part really is setting up the offset on the left most item.
Have you tried nav.primary ul {text-align: center;}
As well as keeping the left/right margins to auto, this worked for me when I was using the skeleton framework.
Related
i've been tinkering with HTML Applications and VBScript and im wanting to create a multi level dropdown menu in app.
Am i missing something? Doesnt CSS work correctly in HTA
Tried the example at this link: https://htmldog.com/examples/dropdowns3/
which is exactly what im trying to get it to look like
<title>Example Dropdown</title>
<HTA:APPLICATION
APPLICATIONNAME="Example Dropdown"
ID="shortageEmail"
ICON="magnify.exe"
VERSION="1.0"/>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
background: #333;
margin: 15px;
}
article {
width: 600px;
margin: 0 auto;
background: #000;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px 2px #666;
}
section {
clear: left;
}
h1 {
font-size: 45px;
font-weight: 100;
letter-spacing: 15px;
text-align: center;
}
h1, #main_content, #dog_link {
padding: 15px;
}
p {
margin: 15px 0;
}
a {
color: #06c;
}
#main_nav ul {
background: white;
float: left;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav li {
float: left;
position: relative;
width: 150px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav > ul > li > a, h1 {
text-transform: uppercase;
}
#main_nav a {
display: block;
text-decoration: none;
padding: 5px 15px;
color: #000;
}
#main_nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
#main_nav ul ul ul {
left: 100%;
top: 0;
}
#main_nav li:hover, #main_nav li:hover li {
background: #ddd;
}
#main_nav li li:hover, #main_nav li li:hover li {
background: #bbb;
}
#main_nav li li li:hover {
background: #999;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
}
</style>
<!--[if lt IE 9]><script src="/r10/html5shiv.js"></script><![endif]-->
</head>
<body>
<article>
<h1>Tetrapods</h1>
<nav id="main_nav">
<ul>
<li>
Birds
<ul>
<li>Ratites</li>
<li>Fowl</li>
<li>Neoaves</li>
</ul>
</li>
<li>
Mammals
<ul>
<li>
Monotremes
<ul>
<li>Echidnas</li>
<li>Platypus</li>
</ul>
</li>
<li>
Marsupials
<ul>
<li>Opossums</li>
<li>Numbats, etc.</li>
<li>Bandicoots, etc.</li>
<li>Kangaroos, koalas, wombats, etc.</li>
</ul>
</li>
<li>
Placentals
<ul>
<li>Primates, ungulates, etc.</li>
<li>Anteaters, sloths, etc.</li>
<li>Elephants, etc.</li>
</ul>
</li>
</ul>
</li>
<li>
Reptiles
<ul>
<li>Lizards and snakes</li>
<li>Tortoises and turtles</li>
<li>Crocodilians</li>
<li>Tuatara</li>
</ul>
</li>
<li>
Amphibians
<ul>
<li>Frogs and toads</li>
<li>Salamanders and newts</li>
<li>Caecilians</li>
</ul>
</li>
</ul>
</nav>
<section id="main_content">
<p>A CSS dropdown menu example using tetrapod groups as navigation items. The "Mammals" item provides an example of a multi-level dropdown. See the HTML Dog Dropdowns tecnhique article for more information.</p>
<p>Tetrapods are a major group of animals containing those that evolved from fish and developed four limbs. They comprise the major sub-groups of amphibians, reptiles, mammals, and birds. "Tetrapod" literally means four-footed.</p>
</section>
<!-- Link back to HTML Dog: -->
<p id="dog_link"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></p>
</article>
</body>
Expected: https://puu.sh/DJmWR/6da6b5b5dd.png
Actual: https://puu.sh/DJmX7/cc10b87c70.png
This looks like an I.E. standards mode issue. Add a line in your HEAD section to force I.E. 11 mode:
<meta http-equiv="x-ua-compatible" content="IE=11">
You can experiment with lower version numbers until it breaks again.
Oops, just spotted your Edit, too late.
Tried two approaches to achieve vertical align text next to responsive image each in a separate .col-md-*
on the child element
.vcenter {
min-height: 400px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
float: none;
}
and a parent child using table-cell method
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
but as image on left is responsive how do I get to work without a fixed height.
fiddle : https://jsfiddle.net/silko/jr3b8kL5/13/
just add line-height: 400px; to your .child class it will make the text vertically centered.
Note: you can use calc and vw and vh to make it flexible, e.g. line-height: calc(30vw + 30vh);
.vcenter {
min-height: 400px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
float: none;
}
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
p{
display: table-cell;
height: 400px;
vertical-align: middle;
}
<div class="col-sm-6">
<picture><img src="http://placehold.it/400x400" class="ccm-image-block img-responsive bID-214"></picture>
</div>
<div class="col-sm-6">
<div class="parent">
<div class="ccm-custom-style-main49 child">
<p>vertical center text when more than one lineihfoiwvowiWOiehfiwhfpwHFPwofhpofhpfhpifhhvciuvcivuwcviwucvwicuwvcwiucvcwuicvwicvwicuwvcwicuvwicuvwicvwciuwcviwcuwv</p>
</div>
</div>
</div>
</div>
Update: if your text contains multiple lines then you should set the text container's display property to table-cell and then you can set vertical-align: middle.
Im creating a radial play button for my player And I use css flex for centering the play icon. Its working fine in chrome but not in safari browser.
In my css I have something like this:
.inset {
width: #inset-size;
height: #inset-size;
position: absolute;
margin-left: 20px;
margin-top: 20px;
background-color: #circle-background;
border-radius: 50%;
border: 3px solid #192D48;
font-size: 50px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
i {
-webkit-align-self: center;
align-self: center;
color: black !important;
top: 0px;
left: 1px;
}
}
I already added display: -webkit-flex; to support flex in safari but unluckily it doesnt work and when I checked it in the debugger styles of safari there is no display: -webkit-flex; on it but space -webkit-justify-around appear.
but when I hardcoded it in style like this:
<div class='scr-button radial-progress'>
<div class="circle-gray"></div>
<div class="circle">
<div class="circle-white"></div>
<div class="mask full" ng-style="{'transform': currTime}">
<div class="fill" ng-style="{'transform': currTime}"></div>
</div>
<div class="mask half">
<div class="fill" ng-style="{'transform': currTime}"></div>
<div class="fill fix" ng-style="{'transform': currTime * 2}" ></div>
</div>
</div>
<div class="inset" ng-click="play()" style="display: -webkit-flex;">
<i ng-class="icon()"></i>
</div>
</div>
Its working fine, can someone explain me why it doesnt work when I put it on a class? Is it browser issue? Or Im doing it wrong?
Specs:
Less,
Safari Version: Version 8.0.8,
Angularjs
I tried to place an h1 element above a div element using the css property z-index, but it's not working!
Here's my html:
<div id="header">
<div id="headerblock">
</div>
<h1>This is my header text</h1>
</div>
The #headerblock has a black surface including some transparency.
I want the h1 to be appearing above the #headerblock. As I mentioned the z-index property isn't working. Does someone have a solution for this? Or at least a reason why it's not working?
Thanks.
Gotta have a position on the h1.
h1 {
position:relative;
z-index: 500;
}
#header{
background-image: url(img/head.jpg);
background-size: 100%;
height: 520px;
width: 100%;
top:49px;
position: absolute;
margin:0 auto;
text-align:center;
}
#headerblock{
background-color:#444444;
opacity:0.7;
filter:alpha(opacity=70);
width:100%;
position:absolute;
height:200px;
}
<div id="header">
<div id="headerblock"></div>
<h1 style="color:white">This is my header text</h1>
</div>
Trying to create a vertical drop down menu purely with html/css.
the coding is quite clean as far as i can see, and works well in ff, ie (not 6 ofc), and opera though on google chrome and safari the "toplink" jumps to the left on hover.
html:
<div id="topmenu">
<ul>
<li class="toplink">About
<ul class="submenu"><li>About2</li>
<li>About3</li>
</ul>
</li>
<li class="toplink">About
<ul class="submenu"><li>About2</li>
<li>About3</li>
</ul>
</li>
</ul>
css:
#topmenu ul {margin: 0; padding: 0; list-style: none; width: 100%; }
#topmenu ul li {position: relative; float: left; display: inline; }
#topmenu ul li ul {position: absolute; display: none; margin-top: 4px;}
#topmenu ul li ul li {position: relative; clear: left; }
#topmenu ul li:hover ul {display: block; }
seems i was too hastey asking here.
adding #topmenu ul li a {display: block} seemed to do the trick, though not quite sure why.
any explainations would be appreciated, otherwise hope this is of use to others!