How can I put an image in place of text "Submit" .. hard coded or css? what is better option.
<ul>
<li><span class="class1" onclick="func1()">Submit</span></li>
</ul>
Add an image to your class:
<ul>
<li><span class="class1" onclick="func1()"></span></li>
</ul>
.class1 {
display: inline-block;
height: 32px;
width: 32px;
background-image: url(myimage.png);
}
The alternative to what you have is, of course,
<img src="picture.png" />
and you can style the a (or img) to your heart's content in your CSS
Related
I read that one should not use tables as means of layout, but do all the styling with CSS, so I tried the most basic thing I can think of to mimic tables, by using CSS multi-column layout.
I have created a CodePen to illustrate the problem. As you can see, the content of the two columns starts at different heights, and I do not understand why.
.skill-explanation {
-webkit-column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
column-count: 2;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
<div class="skill-explanation">
<div class="align-right">
<p>★☆☆☆ ‒ <br>
★★☆☆ ‒ <br>
★★★☆ ‒ <br>
★★★★ ‒
</p>
</div>
<div class="align-left">
<p>I can put it into context and am able to use it's basics <br>
intermediate knowledge, used several times <br>
good undestanding, used frequently <br>
deep understanding, used on a daily basis
</p>
</div>
</div>
I wanted to give an update on this post in case someone stumbles upon it.
1) The marked answer is an improvment over mine, but I still find it unintuitive, since it uses the default flex flow which puts the main axis on the horizontal.
The way this should be from a logical standpoint would be columns tho.
Therefore here is an updated solution, which is the most simple and intuitive (at least in my opinion):
.center-wrapper {
margin: 0 auto;
display:table;
}
.skill-explanation {
list-style: none;
}
.rating {
}
.skill {
}
.skill-item {
list-style: none;
}
<div class="center-wrapper" <ul class="skill-explanation">
<li class="skill-item">
<span class="rating">★☆☆☆ ‒</span>
<span class="skill">I can put it into context and am able to use it's basics</span>
</li>
<li class="skill-item">
<span class="rating">★★☆☆ ‒</span>
<span class="skill"></span>
intermediate knowledge, used several times
</li>
<li class="skill-item">
<span class="rating"> ★★★☆ ‒</span>
<span class="skill"></span>
good undestanding, used frequently
</li>
<li class="skill-item">
<span class="rating">★★★★ ‒</span>
<span class="skill"></span>
deep understanding, used on a daily basis
</li>
</ul>
</div>
You can add padding: 1px 0 to the two containers .align-left and .align-right. That way the default top and bottom margins of the p tags stay inside their containers, not causing any vertical offset due to collapsing margins like in your codepen.
https://codepen.io/anon/pen/YBxWbY
Your problem is that the margins are collapsing on the p elements, as they would if the divs were stacked vertically. See Johannes answer.
Howevwer, your concept is flawed. You probably want to actually associate the rating with the skill
ul.skill-explanation {
list-style: none;
padding-left: 0;
}
.skill-item {
display: flex;
}
.skill-item > div {
width:50%;
}
.rating {padding-right: 0.5em;
text-align:right;
}
<ul class="skill-explanation">
<li class="skill-item">
<div class="rating">★☆☆☆ ‒</div>
<div class="skill">I can put it into context and am able to use it's basics</div>
</li>
<li class="skill-item">
<div class="rating">★★☆☆ ‒</div>
<div class="skill">intermediate knowledge, used several times</div>
</li>
<li class="skill-item">
<div class="rating">★★★☆ ‒</div>
<div class="skill">good undestanding, used frequently</div>
</li>
<li class="skill-item">
<div class="rating"> ★★★★ ‒</div>
<div class="skill">deep understanding, used on a daily basis</div>
</li>
</ul>
EDIT
If you would like to use the code you already have. Remove the margin from the paragraph "p" tag that is set be the browser. then set the line height to your desired height.
ORIGINAL answer
You will want to use something like flexbox if you want to easily line you items up. You may also want to set the line height so that you can ensure your unicode icons and your text line up correctly
This will allow you to have full control over where the text and icons align. More info on flexbox at W3schools
p{
margin: 0;
line-height: 1.5em;
}
Flex Box example:
.skill-explanation {
display: flex;
align-items: center;
}
.align-left, .align-right {
line-height: 1.5rem;
}
.skill-explanation {
display: flex;
align-items: center;
}
.align-left, .align-right {
line-height: 1.5em;
}
<div class="skill-explanation">
<div class="align-right">
<p>★☆☆☆ ‒ <br>
★★☆☆ ‒ <br>
★★★☆ ‒ <br>
★★★★ ‒</p>
</div>
<div class="align-left">
<p>I can put it into context and am able to use it's basics <br>
intermediate knowledge, used several times <br>
good undestanding, used frequently <br>
deep understanding, used on a daily basis</p>
</div>
</div>
But you may be better off revisiting your HTML code as someone else suggested and making it into a list as this would be more semantically correct and easier to maintain
<ul>
<li>★☆☆☆ ‒ I can put it into context and am able to use it's basics</li>
<li>★★☆☆ ‒ intermediate knowledge, used several times</li>
<li>★★★☆ ‒ good undestanding, used frequently</li>
<li>★★★★ ‒ deep understanding, used on a daily basis</li>
</ul>
I have this menu bar, which is replaced by Images.
All looks good on normal view, but when I swtich to mobile view
It looks so clumsy. I tried Padding, But the individual cell do not
make up space with each other.
Here is the screenshot
li.topmenu1 {
height: 20px;
}
<nav id="category" class="drawer_block pc">
<ul class="category-nav">
<li class="topmenu1">
<img src="http://azlily.bex.jp/eccube_1/html/template/default/img/menu/home.png">
</li>
<li class="topmenu2">
<img src="/eccube_1/html/template/default/img/menu/products.png">
</li>
<li class="topmenu3">
<img src="/eccube_1/html/template/default/img/menu/about.png">
</li>
<li class="topmenu4">
<img src="/eccube_1/html/template/default/img/menu/howtouse.png">
</li>
<li class="topmenu5">
<img src="/eccube_1/html/template/default/img/menu/column.png">
</li>
<li class="topmenu8">
<img src="/eccube_1/html/template/default/img/menu/FAQ.png">
</li>
</ul>
</nav>
Note - I also tried to include FULL URL of the image
but somehow its not showing up on snippets :/
check this https://jsfiddle.net/1dvy2854/4/
.category-nav li {
display: inline-block;
}
#media only screen and (max-width: 600px) {
.category-nav li {
display: block;
}
.category-nav li img {
max-width: 65px;
display: inline-block;
}}
Make sure that the elements inside category-nav have correct margins and paddings.
If you want to make sure that the individual pictures for the menu look okay, you might want to set styles for the images one by one.
So, in your case you can edit the heights for all of your topmenu1, topmenu2...
Also, you can the inspect tool on Chrome to find what is causing problems like this in your CSS code. You can change the code live and see what change is causing what.
I am attempting to float an image to the right of some text currently wrapped in the P tag inside a parent div. using float: right for the image takes it all the way to the right but under the text.
I would like to see them aligned side by side, please check screenshot here:
https://drive.google.com/file/d/0B3STRGf0b16iNWhMVDBETEpaczQ/view?usp=drivesdk
My css
h1 {
font-family: 'open sans';
font-size: 35px;
font-weight: 200;
padding: 0;
margin: 0;
}
p {
max-width: 550px;
padding: 0;
margin-top: 15px;
font-size: .9em;
line-height: 1.8em;
}
.why-nexishost {
width: 980px;
overflow: hidden;
margin: 70px auto 0 auto;
background-color: #f2f2f2;
}
.quality-badge {
float: right;
}
My html
<head>
<title>NexisHost</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<div class="header-content">
<img src="images/twitter-icon.png" class="twitter-icon" alt="Twitter icon">
<ul>
<li>Support 513.571.7809</li>
<li>Account Manager</li>
</ul>
</div>
<div class="navigation">
<img src="images/logo.png" alt="Site Logo">
<ul>
<li>Products</li>
<li>Domains</li>
<li>Services</li>
<li>Something</li>
<li>Design</li>
<li>Support</li>
<li>Signup</li>
</ul>
</div>
<div class="home-banner"></div>
<div class="why-nexishost">
<h1>Quality is our #1 priority</h1>
<p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help#your_company), simple management tools and other helpful features.</p><img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
</div>
</div>
</body>
</html>
Try adding this:
p{
display: inline-block;
}
.quality-badge{
display: inline-block;
}
You can also do this by floating left as another person suggested, but inline-blocks will put things in a line.
You can check this site out for more info.
I'm not sure what is considered better-practice, I think inline-blocks are just the newer way of doing things although old versions of some browsers may not support it. This site shows which don't.
You probably want to float your <p> left, not your image right.
p {
float: left;
...
}
.quality-badge {
//float: right;
}
You can do it like this with your current css:
<div class="why-nexishost">
<img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
<h1>Quality is our #1 priority</h1>
<p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help#your_company), simple management tools and other helpful features.</p>
</div>
You'll probably want to keep float:right applied to your image. This will make your image float to the right and HTML elements that come after it in the same container will wrap around it. However, you'll need to move your img tag up so it comes before the text you want to wrap.
HTML:
<div class="container">
<img src="myImage.png" class="myImage" alt="Alt Text" />
<h1>Heading</h1>
<p>Paragraph text</p>
</div>
CSS:
.myImage {
float:left;
}
See this fiddle using your code for a demonstration.
If you want the container to expand to the size of the floating image (by default if the image is bigger than the container it overflows out) you can add the following CSS to your container class:
.container { overflow: auto; }
As an additional note, your img tags aren't closed (you have <img src="source" > rather than <img src="source" /> which will probably cause rendering errors in at least some browsers.
You can learn more about float and clear in CSS here.
I am using JQM 1.4.2 and trying to get the button icons closer to the Text when using the class .ui-btn-icon-left.
I took a screen shot and modified the the list icon the way I want it to look in the middle button. I just cant seem to get the icon off the left side at all. using padding just changed the top and bottom.
What class do I need to use to accomplish this?
<div data-role="navbar" >
<ul id="navfooter">
<li>Tour</li>
<li><a class="ui-nodisc-icon ui-icon-bars ui-btn-icon-left svbtn" href="#listViewPage" data-transition="slide" >List</a></li>
<li><a class="ui-nodisc-icon ui-icon-location ui-btn-icon-left svbtn" href="#map-page" data-transition="slide" >Map</a></li>
</ul>
</div>
Here is the image of what it now looks like after adding the css
.ui-icon-home::after {
position: relative;
left:10px;
}
You can set the left position of the icons within the button:
.ui-navbar a:after {
left: 20% !important;
}
However, this will allow the icon and text to overlap as the buttons get smaller.
A better way to achieve this might be to put the icons inline with the text. You put a span in front of the text with CSS to place the icon. To control the distance between the icon and the text, tweak the margin-right attribute:
<div data-role="navbar">
<ul>
<li><span class="ui-icon-alert ui-btn-icon-notext inlineIcon"></span>Summary
</li>
<li><span class="ui-icon-star ui-btn-icon-notext inlineIcon"></span>Favs
</li>
<li><span class="ui-icon-gear ui-btn-icon-notext inlineIcon"></span>Setup
</li>
</ul>
</div>
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
If you want icons in black with no disc behind them add the ui-alt-icon class to the span and change the CSS to get rid of the disc:
<div data-role="navbar">
<ul>
<li><span class="ui-alt-icon ui-icon-alert ui-btn-icon-notext inlineIconNoDisk"></span>Summary
</li>
<li><span class="ui-alt-icon ui-icon-star ui-btn-icon-notext inlineIconNoDisk"></span>Favs
</li>
<li><span class="ui-alt-icon ui-icon-gear ui-btn-icon-notext inlineIconNoDisk"></span>Setup
</li>
</ul>
</div>
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent !important;
}
Here is a DEMO showing all 3 options
If it's just the home icon you're looking to move, applying the following to that icon should fix it but it's hard to say what the best solution is without seeing the menu in action.
.ui-icon-home::after {
left: (amount to shift left)px;
}
Note that ::after applies styling to just the icon, whereas ".ui-icon-home" applies to the entire anchor element. Again, if you could link to a pastebin or similar, it would be easier to give you a better answer.
For my <ul> list, I would like to add a <hr> after each element of a list. The Result should render like:
<ul class="mylist">
<li>
moooo!
<hr width="40%">
</li>
<li>
maaaaa!
<hr width="40%">
</li>
...
</ul>
It is bad style adding <hr> to each <li> so I would like to refractor this using css only. I cannot use:
.mylist > li: after{
content: "<hr>"
}
as content would escape the characters.
I also do not want to use jQuery:
$('.mylist').find('li').append('<hr width="40%">');
So the question is, how could I append <hr width="40%"> to each <li> of a certain list using css3 ?
jQuery Solution
Just realized that you wanted to nest the hr element inside the li before you close it, yes it's perfectly valid, so simply use append(), and note, you cannot do this using CSS only, as you cannot modify DOM using CSS, you need to use jQuery or JS
jQuery("ul li").append("<hr />");
Demo
CSS Solution
If you don't need an extra element, or you don't want a jQuery solution(As you want)
Using hr element as a direct child to ul element is not a valid markup, instead, you can use a border-bottom for each li which will behave same as hr does, still if you want an explicit way to do so, say for controlling the width of the separator without changing the width of li than you can do it like this
Demo
ul li:after {
content: "";
display: block;
height: 1px;
width: 40%;
margin: 10px;
background: #f00;
}
Here, am just creating a virtual block level element, which doesn't actually exists in the DOM, but it will just do the thing which you need. You can just design the element, the same way you style a normal div. You can also use border on this but to keep the thin line horizontally centered, I've assigned height: 1px; and than am using margin to space up.
I think it's better to use CSS for this. for example you can stop using <hr> tag, instead do something like:
<ul class="mylist">
<li>
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and then with CSS:
.mylist li { border-bottom: 1px solid black; }
There are other options too, for example if you want to show the horizontal line only for some list items, you can give them a class and add a CSS rule only for that class. like this:
<ul class="mylist">
<li class="hr">
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and CSS:
.mylist li.hr { border-bottom: 1px solid black; }
You can use like this:
<ul>
<li></li>
</ul>
<hr/>
Thats simple. If you have nested ul and li then you use li instead of <hr/> or simply <hr/> inside a <li></li> tag. See below. Its purely your choice.
<ul>
<li>
<ul><li></li></ul>
</li>
<li style="height:1px;border:solid 1px #666"> </li> // or you can also use
<li><hr/></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
Tags in content are not allowed and even if it would be very misleading (css { content: "text"}, How do i add tags?)
If you think is wrong to add <hr> in HTML than it is wrong adding with css (if it would be possible) or js. IMHO a first You should try to use border of <li> if result won't be as expected add that <hr>
Insert A Class That Creates A bottom-border: For Each <li>
<!--########## STYLE EACH li USING CLASS ##########-->
<style>
.hr {
width:40%;
border-bottom:1px solid rgba(0,0,0,.7);
}
</style>
<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
-CONTENT-
</li>
<li class="hr">
-CONTENT-
</li>
...
Try this CSS:
li:after {
content: " ";
display: block;
height: 2px;
width: 100%;
}