I have Flipclock working fine on my website, but I need to change the "days: Hourrs: Minutes:" text to white, but can't find what css to add/amend
also (I'm using bootstrap3) I can;t get the Flipclock to center in a div. I currently have the following code:
<div class="col-md-12 text-center">
<div class="clock center-block" style="margin:2em;" align="center"></div>
But the clock stubbornly stays to the left.
Thanks for any advice
Change header text to white (edited):
.flip-clock-wrapper .flip-clock-divider .flip-clock-label {
color: #FFF;
}
Class .center-block from Bootstrap applies margin: 0 auto; and you're overwriting that with style="margin:2em;". Remove that style and the clock should center appropriately. You may need to set an explicit width on the clock. FlipClock's website uses a default of 460px:
.flip-clock-wrapper .clock {
width: 460px;
height: 116px;
margin: 0 auto;
}
There is a pretty advanced solution here! It will allow you to change the all colours and shadows in addition to the size.
resizing flipclock.js not resizing as expected
Related
<div style={{textAlign:'center !important',margin:'0 auto !important'}}>
<img className="lazy" src={require("../images/dragonfire.jpg")} style={{display:'block !important', margin:'auto !important', position:'absolute', left:'0',right:'0',top:'0',bottom:'0',height:'40em',width:'40em'}}/>
</div>
I have looked through a lot of posts here and external sites as well on this topic and it seems that nothing is working. I have a big image that I just want it to be centered in the screen view. The div is a background for the banner on a page. I can get it to the right size but it just shows the left half of the image, I cannot get it to center and just cut off the left and right sides depending on the sides of the screen.
Try removing:
left:'0',right:'0',top:'0',bottom:'0'
This is fixing the position of your image to the top-left corner.
Also as #Daniel has mentioned in the comments, change the position:absolute to relative since it restricts the flow of the content inside the div.
Here is the working model:
div{
background: red; /*Just for clarrification case*/
textAlign: center !important;
margin: 0 auto !important;
}
img{
display: block !important;
margin: auto !important;
position: relative;
height: 100px;
width:100px;
}
<div>
<img className="lazy" src="http://mxtrianz.me/wp-content/uploads/2017/05/small-pictures-20-the-data-lab.jpg"/>
</div>
P.S. Comment on your code: Please try using external or internal styling and refuse using inline styling as it reduces the readability of your code.
Here is an example: http://jsfiddle.net/7zhLm/5/
The image inside is larger than the div supports.
Therefore it is cropping the rest (overflow-x: hidden).
I am trying to create a white border around the image, but it doesn't seem to work.
After checking what's going on there with dev tool I saw that the lower part overlays the white border.
How to I fix that?
I see you're using both overflow-x and overflow-y. You can just use overflow:hidden; as it works on any browser while -x and -y are not supported by older ones.
Anyway, to avoid it you can add another <div>. Check the live demo, and here is the updated code:
<div id="fixed_event_1" class="splashTabLogout" >
<div>
<img src="http://www.twospy.com/galleriffic/demo/Sample%202.jpg" width="300" />
</div>
</div>
.splashTabLogout {
width: 300px;
height: 100px;
cursor: pointer;
background: #fff;
padding: 10px;
/* border-radius and box-shadow stuff */
}
.splashTabLogout > div {
max-width:100%;
max-height:100%;
overflow:hidden;
}
JSFiddle
You tried to set a border with a padding. Change it to a 10px white border.
The HTML you have is fine. It's semantic, simple -- don't change it. Change the details about it, and fix the CSS, and you'll be rockin': http://jsfiddle.net/7zhLm/9/
CSS
.splashTabLogout {
border: white solid 10px;
border-radius: 3px;
box-shadow: rgba(0,0,0,.22) 0 2px 6px;
overflow: hidden;
}
.splashTabLogout img { width:300px }
HTML
<div id="fixed_event_1" class="splashTabLogout" >
<img src="your-pic.jpg" />
</div>
Note: Including width/height inside an img tag is valid. Period. In a gallery of images, or anywhere else, where you may have multiple images with the same dimensions, it's often easier, and less code to declare the width/height from the CSS file. FYI
I want to wrap an image into an html DIV and, since I want this to be fully scalable with the size of the window, I want to set the width of the DIV in percentage as follows:
html
<div id="wrapper">
<img src="http://openclipart.org/people/netalloy/rally-car.svg" />
</div>
css
#wrapper {
position: absolute;
width: 50%;
}
#wrapper img {
width: 100%;
}
The image should determine the height of its container. This is because the image width is set to 100% and the image height is calculated accordingly maintaining the correct aspect ratio.
The result is visible on jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/
My questions are:
Why do all modern browsers render the wrapper DIV 5px taller than the inner image?
How can I get rid of this 5px gap, while still setting all the sizes in percentage and without using javascript?
Surprisingly, this happens in Chrome (21.0.1180.89), Firefox (15.0.1) and IE8, while IE7 renders it correctly, matching the height of the DIV with the height of the image.
Check this out :
http://jsfiddle.net/5BN4g/29/
It's a line-height issue :-)
You need :
#wrapper {
width: 60%;
background-color: #aaa;
margin: 50px auto;
line-height:0;
}
#wrapper img {
width:100%;
border: 1px dashed red;
box-sizing:border-box;
}
I used box-sizing to make sure the width of the image doesn't overflow the container
................
Hi now add vertical-align:top in your img tag throw css
as like this
#wrapper img {
width: 100%;
border: 1px dashed red;
vertical-align:top; // add this line
}
live demo
OK, fiddling about, I found a good possible solution:
#wrapper img {
display: block;
width: 100%;
border: 1px dashed red;
}
Changing from the default inline display to a block display eliminates the line-height problem straight away.
This approach is also semantically correct because in this case what we really want is a single image wrapped in a DIV without any other elements in it, so the concept of line-height needs to be completely wiped off by displaying the image as a block.
It works on all major browsers: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/
I think you shuold set align property to force browser show correctly img tag.
<div id="wrapper">
<img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
</div>
DEMO
I think is because it doesn't see as a Table
i added the display:table in your code
And it looks fine now, check the link
Example Display Table
Your issue is that an image -- the <img> tag, to be exact -- is an inline element. All you need to do is set display: block on the image and the extra padding goes away. Demo.
as the title suggests, I am trying to center the source of an image in it's image tag. The images kinda must have a 212px width, and the img tag has a width of 210px.
So instead of losing both 1px collumns from the right, is it possible to lose 1 from the left and 1 from the right?
Thanks in advance.
EDIT: my image gets compressed as it seems, not cropped, which is even worse :)
You could add a border via CSS:
img {
border: 1px solid white; /* or same colour as your site's background */
}
Or alternatively put a containing element around the image, e.g.
<div class="img"><img src .. /></div>
.img {
text-align: center;
width: 212px;
}
I would recommend wrapping the image tag inside a div. You would then set the div to have a width of 212px then set the image tag to have:
margin: 0 auto;
This line tells the image to have 0 margin on the top and bottom of the image and the auto parameter for the left and right margins forces the browser to center the element inside its containing element, in this case the div wrapper.
The best way to do this is to contain the image within a div:
<div id="image_container">
<img id="img" src="/whatever.jpg"/>
</div>
CSS:
#image_contrainer{
width:212px;
text-align: center;
}
#img{
width:auto;
margin:auto;
}
This may not be exact, but its the correct idea to do this sort of thing. Just play around until it works.
I've got a div called titlebar. This titlebar has a width of 100%. Inside my titlebar I want to center a title and next to my title I want to display an icon. So the title + icon combo should lay next to each other AND be centered.
This should not be that difficult, but the problem is that I'm using image-sprites, so I can't use the <img>-tag (I need the icon to be the background of some element).
Anyone got an idea of how to solve this?
This is about as far as I've come (no real success):
http://jsfiddle.net/Tw33Y/2/
This is fairly easy to achieve in modern browsers. If this is your HTML:
<div class="titlebar">
<div class="title-sprite"></div>
Title Text
</div>
Then use this CSS to style it:
.titlebar {
text-align: center;
}
.title-sprite {
display: inline-block;
width: 16px;
height: 16px;
background: url(http://www.alistapart.com/d/sprites/sprites.gif) -36px -24px no-repeat;
}
This will not work in IE7 or earlier, you will need to add some hacks if you need them to work.