Can anyone tell me why in the image below the text information is not on the same level?
As far as I'm aware, the exact same styles are governing both the email address and the other stuff, but they're not level...The only styles I've added are the ones printed below and then there's the default stuff that comes with the wordpress blogging software.
If you're willing to help, it might be easier if you visit the site. Thanks
www.dodomainer.com dodomainer.com
Links
<div class="topnav">
<li><span class="class6">||</span><span class="class7"> My abilities in 6 modern languages (中文, Deutsch, French, Spanish, 日本語 & English) can help you find new value in the daily drop list</span></li>
<li><a href="http://dodomainer.com/"><span class="class7">mike#</span>
<span class="class7">dodo</span><span class="class7">mainer</span><span class="class7">.com</span></a></li>
</div>
CSS
.custom .topnav li { float: right; padding: 3px 10px 3px 0px; }
.custom .topnav li a { font-size: 1.5em; color: #000000; }
You can add line-height: 1.5em; to topnav DIV to fix the vertical alignment issue of the nav items.
But in reality you have bigger problems than that. Why are your list items not contained in a list? <li> should be inside a <ul> or <ol>.
UPDATE:
Now that you have a list wrapping your list items, you can get rid of the bullets by adding this to the list itself: list-style: none;
Also, are you really married to the idea of having such long double lines between the list items? If not, then remove font-size: 1.5em; from class6 and your alignment issues will be solved.
Well for a start your html is all messed up, you have <li>'s inside your top div with no <ul>.
Related
I am looking to style my menu with google translate. Menu works great in English. Menu is 700px wide. When it translates to Spanish it pushes it all down..
So my question: Is there a way to change the font size of text when it goes to Spanish?
I have tried this and it did not work.
.nav a {
font-size: 18px;
}
em:lang(es)) .nav a{
font-size: 14px;
}
I dont know if the code is actually seeing that because Google translate is using js..
Also this is an html site. Not wordpress or anything.
Thanks for any help
You need add lang attribute to your html:
<nav>
<li lang="es">Spanish</li>
<li lang="en">English</li>
</nav>
and css:
nav li[lang|="es"] a{
font-size: 14px;
}
nav li[lang|="es"] en{
font-size: 16px;
}
here is some example.
You just need to change the lang attribute value of li when it goes to Spanish.
I've being trying this for about 5 hours already, and I'm feeling really, really dummy. :s
The overall code is w3c validated.
The problematic snipped:
http://jsfiddle.net/ZnzYk/
I've tried making the circle bullets with css using border radius;
I've tried using a pseudo element.
I've tried using sprites.
The bullet must be (more or less) on the vertical-middle of the text, cross browser, starting from IE8.
So I give up all methods and I'm trying with a background image.
THE CSS:
#main-navigation ul li {
display:inline;
}
#main-navigation ul li a {
font-family: 'Miso', 'Helvetica Neue',Helvetica,Arial,sans-serif;
display: inline-block; /*seems to help on IE*/
font-size: 1.25em;
margin-right: 6%;
text-align: right;
text-transform: uppercase;
background: url('http://s7.postimage.org/fvy10uk1j/bullet.png') no-repeat 100% 50%;
padding-right: 4%;
text-decoration: none;
}
#main-navigation ul li a:hover {
color: #ED1E79;
text-decoration: none;
background: url('http://s7.postimage.org/puiznbth3/bullet_Selected.png') no-repeat 100% 50%;
}
THE HTML
<div id="main-navigation">
<ul>
<li>item 1</li>
<li>and this is item 2</li>
<li>item 3</li>
</ul>
</div>
I get everything but consistence. :(
I don't mind if it stays more or less really, but all least, not that different as it is right now.
Update:
After Asif suggestion:
adding padding-top to 3px has made them look more or less the same on IE 8, IE9 and good browsers. But it feels like a bit hacky and still not consistent (on IE the bullet it's more on top, on all others the bullet it's on bottom (due to the padding-top added);
Isn't there a better CSS code to have the bullets vertically aligned with the text, that don't require a px by px adjustment ?
The intended result:
May be you should add some padding-top:2px (or 3px too) into #main-navigation ul li a.
It works fine with my browser than, did not check it on all.
check here: http://jsfiddle.net/ZnzYk/1/
Hey i just got one more thing to you, I don't know it may help you.
vertical-align: middle
Here you can play with it at w3schools.
Im encountering a misalignment issue with IE. Below is a sample output. When IE creates a second line due to the long text, the whole paragraph gets mis aligned. Making the 2nd line pulled to the left. I want the first and second line to be aligned to the left. Just like a normal text-align: left will do.
http://img.photobucket.com/albums/v682/markeeh/alignment_tissue.jpg
Below is the code:
<style>
.ul_content-l { width:330px; list-style:square inside; margin-left: 295px; padding-left:1em; text-indent:-1em; line-height:16px; }
</style>
<ul class="ul_content-l">
<li style="border: 1px solid black;">Modular carpet offers hospitals and care homes a calming environment to speed patient recovery</li>
<li>Hygienic guarding against bacteria through Intersept® antimicrobial protection</li><li>Improved patient comfort and well-being</li>
<li>Therapeutic surroundings with less noise and less stress</li><li>Use of colour and design for more cheerful facilities </li>
</ul>
Hope someone other there is willing to help. Thanks. :)
use this
.ul_content-l {
width:330px;
list-style:square;
margin-left: 295px;
padding-left:10px;
line-height:16px;
}
Try to reset margins for li and ul.
Like:
ul, li {margin:0;padding:0;}
and than just set them again the way you want with
ul.ul_content-l { code here }
ul.ul_content-l li { code here }
Also try to be consistent and use only px or only ems.
This seems like it ought to be ridiculously easy, but I'm having trouble figuring it out.
I want to replicate the <li> function so the disc image appears to the left, but applied to a tag
I have this, but it does not show the disc image.
.list {
margin-top: 15px;
margin-bottom: 15px;
list-style:disc outside none;
display:inline;
}
<p class="list"><em>And Much, Much More!</em></p>
I want to avoid using any graphics to simulate the bullet if at all possible.
Thanks for the help
Answer:
display: list-item;
Display must be set to list-item - not inline, and not list!
.list {
list-style:disc outside none;
display:list-item;
}
<p class="list"><em>And Much, Much More!</em></p>
Well, a p is not a list. Why not use <ul><li>?
[edit]
Let me elaborate.
The problem is that you set this style on a list, while the disc is shown in the list items. A p has no items in that sense, so there's nothing to apply the disc to.
Only add following style
display:list-item;
You will notice the :hover CSS for the links in the main nav area (grey bar under logo) for the site testing.ksischool.com works fine in Firefox, but IE7 chops off the bottom few padding pixels. Why?
I assume you're talking about the top navigation; you're padding an inline element (the <a> tag). When placing padding on an inline element, horizontal padding will push against other elements, but vertical padding will just increase the size of the element without affecting the layout around it. Likely Firefox is rendering the boxes above the elements below them in the source, but for whatever reason IE is rendering them beneath, which is why you're seeing parts of the box disappear.
To fix the problem, float all of the links left (which essentially turns them into block elements). You'll need to adjust your markup elsewhere to make it work (likely have some clearing problems if you just float straightaway), but that should fix that specific IE issue.
Edited for more detail:
As mentioned above, vertical padding on an inline element doesn't behave the way you would expect (it increases the element's height, but because the padding doesn't interact with other page elements the inline element often overlaps things in odd ways). So to fix this, you somehow need to make the padded element (the <a> tag) have display: block. To keep everything on the same line, floating left is your best bet. Here's the markup and styling that I would use:
<style type="text/css">
.mainnav {
font-size: 1em;
color: #999;
list-style-type: none;
/* zoom triggers hasLayout on IE, ignored by others
Necessary for the clearfix */
zoom: 1;
}
.mainnav:after {
/* This lets the .mainnav auto-clear its floated contents */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.mainnav li {
float: left;
margin: 0 2px;
/* Place background (disc image) here w/ appropriate padding */
}
.mainnav li.last {
background: none;
}
.mainnav a:link, .mainnav a:visited {
display: block;
color: #fff;
text-decoration: none;
padding: 1px 1px 2px;
border: solid 1px transparent;
}
.mainnav a:hover {
color: #fff;
background: #999;
text-decoration: none;
padding: 1px 1px 2px;
border: solid 1px #ccc;
}
.mainnav a.selected, .mainnav a.selected:hover {
color: #B59B24;
background: transparent;
text-decoration: none;
}
</style>
<ul class="mainnav">
<li><a href="/" class='selected'>Home</a></li>
<li><a href="/About" >About</a></li>
<li><a href="/Admissions" >Admissions</a></li>
<li><a href="/Curriculum" >Curriculum</a></li>
<li><a href="/Home/VacancyList" >Careers</a></li>
<li class="last"><a href="/Contact" >Contact</a></li>
</ul>
Some things to note: I'm using a standard clearfix (Google this if you don't know what I'm talking about) to make sure the UL clears its floated contents. This will allow the parent nav elements to grow in size appropriately if the user sizes up their font.
Also, I removed the spacer · and recommend using a background image and .last class in the CSS. This is purely personal preference. (In an ideal world, you'd use the :after pseudo-class to inject the ·, but thanks to IE 6 not supporting it you can't do that and support all browsers.) My reason for recommending a background image rather than just leaving it in the markup is that it leads to cleaner markup and is far easier to change down the road (if your client decided they wanted a pipe rather than a dot, say).
The logic behind this markup/styling is that you need padding on the <a> for the border/background color to work which means it has to have display: block. Adding that would stick every link on a different line, though, so you need to float either it or its parent. Since it's part of a list, it's easier to float the li parent and use a clearfix to make sure the ul still has some presence on the page.
Obviously if you use this code you'll need to remove most of the #nav_banner element things lower down in the stylesheet, and you'll likely need to debug cross-browser again. Even if you don't, hopefully it will provide you with some ideas for easily constructing top navigation in the future.
Try adding display: inline-block to the a element. I'm not sure how compatible that is, but it works in IE7 and FF.
edit: One Crayon's solution is definitely better and the more common way of doing it.