I created a warning message or div generally that shows when we checkout for domain purchase.
But when I create my own CSS
The lock icon does must show to the left of the text but shows inline.
Add float:left; to <i>
And Mention approx height to occupy space for <i>. I have given height: 100px; here.
.ftralert{
width:50%;
padding:15px;
margin-bottom:20px;
border:1px solid transparent;
border-radius:0px
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}
.ftralert-warning{
color:#8a6d3b;
background-color:#fcf8e3;
border-color:#faebcc;
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}
.ftralert-warning i {
float:left;
margin-right:30px;
height: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ftralert ftralert-warning">
<i class="glyphicon glyphicon-lock" style="font-size:24px;"></i>
This ORDER FORM is provided in a secure environment and to help protect against fraud your current IP address (<strong>223.187.232.6</strong>) is being logged.
</div>
Hope this helps :)
You added your icon inline. Make it a separate div, as well as the text, and set the divs to inline block with a set width that adds up to 100% (for example, 20% & 80%, adjust to your needs).
https://www.w3schools.com/css/css_inline-block.asp
https://jsfiddle.net/kh2yn0xa/6/
.ftralert{
padding:15px;
margin-bottom:20px;
border:1px solid transparent;
border-radius:0px
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
/*remove inline gap*/
font-size: 0;
}
.ftralert-warning{
color:#8a6d3b;
background-color:#fcf8e3;
border-color:#faebcc;
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}
.ftralert > div {
display: inline-block;
vertical-align: top;
font-size: 12px;
}
/* adjust for your icon */
.ftralert > div:first-child {
width: 20%;
}
.ftralert > div:last-child {
width: 80%;
}
<div class="ftralert ftralert-warning">
<div>
<i class="glyphicon glyphicon-lock" style="font-size:24px;">Icon</i>
</div>
<div>
This ORDER FORM is provided in a secure environment and to help protect against fraud your current IP address (<strong>223.187.232.6</strong>) is being logged.
</div>
</div>
Related
In this input-group,as you can see there's unnecessary gap inside input field and I want to get rid of it
As you can see above,this black line is the distance between my number and link button.How can I remove it?
.resetToDef{
display: block;
width:25.8%;
max-width: 195.1px;
border-radius: 4px;
border: 1px solid #FF7921;
}
.resetToDef a{
font-size:12px;
color:#FF7921;
border: none;
text-decoration-line: underline
}
.resetToDef input{
display:inline-block;
width:57px;
border:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="resetToDef input-group">
<input type="number" class="form-control" placeholder="30">
Back to default
</div>
From your snippet :
The width is automatically calculated by flex. So if you remove flex, you can then play with the width and the padding.
.resetToDef.input-group > input.form-control {
flex: none;
width: 52px;
padding-right: 5px;
}
Resulting in :
Beware that the little arrows may not look exactly the same size from browser to browser.
So I have a html page and a fixed image as my header but i want to also have a fixed navbar right underneath where i can have buttons that link to another page on my server
here is my code
<!DOCTYPE HTML PUBLIC>
<title>Equinox Web Chatroom Server</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:500%;
height:header-<length>;
}
#media screen{
body>div#header{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div
id="header"><img src="http://192.168.0.143/images/header.png" width="1700" height="46" alt="logo"<br>
<p>
<table>
<tr>
<td bgcolor= "black">Server Index Chat Room</td>
</tr>
</table>
</p><br>
</div>
If you want to fix elements in place in relation to the viewport, then the CSS position: fixed property is the right way to go.
This might be what you're trying to do: http://jsfiddle.net/hh1kuxyh/
As you scroll up and down you'll notice the header and navigation bar stay in place.
HTML
<div id="container">
<div id="header"><h2>HEADER IMAGE</h2></div>
<div id="navbar"><span>NAVIGATION MENU</span></div>
</div>
<div id="main-content">
<p>lots of text here</p>
</div><!-- end #main-content -->
CSS
* {
margin: 0;
padding: 0;
}
#container {
width: 98%;
height: 230px;
position: fixed;
top: 0;
}
#header {
height: 150px;
background-color: chartreuse;
text-align: center;
}
#header h2 {
padding-top: 25px;
}
#navbar {
height: 75px;
background-color: #aaa;
text-align: center;
border: 2px solid black;
}
#navbar span {
line-height: 75px;
font-weight: bold;
}
#main-content {
margin-top: 235px;
}
If you want to fix an element in place in relation to another element, then you may need to use a bit of jQuery. http://jsfiddle.net/8086p69z/8/
Also see my two answers here:
Position fixed within container element instead of the browser / viewport
Lastly, I tried to work with your code but it contained many errors. For example, your code block is missing the <html>, <body> and <head> elements.
Always run your code through the W3C Mark-Up Validation Service to check for errors and standards compliance.
Hope this helps. Good luck!
In my case I have a popup "window" with a title and a close button which is controlled with some script. What I want to do is to put gallery of divs with left-float so when the screen resizes they will stacked accordingly (eg. in very small screens they will go just 1 under another) so that's why I think that float is the best option here.
I am not sure how to do it and I would like your help as I want it to be to the center covering a specific percentage of area (so it can be more responsive). I would like you to just tell me what steps I should follow.
I was thinking on making a custom class .gallery set float to left but I don't know how to set everything else in order to work nice.
HTML
<script> document.write('<div class="js">'); </script>
<nav><ul><li id="buttonc">click</li></ul></nav>
<div class="vidar-bg">
<div id="vidar">
<span>my divs×</span>
</div>
</div>
<script> document.write('</div>'); </script>
CSS
.js .vidar-bg{
position:fixed;
left:0;right:0;
top:0;bottom:0;
z-index:100;
background-color:rgba(50,50,50,0.5);
display:none;}
#vidar{
position:absolute;
top:50%;
left:50%;
z-index:101;
width:80%px;
height:80%px;
left:10%;right:10%;
top:10%;bottom:10%;}
#vidar span{
display: block;
background:#5DC3A7;
padding: 10px;
color: #fff !important;
background: #f00;
z-index:100;}
#closevid{
float: right;
color: #fff;
font-family: serif;
font-size: 18px;}
#closevid:hover{color: #000;}
Live code here: http://codepen.io/mariomez/pen/OPBVxY
thank you all in advance for your help :)
This CSS should do it:
.gallery-item {
width: 150px;
height: 150px;
background-color: #F00;
color: #FFF;
text-align: center;
font-size: 2em;
line-height: 150px;
margin: 5px;
float: left;
}
Then you just have to add the following HTML to your page:
<div id="gallery">
<div class="gallery-item">DIV</div>
</div>
Actually, most of the CSS properties are there just to create the red square with centered white text in the image you provided. To do what you want you just need the float: left property like you said yourself.
I am using enjoy instagram plugin. I made indicators display none. I have page navigation previous and next which is center aligned.
I wrote link more using a tags below the page navigation not included in plugin. Such that it will redirect to instagram page. Now I would like to make more tag in same line of page nav.
So i gave margin-top -25px such that they are in same line but the link is not working. I created a div for more link and made it to float right,gave width:60px, margin-top:-25px , height:20px, display:inline-block. I have not made any changes in plugin. I wrote more link when plugin code ends. If any one have solution kindly help me.If any errors in grammar and spelling forgive me.If instamor div is moving to plugindiv then more link is not working.
Thanks in advance.
<div class="insta_block">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar( __( 'Instagram Section', 'aasim' ) ) ) : ?>
<?php endif; ?>
<div class="insta_more_link">
More...
</div>
</div>
css
.insta_block{
width: 100%;
height: auto;
/* background: #ff0;*/
padding:0 20px;
}
.insta_block .widget-container {
margin-top: 30px;
}
.owl-item .box img{
width:98%;
}
.owl-pagination{
display:none;
}
.owl-theme .owl-controls .owl-buttons div{
background:#0c4c8c!important;
opacity:1!important;
font-weight:600;
}
.insta_more_link {
font-weight: 600;
float: right;
width:60px;
display: inline-block;
height:20px;
margin-top:-25px;
}
.insta_more_link a{
color:#0c4c8c;
}
.
insta_more_link {
font-weight: 600;
/* float: right;*/
width:60px;
/* display: inline-block;*/
height:20px;
position:absolute;
right:0;
bottom:0;
}
.insta_block{
width: 100%;
height: auto;
/* background: #ff0;*/
padding:0 20px;
position: relative;
}
By making main div relative and making my morediv positon absolute I got it
I have a div and I want to be both inline-block and display none, but I have to choose one of them.
My HTML:
.like_user_wrapper{
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
display:none;
}
It's not a good idea to have the div just hide using JavaScript
Just use visibility: hidden;
#like_user_wrapper{
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
visibility: hidden;
}
Note this is using a custom ID (#...) , not a class (....)
If you want is to become visible at some point, you can use this JavaScript property with that ID:
document.getElementById('like_user_wrapper').style.visibility='visible';
This can be included in a onmouseover="", or a javascript function etc, so it appears when you want it to. This can be implemented in html like this:
<!DOCTYPE HTML>
<html>
<head>
<style>
#like_user_wrapper {
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
visibility: hidden;
}
#hover {
width: 80px;
height: 50px;
background-color: red;
}
</style>
</head>
<body style="background-color:blue;">
<div id="like_user_wrapper">Like User Wrapper</div>
<br><br>
<div id="hover" onmouseover="document.getElementById('like_user_wrapper').style.visibility='visible';" onmouseout="document.getElementById('like_user_wrapper').style.visibility='hidden';">Hover over me</div>
</body>
</html>
Help page on the visibility CSS property here
N.B. In most browsers, by default a DIV has the display property block, so you might not need inline-block - you could just wrap it in a <div> with that property anyway.
If you are trying to hide and show the element using jQuery, to display it back avoid using jQuery.show().
Instead do $('.like_user_wrapper').css({'display': 'inline-block'}); to display the element.
On the other hand, to hide it is ok to just do $('.like_user_wrapper').hide();
And remove the display: inline-block from your css.