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
Related
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 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>
Hey I'm currently working on a responsive web design for school and it is a disaster. Currently setting up the website before making it responsive and the text and images aren't going where I need them to go. This is my coding for css so far:
body{
background-color: #cd76dd;
font-family: 'Raspoutine Medium';
color:white;
}
#page-wrap{
width: 950px;
margin: 0 auto;
}
#containerIntro h1{
font-family: 'AlphaClouds';
background-color: #7ac8ff;
color:white;
font-size: 45px;
width: 100%;
padding-bottom: 10px;
position: static;
bottom: 0;
left: 0;
}
#containerIntro p{
font-family: 'AlphaClouds';
background-color: #7ac8ff;
color:white;
text-align: left;
font-size: 70px;
width: 100%;
}
h1: hover{
text-shadow: 0px 0px 20px white;
}
h1 p: hover{
text-shadow: 0px 0px 20px white;
}
h1{
position: absolute;
left: 0;
bottom: 0;
}
p{
background-color:#ffa1ff;
color:white;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
font-size: 17px;
width: 450px;
height: 100%;
}
h2{
background-color: #ffa1ff;
color:white;
text-align: left;
padding-top: 20px;
padding-left: 10px;
font-size: 20px;
border: 2px #ffa1ff solid;
width: 450px;
height: 100%;
}
h3{
background-color: #ffa1ff;
color:white;
text-align: left;
font-size: 20px;
padding-left: 10px;
border: 2px #ffa1ff solid;
width: 450px;
height: 100%;
}
.gummy{
float: right;
}
.bubble{
float: right;
position: relative; right: -130px;
padding-top: 15px;
}
.pink{
float: left;
position: relative; top: -145px;
}
.blue{
float: right;
position: relative; top: -145px;
}
p.select{
background-color: #5d75ed;
text-align: right;
padding-bottom:10px;
padding-top: 10px;
font-size: 17px;
width: 170px;
float: right;
margin-top: -850px;
}
p.archives{
background-color: #f9e075;
text-align: right;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
font-size: 17px;
width: 170px;
float: right;
margin-top: -600px;
}
p.resources{
background-color: #ef5b66;
padding-bottom: 10px;
padding-top: 10px;
font-size: 17px;
width: 170px;
float:right;
margin-top: -500px;
}
div{
height: 287;
width: 198;
}
mock up for what it will look like
Inside of #containerIntro h1, you don't need to add position: static due to that being already set by default. Plus if an element is static, direction properties such as bottom, top, left, and right are completely ignored.
Try to use the property called clear and set it to both...
p {
clear: both;/*Element should have no other elements on the left and right side*/
}
clear:both; gets rid of floating objects on both the left and right sides of an element. I hope this helps!
I am trying to change <h1> and <p> text's width and height dynamically. I want to get parents height and width, then use percentage for changing child's. But all my attempts are failed.
Here is my css example code:
#main-holder #category1 {
height: 80px;
width: 15%;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: thin solid #999;
margin-top: 5%;
margin-right: 2%;
margin-bottom: 0px;
margin-left: 6%;
text-align: center;
vertical-align: top;
}
#main-holder #category1 h1 {
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
line-height: 20%;
text-decoration: none;
}
#main-holder #category1 h1 a {
color: #FFF;
text-decoration: none;
}
#main-holder #category1 h1 a:hover {
color: #999;
text-decoration: none;
}
#main-holder #category1 p {
color: #CCC;
}
in html I am using like this:
<div id="category1">
<h1>MOVIES</h1>
<p>FOR ALL AGES</p>
</div>
I added width and height like below, but it didn't help:
#main-holder #category1 h1 {
height: 50%;
width: 50%;
}
In your code, you dont have #mainholder, but used all the css with that.so none of the styles applied. So I removed that from css and used line-height as 100% along with height. As the parent div have height as 80px, hope this is working fine and this is what you expected.
Updated Demo
Added font-size:2.9vw; for h1
#category1 {
height: 80px;
width: 15%;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border: thin solid #999;
margin-top: 5%;
margin-right: 2%;
margin-bottom: 0px;
margin-left: 6%;
text-align: center;
vertical-align: top;
background-color:#666;
}
#category1 h1 {
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
line-height: 100%;
height: 100%;
text-decoration: none;
font-size:2.9vw;
}
#category1 h1 a {
color: #FFF;
text-decoration: none;
}
#category1 h1 a:hover {
color: #999;
text-decoration: none;
}
#category1 p {
color: #CCC;
}
You can use viewport value instead of ems, pxs or pts.
1vw = 1% of viewport width
1vh = 1% of viewport height
Update: Demo
For <p> Height alignment problem, Use background and border for <h1> along with height and line-height like this:
CSS:
#category1 {
height: 80px;
width: 15%;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5%;
margin-right: 2%;
margin-bottom: 0px;
margin-left: 6%;
text-align: center;
vertical-align: top;
}
#category1 h1 {
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
line-height: 80px;
height: auto;
text-decoration: none;
font-size:2.9vw;
background-color:#666;
border: thin solid #999;
}
Why dont you use vw for font-size ?
font-size: 5vw;
Documentation
To change the text size you should use font-size:72px; or font-size:3em;.
One of the options it to use CSSStyleSheet JS object.
Check this tutorial: http://davidwalsh.name/add-rules-stylesheets
This answer provides another approach: modify a css rule object with javascript
You can get stylesheet object and manually modify properties:
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
rules[0].style.height = '80px';
Sorry for a weird title but I don't really know how to describe it easily.
First I'll link my JSFiddle on it http://jsfiddle.net/b7YTd/
When I added the "float: left" and "float: right" the rows jumped outside the box and the box doesn't expand as the content gets "larger".
My question is, how do I make the box expand after the content like it should do with content inside it if it doesn't have a set height?
In order to post my JSFiddle I need to add some code so my CSS:
#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
}
.friend_left {
float: left;
width: 250px;
}
.friend_right {
float: right;
width: 250px;
}
.friend img {
width: 50px;
height: 50px;
float: left;
margin-left: 15px;
margin-right: 8px;
}
.friend ul {
list-style-type: none;
margin-top: -15px;
margin-left: 35px;
}
#profile_friends h4 {
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
color: rgb(110,110,110);
font-weight: bold;
height: 20px;
}
#profile_friends hr {
margin: 0;
padding: 0;
}
If I understand you correctly use:
#friendlist {
overflow: auto;
}
http://jsfiddle.net/b7YTd/1/
I had this issue, but used overflow:hidden; on the parent div.
http://jsfiddle.net/b7YTd/3/
#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
overflow:hidden;
}