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.
Related
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;
}
I am trying to get two things to line up for HTML. Instead, I get them on top of each other. What I really want is to have them next to each other like websites do (where at the top you can choose between like 6 things and they take you to different parts of the website).
#home {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#home:hover {
background: #6495ED;
border-radius: 50px;
margin: auto;
width: 105px;
line-height: 55px;
text-align: center;
font-size: 22.5px;
cursor: pointer;
}
#Alt {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#Alt:hover {
background: #6495ED;
border-radius: 50px;
margin: auto;
width: 105px;
line-height: 55px;
text-align: center;
font-size: 22.5px;
cursor: pointer;
}
<div id="home">Home</div><div id="Alt">test</div>
As another stated, you can use display: inline-block to get horizontal alignment of block elements.
I also added vertical-align: center to maintain a centered position when hovered, since the size changes. You can change center to top or another value if needed.
I also removed redundant CSS rules, shrinking your CSS down to around half its original size.
#home, #Alt {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
display: inline-block;
vertical-align: center;
}
#home:hover, #Alt:hover {
background: #6495ED;
border-radius: 50px;
width: 105px;
line-height: 55px;
font-size: 22.5px;
cursor: pointer;
}
<div id="home">Home</div><div id="Alt">test</div>
<div>s naturally stack over one-another as they carry a block display by default.
In order to line them up, you may consider setting an inline-block display for both the #home and #Alt:
#home, #Alt {
display: inline-block;
vertical-align: middle;
}
You may also add a vertical-align: middle for a better appearance on hover (as suggested by another answer).
#home {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#home:hover {
background: #6495ED;
border-radius: 50px;
margin: auto;
width: 105px;
line-height: 55px;
text-align: center;
font-size: 22.5px;
cursor: pointer;
}
#Alt {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#Alt:hover {
background: #6495ED;
border-radius: 50px;
margin: auto;
width: 105px;
line-height: 55px;
text-align: center;
font-size: 22.5px;
cursor: pointer;
}
#home, #Alt {
display: inline-block;
vertical-align: middle;
}
<div id="home">Home</div>
<div id="Alt">test</div>
I'm trying to get my buttons aligned in my display. If I try to use float: right; nothing happends. Below you can find a screenshot:
So I'm trying to get these buttons all in a row below each other.
I also tried using a table, but that one screws up my design of my hrefs
Here you can find my html:
<div class="LineField">
<p>Axo 800</p>
Planning
Data analyse
</div>
<div class="LineField">
<p>JC-FSX</p>
Planning
Data analyse
</div>
etc. etc.
css:
.LineField
{
width: 50%;
height: 8%;
margin-bottom: 15px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
background: #191748;
border: 0.1em #191748;
border-radius: 1em;
color: white;
/* vertical alignment */
display: flex;
align-items:center;
}
.LineField p
{
margin-left: 25px;
margin-right: 25px;
Font-size: 200%;
}
.LineButton
{
border-radius: 0.5em;
width: 30%;
height: 50%;
background: linear-gradient(#ffffff, #c4c4ff);
margin-left: 3%;
margin-right: 3%;
padding-top: 5px;
color: #191748;
font-size: 150%;
font-weight: 500;
text-decoration: none;
}
You can set the width for the p element like below
.LineField p
{
margin-left: 25px;
margin-right: 25px;
Font-size: 200%;
width: 130px;
}
Updated Code Here
Just use the CSS below:
.LineField p {
margin-left: 25px;
margin-right: 25px;
Font-size: 200%;
float: left;
width: 16%;
}
You can set the width of LineButton class like below
.LineButton
{
border-radius: 0.5em;
width:50%;
height: 50%;
background: linear-gradient(#ffffff, #c4c4ff);
margin-left: 1%;
margin-right: 1%;
padding-top: 5px;
padding-left: 5%;
color: #191748;
font-size: 150%;
font-weight: 500;
text-decoration: none;
}
Please see the updated code below
Sample Code
I have made some buttons to link people from my site to social media pages and the text in the Google Plus one is too low and I would like it to go higher in the div but I am struggling to do this, my code is here on JS fiddle.
The buttons aren't complete yet, I just want to know how to get the text higher, cheers
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: central;
}
a:hover .GooglePlus {
background-color: #FE2E2E;
color: white;
}
Just add line-height:27px; to adjust g+
Code full class:
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: middle;
line-height:27px;
}
If i understand you correctly you are just trying to move the text inside of those circle backgrounds higher.
If this is the case you can cheat it with line height as done in this fiddle
http://jsfiddle.net/9dj9u/2/
Which leaves the resulting CSS affected.
.FaceBook {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Calibri;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
line-height:1.1;
}
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: middle;
line-height:0.8;
}
Just adjust line-height in percentage values: line-height: 50%, keep increasing or decreasing till you get there, you might also want to adjust padding, and box-sizing... and remove vertical-align
Remember, this isn't quite exact science, because you do not intend the g and the f to stand next to each other like they do in a sentence, watch this: fg, notice how the g normally is indeed lower than the f.
i included the correct vertical-align value and adjusted the height and width
.FaceBook {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 5px;
font-family: Calibri;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
}
a:hover .FaceBook {
background-color: #4c66a4;
color: white;
}
#footer .FaceBook {
display: inline-block;
}
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;*/
border-bottom: 2px solid black;
padding: 2px;
font-family: garamond;
font-weight: bold;
height: 50px;
width: 50px;
background-color: #D8D8D8;
text-align:center ;
vertical-align: text-bottom;
padding: 0px;
}
a:hover .GooglePlus {
background-color: #FE2E2E;
color: white;
}
#footer .GooglePlus {
display: inline-block;
}
#plus {
font-size: 20px;
padding:0px 0px;
}
a {
text-decoration: none;
}
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