I built a basic web and I'm trying to make it responsive, but I'm having some issues with the slider itself; some elements don't center when I resize the screen; I thought it was because of Firefox, but I tried on chrome and the result is the same.
The slider is:
<div id="slider" class="slider-big">
<div class="vertical-relative-centered">
<h1>Welcome everyone!!!</h1>
Ir al Blog
</div>
</div>
And the css:
#slider {
width: 100%;
height: 350px;
/* line-height: 320px; */
color: #fff;
text-shadow: 0 0 5px #444;
overflow: hidden;
background: rgba(73,155,234,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: radial-gradient(ellipse at center, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
}
#slider h1 {
margin: 0;
padding: 0;
text-align: center;
}
.btn-white {
display: inline-block;
color: rgb(88, 88, 88);
background-color: white;
padding: 10px;
margin: auto;
margin-top: 40px;
font-size: 18px;
text-transform: uppercase;
text-shadow: none;
box-shadow: 0 0 5px rgb(88, 88, 88);
border-radius: 4px;
transition: 300ms all;
}
.btn-white:hover {
background-color: #444;
color: white;
}
The thing is that the h1 moves left when I resized the screen, so my solution was to add an overflow: hidden to #slider, and it works quite well, but I got another issue which is because of the overflow, the slider doesn't stick to the header when I resize; then, I removed the overflow and I tried to center it horizontally with a translateX(), but the h1 ignored it.
So, at the end, I don't know how to center the element in a right way and, at the same time, get the slider sticks to the header.
This is the full code in case you need it: https://jsfiddle.net/ilos28/t9ouea7v/
Thanks in advance.
-------------- Added ---------------
This is the difference, when I change the wide of the screen:
Before:
After:
In the end I just had to set a height 100% in the #menu and the space disappeared.
Related
I am having an issue with making my text responsive with the image its placed with, specifically in mobile view.
Here is how the module looks in desktop/tablet view:
And here is how it looks in mobile view:
The issue here is that I want the image boxes in mobile view to be center aligned. However, when I centre align the div with the images, the text is still placed on the left side, and not being responsive.
I am not entirely sure how to adjust my code to make the text responsive with the images, but here is the code that I have for these respective elements.
.cssHotelBox {
position: relative;
}
.pickgradient{
position:relative;
display:inline-block;
}
.pickgradient:after {
content:'';
position:absolute;
top:0;
margin-top: 99px;
left: 1px;
width:221px; height:50%;
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.70) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.70)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* W3C */
}
.cssHotelImage {
height: 160px;
width: 223px;
border: solid 1px #FFF;
margin-top: 40px;
}
.cssHotelText {
color: #FFF;
font-size: 14px !Important;
position: absolute;
top: 160px;
left: 8px;
}
.cssHotelCity {
color: #FFF;
font-family: inherit;
font-size: 11px !Important;
position: absolute;
top:180px;
font-weight: 100 !Important;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.starRating {
display:inline-block;
width:60px;
height:11px;
background:transparent url(../images/star-sprites.png) no-repeat scroll;
margin-left: 6px;
margin-right: 2px;
}
When I make .cssHotelBox have the text-align: center, this is how it shows up:
I would like the text to be responsive within the image after:
#media (max-width: 768px) {
}
Is there any way I can fix the issue with the text? Thanks.
You should wrap the image and the text within the same container
I have 3 divs
I am using float:left to have the divs in the same line. my problem is that the div1 will have a random width. Div 3 will be always 25 pixels with margin left and right of 1. and then the middle div needs to fill up the remaining space.
What would be the best way to accomplish this and still be supported in all browsers?
Here is what I tried, but the problem is that the % width wont work because div1 will always change in width.
<div class="title-div gradient">
<div class="title-div-left">
<p>Service 1</p>
</div>
<div class="background-line"></div>
<div class="title-div-right">
<img src="ArrowUp.png" alt="▲">
</div>
</div>
</div>
.services-wrapper .expansion-wrap .title-div {
height: 3.5rem;
line-height: 3.5rem;
width: 95.6rem;
font-size: 1.7rem;
color: #FFF;
margin-left: 3.4rem;
background: #6f1505;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZmMTUwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNDA4MDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #6f1505 0%, #340801 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f1505), color-stop(100%, #340801));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6f1505 0%, #340801 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6f1505 0%, #340801 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #6f1505 0%, #340801 100%);
/* IE10+ */
background: linear-gradient(to bottom, #6f1505 0%, #340801 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f1505', endColorstr='#340801',GradientType=0 );
.services-wrapper .expansion-wrap .title-div .title-div-left {
float: left;
}
.services-wrapper .expansion-wrap .title-div .title-div-left p {
margin: 0;
padding-left: 1.7rem;
padding-right: 1rem;
font-size: 2rem;
font-weight: bold;
display: inline;
}
.services-wrapper .expansion-wrap .title-div .background-line {
background-image: url("../images/Line.png");
background-repeat: no-repeat;
background-position: center;
background-position: no-repeat;
width: 50%;
height: 100%;
float: left;
}
.services-wrapper .expansion-wrap .title-div .title-div-right {
float: left;
height: 3.5rem !important;
padding-left: 1rem;
}
.services-wrapper .expansion-wrap .title-div .title-div-right img {
margin-top: 0.5rem;
}
Adding overflow: auto will make the div fill up the remaining space.
Demo: http://jsfiddle.net/aaL8gvhg/
I've achieved nearly the look that a want and I've removed the irrelevant html and I want to improve the look of the button.
I've created a fiddle for the button.
I think that the color is good (the blue) and the goal is to make the text render and a look that is more clear. How can the text look less blurry and with sharper contrast ? The CSS is
html {
height: 100%;
overflow-y: scroll;
}
body {
background-color: rgb(255, 255, 235);
font-family: Verdana, sans-serif;
font-size: 12px;
line-height: 16px;
color: rgb(0, 0, 0);
height: 100%;
text-align: center;
background-position: initial initial;
background-repeat: initial initial;
}
#post {
display: block;
position: absolute;
top: 16px;
right: 0px;
height: 46px;
line-height: 46px;
}
#post a {
color: rgb(255, 255, 255);
text-shadow: rgb(255, 244, 210) 1px 1px 2px;
font-size: 20px;
}
#post a:hover, #post a span:hover {
text-decoration: none;
}
#ad {
display: inline-block;
border: 1px solid rgb(0, 0, 0);
width: 290px;
height: 45px;
font-size: 150%;
text-decoration: none;
text-align: center;
color: rgb(255, 255, 255);
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background-image: -webkit-linear-gradient(top, rgb(109, 179, 242) 0%, rgb(84, 163, 238) 50%, rgb(54, 144, 240) 51%, rgb(30, 105, 222) 100%);
background-position: initial initial;
background-repeat: initial initial;
}
#post {
display: inline-block;
border: 1px solid black;
width: 290px;
height: 45px;
font-size: 150%;
text-decoration: none;
text-align: center;
color: white;
font-weight: bold;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db3f2), color-stop(50%, #54a3ee), color-stop(51%, #3690f0), color-stop(100%, #1e69de)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* IE10+ */
background: linear-gradient(to bottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=0); /* IE6-9 */
}
#post {
display: block;
position: absolute;
top: 16px;
right: 0;
height: 46px;
line-height: 46px;
}
#post span {
display: block;
float: left;
height: 52px;
}
#post a {
color: #FFF;
text-shadow: 1px 1px 2px #FFF4D2;
font-size: 20px;
}
#post a:hover, #post a span:hover {
text-decoration: none;
}
#ad {
display: inline-block;
border: 1px solid #000;
width: 290px;
height: 45px;
font-size: 150%;
text-decoration: none;
text-align: center;
color: #FFF;
font-weight: 700;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #6db3f2;
/* Old browsers */
background: 0;
/* FF3.6+ */
background: 0 color-stop(50%, #54a3ee), color-stop(51%, #3690f0), color-stop(100%, #1e69de));
/* Chrome,Safari4+ */
background: 0;
/* Chrome10+,Safari5.1+ */
background: 0;
/* Opera 11.10+ */
background: 0;
/* IE10+ */
background: linear-gradient(tobottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=0);
/* IE6-9 */
}
Change the text shadow on #post a (And remove duplicate definitions) e.g.
#post a {
color: #FFF;
text-shadow: 1px 1px 2px #333;
font-size: 20px;
}
Demo: http://jsfiddle.net/4u4T7/5/
The text shadow makes it appear a little off, have a mock about with the text shadow and if you're not sure then use something like a text shadow generator to see a real time preview but I'd recommend using inspect element since it's better in my opinion.
Background
Colorzilla's gradient genetor is very helpful and is browser friendly. though in IE8 and below wont be that High Definition looking.
http://www.colorzilla.com/gradient-editor/
Text
Use text-shadow: 0 2px 0 #f2f2f2;
text-shadow: a, b, c, [d], e;
where a = distance from the text vertically (e.g. 1px, 2px, 0, -1px)
b = distance from the text horizontally (e.g. 1px, 2px, 0, -1px)
c = the weight of how it spreads out / smudge out / blur out (e.g. 1px, 2px, 0, -1px) in your case use 0 because you dont want it blurry looking
d = optional. great use for inner borders
e = color of the shadow
try to read on more of that to understand the syntax
HTML:
<div id="wrap">
<div id="main">
<p id="title">home</p>
</div>
</div>
CSS:
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
height:100%;
margin:0;
padding:0;
}
#wrap {
background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #0662BF));
background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #0662BF 100%);
height:100%;
padding:0;
margin:0;
}
#main {
height: 100%;
margin-right: 15%;
margin-left: 15%;
border-right: 1px solid gray;
border-left: 1px solid gray;
padding: 0px 15px 15px 15px;
background-color: #FFFFFF;
text-align: center;
}
I feel dumb asking questions like this because I feel like the answer is extremely simple, but my main div is longer than the wrap and I don't understand why. I could just make the main div shorter so it matches the wrap, but I want to do it properly.
JSFiddle
Your #main-div has a padding of 15px on the bottom.
Add this to your css:
padding: 0;
Or better modify your css-code from padding: 0px 15px 15px 15px; to
padding: 0px 15px 0px 15px;
See your updated fiddle here: http://jsfiddle.net/k7tRy/
Because of padding.
Remove bottom padding, or add to #main
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Your div #main have some padding-bottom.
In your Css class : padding: 0px 15px 15px 15px;.
It means :
padding-top: 0px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
And your div takes more than 100% because of padding property.
(Padding: Padding is extra space inside the control.)
You should/can use margin instead of padding.
<style>
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
height:100%;
margin:0;
padding:0;
}
#wrap {
background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #0662BF));
background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #0662BF 100%);
background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #0662BF 100%);
height:100%;
padding:0;
margin:0;
}
#main {
height: 100%;
margin-right: 15%;
margin-left: 15%;
border-right: 1px solid gray;
border-left: 1px solid gray;
<!-- Check the change -->
padding: 0px 15px 0px 15px;
background-color: #FFFFFF;
text-align: center;
}
</style>
<div id="wrap">
<div id="main">
<p id="title">home</p>
</div>
</div>
I agree to the above developers. It just because you are giving an extra padding at the bottom of your main div.
Just for the caution, always check the conventions while coding:
padding: top-padding, right-padding, bottom-padding,left-padding.
(Just to remember: it works in a clockwise fashion)
Hope it helps. Happy Coding :)
Trying to simulate this progress bar using css. It has two backgrounds and one of the backgrounds should only cover a part of the bar, behind the text. The width of it should be easy to manipulate to change the %.
I started with the a full bar, but really not sure how add the percentage part to it. Is it possible to do without absolute positioning?
<div class="bar">
Progress: 60%
</div>
.bar {
border: 1px solid black;
color: white;
display: table-cell;
width: 250px;
height: 50px;
text-align: center;
vertical-align: middle;
background: #003458;
background: -moz-linear-gradient(top, #003458 0%, #001727 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003458), color-stop(100%,#001727));
background: -webkit-linear-gradient(top, #003458 0%,#001727 100%);
background: -o-linear-gradient(top, #003458 0%,#001727 100%);
background: -ms-linear-gradient(top, #003458 0%,#001727 100%);
background: linear-gradient(to bottom, #003458 0%,#001727 100%);
}
Fiddle
If you just want to lighten up like your example demonstrates, overlay 2 gradients:
.bar {
background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 60%),
linear-gradient(to bottom, #003458 0%,#001727 100%);
}
Here is a demo. (Removed the vendor prefixes, you should add them again in the final code)
But the problem is, how would you know how large the bar should be? You could create several classes for each value or use JavaScript for this, but of course both solutions are not good. So like others said: Use an inner element:
<div class="bar">
<p>Progress: 60%</p>
<span style="width: 60%"></span>
</div>
CSS:
.bar {
position: relative;
border: 1px solid black;
color: white;
display: block;
width: 250px;
text-align: center;
vertical-align: middle;
height: 50px;
line-height: 50px;
background: linear-gradient(to bottom, #003458 0%,#001727 100%);
}
.bar > span {
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
}
.bar > p {
display: inline;
position: relative;
z-index: 1;
}
With that you can style the value by setting the width within the <span/>'s style attribute. Btw.: I changed the display: table-cell to block and added line-height to vertically center the text. This should work in this case because there is no line break. Besides that, position: relative does nothing on table cells.
Here is a demo.