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;
Related
Im Completely new to HTML and i want to Position and Size an Item relative to its Container. I copied this Code (https://codepen.io/Tectonics0x3F/pen/EfAgr) and if I changed the top and left Percentage to 25% and 25% for example,then the Box was 25% below the top of the container and 25% more in the right direction
same with the size of the Box if I changed Height and Width the Box was as High as 25% of the Container height and as wide as 25% of the Container length. But if I'm doing this in my code the Boxes and the Container are just going anywhere. I think the Problem is that the Boxes are not really in the Container but i don't know how to do this. And idk if you need to know this but what i want to do is a Menu with those boxes in the Container. Thank you in advance for help and sorry for my bad English.
My Codes
body{
background-image:url('../images/bg24.jpg');
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
line-height: 1.6em;
margin:0;
background-repeat:repeat;
margin: auto;
}
#container {
height:70%;
width:90%;
margin:auto;
top:25%;
left:5%;
border: 5px solid white;
position:relative;
}
.button {
background-color: #474B4F;
border: 2px solid Black;
color: white;
padding: 5% 5%;
text-align: center;
text-decoration: none;
display: inline;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
box-sizing: border-box;
}
#button1{
top: 0;
left: 0;
position:absolute;
}
#button2{
margin-top:0;
margin-left: 25%;
position: absolute;
}
<body>
<div id="container">
<div id="button1">
clickme1
<div id="button2">
clickme2
</div>
</div>
</body>
This is the simplest way you can achieve the menu and if you want a more detailed walkthrough reply to this.
.button {
background-color: #474B4F;
border: 2px solid Black;
color: white;
padding: 5% 5%;
text-align: center;
text-decoration: none;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
box-sizing: border-box;
}
#button1,#button2 {
margin:12px;/* If you want spacing between them */
display:inline-block;
}
<body>
<div id="container">
<div id="button1">
clickme1
</div>
<div id="button2">
clickme2
</div>
</div>
</body>
I designed a navbar for my site. With help from some really kind folks at atackoverflow, I was able to learn the use of table-cell and inline-table display attributes and center the headings for each tab.
However, the same method fails to work when instead of text, I have a circle div positioned inside the tab. It seems to push mess up the positioning of all other tabs.
HTML:
<div id="headContainer">
<div id="rightBar">
<div class="navelement" style="border-bottom: 5px solid #6217FF;"><span>home</span></div><!--
--><div class="navelement"><span>about</span></div><!--
--><div class="navelement"><span>feedback</span></div><!--
--><div class="navelement"><span>contact</span></div><!--
--><div class="navelement"><span><div id="circle"></div></span></div>
</div>
</div>
CSS:
#headContainer {
height: 80px;
width: 100%;
background-color: rgba(28, 35, 46,0.9);
transition:height 0.3s ease-out;
border:0px solid yellow;
position: fixed;
top: 0px;
z-index: 900;
overflow: hidden;
}
#headContainer:hover {
height: 120px;
}
#rightBar {
display: inline-block;
height: 100%;
border:0px solid cyan;
margin-left: 160px;
float: right;
}
.navelement{
display: inline-table;
height: 100%;
border-top:5px solid transparent;
padding-left: 50px;
padding-right: 50px;
padding-left: 3.5vw;
padding-right: 3.5vw;
color: #DFDFDF;
border-bottom: 5px solid transparent;
transition:all 0.3s;
border-top:5px solid #6217FF;
}
.navelement:hover{
background:#6217FF;
}
.navelement span {
display: table-cell;
font-size: 1.2em;
font-size: 1.2rem;
vertical-align: middle;
font-family: 'Open Sans';
}
#circle{
width:50px;
height:50px;
border-radius:50%;
background-color:green;
}
What I want it to look like:
What it looks like right now:
Fiddle: http://jsfiddle.net/R8nGu/1/
inline-table and inline-cell are not commonly used for this task. Rather, it is done with relative positioning. Also, your navigation has a very strange structure, let's correct that first (this is the most widely used approach for nav structures):
<ul id="rightBar">
<li><span>home</span></li>
<li><span>about</span></li>
<li><span>feedback</span></li>
<li><span>contact</span></li>
<li><span id="circle"></span></li>
</ul>
A well-known technique to vertically center content is to use the top and margin-top properties together on a relatively positioned element. Set top: 50%, then set margin-top to minus half of the height of the element. In your case, given that the spans have a font-size of 1.2rem, that would be margin-top: -0.6rem;.
You can do the same for your circle: it is 50px high, so the margin-top should be -25px.
Check out the working fiddle here: http://jsfiddle.net/R8nGu/3/
How to I can I center this texts horizontally which is inside two divs. When I'm previewing it in Dreamweaver, it is finely centered.
My HTML codes:
<div class="maincontainer">
<div class="microcontainers">
<p class="design"><span style="color: #F90;">D</span>ESIGN</p>
</div>
<div class="microcontainers">
</div>
</div>
My CSS Style:
#maincontainer{
width:1120px;
height:auto;
background-color:#E4E4E4;
margin-left: auto;
margin-right: auto;
margin-top: 124px;
padding: 40px 40px 40px 40px;
overflow: hidden;
display:block;
text-align: center;
}
.microcontainers{
width: 350px;
height: 600px;
border: #999 1px solid;
margin: 40px 40px 40px 40px;
padding: 15px 15px 15px 15px;
display: inline-block;
overflow: hidden;
}
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
text-align: center;
display: block;
margin: 0 auto;
}
Thank you and more power!
v Please try this, it may solve your problem.
There is some CSS changes.
.microcontainers{
width: 350px;
height: 600px;
border: #999 1px solid;
margin: 40px 40px 40px 40px;
padding: 15px 15px 15px 15px;
display: inline-block;
overflow: hidden;
text-align: center;
position: relative;
}
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
position: absolute;
left:0;
right:0;
}
FIDDLE
Add text-align:center for the paragraph.
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
text-align:center;
}
Your content "DESIGN" seem to be overflowing its container thus placing it off-center. Look at this demo where I have added overflow: hidden to .design.
With your updated CSS, including text-align: center for .design you could either reduce the font-size, reduce the padding of .microcontainers or add negative margin on the <p> element
add
text-align:center;
in your design class
Just adding text alignment will fix it see this Fiddle
doing exactly what the above user suggested.
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
text-align: center;
}
but I don't see why you are doing this can you explain it..If you are doing a big project i suggest you use bootstrap
You can use center tags also
<div class="maincontainer">
<center><div class="microcontainers">
<p class="design"><span style="color: #F90;">D</span>ESIGN</p>
</div></center>
<center><div class="microcontainers">
</div></center>
</div>
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;
}
I saw many posts and question asked on this issue but none was useful for me so i ask another one. I have a div that has some text in it and then an img, i have several of these divs in a row and when i open the page on different resolutions the texts sometimes expand to two rows instead of one, so the pictures are not on the same level. because of that i want to make the OMG stick to the bottom of the div so when the text expands they will still be on same level.
any suggestions?
code:
<div id="put_entry" class="main_banner">
<h1>
<center>
published
</center>
</h1>
<center>i published those items<br /><center>
<center>
<img src="search_torent.png" id="index_banner" onclick="document.location='published.php';return false;"/>
</center>
</div>
css:
.main_banner{
margin-left: 15px;
direction: rtl;
border-radius: 10px;
background: #D1E3F3;
border: 1px solid #707070;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
min-height: 273px;
width: 270px;
float: left;
}
.main_banner img{
cursor: pointer;
}
Fiddle: http://jsfiddle.net/EFPt7/
.main_banner{
margin-left: 15px;
direction: rtl;
border-radius: 10px;
background: #D1E3F3;
border: 1px solid #707070;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
min-height: 273px;
width: 270px;
float: left;
position: relative;
}
.main_banner img{
cursor: pointer;
position: absolute;
bottom: 0;
}
try position:absolute and then set the width, height and margin.
fiddle: http://jsfiddle.net/EFPt7/15/
I suggest you should add new div for published item and then new row for img. Adding some code for css of new div like this for fixed min height of you publish and then new row for image. Anyway you can used align in div class main_banner.
---html---
<div id="put_entry" class="main_banner" align="center">
<div>
<h1>published</h1>
i published those items
<br/>
</div>
<img src="https://www.google.co.th/images/srpr/logo4w.png"
id="index_banner"
onclick="document.location='published.php';return false;"
width="270px"/>
</div>
--- css ---
.main_banner{
margin-left:15px;
direction:rtl;
border-radius:10px;
background:#D1E3F3;
border:1px solid #707070;
margin-top:10px;
margin-bottom:10px;
padding:10px;
width:270px;
float:left;
}
.main_banner img{
cursor:pointer;
}
.main_banner div{
min-height:273px;
}