I am having a small issue with some html code. I am trying to create a sample document for sparkle release notes, so I created some highlighted boxes containing either "fixed","added" or "improved", and then on the right should go the release notes. What instead happens is that the 'something' word gets pushed onto a new line like a new item but without the dot at the beginning. Is there a way to push it up on the same line as the box??
This is what I have so far:
Index.html
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>Release Notes</title>
<body>
<ul>
<li><span class='fixed-square'>Fixed</span>Something</li>
<li><span class='added-square'>Added</span></li>
<li><span class='improved-square' >Improved</span></li>
</ul>
</body>
style.css
.fixed-square {
background-color: #0f0;
color: white;
display: block;
height: 20px;
width: 60px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
.added-square {
background-color: red;
color: white;
display: block;
height: 20px;
width: 60px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
.improved-square {
background-color: blue;
color: white;
display: block;
height: 20px;
width: 80px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
body {
font-family: Verdana;
font-size: 10pt;
}
Thank you in advance!
EDIT:
Thank you very much to all of you, for the quick answer. To recap I went from this:
.improved-square {
background-color: blue;
color: white;
display: block;
height: 20px;
width: 80px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
to this:
.improved-square {
background-color: blue;
color: white;
display: inline-block; <----------
height: 20px;
width: 80px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
change display: block on display: inline-block
Use display: inline-block; instead of display: block;.
Swap out the display:block for display:inline-block
JSFiddle
.fixed-square {
background-color: #0f0;
color: white;
display: block; // this is actually sending something in second line try adding display: inline-block;
height: 20px;
width: 60px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
Please see this link Demo
You have to add in css like
ul li
{
display:inline;
float : left;
margin :5px;
}
use inline-block
[spam link removed]
Related
I have two images and two links. The problem is that the links come down of image. Like in the pictures
.motto {
font-size: 25px;
font-weight: bold;
line-height: 30px;
color: red;
text-align: center;
}
/*
.choiceImage a {
display: contents;
}*/
.choiceImage {
margin: 10px;
width: 790px;
height: 600px;
}
.choiceImage img {
width: 350px;
height: 350px;
margin: 20px;
border-radius: 2px;
display: inline-block;
}
.choiceImage div {
display: flex;
justify-content: space-around;
}
.choiceImage p {
background-color: beige;
border-radius: 10px;
color: black;
width: 270px;
font-size: 25px;
font-weight: bold;
text-align: center;
}
.choiceImage img:hover {
opacity: 0.5;
}
<div class="choiceImage">
<div>
<p>I'm looking for..</p>
<p>I offer something..</p>
</div>
<img alt="want something" src="image/want-something.jpg">
<img alt="offer something" src="image/offer-something.jpg">
</div>
I can fix that with display:context; for the link, but I want another answer for this problem.
The display: contents is expected to inherit from its grandparent choiceimage which is not set here so by default it is set to display: block.
Set the styles for the links like this:
.choiceImage a {
display: inline-block;
}
But I highly recommend using FlexBox, it is really efficient for lay-outing and also for responsive development.
I am trying to get the Z to come in the middle of the cricle but I am not sure why its not coming in the middle. My code outputs this
<li class="avatar"><span class="profile-initials">Z</span></li>
This is the CSS I have on my application
.avatar {
vertical-align: middle;
width: 20px;
background-color: white;
height: 25px;
border-radius: 50%;
padding-left: 18px;
padding-bottom: 10px;
float: right;
margin: 10px;
}
.profile-initials {
margin-right: 2px;
}
It is hard to tell without looking at all of your code but the CSS could be much simpler using something like flexbox.
As for your code it seems your padding left and padding bottom are pushing it out of the frame and your and the border radius just makes it look like its outside of the circle.
Here is what I quickly came up with I hope it helps.
li {
background-color: #000;
color: #fff;
width: 300px;
height: 50px;
display: flex;
align-items: center;
}
.name {
flex-grow: 2;
padding-left: 18px;
}
.icon {
margin-right: 18px;
background-color: #fff;
padding: 10px;
color: #000;
border-radius: 50%;
}
<ul>
<li><span class="name">Veris Veritatis</span><span class="icon">Z</span></li>
</ul>
You can check the outcome here in this link. At the bottom of the page, on the extreme right, there is a circle with an image of a tshirt. The image is not vertically centered properly.
The css of the anchor tag is this:-
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
//line-height: 10px;
}
.dfa-tshirt {
background: #2c4762;
color: white;
}
The HTML is this:-
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width:35px; height:35; margin:auto; top:0; right:0; bottom:0; left:0;"/>
</a>
How can I center it? For the time being, I am using inline css for the img, which I will later remove to css file.
I would recommend to just keep it simple, let flex handle it for you. All your margins and padding will exacerbate things when your image changes sizes or other common situations
.dfa-tshirt {
background: #2c4762;
}
a {
display: flex;
justify-content: center;
align-items: center;
border-radius:50%;
width: 44px; height: 44px;
}
a img {
width: 35px; height: 35px;
}
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png" />
</a>
EDIT: Non-flex solution --
I can't really plan for every scenario you may have, but to answer your question and support most browsers, I would also recommend just moving the actual styling to the image only:
a img {
width: 30px; height: 30px;
padding: 5px;
border-radius: 50%;
background: #2c4762;
}
<a href="https://disabilityloverstshirtbuilders.com/">
<img src="https://png.icons8.com/color/100/t-shirt.png" />
</a>
Use this:
img { vertical-align: middle; }
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
line-height: 10px;
}
.dfa-tshirt {
background: #2c4762;
color: white;
}
img {
vertical-align: middle;
width:35px;
height:35px;
}
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png">
</a>
The images parent needs to be displayed inline-block
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
display: inline-block;
}
The inline style should just be
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width: 35px; height: 35px;"/>
I have just checked you site url, you can add two lines for the class as bellow.
display: table;
float: right;
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
display: table;
float: right;
}
Img tag
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width: 35px; height: 35px;"/>
Can someone please tell me how I can have the text inside a css styles circle so it comes up down instead of sequential.
Here is the jsfiddle https://jsfiddle.net/zhxysyrz/
Here is the code
<title>Page Title</title>
<style>
.roundFormat {
display: inline-block;
height: 60px;
width: 60px;
line-height: 60px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #C0C0C0;
color: white;
text-align: center;
font-size: 1em;
}
</style>
<body>
<span class='roundFormat'>7 Apr</span>
</body>
</html>
So inside the circle instead of having 7 Apr in sequence how can I make it stacked like below without increasing the circle size.
7
APR
Thanks
Edit: This is the format i want !http://imgur.com/a/aNg33
You can use display: table and disply: table-cell to vertically align the text in the circle and a br so the text drops to the second line.
Here's a solution https://codepen.io/anon/pen/aWxbmx
HTML
<div class='roundFormat'>
<div class='roundFormatWrap'>7<br>apr</div>
</div>
CSS
.roundFormat {
display: inline-block;
height: 60px;
width: 60px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #C0C0C0;
color: white;
text-align: center;
font-size: 1em;
display: table;
}
.roundFormatWrap {
display: table-cell;
vertical-align: middle;
line-height: 14px;
}
<title>Page Title</title>
<style>
.roundFormat {
display: inline-block;
height: 60px;
width: 60px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #C0C0C0;
color: white;
text-align: center;
font-size: 1em;
word-wrap: break-word;
}
.roundFormat>span:first-child {
display: block;
line-height: 40px;
}
.roundFormat>span:not(:first-child) {
display: block;
line-height: 0px;
}
}
</style>
<body>
<span class='roundFormat'><span>7</span><span>apr</span></span>
</body>
I've got some CSS and HTML that I'm working on, I wanted to sub out the content that is a div block for an image and keep the border with rounded edges with it. But the image isn't showing up when I preview the code. The CSS and HTML are linked correctly. Admittedly, this is just me tinkering to learn more about both CSS and HTML.
If you could look at this and give me some insight of how to get the image to show up in the rounded box, I would appreciate it.
EDIT: I'm afraid I wasn't entirely clear enough on what the issue was. The image in the title tag and that is associated with the "a.title" css code isn't the issue, that's just a header image.
The issue is that I want an image to appear in the div class="content" portion of the HTML with the image source coming from the CSS portion that is div.content.
I'm pretty bad at explaining my questions/problems, sorry. But thank you for all of your help thus far!
HTML:
<html>
<head>
<title>Some Title</title>
<link href="/Volumes/lastname/sitename/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="container">
<p class="title"><img src="/Volumes/last/sitename/media/header3.png"></img></p>
<div class="navbar">
<a class="nav" href="http://www.facebook.com">Facebook</a>
<a class="nav" href="http://www.twitter.com">Twitter</a>
</div>
<div class="content">
</div>
</div>
</body>
</html>
Here's the CSS - I know its more of the code than you need to know but here any way:
body {
background: #ffffff
width: 1000px;
height: 800px;
margin: 0 auto;
font-family: "Arial";
}
#container {
width: 900px;
height: 800px;
margin: 0 auto;
}
div.content {
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}
a.title {
margin-top:120px;
font-size: 36px;
}
div.navbar {
margin-top: -62px;
float: right;
font-size: 18px;
}
a.nav {
text-decoration: none;
color: #717171;
padding-right: 20px;
}
a.nav:hover {
color: #1299d6;
}
div.text {
margin-top: 100px;
}
p.text1 {
display: block;
text-align: center;
}
p.text2 {
display: block;
text-align: center;
}
p.text3 {
display: block;
text-align: center;
}
p.text4 {
display: block;
text-align: center;
}
div.links {
margin-top: 50px;
text-align: center;
}
a.links {
text-decoration: none;
color: #ffffff;
padding-left: 10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
border-radius: 10px;
opacity: 0.6;
}
a.twitter {
background: #42a300;
}
a.contact{
background: #1299d6;
}
a.subbutton{
background: #690260;
}
a.links:hover {
opacity: 1.0;
}
First of all your image tag is wrong. It must be
<img src="/Volumes/last/sitename/media/header3.png" />
http://jsfiddle.net/vBRBM/
Test the code.
You should take the image out of the div and just make a rule for the class.
p.title {
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat right top;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}
I suspect it could have something to do with the URL. maybe try the .. notation? It depends on where the picture is in relation to all your other files.
body
{
background-image:url(' *CHANGE THIS* ');
background-repeat:no-repeat;
background-position:right top;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}
img tags don't have anything in them so they don't need a separate closing tag. End it in the same tag by adding the slash on the end /> like
<img src="/Volumes/last/sitename/media/imagename.jpg" />