I'm new in Web. everything was fine but in the case border-radius not working in browser anyone like chrome/FF.
The CSS code like this :
.work-step div {
color: #e67e22;
margin: 2px solid #e67e22;
display: inline-block;
border-radius: 50%; //not working
height: 50px;
width: 50px;
text-align: center;
float: left;
padding: 5px;
font-size: 120%;
margin-left: 25px;
}
Add this to your css
overflow:hidden;
Try this:
.work-step {
background-color: #555555;
color: #e67e22;
margin: 2px solid #e67e22;
display: inline-block;
border-radius: 50%;
height: 50px;
width: 50px;
text-align: center;
float: left;
padding: 5px;
font-size: 120%;
margin-left: 25px;
}
Related
I'm just wondering how I can put my button at the right-bottom of the parent box.
I have put position: relative; to the parent box and used position: absolute; for the button class.
This worked perfectly. However, the button overlapped with the contents of the parent box.
What would be the best way to fix this?
Here's my html and css Thank you!!
.color {
border: 1px solid black;
width: 70%;
margin: 10px auto;
padding: 0 30px;
position: relative;
}
.color p {
display: inline-block;
width: 200px;
height: 80px;
margin-right: 10px;
text-align: center;
line-height: 78px;
}
p.black {
background: black;
color: white;
}
p.gray {
background: gray;
color: white;
}
p.blue {
background: blue;
color: white;
}
p.white {
border: 1px solid black;
}
.btn {
position: absolute;
right: 10px;
bottom: 10px;
}
.btn a {
display: inline-block;
background: #efd9ca;
padding: 25px;
width: 300px;
text-align: center;
text-decoration: none;
}
<h1 class="heading">color</h1>
<p class="black">black</p>
<p class="gray">gray</p>
<p class="white">white</p>
<p class="blue">blue</p>
<div class="btn">Mozilla color collection website</div>
I removed your relative and absolute position declarations. Then I added following css declrations:
.btn {
float: right;
margin-bottom: -20px;
}
float: right; will align the button to the right side. With margin-bottom: -20px; you counter the padding bottom of 30px so that the spacing will only be 10px as previos attempted.
.color {
border: 1px solid black;
width: 70%;
margin: 10px auto;
padding: 0 30px;
}
.color p {
display: inline-block;
width: 200px;
height: 80px;
margin-right: 10px;
text-align: center;
line-height: 78px;
}
p.black {
background: black;
color: white;
}
p.gray {
background: gray;
color: white;
}
p.blue {
background: blue;
color: white;
}
p.white {
border: 1px solid black;
}
.btn a {
display: inline-block;
background: #efd9ca;
padding: 25px;
width: 300px;
text-align: center;
text-decoration: none;
}
.btn {
float: right;
margin-bottom: -20px;
}
<h1 class="heading">color</h1>
<p class="black">black</p>
<p class="gray">gray</p>
<p class="white">white</p>
<p class="blue">blue</p>
<div class="btn">Mozilla color collection website</div>
Im working on a gadget site.So i have to display 10 items on page.
My problem is whenever my page loads,item 2 floats on the right side of item 1 for some time then it appears correctly on left side.It happens for the rest of the items.I want all items to left at once.
See demo so you will get idea what im saying.
Demo here.
Also attached my CSS.
What are some corrections i should make?
.article-number{
border: 1px solid;
float: left;
width: 35px;
height: 40px;
padding-left: 15px;
padding-top: 5px;
font-size: 24px;
font-weight: 700;
background: #000000;
color: #ffffff;
overflow: hidden;
}
.article-item-title{
border: 1px solid;
width: auto;
height: 40px;
overflow: hidden;
background: #000000;
color: #ffffff;
text-align: left;
padding-left: 25px;
padding-top: 5px;
font-size: 24px;
font-weight: 700;
}
.article_media{
float: left;
margin-top: 25px;
}
.article-container{
border: 1px dotted #ccc;
height: 170px;
width: 270px;
float: right;
margin-top: 25px;
margin-bottom: 30px;
margin-left: 10px;
}
.specification{
margin-top: 7px;
margin-left: 30px;
border-radius: 40px;
border: none;
width: 220px;
text-align: center;
background: #ff3800;
color: #ffffff;
height: 35px;
padding-top: 7px;
font-weight: 700;
font-family: 'Ubuntu', sans-serif;
font-size: 17px;
}
.specification a{
color: #ffffff;
}
#article-flipkart-icon{
margin-left: 40px;
margin-top: 10px;
float: left;
}
.affiliate-link{
width: 145px;
float: left;
margin-top: 10px;
height: 35px;
padding-left: 15px;
padding-top: 5px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
background: #289dcc;
font-weight: 700;
}
.affiliate-link a{
color: #ffffff;
}
#article-amazon-icon{
float: left;
margin-left: 40px;
margin-top: 10px;
}
.article-wrapper{
margin-top: 50px;
}
.article-item-one,.article-item-two,.article-item-three,.article-item-four,.article-item-five,.article-item-six,.article-item-seven,.article-item-eight,.article-item-nine,.article-item-ten{
float: left;
margin-bottom: 35px;
}
.featured-image{
border: 1px dotted;
pointer-events: none;
}
This is happening because all images are rendering after some time. There can be multiple solutions to this problem.
1. You can set image width in pixels (300px in your case). - By this, right content will be at proper position until images appears.
2. You can use a very low-quality image for all item list as a placeholder and later replace image src with proper image URL. - By this, placeholder image will render quickly and it will occupy the required space until proper image appears.
I have a fiddle in which I want to align few images (keyboard, computer and handshake) and text inline with the rectangle box (having some text) exactly like these images.
I tried making them inline by using display inline-block, display: block, margin-left:auto, margin-right:auto but still I am unable to replicate it.
The snippets of HTML code which I am using is:
.openings {
height: 650px;
width: 100%;
}
.openings .headline-text:before {
border-top: 1px solid #1072B8;
display: block;
position: relative;
top: -25px;
margin: 0 auto;
width: 50%;
content: "";
}
.openings .headline-text {
text-align: center;
font-size: 24px;
color: #1072B8;
padding-bottom: 80px;
padding-top: 160px;
font-weight: bold;
}
.openings .rectangle {
border-radius: 10px;
display: inline-block;
margin-bottom: 30px;
margin-right: 400px;
width: 300px;
height: 100px;
border: 1px solid #000;
background-color: white;
padding: 10px 10px 10px 100px;
float: right;
}
.section {
margin-left: 300px;
float: left;
font-style: italic;
font-weight: bold;
font-size: 1rem;
color: #1072B8;
}
.openings .job-opening {
clear: both;
height: 150px;
}
.openings {
height: 1480px;
width: 100%;
}
I have been working on re-doing my fathers website that was created in the nineties (ugh) and I have been having trouble getting the text to fit inside of a div and align horizontally. I need the text to sit next to each other so they fit in the div. Here's the code for the page in a jsfiddle
Example HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<body>
<div>
<img id="header" src="http://www.salesprofessionalsinc.com/images/new%20logo.jpg">
</div>
<div id="links">
<div class="home">
<span></span>Home
</div>
<div class="home">
<span></span>Inside Staff
</div>
<div class="home">
<span></span>Our Mission
</div>
</div>
Example CSS
div img#header{
width: 50%;
height: 15%;
margin-left: 125px;
margin-right: auto;
}center input#search{
width: 300px;
height: 45px;
border: solid 1px black;
margin-top: 55px;
font-size: 25px;
}center button#searchbutt{
border: solid 1px black;
width: 65px;
height: 30px;
}#searchbutt:hover{
color: #FFF;
background-color: #000;
}#searchbutt{
background-color: #FFF;
color: #000;
}#links{
height: 40px;
width: 100%;
text-align: center;
line-height: 40px;
}.home{
width: 80px;
text-align: center;
height: 40px;
background-color: white;
color: black;
padding-left: auto;
padding-right: auto;
display: inline-block;
border: solid 1px black;
vertical-align: middle;
}.DL{
width: 95;
text-decoration: none;
text-align: center;
height: 40px;
background-color: white;
color: black;
padding-left: auto;
padding-right: auto;
display: inline-block;
border: solid 1px black;
}.home a{
text-decoration: none;
color: gray;
}.DL a{
text-decoration: none;
color: gray;
}div center a#DLbutt{
border: solid 1px black;
width: 100px;
height: 50px;
background-color: black;
}div center a#DLbutt{
text-decoration: none;
color: gray;
}#download{
padding-top: 30px;
}html{
background-image: url("watermark.gif");
}.home a span{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
I need the "Our Mission part" to be in the same div.
You need to set the display to be display: table-cell for div.home and then remove the line-height you have set for these. This should automatically align the text for you.
div img#header {
width: 50%;
height: 15%;
margin-left: 125px;
margin-right: auto;
}
#links {
height: 40px;
margin-left: 125px;
text-align: center;
display: inline-block;
}
.home {
width: 80px;
text-align: center;
height: 40px;
background-color: white;
color: black;
padding-left: auto;
padding-right: auto;
display: table-cell;
border: solid 1px black;
vertical-align: middle;
}
.home a {
text-decoration: none;
color: gray;
}
http://jsfiddle.net/03syn1to/
I believe this is what you are asking for. You want the "Our Mission" to be in the button vertically. Just update with this code. And it should work. Let me know what you think.
.home{
width: 80px;
text-align: center;
height: relative;
background-color: white;
color: black;
padding-left: auto;
padding-right: auto;
display: inline-block;
border: solid 1px black;
vertical-align: middle;
}
I changed the height.. height: relative;
I'm currently having trouble with my css layout:
http://jsfiddle.net/XB2r7/1/
.content {
margin-right: auto;
margin-left: auto;
background-color:rgba(64,64,64,0.9);
width: 1000px;
height: auto;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px solid #333;
color: #fff;
overflow: auto;
margin-bottom: 20px;
box-shadow: 0px 1px 1px #333;
}
.sidebar {
width: 23.5%;
height: auto;
display: block;
float: left;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
background-color: rgba(255,255,255,0.9);
}
.content2 {
width: 73.5%;
height: auto;
display: block;
float: right;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
background-color: rgba(255,255,255,0.9);
}
.h1 {
font-weight: bold;
}
.content hr {
border: 0;
height: 2px;
background: url('bg3.jpg');
}
As you can see at JSFiddle the two sidebars are connecting to each other, obviously I don't want this to happen, how can I fix this?
You can just add some margin-bottom; to the sidebars to "disonnect" them from each other.
DEMO
(added margin-bottom : 10px; to .sidebar)
Or if you just want to separate the last .sidebar you can add
.sidebar:last-child {
margin-top: 10px;
}
DEMO