I have 3 buttons, which shall have width according to the width of the button text. This only works with display: inline, but I don't want to have the buttons in a line. How can I list the buttons from top to bottom?
js fiddle
CSS
.wrap{
width: 400px;
height: 100px;
background: red;
}
.button{
display:inline;
background: white;
padding: 0.1rem;
}
HTML
<div class="wrap">
<div class="button">one</div>
<div class="button">two</div>
<div class="button">three</div>
</div>
An easy way is by using floats. Remove the display rule and add:
clear:left;
float:left;
jsFiddle example
.button{
clear:left;
float:left;
background: white;
padding: 0.1rem;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
You only need clear and float left, and remove display on .button.
Then your code stay well:
CSS
.wrap
{
width: 400px;
height: 100px;
background: red;
}
.button
{
clear:left;
float:left;
background: white;
padding: 0.1rem;
}
HTML
<div class="wrap">
<div class="button">one</div>
<div class="button">two</div>
<div class="button">three</div>
</div>
If this is not what you need, let me know
Try:
.button:after{
content: "";
display: block;
}
Related
My code:
#Parent {
border-radius: 8px;
background-color:#cccdce;
width:70%;
height:500px;
float:left;
}
#child {
padding:15px;
border-radius: 8px;
background-color:blue;
width:100%;
height:20px;
float:left;
}
<div id="Parent">
<div id="child">
<div>aaaa</div>
</div>
</div>
What I now have is:
I want to know why padding is not working? Isn't padding is supposed to set the space between parent and child element? Why it is not working and overlapping?
I want to do this:
use flexbox and remove floats, and FYI your padding needed to be set in parent not child
#Parent {
border-radius: 8px;
background-color: #cccdce;
width: 70%;
height: 500px;
display:flex;
padding: 15px;
}
#child {
padding: inherit;
border-radius: 16px;
background-color: blue;
height: 20px;
flex:1
}
<div id="Parent">
<div id="child">
aaaa
</div>
</div>
Check this out.
#Parent {
border-radius: 8px;
background-color: black;
width: 70%;
height: 500px;
padding: 15px;
}
#child {
border-radius: 8px;
background-color: white;
padding: 15px;
height: 470px;
}
#grand {
border-radius: 8px;
background-color: blue;
width: 100%;
height: 20px;
}
<div id="Parent">
<div id="child">
<div id="grand">aaaa</div>
</div>
</div>
It would help if you give padding to the right element. Right now you are assigning 15px padding to the child. That's the reason why there is 15px space between the text and the child. If you add a padding to the parent-id, you create "space between parent and child element":
#Parent {
padding: 15px;
}
You can move your padding to the parent and remove the floats. This will give you the expected result.
I want to display a button centered inside a div. I did it with the following:
transformation:translateY(25%);
but this is is not allowed for older version of browsers. This is the follwing CSS code for the div and the button:
#buttonSwap.swap{
background: url("../img/thumb_10600.png") no-repeat;
height: 15px;
width: 15px;
border: none;
}
.swapCities{
float: left;
height: 100%;
width: 15px;
margin: 5px 8px 0px 8px;
}
and the HTML code is the following:
<div class="swapCities">
<input type="button" id="buttonSwap" class="swap" ng-click="swapingCities()" />
</div>
There is a lot of methods for vertical alignment in CSS. I recommend reading http://css-tricks.com/centering-css-complete-guide/.
Personally I find the "ghost element" technique (http://codepen.io/KatieK2/pen/ucwgi) most universal. The idea is to prepend an inline-block pseudoelement with 100% height to your container, set your button display to inline-block as well and set vertical-align: middle on both:
.swapCities:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#buttonSwap {
display: inline-block;
vertical-align: middle;
}
You need something like this:
.swapCities{
display: inline-block;/* or table-cell */
vertical-align: middle;
}
Here is a simple example: the key here is that the parent container is position:relative, and the button is position:absolute;
you can use top:50%; left:50%;... this will align the top-left corner of the button to center;
To complete the centering, you need to add margin to the button to equal half of the width and height.
Copy/Paste the below into an .html document, and you will see it at work.
<!DOCTYPE html>
<html>
<body>
<style>
center { background-color:#CCCCCC; position:relative; min-height:600px; }
button { width:300px; height:30px; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:15px; }
</style>
<center>
<h2>Content Area</h2>
<button type="button">Click Me</button>
</center>
</body>
</html>
You could use position: absolute; then top: 50% property to offset.
Have a look at this Codepen to see if it's any good for you: EXAMPLE HERE
Your css will look like this:
.swapCities{
position: relative;
height: 100px; width: 100px;
margin: 5px 8px 0px 8px;
border: 1px solid;
}
#buttonSwap.swap{
position: absolute;
top: 50%; margin-top: -9px;
left: 50%; margin-left: -9px;
background: url("../img/thumb_10600.png") no-repeat;
height: 15px; width: 15px;
border: 1px solid;
}
Hey guys I am trying to make something like this:
How it should look:
How it actualy looks:
CSS
h1{
font-size: 16px;
}
.bar{
width:170px;
background-color: #ccc;
border: 1px solid #ccc;
height: 17px;
margin-left: 15px;
}
.progress{
background-image: url("images/survey_bar.png");
background-repeat: repeat-x;
padding: 5px;
text-align: right;
height: 17px;
}
.label{
margin-bottom: 15px;
margin-left: 15px;
}
HTML
<div class="bar">
<div class="progress" style="width:75%;">65%</div>
</div>
<div class="label">Dominik !</div>
<div class="bar">
<div class="progress" style="width:20%;">20%</div>
</div>
<div class="label">Jenda</div>
<div class="bar">
<div class="progress" style="width:15%;">15%</div>
</div>
<div class="label">Lojza</div>
You see the difference, its in text color but mostly on position of that number of %
Can somebody help me to fix it? I try to padding/margin that text but just cant fix it.
Colour can be solved just by adding color:#fff, not really a big issue.
As for the positioning, try adding line-height:17px (ie. matching your height). This will cause it the centre the text vertically on the bar.
You need to delete the padding:5px; in .progress{} and add color:white;
.progress{
background-image: url("images/survey_bar.png");
background-repeat: repeat-x;
padding:5px; /* delete this */
text-align: right;
height: 17px;
color:#fff; /* add this */
}
DEMO
I changed a few things around to get this working.
Removed the padding from .progress as that would just overflow the div
Changed text color to white
Added line-height: 17px; to .progress to vertically center the div
Added a space after .progress so the text wasn't right at the edge of the div
Here's the new CSS
.bar{
width:170px;
background-color: #ccc;
border: 1px solid #ccc;
height: 17px;
margin-left: 15px;
}
.progress{
background-image: url("images/survey_bar.png");
background-repeat: repeat-x;
color: #fff;
text-align: right;
height: 17px;
line-height: 17px;
}
.progress:after {
content: "\00a0";
}
.label{
margin-bottom: 15px;
margin-left: 15px;
}
You need to remove the padding. This is causing the error.
padding:0;
I have a div as a content box and have another div inside that for the title. The outer div has border-radius set but the inner div hides it.
HTML:
<div id='box'>
<div id='boxTitle'>
This is the title
</div>
</div>
CSS:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
}
#boxTitle {
width: 100%;
background: #000;
color: #fff;
text-align: center;
}
JSFiddle: http://jsfiddle.net/AAUbA/
How do I fix it so I can see the rounded corners at the top of the outer?
Use overflow: hidden on your #box element:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
overflow: hidden
}
See the updated Fiddle here: http://jsfiddle.net/AAUbA/2/
As an aside: it's worth considering adding in vendor-prefixes to ensure better cross-browser compatibility.
This is a good write-up on how to use the property.
You can use this tool to auto-generate the CSS you need.
Give #boxTitle the same radius on both the top corners as the box. As already suggested you can also set the overflow to hidden with overflow:hidden;. Both working but if you want to add something outside of #box it won't be displayed, with this code it will be displayed:
HTML:
<div id='box'>
<div id='boxTitle'>
This is the title
</div>
</div>
CSS:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
}
#boxTitle {
width: 100%;
background: #000;
color: #fff;
text-align: center;
border-top-right-radius:10px;
border-top-left-radius:10px;
}
JSFiddle demo
add overflow: hidden on your #box element.
I'm trying to put a logo and a sidebar next to eachother, but it just won't work. The logo container needs to be centered at the top. And the sidebar needs the be at the top-left Can you help me? I already tried float, no succes. :(
code:
<body>
<center>
<div id="logo1">
<div id="logo2"></div>
</div>
</center>
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1"></div>
</a>
</div>
</body>
CSS:
#test1 {
display: inline-block;
position: absolute;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
display: inline-block;
position: absolute;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/1.png');
height: 45px;
width: 45px;
}
#sidebar1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: -10px;
margin-left: -15px;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
}
#logo1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 10px;
height: 100px;
width: 700px;
}
Ok, This is what you have to do :
You need to remove the display:inline-block from #logo1
And instead of just writing margin-top:10px , you need to use margin:0px auto, or you could write margin:10px auto. By this, it will center your #logo1 div.
But to center a "div" , you need to have another container(div) that wrap within your div. So that it will know, from which side to which side that it will have to be "centered".
For that reason, you will need to create another div or container around your #logo1 div, and lets assume it is called "right" (see the code below).
And for this div/container to be just beside your sidebar, it will need to have a relative position same as your sidebar. Now, you can just float both of your #sidebar1 and also your #logo1 to the left.
Thus, you dont have to use that negative margin for your sidebar anymore (remove that). If you wanted to use the negative margin, you have to use the absolute position in this case. But you will then have to restructure your whole #logo1 div which will create a lot of works.
This is the full code for your reference :
HTML code :
<div id="container">
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1">This is sidebar</div>
</a>
</div>
<div id="right">
<div id="logo1">
<div id="logo2"><This is logo</div>
</div>
</div>
</div>
And use this CSS :
#container{
width:1000px;
height:1080px;
position:absolute;
border:1px solid #000;
}
#test1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/1.png');
height: 45px;
width: 45px;
}
#sidebar1 {
display: inline-block;
position:relative;
float:left;
border: 1px solid;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
border:1px solid red;
}
#right{
position:relative;
float:left;
margin-top:0px;
width:870px;
height:100px;
}
#logo1 {
position:relative;
border: 1px solid;
margin: 0px auto;
height: 100px;
width: 700px;
}
Do you want this ?
#test1 {
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
background-image:url('Afbeeldingen/1.png');
}
#sidebar1 {
position:absolute;
border: 1px solid;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
}
#logo1 {
border: 1px solid;
margin-top: 10px;
height: 100px;
width: 700px;
}
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1"></div>
</a>
</div>
<div id="logo1">
<div id="logo2"></div>
</div>
I assume this is what you want? http://jsfiddle.net/Le6PH/
You should do:
Remove the negative margins (If you don't know what you are doing, don't use negative margins)
Remove the <center> tag (This tag is deprecated since EVER)
Remove the margin of your logo
Add a wrapper div around your whole structure
Add the following CSS to that div
CSS
.wrapper{
position:relative;
width:818px; /* sidebar width + logo width */
}
Change position:relative; to position:absolute for your logo & sidebar divs.
Add top:0; for both divs
Add right:0; for the sidebar div
EDIT:
With a centered logo, like this (http://jsfiddle.net/Le6PH/1/) you'll need to change 2 things:
Add a margin-left:118px; to the logo div
Change the width of the wrapper to width of logo + margin logo + width of sidebar.
Try floating your div, it should look like this..
<div class="row">
<div id="log"></div>
</div>
<div class="row">
<div id="sidebar"></div>
</div>
css
.row{
float: left;
width: 50%;
}