I am trying to position a text in the middle height of an image, but the margin-top or margin-bottom would not work as I want.
Any tips on this?
I created an JsFiddle to show the work -
http://jsfiddle.net/HdW7Y/1/
As you see the the text Login User is below the login button.
HTML
<div id="topNav">
<ul>
<li class="topMenu-bg1 show_hide_contact">
</li>
<li class="topMenu-bg2 show_hide_login">
User Login</p>
</li>
</ul>
</div>
CSS
#topNav li {
margin-top:5px;
padding-top:7px;
list-style:none;
float:left;
border-right:1px solid black;
}
.icon2text{
font-weight: bold;
font-size: 0.7em;
display: inline;
}
You can use the vertical-align property on .icon2text and set it to top:
http://jsfiddle.net/HdW7Y/2/
Add
.topMenu-bg2 show_hide_login{
valign:middle;
}
If you replace the p tag with a span and remove the top padding from the li item and the top padding from the a tag it should all line up.
Related
i am trying on a footer to put an element on the far left:
--MY WEB SITE (aligned on the right)--
On the far right (the end of the list must be aligned with the right border of the browser), i want to put in order:
twitter, facebook, newsletter
By floating left, what i get is the opposite of the html file
Thanks all
jsfiddle
<div class=footer>
<UL><H4>MY WEB SITE (aligned on the right)</H4>
<LI><a href=https://www.linkedin.com/pub/ric style='border-bottom: 0px'></A><LI>
<LI>twitter</LI>
<LI>facebook</LI>
<LI><font color='#0894D2 '>NEWSLETTER</FONT></LI>
</UL>
</DIV>
.footer {
border: 2px solid grey;
width:90%;
height:auto;
text-align: center;
}
.footer:after {
content: '';
display: inline-block;
width: 100%;
}
.footer ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer ul li {
margin: 0;
padding: 0;
list-style: none;
display:inline-block;
font-size:12px;
float:right;
}
.footer h4{
margin: 0;
padding: 0;
list-style: none;
display:inline-block;
font-size:12px;
float:left;
}
If you want to change an order of your list items on the right side, just try to change an order of list items tags in html...
<div class="footer">
<ul>
<h4>MY WEB SITE (aligned on the right)</h4>
<li><a href="https://www.linkedin.com/pub/ric" style='border-bottom: 0px'></a></li>
<li><font color='#0894D2 '>NEWSLETTER</font></li>
<li>facebook</li>
<li>twitter</li>
</ul>
</div>
Change your HTML as such:
<div class="footer">
<H4>MY WEB SITE (aligned on the right</H4>
<ul>
<li><font color="#0894D2 ">NEWSLETTER</font></li>
<li><img src="images/facebook.png" />Facebook</li>
<li><a href="https://www.linkedin.com/pub/ric" style='border-bottom: 0px'><img src="images/linkedin.jpg" />LinkedIn</a><li>
<li>twitter<div id="logo_twitter"></div></li>
</ul>
</div>
First things first....
In order to achieve what you are looking for (hope I understood corectly), you should put the H4 tag outside UL. Then, in CSS, set the UL (footer ul) to float:right and the the LIs (footer ul li) to float:left.
See this example: https://jsfiddle.net/w6pa3L30/4/
.footer ul{float:right;}
.footer ul li {float:left;}
Now, you should also review your code. FONT tag is not supported in HTML5. You should also avoid using divs for displaying social icons (I guess that is what you wanted to do inside Twitter LI), instead use span tag. I would also recommend you to avoid using inline styling; style them inside your stylesheet.
I have a list that contains texts and two icon images. The text doesnt align with the images so I want to be able to add a margin to the links. However, after at least an hour of checking I still can't get it to work, here is my code:
<div class="company-info pull-right">
<ul class="social-header">
<li>Follow Us</li>
<li class="socials"><i class="twit-icon"></i></li>
<li class="socials"><i class="linked-icon"></i></li>
</ul><!--/social header-->
</div><!--/pull right-->
</div><!--/company info-->
.social-header{
list-style:none;
}
.social-header li{
display:inline;
}
.social-header li.socials{
margin-top:10px;
}
margin wont work on an inline element.
.social-header li{
display:inline-block;
float: left;
}
.social-header li.socials{
padding-top:10px;
}
You're using display:inline, change this to display:inline-block.
This is because inline elements cannot have any size, padding etc. Think of them as if they were a letter in a paragraph.
I would recommend reviewing the vertical-align property, its options, and see if one of those will do the trick. I often use vertical-align: middle.
I don't have you image files, but I just snagged some off Google and added my own img CSS class. The key was changing it to inline-block and using the vertical-align attribute. CSS classes to as follows
.social-header{
list-style:none;
}
.social-header li{
display:inline-block;
}
.social-header li{
vertical-align: middle;
}
img{
width: 45px;
height: 45px;
}
and the html
<div class="company-info pull-right">
<ul class="social-header">
<li><h2>Follow Us</h2></li>
<li class="socials"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-512.png" /></li>
<li class="socials"><img src="http://inhouseww.com/static/assets/imgs/icon-linkedin.png" /></li>
</ul>
</div>
So I wanted to create the fixed nav bar on top of the page. Instead of creating nav bar with ordered list, I used the following approach:
<header>
<div class="nav">
<img src="images/logo_ab.png" alt="AurinBioTech Logo"/>
Home
About
Team
Science
Need
Pipeline
Contact
</div>
</header>
CSS:
header .nav {
margin-top:100px;
width:100%;
height:10%;
text-align:center;
padding-top:2%;
margin:0 auto;
position:fixed;
top:0;
}
header .nav a {
font-size: 2em;
padding-left: 15px;
padding-right: 15px;
color:rgb(1, 1, 1);
text-decoration: none;
font-family: 'Bebas';
}
header .nav a:hover {
color:white;
background-color: #404040;
border-radius:5px;
padding:0 auto;
}
header .nav a:active{
background-color: #404040;
border-radius:5px;
text-decoration:overline;
}
header .nav img {
width:260px;
height:65px;
padding-right:4em;
}
The reason I used this approach is because I wanted to use logo image next to the nav bar so it would align properly in the same line. Now the problem is that I need to add sub-menus under Science and Pipeline heading. Since I didn't use UL or LI, how can I add sub-menus under those heading.
OR, can you tell me any other way to create a NAV bar that shows the logo as well.
so it would be LOGO and MENUS on the same line.
Great thanks in advance.
Use the normal ul li structure.
If you set the height and line-height of top level li tags to be equal to the height of the image it will align the text to the center of the image.
I can suggest you to use a tool.
CSSMENU where you can create a menu without writing the code.You can also change the code or add images as your wish if needed. There are some inbuilt images where you can use them too.
have a two column structure in your nav bar one column for the logo and other for the nav-bar options.
<header>
<div class="nav">
<img src="images/logo_ab.png" alt="AurinBioTech Logo"/>
</div>
<div class="options">
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Science</li>
<li>Need</li>
<li>Pipeline</li>
<li>Contact</li>
</ul>
</div>
</header>
and
with css give them appropriate width and align them using padding or margin properties
I want to have the phone number and email address vertically align with the little icons next to them. I'm trying to change their line-height, but that changes the line height of all the li's in that area. I think that is because they are inline. Here is the site and the css.
LINK: www.matthewtbrown.com/newsite
HTML:
<ul class="contact">
<li><img src="http://s7.postimg.org/64ux9a1if/email.png"></li>
<li class="contacttext">mbrown74#rocketmail.com</li>
<li><img src="http://s7.postimg.org/g0w08x7af/phone.png"></li>
<li class="contacttext">978-761-1205</li>
</ul>
CSS:
.contact {
color: #fff;
text-align: center;
float:none;
}
.contact > li {
display: inline;
}
.contacttext {
font-size: 19px;
padding-left: 5px;
}
That's where vertical-align comes into play which aligns inline elements to each other:
In your case the following should work:
.contacttext{
vertical-align:text-top;
}
Also note, that if you want to have your li contain the img properly, it needs a display-type other than the default inline - inline-block might be suited most.
Try something like this:
li {
display: inline;
vertical-align: top;
line-height: 25px;
}
after this i have this result:
try this
<ul class="contact">
<li class="contacttext">
<img src="http://s7.postimg.org/64ux9a1if/email.png">mbrown74#rocketmail.com
</li>
<li class="contacttext">
<img src="http://s7.postimg.org/g0w08x7af/phone.png">978-761-1205
</li>
I just kept the icons and the text in the same li's
I got it. I did:
.contacttext {
font-size: 19px;
padding-left: 5px;
display:inline-block;
vertical-align:middle;
}
You could add margin-bottom to your <img> to solve this issue.
li img {
margin-bottom: 3px;
}
I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.