I am trying to learn CSS and HTML and have a very basic question here. How do i write my css so that it shows the text in the span below the image
<div class="section">
<ul>
<li id="lumia820" class="figures" >
<img src="f-lumia820.jpg" alt="" class="figure"/>
<span class="figcaption">Lumia 820</span>
</li>
<li id="iphone4s" class="figures">
<img src="f-iphone4s.jpg" alt="" class="figure"/>
<span class="figcaption">Iphone 4s</span>
</li>
</ul>
</div>
Currently, I have something like
.section ul {
margin: 0 auto;
float: left;
}
.figures {
display: inline;
}
.figures span {
font-size: 20px;
font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif;
letter-spacing: 0.1em;
}
.figures img{
vertical-align: top;
width: 30%;
height: 30%;
margin: 1% 1%;
}
Just set the to display: block; so that each one takes up its own line. Right now, they are set to display: inline because that is the default for both <img> tags and <span> tags.
.figures span, .figures img {
display: block;
}
should be able to do
.figcaption {
display:block;
}
fiddle
This should do the trick:
.figures span{ display: block; }
Check this Demo : http://jsfiddle.net/h6McP/1/
Span and image is actually an inline element, so it wil come line by line
we need to make to block element so that span will come exat below of the image
here i have given
.figures span {display:block}
li.figures { display: inline-block;}
Check this is Updated one
Related
I'm trying to get this Html code to align in a horizontal like display form. It might have some un-neccessary id's,classes,etc.
Could you tell me what I am doing wrong?
ul.head {
text-transform: Capitalize;
word-spacing: 10px;
font: italic bold 20px/60px"Times New Roman", Times, serif;
list-style-type: none;
margin: 0;
padding: 0;
}
.H2 {
display: inline;
}
<h1><p id="p1"><em>ENVY</p></em></h1>
<img id="img1" src="envy.jpg" width="150" height="113">
</ul>
<!--End of HEADING-->
<ul class="head">
<!--Start of top tabs/drop down menu-->
<h2>
<li id="H2"><ul id="T1" >New york</ul>
<ul id="T2" >Miami</ul>
<ul id="T3" >Boston</ul></li>
</h2>
</ul>
you have some syntax error in your code :
.H2{ display: inline; }
you can't target an h2 with the DOT , dot's only to target classes
li's inside an h1 you can ,but it's highly recommended that you use one only h1 tag for each page to set main title , you can use a div to structure your page element instead
i added this to your css , hope that this is what you need :
.newnew{
position: relative;
top: -140px;
}
ul li a { display: inline-block; padding: 10px; font-size: 13px;}
LIVE DEMO
hello dear please check this link DEMO
CSS
ul.head{
text-transform: Capitalize;
word-spacing: 10px;
font: italic bold 20px/60px "Times New Roman",Times,serif;
list-style-type: none;
margin: 0;
padding: 0;
}
li ul{
display: inline;}
I'm trying to hide the overflow text of li and my li looks like this
<li class="food_item">
<a href="#" class="food_name" title="test">
testtesttesttesttesttesttesttesttest
</a>
<span>(12)</span>
</li>
<li class="food_item">
a short one
<span>(12)</span>
</li>
and my css
.food_category>.food_item {
width: 25%;
float: left;
line-height: 30px;
}
.food_category .food_name {
font-size: 14px;
margin: 0px 4px 0px 0px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width: 80%;
display: inline-block;
}
food_category is the class name of the ul tag, now the effect is below:
the span and the a tag are not in the same line, I assume it's about the inline-block property of the a, but if I remove that, the text-overflow will not work and the overflow text will not be hidden. I'm stuck here, can anybody help me? how can I make the a and span show in the same line while keeping overflow text hidden?
Update
this is the jsfiddle link, btw,I didn't set the css of span. What I want is to make the span text right behind the a tag like this testest... (12).Thx!
In regards to your update, you need to set the anchor tag and span tag to be vertically aligned at the top of the list element. Add the following to your CSS:
.food_item a,
.food_item span {
vertical-align: top;
}
This produces the desired behavior.
DEMO
You can do something like:
.food_item span {
display: inline-block;
float:left;
}
and add float:left; to .food_item .food_name
.food_item .food_name {
font-size: 14px;
margin: 0px 4px 0px 0px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width: 60%;
display: inline-block;
float:left;
}
FIDDLE
You may need to update the margin/padding for the spacing of the span.
I would also recommend adding something like clearfix on each li element to prevent float issues:
<li class="food_item clearfix">
...
</li>
<li class="food_item clearfix">
...
</li>
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
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 have a list with bullets. I made the bullets smaller by putting the li text inside a span and making the font-size of the li smaller than that of the span. The problem is that now the bullets are not vertically aligned in relation to the text. How do I fix that?
jsFiddle: http://jsfiddle.net/tXzcA/
li {
font-size: 15px;
}
li span {
font-size: 25px;
}
<ul>
<li><span>text1</span></li>
<li><span>text2</span></li>
<li><span>text3</span></li>
<li><span>text4</span></li>
</ul>
You could just make your own bullet point and make it whatever size you want.
li{
font-size: 15px;
list-style-type:none;
}
li span{
font-size: 25px;
}
ul li:before {
content: "•";
font-size: 80%;
padding-right: 10px;
}
Just change around the font-size to the size you want.
jsFiddle
Try this:
li span{
font-size: 25px;
vertical-align:middle;
padding-bottom:5px;
}
See it here: http://jsfiddle.net/tXzcA/19/
This is what I used, it centers on both the bullet & the content
Jsfiddle: http://jsfiddle.net/VR2hP/14/
CSS:
ul {
padding-left: 5em;
list-style: none;
}
li.twitter::before,
li.fb::before {
font-family: 'FontAwesome';
margin: 0 .2em 0 -1.5em;
font-size: 3em;
vertical-align: middle;
}
li.twitter::before {
content: '\f081';
}
li.fb::before {
content: '\f082';
}
li {
list-style-type: none;
}
li span {
display: inline-block;
vertical-align: middle;
}
Use an unordered list and display the list items as tables.
Take a look at this example: https://jsfiddle.net/luenib/jw1ua38v/
The icon, number, or whatever you want to place is going to be located inside a span. The content of the span is centered horizontally and vertically, very useful if you don't want to display your icon on the top. The text inside the paragraph will keep a space to its left, so it won't go under the icon in case the text extends in more than one line.
CSS:
ul {
padding-left: 0;
}
li {
display: table;
}
li span {
width: 40px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
<ul>
<li><span>1</span>
<p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.</p>
</li>
<li><span>2</span>
<p>Some text here. Some text here. Some text here.</p>
</li>
</ul>
I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}