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.
Related
`
/* Button */
.button {
margin: 1em 0em;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: #1A718A;
position:relative;
}
.button h3{
position:relative;
top:3.4em;
left:.5em;
color: white;
font-weight: 400!important;
font-size:.9em!important;
z-index: 1;
}
.circle:hover {
position:relative;
top:1em;
left:3em;
}
<div class="button">
<div class="text"><h3>- View <span>Work</span></h3></div>
<div class="circle"></div>
</div> <!--button-->
`How do I create this hover button Using HTML, css and javascript.
The circle moves to the right(no effects) whilst the view turns grey and the work turns white(inverse).
Also a code newbie :)
Default State
Hover state
Thankyou
Recreation
HTML
We want to animate an element and its text "- View Work", so the simplest HTML we can have is:
<p>- View Work</p>
Styling
Default style
We can then style it as much as necessary. To place the line in the middle, we can trick a little by setting line-height to the element's height with a bit of JavaScript:
const p = document.querySelector('p');
p.style = '--height:' + getComputedStyle(p).getPropertyValue('height');
p {
position: relative;
border: 1px solid black;
color: black;
background-color: #f3f3f3;
width: 14rem;
height: 10rem;
font-weight: bold;
font-family: sans-serif;
text-align: center;
line-height: var(--height);
text-transform: uppercase
}
<p>- View Work</p>
With flashlight-effect
Now we want to add the circle, in which the text's color is different.
We could probably use mix-blend-mode in some way, however I don't understand it well enough to make it work with it.
Because of that, we fall back to using pseudo-elements (more specifically, ::after).
The pseudo-element needs to ...:
... have the same text in a different color, and have the texts overlap
... be big enough to fit the revealing circle in all its positions inside
... clip out the rest not inside the revealing circle
The first two bullet points are as simple as styling the pseudo-element and the parent mostly the same way.
To get the text, we can again use JavaScript by setting a custom data-attribute (e.g. data-text) to have the text. The pseudo-element can then display the text with content: attr(data-text).
For the revealing circle, we give the pseudo-element a background-color. Then, we use clip-path to cut out what should be "revealed".
And on hover, we transition between two different positions of the revealing circle.
const p = document.querySelector('p');
p.dataset.text = p.innerText;
p.style = '--height:' + getComputedStyle(p).getPropertyValue('height');
p {
position: relative;
border: 1px solid black;
color: black;
background-color: #f3f3f3;
}
p, p::after {
width: 14rem;
height: 10rem;
font-weight: bold;
font-family: sans-serif;
text-align: center;
line-height: var(--height);
text-transform: uppercase
}
p::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: white;
background-color: #1A718A;
clip-path: circle(3rem at 70px 55px);
transition: clip-path 0.15s;;
pointer-events: none;
}
p:hover::after {
clip-path: circle(3rem at 155px 100px);
}
<p>- View Work</p>
End note
This sample-code only works for one-liners, and requires the element to have a fixed size.
The effect can also be achieved by using mostly JavaScript, where one could mock-up such
a pseudo-element with actual HTML-elements, and then overlay said element over the original.
I'm working on the display portion of a calculator. I have a div, with two divs, each with text, inside it.
<div>
<div>I'm text</div>
<div>I'm text</div>
</div>
The user can use buttons to add text to the divs. I want the top div to be a maximum of two lines and vertically-aligned to the bottom. When it exceeds this length, the overflow should be out of the top and hidden. I.e. the overflow should show the bottom part of the excessive text, and hide the top part.
I have searched similar questions relating to hiding images or links and tried their solutions. These generally revolve around using the following properties: position, width, height, bottom, overflow, vertical-align, word-wrap. I've understood most of these, but haven't been able to get them to work. One solution I haven't been able to successfully attempt appears to try and use some combination of the above with an additional nested div.
At this point, I've got the height & width controlled. The top div will only display two lines of text. I also have the overflow working. When it's too long, it is hidden.
The problem is that the bottom is hidden, instead of the top.
This is what it looks like. Notice the twos aren't visible, they're hidden:
This is what I want. Notice the twos are visible:
Here's relevant HTML & CSS, and below that is the link to a codepen if you need more information:
HTML (trouble div is #memory):
<div id=calculator>
<div id=displaybox>
<div id=memory>
0
</div>
<div id=display>0</div>
</div>
</div>
CSS:
#calculator {
border-style: solid;
height: 325px;
width: 260px;
margin:auto;
margin-top:10px;
border-radius:8px;
background-color: #494949;
font-family: 'Audiowide';
}
#displaybox {
border-style:solid;
border-width:3px;
width:227.5px;
margin-left:12px;
margin-right:auto;
border-radius: 8px;
text-align:right;
margin-top:20px;
padding-right:12px;
padding-left:3px;
font-size:30px;
background-color:#D4D7A1;
height: 75px;
}
#memory {
font-size:15px;
padding-right:3px;
line-height: 15px;
margin-top:5px;
padding-left:12px;
color:#767676;
margin-bottom:-7px;
word-wrap: break-word;
height:30px;
width:207px;
overflow:hidden;
vertical-align: top !important;
}
Codepen: https://codepen.io/ethan-vernon/pen/WyQqzM"https://codepen.io/ethan-vernon/pen/WyQqzM
This change to the #memory block did it:
Added display: flex and flex-flow: column-reverse
#memory{
font-size: 15px;
padding-right: 3px;
line-height: 15px;
margin-top: 5px;
padding-left: 12px;
color: #767676;
margin-bottom: -7px;
word-wrap: break-word;
height: 30px;
width: 207px;
overflow: hidden;
display: flex;
flex-flow: column-reverse;
}
I have not found an answer yet still for CSS/HTML solution. However, I turned to jQuery/JavaScript and have solved my problem by calling the below function after each update to the #memory div.
function heightCheck(str) {
console.log(str.substr(1));
console.log('memory: ' + $("#memory").height());
while ($("#memory").height()>30) {
str=str.substr(1);
$("#memory").text(str);
console.log(str);
console.log($("#memory").height());
}
}
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!
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
first of all I would like to thank the members of this community for the huge amount of help I
found here in last few month. There wasn't a single project of mine which I finalized without your tips and tricks.
Right now I got a problem with a responsive layout where I need your kind help:
I got a layout like this:
http://codepen.io/Buzzjump/pen/tfeys
<div class='outer'>
<div class='sidebar_links'>Div1</div>
<div class='mitte_rechts'>
<div class='d2'>Div2</div>
<div class='d1'>Div3</div>
</div>
</div>
Now the current CSS
div{
display:inline-block;
background-color:#cdcdcd;
margin:0px; 0;padding:0px;width:150px}
.d1{
float:right;
background: blue;
color: white;
}
.d2{
background: orange;
}
.mitte_rechts{
padding:0;
width:70.81%;
float: left;
margin-left:0px;
}
.sidebar_links{
height: 200px;
float: left;
background: red;
}
.outer{
height: 230px;
min-width: 80%;
background-color:yellow;
margin-left: 20px;
overflow: hidden;
}
There is an outer box (outer) and two inner boxes (Div1 and mitte_rechts). In 'mitte_rechts' there are two more boxes(Div 2, Div3) and they are all aligned. What I want is that when the window is scaled down to a breakpoint (768) first Div3 is display under Div2 in mitte_rechts. Maybe I'm just blockheaded but is there a solution for this?
To this point no JS is used.
Thanks in advance.
Try out the following:
.d1 {
float: right;
background: blue;
color: white;
}
.d2 {
background: orange;
float: left;
}
#media screen and (max-width: 768px) {
.d1, .d2 {
float: none;
display: block;
}
}
By the way: You don't need inline-block on your divs. Inline-block is an alternative to floating. So either use floating or inline-block. I'm not a fan of inline-block because IE6 and IE7 don't support it.
try the following:
1) remove width:70.81%;' from '.mitte_rechts
2) add the following styling:
.d1, .d2{
float:left;
}
#media (min-width: 768px){
.mitte_rechts{
width:70.81%;
}
.d1{
float:right;
}
}