So basically I have made a bunch of conflicting divs, but they all managed to work except for my navigation bar. I've tried sitting the different containers inside my top container to automatically fit to the screen by using percentage instead of pixels. But whenever I open up my site on smaller screens the icons in the bar ends up jumping down to the next line?
How do I achieve resizing the buttons and the image automatically so they can all fit into one line, by using pure CSS? Also the main div for the navigation bar is supposed to be above the background split.
If you take a look at my CSS I've also tried setting
.navbar>li {
display: inline-block;
This turned out to have no effect at all
CSS:
.top {
background-color: ;
margin-left: 3%;
margin-right: 3%;
margin: 0 auto;
}
.navbar {
background-color: #FDF3E7;
border-radius: 5px;
margin-left: 15%;
margin-right: 15%;
border: 10px double #C63D0F;
padding-top: 1px;
padding-left: 10%;
padding-right 10%;
padding-bottom: 0px;
position: relative;
display: inline-block;
width: 60%;
}
.navbar>li {
display: inline-block;
margin: 0 auto;
}
.hot-container {
min-height: 40px;
margin-top: 20px;
width:80%;
text-align: center;
position: relative;
display: inline-block;
margin: 0 auto;
}
a.btn {
display: inline-block;
color: #666;
background-color: #eee;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
padding: 10px 15px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border: 1px solid rgba(0,0,0,0.3);
border-bottom-width: 1px;
position: relative;
width: 78%
}
Heres the fiddle: https://jsfiddle.net/z400tzkb/
Related
I'm trying to make a 'custom' progress bar with numbers at each end of the progress bar. Left hand number being the current value, and the right hand side being the max/target value. I've got it so that I'm showing the two numbers but I can't seem to position the right hand number correctly.
What I'm trying to achieve is...
and what I currently have is...
This is what I currently have code wise...
JSFiddle
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
float: right;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
I've tried putting the the second span outside the the progress inner div but then moves the text outside the whole thing and I couldn't work out how to move it into the correct place.
Can anyone help?
I have an interesting solution using linear-gradients, its pretty close, try playing around with the margins and outline to get border right.
.progress-outer {
width: 96%;
display: flex;
height: 35px;
margin: 10px 2%;
text-align: center;
border: 1px solid #dcdcdc;
background-image: linear-gradient( 80deg, orange 37% , #f4f4f4 37% );
border-radius: 20px;
justify-content: center;
align-items: center;
}
.progressBarCurrent {
color: black;
text-align: left;
width: 50%;
position: relative;
margin: 0px;
margin-left: 20px;
}
.progressBarGoal {
color: black;
position: relative;
text-align: right;
width: 50%;
margin: 0px;
margin-right: 20px;
}
<div class="progress-outer">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
Instead of float:left you can use position:absolute
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
position: relative;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
position: absolute;
right: 5px;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
I am working on an internal program for work that is essentially built on PHP. My problem is that I have a a header, a side navigation, the main content (to the right of the nav) and a footer. Rough Layout Picture
My issue is that I have two DIV's within a container, the nav is set to a percentage with a minimum width, and the content section is set to take the remaining space. In total both the nav and content should take about 91% of the screen real estate. Whats Happening after shrinking the browser a bit
My CSS looks like this for the fields I think are relevant:
.container{
width: 100%;
float: inline-block;
}
.header{
float: left;
text-align: left;
background-color: lightblue;
width: 100%;
vertical-align: middle;
display: block;
border-radius: 15px;
}
.header h1{
font-weight: bold;
font-size: 40px;
text-indent: 50px;
}
.msg_alert{
background-color: green;
color: white;
width: 95%;
padding: 5px;
border-radius: 10px;
}
.err_msg_alert{
background-color: red;
color: white;
width: 95%;
padding: 5px;
border-radius: 10px;
}
.menu{
float: left;
width: 13%;
border: 3px solid grey;
padding: 5px;
background-color: lightgrey;
border-radius: 15px;
margin-top: 20px;
margin-right: 20px;
min-width: 200px;
}
.menu a{
float: left;
color: black;
text-align: left;
padding: 14px;
text-decoration: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
margin: 3px;
background-color: lightblue;
width: 40%;
min-width: 150px;
border-radius: 15px;
}
.menu a:hover{
background-color: grey;
color: black;
}
.menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li{
padding: 8px;
margin-bottom: 7px;
}
.content{
float: left;
width: 78%;
padding: 20px;
margin-top: 20px;
margin-left: 20px;
/*border: 3px solid red;*/
}
.footer{
display: inline-block;
width: 100%;
background-color: lightgrey;
border-radius: 15px;
font-size: 12px;
text-align: center;
margin-top: 5px;
padding-bottom: 10px;
}
I'm not sure what I've done wrong. Everything displays properly if the browser is in full screen but when I shrink it down to about 3/4's of the browser size the nav stays where it should be but the contents move below.
I have setup a mobile version which works perfectly but the desktop mode is what I am having issues with.
Thank you for the help in advance.
here is the solution-
<div class="header"></div>
<div class="menu_content">
<div class="menu"></div>
<div class="content"></div>
</div>
<div class="footer"></div>
.menu{
width: 13%;
border: 3px solid grey;
padding: 5px;
background-color: lightgrey;
border-radius: 15px;
margin-top: 20px;
margin-right: 20px;
min-width: 200px;
}
.content{
width: calc(100% - 21.7%);
padding: 20px;
margin-top: 20px;
margin-left: 20px;
border: 3px solid red;
}
.menu_content {
display: flex;
align-items: flex-start;
}
.menu_content::after {
content: '';
clear: both;
display: block;
}
Well, although the widths of .menu and .content might add up to 100% or less in a wider format, due to the min-width pixel setting of .menu, they will become wider than 100% when you decrease the window width, since the 200px of min-width: 200px; will become much more than the 13% width you define for it. So (since both are floats), .content will go below .menu, because there isn't enough space anymore for it next to .content.
To avoid that, you can wrap both of these in a div container and assign display: flex to that. Additionally, add flex-shrink: 0; (= allowed to get smaller) to .content. This should basically do the trick. (There are other details , but just check out some tutorial about flex - it's really not complicated at all.)
Another approach would be to define the menu width as 200px (fixed) and the width for .content as width: calc(100% -200px) - The full width of the parent minus 200px, whatever the width of the parent is.
(This doesn't calculate padding, margins etc. - you would have to consider that in the "real" values you use)
I've an issue with my aside bar and the timestamp in my section.
<section>
<div class="thumbnail-title">
Sample
</div>
<div class="thumbnail-image"></div>
<div class="thumbnail-text">
<div class="thumbnail-timestamp">
02-11-2016 18:51 P.M.
</div>
Hello this is random text that I will test today to see if my sizing is correct.
ello this is random text that I will test today to see if my sizing is correct.
</div>
</section>
<aside>
Random Aside Text.
</aside>
If I add more sections, the aside bar sticks to the last section, where as I want it to stick from top downwards.
Also my timestamp is okay if one section exists but if more sections are added, timestamp get's pushed below the text.
Here is the CSS:
section,
aside
{
margin: 20px 20px 24px 0;
}
section
{
float: left;
width: 55%;
margin-left: 20px;
border: 3px solid black;
padding-bottom: 20px;
border-radius: 10px;
}
.thumbnail-title
{
border: 3px solid black;
border-top: none;
border-left: none;
border-right: none;
padding: 15px;
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
.thumbnail-image
{
float: left;
height: 200px;
width: 300px;
border: 3px solid black;
margin-left: 20px;
margin-right: 20px;
border-radius: 10px;
}
.thumbnail-text
{
font-size: 18px;
text-align: left;
padding: 20px;
padding-left: 20px;
margin-left: 20px;
margin-right: 20px;
border-radius: 10px;
}
.thumbnail-timestamp
{
border: 1px solid black;
text-align: right;
float: right;
width: 360px;
height: 10px;
padding: 2px;
font-size: 10px;
margin-bottom: 10px;
border-top: none;
border-left: none;
border-right: none;
}
aside
{
float: right;
width: 38%;
padding: 10px;
border: 3px solid black;
border-radius: 10px;
}
I want my page to look like this:
Idea
Be care with margin property. (I mean by that margin: 20px 20px 24px 0; is cool, but it's 'dangerous' when you want inline elements)
Set display: inline-block or play with flexbox (amazing things)
Set correct percentage for your width.
If you set a margin: 20px, it doesn't seem to be big, but in fact, it's huge (especially when you resizing, or when you want to set elements in same line.)
Is this something you want ? http://codepen.io/anon/pen/ZBrYde
If you open this http://jaminweb.com/YoutubePlaylist.html in Chrome, you'll see that the red X is perfectly aligned with the text box to the left of it. If you open it in IE, on the other hand, it is misaligned. I'm trying to figure out why that is. Any help greatly appreciated.
Relevant code:
CSS
div.videl
{
width: 80%;
margin: 0 auto;
background-color: #39275b;
color: white;
padding: 5px;
border-bottom: 1px solid #fff;
}
textarea.vidtxt
{
resize: none;
width: 200px;
height: 20px;
overflow: auto;
}
img.rembtn
{
display: inline;
margin-left: 10px;
height: 24px;
width: 24px;
border: 1px solid #B43535;
padding: 0px;
}
img.rembtn:hover
{
display: inline;
margin-left: 10px;
height: 24px;
width: 24px;
border: 1px solid #B43535;
padding: 0px;
opacity: 0.4;
}
HTML
<div class="videl">
<p><textarea class="vidtxt"></textarea><img class="rembtn" src="xicon.jpg" width=20 height=20></img></p>
</div>
Try this
img.rembtn {
border: 1px solid #B43535;
display: inline-block;
height: 24px;
margin-left: 10px;
padding: 0;
vertical-align: middle;
width: 24px;
}
textarea.vidtxt {
display: inline-block;
height: 20px;
overflow: auto;
resize: none;
vertical-align: middle;
width: 200px;
}
By setting the vertical alignment to middle and making both items display inline-block should allow them to align perfectly
You should set them to the same height, currently they are different, and also add vertical-align: top;
the circle tend be oval, what I want is perfect circle. border-radius 100% isn't work I wonder why..
http://jsfiddle.net/8gD2m/1/
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: lighter !important;
line-height: 1;
color: #fff !important;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #d73d33;
border-radius: 50px;
position: relative;
top: -3px;
}
Here is a JSfiddle with some changes:
JSFiddle for round badge
The main changes are:
padding: 0px;
width: 50px;
height: 50px;
line-height: 50px;
Having a line-height equal to the container height will center the text vertically. This only works if the text fits on a single line.
Edit: (copied code from JSFiddle)
.badge {
display: inline-block;
padding: 0;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 12px;
font-weight: lighter !important;
color: #fff !important;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #d73d33;
border-radius:50px;
position: relative;
top: -3px;
}
<span class="badge badge-success">8</span>
if it's not perfect circle check display: inline-block and border-radius: 50%:
.cirlce {
height: 20px;
width: 20px;
padding: 5px;
text-align: center;
border-radius: 50%;
display: inline-block;
color:#fff;
font-size:1.1em;
font-weight:600;
background-color: rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.2);
}
check this out
.badge {
display: inline-block;
min-width: 10px;
padding: 7px;
font-size: 12px;
font-weight: lighter !important;
line-height: 1;
color: #fff !important;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #d73d33;
border-radius: 50px;
position: relative;
top: -3px;
}
The main trick for making it a perfect circle is distributing the padding of the element(container) evenly => then setting border-radius: 50% or border-radius: 100%.
So you can get rid of the height and width declaration and use absolute positioning and padding to control the height and width
or same height and width and uniform padding value
.element-class {
Position: absolute;
padding: 10em or 10% or with any unit;
border-radius: 50% or 100%;
}
OR
.element-class {
height: 10em;
width: 10em;
padding: 10em; **
border-radius: 50%;
}
I had the same issue. When I added a 100% border-radius, my picture turned into an oval. That is because my picture is wider than it is tall. Imagine smoothing the edges of a rectangle. If you want your image to be circular, you have to make sure the height and width dimensions are the same. You could try setting them by doing the following:
css height: 200px; width: 200px; (so the point is having equal height and with in your CSS)
This will make sure that your image is circular, however, it may cause your image to stretch and become distorted because your originally image is NOT a perfect square I presume.
You can use vw unit for width and height.
Like the sample below:
div {
background-color: green;
width: 20vw;
height: 20vw;
border-radius: 100%;
text-align: center;
line-height: 20vw;
color: white;
}
<div>resize device</div>