I use a list-style-image for li items , and a single-line text.
But it looks bad, so I want to vertically align the text to the middle of the image.
I should use vertical-align: middle , right ? But it didn't work for me.
<html>
<head>
<title> This is an demo </title>
<style>
body {
background-color: #464443;
color: white;
}
ul {
list-style-image: url('bg.png');
}
li {
vertical-align: middle;
}
</style>
</head>
<body>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</body>
</html>
A satisfactory way to do this (imo) is to not use list-style-image, instead using the background property to set the "bullet" (note I substituted my own placeholder image since I just copied/pasted from a fiddle). Your padding and other dimensions will vary depending on the size of the "bullet" image.
Here's the fiddle: http://jsfiddle.net/huBpa/1/
body {
background-color: #464443;
color: white;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat;
line-height: 32px;
vertical-align: middle;
padding-left: 40px;
}
This is what I would use. I don't use vertical align and instead use padding to move the text around to be wherever I want it to be.
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li {
padding: 10px 10px 15px 20px;
background-image: url(images/arrow.png);
background-repeat: no-repeat;
background-position: 0px;
}
Add line-height to li. Make sure it is the same height as the image
`
li {
vertical-align: middle;
line-height: 30px;
}
Related
I have 2 navs inline, and one of them is floating on the right side:
2 navs
I would like to center the text in the first nav but to the center of the screen instead of the nav itself. I thought that the easiest way to solve this would be to make the 2 navs overlap but I'm not sure. I was wondering if anyone could help me solve this problem?
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
}
header>nav:nth-child(1) {
float: right;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: left;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>
You want the nav items to be centered in the bar, ignoring the width of the nav element to the right?
One way would be to use absolute positioning on the red nav to remove it from the flow of the page. By removing it from the flow, it's width/height will be ignored so you can center the rest of the items in the nav based on the whole screen.
Add some positioning to the red nav and make sure you set the header to be position: relative. Finally, change the text-align to center.
Be aware: By removing the red nav from the flow, it's possible that the other nav items may overlap the red nav depending on the screen size. Make necessary adjustments with media queries or some other solution.
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
position: relative;
}
header>nav:nth-child(1) {
position: absolute;
top: 1em;
right: 1em;
bottom: 1em;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: center;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
Saw this www.workatplay.com/ website, and got fascinated on how simple and nice stuff can look. I wish to make exactly like the header above.
With the header I am reffering to this:
http://img227.imageshack.us/img227/619/header1o.png
And how the links + the "[workatplay.com]" logo is set up at the right.
I tried looking at the source & css/source for learning, but It doesnt seem to be there. The part where the nav-sub(the pink bar) gets colordefined(css) and splitted.
Is the whole header a background itself? Why cant i find it in the css or anywhere else to know how they have done.
How can i make a header like this?
Here you go.. http://jeaffreygilbert.com/workatplayheader.html
Preview:
CSS:
/* Resetter */
ol, ul, li, a {
background: transparent;
border: 0px;
font-size: 100%;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
ul, li {
list-style-type: none;
}
/* Body */
body {
background-image: url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/bg-home.png);
}
/* Header */
.header {
margin: 0px auto;
position: relative;
width: 1000px;
}
.header ul li {
float: left;
}
.header ul li a {
background-position: 0% 0%;
background-repeat: no-repeat;
cursor: pointer;
display: block;
height: 80px;
text-indent: -9999px;
}
.header ul li a, ul#nav-sub {
background: transparent url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png) no-repeat scroll 0px -160px;
}
/* Nav */
ul#nav {
height: 80px;
margin-top: 80px;
-webkit-padding-start: 40px;
display: block;
}
ul#nav li.services a {
background-position: 0px 0px;
width:115px;
}
ul#nav li.toolbox a {
background-position: -115px 0px;
width:115px;
}
ul#nav li.work a {
background-position: -224px 0px;
width: 86px;
}
ul#nav li.about a {
background-position: -310px 0px;
width: 93px;
}
ul#nav li.insights a {
background-position: -403px 0px;
width: 113px;
}
ul#nav li.home {
float: right;
}
ul#nav li.home a {
background-position: -533px 0px;
width: 200px;
}
/* Sub Nav */
ul#nav-sub {
background-position: 0px -160px;
background-repeat: no-repeat;
height: 40px;
overflow: hidden;
}
ul#nav-sub li.contact {
float: right;
}
ul#nav-sub li.contact a {
background-position: 0px -200px;
width: 200px;
}
HTML:
<div class="header">
<ul id="nav">
<li class="home">work [at] play vancouver</li>
<li class="services">services</li>
<li class="toolbox">toolbox</li>
<li class="work">work</li>
<li class="about">about</li>
<li class="insights">insights</li>
</ul>
<ul id="nav-sub">
<li class="contact">contact work [at] play</li>
</ul>
</div>
Using Google Chrome, right click and select "Inspect Element". There is a task pane called "computed css" that will tell you exactly what the browser is displaying no matter how the css got there (default, inline, external). I use that to debug css I'm developing all the time. Other browsers may have similar features.
As to how to replicate it? The css would be rather simple. Two floated divs for each row. Inside each div would be two additional divs, one floated left and one floated right. Play with the margins until you get the spacing you like.
width: 100%;
background-color: {color you want};
margin-left: ____;
margin-right: ____;
etc
As for the logo, research css's vertical-align attribute. This, couple with font-size should give you the effect you want.
Well at workplay.com there is css file http://workplay.com/files/css/css_09edd7837a8690967d3b6d7e136222f6.css which you can locate by viewing source.
if you are using firefox then download and install Firebug Plug-in. similarly if you are using IE there is similar plug-in available from Microsoft "IE Developer Toolbar". or chrome or safari comes with Web Page Inspector tool . all are simple to use
just point with pointer from this plug-in and click on one the element for which you want to know css or HTML or JavaScript details.
here you can experiment with this by changing and see result instantly.
copy and paste the following code in your editor, the color and fonts are not the same but it look nearly likes your header
<html>
<head>
<style>
body {
font : 20px Arial;
margin: 0px;
}
div#header {
background : black;
color: white;
padding-top : 25px;
}
/*The title*/
div#header h1 {
float: right;
margin-right: 100px;
border; 1px white;
font : 20px Arial;
}
div#header ul {
list-style: none;
height: 50px;
}
div#header li {
float: left;
width: 100px;
}
div#pink_area{
background: pink;
margin-top; 0px;
}
div#pink_area ul {
list-style: none;
height: 50px;
}
div#pink_area li {
float: left;
width: 45%;
line-heigth: 20px;
text-align : center;
padding : 10px
}
</style>
</head>
<div id="header">
<h1>Work <small>[at]</small> play <small><sup>TM</sup></small></h1>
<ul id="menu">
<li>services</li>
<li>toolbox</li>
<li>work</li>
<li>about</li>
<li>insigths</li>
</ul>
<div id="pink_area">
<ul>
<li>Engaging digital experiences</li>
<li>contact us</li>
</ul>
</div>
</div>
</html>
CSS:
.homeBar li {
float: center;
display: inline;
text-align: center;
font-family: Tahoma;
font-size: 13px;
list-style: none;
}
.homeBar img {
color: #94938e;
margin-right: 30px;
text-decoration: none;
}
HTML:
<ul class="homeBar">
<li><img src="images/friends.png"></li>
<li><img src="images/mail.png"></li>
</ul>
as you can see i tried float: center, but it wont center it..
If the widths of your elements (and thus, your list) are known, you could display the list as inline-block, and apply auto margins to it:
.homeBar li {
width: /* Full width (calculate it manually) */;
display: inline-block;
margin: 0 auto;
}
The width used should be the width of the images, plus padding and margin, after any margin collapse.
I want the following code to display only 1 line of text. How can I get rid of the break between the span and the ul?
<div id="twitter_div">
<span class="talenthouse">#twittername: </span>
<ul id="twitter_update_list">
</ul>
</div>
With the following CSS:
*{
margin: 0;
padding: 0;
}
#twitter_div{
font-family:"lucida grande",tahoma,arial,sans-serif;
color: #999999;
font-size: 71%;
background: url(images/twitter_bg.gif) top left no-repeat;
width: 965px;
height: 48px;
overflow: auto;
padding: 15px 0 0 85px;
}
.talenthouse{
font-family: "Helvetica Neue", "lucida grande",tahoma,arial,sans-serif;
color: #80c242;
font-weight: bold;
font-size: 135%;
display: inline;
}
ul#twitter_update_list{
list-style: none;
width: 780px;
height: 15px;
display: inline;
}
Try this CSS.
<style type="text/css">
ul, li, ol{display:inline}
</style>
Short answer: put this in your CSS.
ul#twitter_update_list, ul#twitter_update_list li { display: inline; }
Try to use a reset sheet to remove all paddings/margins from the elements.
Google for 'eric meyer reset sheet'.
Then put the list an the content to display:inline;
You can set the CSS to display the UL inline. This will also remove the dots.
#twitter_div li { display: inline; }
Thanks
Andi
I believe this should work:
#twitter_div span { float: left; }
#twitter_update_list { float: left; margin: 0; }
EDIT: I just added the margin: 0 which brings the list up to the same level as the span.