I would like to align the text and input in the LI to be horizontaly aligned with the menu on the left. Here how it looks.
I need the newsletter to be align with the menu on the left.
CSS
#footer .div1{
float:left;
}
#footer ul{
list-style:none;
}
#footer li{
float:left;
padding-left:20px;
font-size:18px;
}
#footer li:first-child{
padding-left:0px;
}
HTML
<div id="footer">
<div class="div1">
<ul>
<li><b>WE ♥ TO NETWORK</b></li>
<li>FACEBOOK</li>
<li>BLOG</li>
<li>CONTACT</li>
<li>NEWSLETTER : <input type="text" name="email" id="emailNl" style="font-family:arial; width:200px; margin:0px; padding:0px;"/> <span id="submitNl" style="cursor:pointer">OK</span></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
Thanks
IMAGE UPDATED!
With padding and margin 0px it's almost there but you can notice a slight difference. :S
UPDATE 2
By changing the float:left of my LI to display:inline-block, now the text is align but the input seems to be like padding-top 2px too much ... I think i'll tweak this to make it fit and see through each browsers.
Your problem is caused by float: left;. Replace it with display: inline-block; and you'll be fine.
Try it yourself: inline-block vs float:left
Try putting it in a jsfiddle. It looks to me like the input tag is trying to put some padding/margin (oh how I always forget which is which) around itself. Try setting those to 0px.
try reset the padding and margin of the element and try vertical-align property - http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
although, I tested, they align just perfectly as it is. below is the preview from firefox
You can try
#footer ul {
list-style: none outside none;
margin: 0;
overflow: auto;
padding: 0;
}
input[type=text]{
padding:0;
margin:0;
}
see if it works.
Don't know if this will look good but this sure does the job.
#emailNl{
margin-top:-3px;
}
Related
I'm trying to make a simple menu bar using the ul tag,which has 4 links.
The ul width is 100% of the screen width,so according to this every li should be 25%.
i've tried doing this,but the last list item just falls down to the next line..
However if i will use width:23% for each li,it would look good.
But im very curious why this is happening,why 25% is not good enough?
This is my pen:
http://codepen.io/anon/pen/XKryKW
I would appreciate any help!
Thanks.
Simple. You have spaces in your html. This is always a problem with inline block elements. Remove them and the spaces in your result go away. See this explanation: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
http://codepen.io/ruchiccio/pen/YWKRVQ
<ul>
<li><a> first</a></li><li><a> second</a></li><li><a> third</a></li><li><a> fourth</a></li>
</ul>
First of: display: inline-block will alway leave a few pixels between the block, so it would alway be more than 100%. You're also adding 22px padding, making the width: 25% + 22px +22px (left and right) to avoid this use box-sizing: border-box;
li {
font-size:25px;
padding: 22px;
width:25%;
text-align:center;
float: left;
display: block;
box-sizing: border-box;
}`
https://jsfiddle.net/wietsedevries/kmzym3xL/
First thing you need to remove padding right and left from lis , then you need also to add font-size:0 to ul to make it ignore spacing between lis
*{
margin:0;
padding:0;
}
ul
{
height:70px;
background-color:#e1973d;
list-style-type:none;
width:100%;
font-size:0;
}
li
{
font-size:25px;
padding: 22px 0;
width:25%;
text-align:center;
display:inline-block
}
<ul>
<li><a> first</a> </li>
<li><a> second</a> </li>
<li><a> third</a> </li>
<li><a> fourth</a> </li>
</ul>
ok the code is listed below, and when I adjust the css as follows:
.Nav {
color:red;
float:left;
display:inline;}
It wont display inline? What Am I doing wrong? Im sure this is a stupid question.
<head></head>
<body>
<div class="Nav">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</body>
dont use float and dislay inline at the same time just use `
display:inline-block;
and it will work perfectly fine
i would also recommend you to read this article, it's a short article but helps a lot
click this to read the article
atleast it did help me a lot and cleared my concepts of float and display
It will. Your div is the one with the .Nav class so that div will be displayed inline. Try:
.Nav li{
display:inline;
}
Here is a jsfiddle example
.Nav ul li{
color:red;
display:inline;}
You can put display: inline on li elements, all they will be on a unique line.
As you can see here: http://jsfiddle.net/b31krn9b/
CSS:
.Nav {
color:red;
float:left;
}
.Nav li {
display:inline;
}
Another ways to align:
Using float: http://jsfiddle.net/b31krn9b/1/
Or even display: inline-block (this is better because you can use margin-right and left): http://jsfiddle.net/b31krn9b/2/
The div itself is displayed inline, but since it's the only element inside the body, it has no visible effect.
You need to set it on the li elements:
CSS
div.nav ul li {
float: left; /* All li elements inside the div.nav are floated to left... */
display: inline; /* ...and displayed inline – but it does not make sence,
since a floating element cannot be inline. */
}
HTML
<div class="nav">
<ul>
<li>Home</li>
...
I have an div with a anchor wrapped image, for some reason there is extra padding at the bottom of the div, how can I get rid of this??
HTML:
<div id="lineup">
<div class="line-up-click">
<p>CLICK TO VIEW THE 2014 OFFICIAL VELD LINEUP</p>
</div>
<div class="line-up-overview">
<a class="fancybox" href="images/lineup_coming.jpg"><img width="100%" src="http://productnightclub.com/velddev/wp-content/themes/veld-music/images/lineup.png" class="lazyload"></a>
</div>
</div>
CSS:
#lineup {width:370px; float:left; background-color:#000; padding:5px; text-align:center; margin-right:10px;}
.line-up-click p {color:#f5d41f; font-size:25px; line-height:58px; text-decoration:none; -webkit-font-smoothing: antialiased; font-weight:normal;}
.line-up-overview img {padding:0; margin:0;}
ISSUE:
If you can see at the bottom there is extra padding, i assume from the a tag??? Does anyone know the cause of this?
Applying display: block; on the image took care of the extra padding. Do note that you have 5px padding on div #lineup as well.
.line-up-overview img { padding:0; margin:0; display:block; }
Example:
http://jsfiddle.net/H585g/1/
The image is display: inline so it is treated like a character and sits on the baseline. The gap is caused by the space provided for the descender (which you find on letters like j, g, y and p).
Adjust the vertical-align with CSS: img{vertical-align: bottom}
(by #Quentin)
I want to make the horizontal boxes with the size of 200 x 200 pixel each. I decide to use the ul li. and you guys know well that I must apply the float:left attribute to the li tag to make it horizontal.
My problem is that when I apply the float:left to the li element, all content in li completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.
Here is my code
HTML :
<div class="content-box">
<h3 class="box-header">Recent Files</h3>
<ul class="horizontal-content">
<li>
<div class="filebox">
</div>
</li>
</ul>
</div>
and the css :
.content-box {
position:relative;
width:800px;
border:1px solid #dadada;
margin-left:10px;
padding:10px;
}
ul.horizontal-content {
list-style:none outside none;
}
ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}
.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}
Now you see all of my code, please help me figure out what I have done wrong.
You dont really need float:left to make it horizontal. Just add display:inline-block and remove float
ul.horizontal-content > li {
padding:10px;
background:grey;
display:inline-block
}
DEMO
Add:
ul.horizontal-content {
overflow: auto;
}
here use overflow:auto and here is link of demo Click Here
I have been trying many of the solutions but they won't solve. I will create the JSfiddle for you guys to see what went wrong
Okay, all problems are solved with clear:both
I'm using tabs from: http://onlinetools.org/tools/domtabdata/
when ever I add a hyperlink, it breaks the line. I tried
white-space:nowrap;
<nobr></nobr>
and it still doesn't work.
Can any one help with this?
you can find my codes here: http://jsfiddle.net/bnabaei/4Twkx/
Change this:
div.domtab div a:link,
div.domtab div a:visited,
div.domtab div a:active
{
color:#094AB2;
display:inline; /* Change it from display:block to display:inline */
font-size:1em;
word-break:break-all;
white-space: nowrap;
}
Also please change this... SPACES ARE NOT FOR FORMATTING :D and besides that there's no need to add to try center them manually...
So... remove them...
<div id="other" class="domtab doprevnext">
<ul class="domtabs">
<li>Home</li>
<li>Research</li>
<li>Publications</li>
</ul>
<div>
And simply add this on your CSS:
div.domtab {
padding:0 2em;
width:80%;
font-size:90%;
display: inline-block;
text-align:center; /* Just add this line and let the CSS center them for you... */
}
On line 122 in your css, you give your links display: block;. This causes them to take up the entire line they're on. Comment it out and you should be fine.