im making a website for a Youtube group i am in.
And i have alot of hyperlinks in the div #header-menu.
http://i.snag.gy/rVI8c.jpg
body, html {
width: 100%;
background: url("/img/dirt.png");
background-size: 2%;
image-rendering: -webkit-optimize-contrast;
padding-top: 0px;
padding-left: 0px;
font-family: Minecraftia;
}
#header {
width: 100%;
background-image: url("/img/header.png");
background-repeat: repeat-x;
background-size: 2%;
margin-left: -8px;
margin-top: -8px;
height: 64px;
}
a {
cursor: pointer;
color: blue;
text-decoration: none;
}
#font-face {
font-family: Minecraftia;
src: url("/Minecraftia-Regular.ttf");
}
#header-menu {
width: 100%;
height: 48px;
line-height: 58px;
vertical-align: middle;
margin-left: -8px;
padding-left: 8px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background: rgba(17,146,32,1);
background: -moz-linear-gradient(top, rgba(17,146,32,1) 0%, rgba(40,128,40,1) 45%, rgba(0,82,5,1) 52%, rgba(15,123,42,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(17,146,32,1)), color-stop(45%, rgba(40,128,40,1)), color-stop(52%, rgba(0,82,5,1)), color-stop(100%, rgba(15,123,42,1)));
background: -webkit-linear-gradient(top, rgba(17,146,32,1) 0%, rgba(40,128,40,1) 45%, rgba(0,82,5,1) 52%, rgba(15,123,42,1) 100%);
background: -o-linear-gradient(top, rgba(17,146,32,1) 0%, rgba(40,128,40,1) 45%, rgba(0,82,5,1) 52%, rgba(15,123,42,1) 100%);
background: -ms-linear-gradient(top, rgba(17,146,32,1) 0%, rgba(40,128,40,1) 45%, rgba(0,82,5,1) 52%, rgba(15,123,42,1) 100%);
background: linear-gradient(to bottom, rgba(17,146,32,1) 0%, rgba(40,128,40,1) 45%, rgba(0,82,5,1) 52%, rgba(15,123,42,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#119220', endColorstr='#0f7b2a', GradientType=0 );
}
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<title>The Infected Horde</title>
<link rel="stylesheet" href="/style.css" type="text/css">
</head>
<body>
<div id="header"></div>
<img src="/img/logo.gif" style="height: 72px; width: auto;" /><br>
<div id="header-menu"><a id="homebtn">Home</a>
<a id="videosbtn">Servers We Play On</a></div>
<a id="aboutusbtn">About Us</a></div>
<a id="videosbtn">Videos</a></div>
<a id="contactbtn">Contact Us</a></div>
</body>
</html>
What am i doing wrong?
Sorry about the non-working images in the snippet.
Because you are putting </div> tags without a reason, there is only one div, it should be :
<div id="header"></div>
<img src="/img/logo.gif" style="height: 72px; width: auto;" /><br>
<div id="header-menu"><a id="homebtn">Home</a>
<a id="videosbtn">Servers We Play On</a>
<a id="aboutusbtn">About Us</a>
<a id="videosbtn">Videos</a>
<a id="contactbtn">Contact Us</a>
</div>
Use only one div i.e at the end and i would prefer using display:inline in the a tag css. Moreover here is the FIDDLE and i have deleted because i don't think they have any use here.
Related
I already tried searching all over Stack Overflow and unfortunately didn't find any possible solution thus I decided to post a question.
So I was using bootstrap 3 for the first time and I uses their navigation style, the .navbar .navbar-default and they have there own height which make the .active class on the bootstrap able to cover the whole navigation, but in my case I modify and create a new class and called it .own-navbar I added this css
.own-navbar{
height: 68px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e2e2e2 48%, #cccccc 50%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#e2e2e2), color-stop(50%,#cccccc), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
background: linear-gradient(to bottom, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
}
and made a lot of changes and here's my navigation bar looks like
http://i.stack.imgur.com/EXx4H.png
As you guys see it, the .active class on bootstrap 3 isn't covering the whole thing. So how can I fix it?
Here's my full HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>sWIFI - Free Wifi Hotspot!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- SCRIPT -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- NAVIGATION BAR -->
<div class="container">
<nav class="navbar navbar-default own-navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/se" class="se" title="Free Wifi Hotspot" />
<h6>se</h6>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><img src="img/seperator.png" /></li>
<li class="active"><a class="red"href="#">HOME</a></li>
<li><img src="img/seperator.png" /></li>
<li>ABOUT</li>
<li><img src="img/seperator.png" /></li>
<li>CONTACT US</li>
<li><img src="img/seperator.png" /></li>
</ul>
<div class="search navbar-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default search-btn" type="submit">Go!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</nav>
</div>
<!-- END OF NAVIGATION BAR -->
</body>
</html>
and my full CSS Code
/** CSS STYLING SPECIALLY MADE FOR sWIFI and CODED by urielD3 **/
/** Defaults **/
body{
background-color: #f6f6f6;
}
/** NAVIGATION BAR & MENU **/
.own-navbar{
height: 68px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e2e2e2 48%, #cccccc 50%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#e2e2e2), color-stop(50%,#cccccc), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
background: linear-gradient(to bottom, #ffffff 0%,#e2e2e2 48%,#cccccc 50%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
}
.own-navbar .container-fluid .navbar-header .se{
margin: 2px 0px 0px 5px;
}
.own-navbar .container-fluid .navbar-header h6{
font-family: Verdana;
font-size: 12px;
color: #363636;
font-weight: bold;
text-shadow: 1px 1px 2px #7A7A7A;
margin: -6px 0px 0px 55px;
cursor: default;
}
li:hover{
/* margin: -7px 0 0 0;
height: 68px; */
background: #f3f3f3;
background: -moz-linear-gradient(top, #f3f3f3 0%, #f1f1f1 53%, #e1e1e1 53%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(53%,#f1f1f1), color-stop(53%,#e1e1e1), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #f3f3f3 0%,#f1f1f1 53%,#e1e1e1 53%,#ffffff 100%);
background: -o-linear-gradient(top, #f3f3f3 0%,#f1f1f1 53%,#e1e1e1 53%,#ffffff 100%);
background: -ms-linear-gradient(top, #f3f3f3 0%,#f1f1f1 53%,#e1e1e1 53%,#ffffff 100%);
background: linear-gradient(to bottom, #f3f3f3 0%,#f1f1f1 53%,#e1e1e1 53%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 );
}
.asd{
color: red;
}
.own-navbar .container-fluid div ul{
margin: 7px 0px 0px 65px;
}
.own-navbar .container-fluid div ul li a{
color: #3B3B3B;
font-size: 15px;
font-family: Verdana;
font-weight: bolder;
}
.own-navbar .container-fluid div ul li img{
margin: -8px 0 0 0;
}
.own-navbar .container-fluid div .search form input{
border-radius: 20px;
width: 305px;
margin: 6px 0 0 0;
}
.own-navbar .container-fluid .search form .search-btn{
border-radius: 20px;
margin: 3px 0 0 15px;
}
Edit:
Click me for the Actual Website
#Christina is correct, but possibly a more direct answer to your question is you set your .own-navbar height to 68, but that isn't really doing what you want. Your separator image height is 68px so your navbar is already at the image height. The use of the image in the menu nav list will cause problems when the navbar collapse class is added on smaller screens.
You could use:
ul.nav.navbar-nav li {
height: 68px;
}
to try to fix the button height, but that will lead to still other issues.
You could remove the separator image and use css to create separators between buttons. The following rule is going to cause additional problems as well.
.own-navbar .container-fluid div ul {
margin: 7px 0 0 65px;
}
That 7px top margin will give you headaches. Adjust height with line height or padding as Christina suggested. You can solve the left margin problem by setting min-width on div.navbar-header.
Let Bootstrap determine the final nav dimensions, responsive behavior will work better that way.
I have a #header div which has a gradient background. Inside that background, there is the logo of the website, plus the navigation menu on the bottom. That #header div is supposed to be on top of the browser - not fixed, but without any padding/margin, otherwise it would leave block of body background.
This is exactly what it's happening on Chrome. Instead of staying in the top of the browser, it is like if 30px of margin-top was put inside the #header. Funny thing is that it works perfectly on Safari, i.e., it stays on the top of the browser.
This is my code:
<div id = "header">
<div id = "header-content">
<p id = "logo"> Components </p>
<div id = "menu-links-div">
<ul id = "ul-links">
<li class = "menu-links"> Home </li>
<li class = "menu-links"> Media </li>
<li class = "menu-links"> Sobre </li>
<li class = "menu-links"> Contatos </li>
</ul>
</div>
</div>
</div>
And the CSS:
body {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; height:100%; -webkit-font-smoothing:subpixel-antialiased; font-size:13px;
}
#header {
display: inline-block;
width: 100%;
background: rgba(90,137,173,1);
background: -moz-linear-gradient(left, rgba(90,137,173,1) 0%, rgba(195,223,245,1) 51%, rgba(90,137,173,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(90,137,173,1)), color-stop(51%, rgba(195,223,245,1)), color-stop(100%, rgba(90,137,173,1)));
background: -webkit-linear-gradient(left, rgba(90,137,173,1) 0%, rgba(195,223,245,1) 51%, rgba(90,137,173,1) 100%);
background: -o-linear-gradient(left, rgba(90,137,173,1) 0%, rgba(195,223,245,1) 51%, rgba(90,137,173,1) 100%);
background: -ms-linear-gradient(left, rgba(90,137,173,1) 0%, rgba(195,223,245,1) 51%, rgba(90,137,173,1) 100%);
background: linear-gradient(to right, rgba(90,137,173,1) 0%, rgba(195,223,245,1) 51%, rgba(90,137,173,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a89ad', endColorstr='#5a89ad', GradientType=1 );
}
#logo {
text-align: center;
font-size: 7.5em;
margin-top: 105px;
font-family: Alien;
}
#header-content {
margin: 0 auto;
}
In my mobile application, I have a in-box message and it's in table format:
Fiddle example
HTML:
<div>
<table>
<tbody>
<tr>
<td class="td1">
<img src="images/inbox_read.png" class="icon">
</td>
<td class="td2"><span>You have received a message</span>
</td>
<td class="td3"><span class="date">13/2/2014 20:02:01</span>
</td>
</tr>
</tbody>
</table>
<div class="seperator-gradient"></div>
</div>
<div>
<table>
<tbody>
<tr>
<td class="td1">
<img src="images/inbox_read.png" class="icon">
</td>
<td class="td2"><span>You have received a message</span>
</td>
<td class="td3"><span class="date">13/2/2014 20:02:01</span>
</td>
</tr>
</tbody>
</table>
<div class="seperator-gradient"></div>
</div>
<div>
<table>
<tbody>
<tr>
<td class="td1">
<img src="images/inbox_read.png" class="icon">
</td>
<td class="td2"><span>You have received a message</span>
</td>
<td class="td3"><span class="date">13/2/2014 20:02:01</span>
</td>
</tr>
</tbody>
</table>
<div class="seperator-gradient"></div>
</div>
CSS:
TABLE {
width: 100%;
text-align: left;
padding: 6px 10px 10px;
}
TABLE .td1 {
width: 30px;
}
TABLE .td2 {
width: 154px;
}
TABLE .td3 {
text-align: right;
background-image: url("../images/more_arrow.png");
background-position: 100% 10px;
background-repeat: no-repeat;
background-size: 10px 15px;
width: 110px;
}
TABLE .sicon {
height: 10px;
width: 10px;
}
.date {
color: #2aa8dc;
float: right;
position: relative;
top: -8px;
font-size: 12px;
text-transform: uppercase;
}
.seperator-gradient {
width: 100%;
height: 1px;
border-bottom: background: #c4c4c4;
/* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(10%, #e3e3e3), color-stop(50%, #b8b8b8), color-stop(90%, #e3e3e3), color-stop(100%, #fcfcfc));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
/* IE10+ */
background: linear-gradient(to right, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=1);
/* IE6-9 */
}
You can shrink your browser size to make it phone's width. Then:
I'd like to make the second td's message not to break to a newline on phone's width(320px), how to achieve this without changing the table's structure:
<td class="td2"><span>You have received a message</span>
</td>
keep all the table width, just make the message show in one line even it exceeds boundary between td2 and td3...is it possible?
So you want it to be cut off? Overlap the date/time? What?
TABLE in your CSS should be lowercase;
and I do not believe width works well on elements (e.g. td's) that are `display: table-cell;
SO
Change:
.td2 {
width: 154px;
}
TO
.td2 span {
display: block;
background-color: green; /* used for demonstration purposes */
width: 200px;/* 154px isn't enough */
}
It took me a long time to figure out what was breaking my layout (the issue is only in ie). I am using html5 (with moderizr) and I figured out the layout was fine if I removed the following from the css:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5ede1, endColorstr=#f5ede1);
I want the gradient there for the design, though... Why does the filter break the layout in Internet Explorer?
The html for the header is:
<header>
<section id="header">
<div id="logo"><img alt="Congress" src="../img/congress-logo.png"></div>
<div id="ons-logo"><a target="_blank" href="http://ons.org"><img width="175" height="77" alt="Oncology Nursing Society" src="../img/ons-logo.png"></a></div>
</section>
<nav id="main-nav">
<ul>
<li id="register"><span>Register</span>
<ul class="subNav">
<li>subnav</li>
</ul>
</li>
<li id="exhibit"><span>Exhibit Hall</span>
<ul class="subNav">
<li>subnav</li>
</ul>
</li>
<li id="networking"><span>Networking</span>
<ul class="subNav" style="display: none;">
<li>subnav</li>
</ul>
</li>
</ul>
</nav>
</header>
And this is my CSS:
img {
border: 0;
width: 100%;
display: block;
max-width: 100%;
}
header{
background: #f5ede1; /* Old browsers */
background: -moz-linear-gradient(top, #f5ede1 0%, #fbf8f3 48%, #f5ede1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5ede1), color-stop(48%,#fbf8f3), color-stop(100%,#f5ede1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f5ede1 0%,#fbf8f3 48%,#f5ede1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f5ede1 0%,#fbf8f3 48%,#f5ede1 100%); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5ede1, endColorstr=#f5ede1); /*IE6-9 */
background: -ms-linear-gradient(top, #f5ede1 0%,#fbf8f3 48%,#f5ede1 100%); /* IE10+ */
padding-bottom: 10em;
position:relative;
max-width: 100%;
margin: 0px;
}
.ie7 header/*, .ie8 header*/{
padding-bottom:0px;
}
section#header{
max-width: 900px;
margin: auto;
position: relative;
}
div#logo {
float: left;
margin: 1em 0 0 2em;
max-width:365px;
}
.ie8 div#logo{
width:365px;
}
div#ons-logo{
max-width: 175px;
padding-left: 23em;
float:left;
}
.ie8 div#ons-logo{
width: 175px;
}
nav#main-nav {
margin-top: -30px;
padding: 0.5em 5% 0.5em 35%;
width: 60%;
float: left;
background: #d56d2a; /* Old browsers */
background: -moz-linear-gradient(top, #d56d2a 1%, #f47d31 10%, #f47d31 85%, #ea8f52 100%, #f47d31 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#d56d2a), color-stop(10%,#f47d31), color-stop(85%,#f47d31), color-stop(100%,#ea8f52), color-stop(100%,#f47d31)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d56d2a 1%,#f47d31 10%,#f47d31 85%,#ea8f52 100%,#f47d31 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d56d2a 1%,#f47d31 10%,#f47d31 85%,#ea8f52 100%,#f47d31 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d56d2a 1%,#f47d31 10%,#f47d31 85%,#ea8f52 100%,#f47d31 100%); /* IE10+ */
background: linear-gradient(to bottom, #d56d2a 1%,#f47d31 10%,#f47d31 85%,#ea8f52 100%,#f47d31 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d56d2a', endColorstr='#f47d31',GradientType=0 ); /* IE6-9 */
border-bottom: 2px solid #F5D8C7;
border-top: 2px solid #F5D8C7;
box-shadow: 0 10px 9px rgba(0, 0, 0, 0.55);
}
add this meta tag in header for campatibility with IE9:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Try to generate your gradient with colorzilla:
http://www.colorzilla.com/gradient-editor/
It's very simple.
What is being shown now.
I want the text in the nav bar to be more aligned towards the center of the white bar and the menu icon to be aligned with the word "Menu" .
Any guidance is appreciated.
HTML code :
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title> Foodstant Delivery </title>
<link rel="stylesheet" type="text/css" media="screen" href="stylo.css" />
<link rel="shortcut icon" href="images/favicon.ico" />
</head>
<body>
<div id="container">
<figure id="logo">
<img src="images/logo22.png" alt="Foodstant Delivery logo" width="" height="" />
</figure>
<figure id="abtex">
<img src="images/abtex222.png" />
</figure>
<div id="navbar">
<ul>
<li class="OP"><img src="images/order.png" />Orders</li>
<li class="MP"><img src="images/menupic3.png" />Menu</li>
<li class="CUP"><img src="images/contact.png" />Contact</li>
<li class="TCP"><img src="images/Pen.png" />About</li>
<li class="JP"><img src="images/pin.png" />Jobs</li>
</ul>
</div>
</div>
</body>
</html>
CSS code: (relevant)
#navbar {
background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
border-top-left-radius: 10px;
border-bottom-left-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
position: absolute;
top: 200px;
left: 150px;
width: 1000px;
background-position:center;
font-size: 26px;
font-family: 'Conv_LITHOSPRO-REGULAR';
box-shadow: 3px 5px 10px #888888;
}
#navbar ul {
list-style-position:inside;
padding-top: 10px;
}
#navbar ul li {
display: inline;
padding:0 60px 0px 0px;
margin-bottom: 10px;
list-style-type:disc;
}
#navbar ul li.OP {
padding-left: 40px;
}
a:link {
color: #EF174A;
}
a:visited {
color: #BF4100;
}
a:hover {
color: black;
background-color:#D2D2D2;
border-radius: 10px;
}
a:active {
color: #918FBC;
}
a {
text-decoration:none;
}
#navbar ul li.OP a {
padding-left: 10px;
}
<img src="" align="absmiddle">
That will align the text to middle of the image.
or you could do it with css:
.your_class {
vertical-align:middle;
}
Give the text line-height equal to the height of the bar.
a.yourtext { line-height: 44px }
But take care of the paddings.