I'm learning web design and I'm struggling to position a button. I'm a beginner and trying to recreate league of legends client which is pretty simple in browser just for exercise, but I don't know how to use javascript and I can not find the solution online.
So this is how I want it to look: https://prnt.sc/pos3gf
I've tried to add logo and button in list and then display: inline but that doesn't really work or I just don't know to make it work.
This is my code
https://codepen.io/simic21/pen/poowQXK
I removed all of the CSS before /*====== REGION ======*//* Dropdown Button */ and replaced it with this:
.logo {
display: inline-block;
}
.region {
display: inline-block;
}
That will display the logo and region divs side by side. Now the only thing left is to add the rest of your desired styling such as padding or margin.
Add to your .region class display:inline-block and the same to your .logo class:
.region {
padding: 20px;
display:inline-block;
}
.logo {
padding: 40px 0px 0px 50px;
display:inline-block;
}
<div class="centered">
<div class="logo">
<img src="assets/img/logo.png" alt="logo">
</div>
<div class="region">
<button onclick="myFunction()" class="dropbtn">
<strong>EUNE(EN)</strong></button>
</div>
</div>
Related
Right now I am trying to make my modal responsive but the "SAVE" button is not positioning as i want it to.
I want to have the button at the same position all the time, but right now it is disappearing.
My HTML and css looks as the following
.delete{
font-size: 16px;
max-width: 100%;
max-height: 60vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.delete .text-div{
padding: 3px;
}
.delete .button-div{
display: inline-block;
position: relative;
padding: 3px;
/* right: 50%;*/
left: 80%;
}
<div class="delete">
<div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0">
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">Delete Entry</span>
<button mat-icon-button (click)="onClose()" aria-label="Close dialog">
<mat-icon>close</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
</div>
<div class="text-div">
<span>Are you sure you want to delete this vacation entry?</span>
</div>
<div class="button-div">
<button mat-raised-button color="accent" class="button" (click)="buttonClick();onClose()">SAVE</button>
</div>
</div>
First off, you don't need to wrap single elements into divs, it's not a very good practice regarding accessibility.
Regarding your question, where exactly do you want your button to be? If its position is set to relative, it will be positioned relative to the nearest positioned ancestor. That means that you need to put a position property to the .delete div (usually, relative will suffice).
Another way to achieve what you want (if I understand it correctly) would be adding align-self: end to the button element, since it's wrapped inside a flex container.
I'm trying to get the following multi-item carousel to scroll smoothly to the next item. Right now, it jumps to the next item when clicked, but I would like it to transition/ease - or go smoothly - to the next section.
<style>
body {
width: 1400px;
}
.Blog {
position: relative;
background-color: #000;
}
.inner {
overflow: hidden;
font-size: 0;
white-space: nowrap;
}
.Blog-item {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display: inline-block;
}
.controlDiv {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
text-align: center;
}
.control {
color: #fff;
font-size: 20px;
display: inline-block;
padding: 4px;
}
</style>
<div class="Blog">
<div class="inner">
<div class="Blog-item" >
<img src="http://placehold.it/727x356?text=1" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=2" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=3" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=4" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=5" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=6" alt="" />
</div>
</div>
<div class="controlDiv">
<a class="control control-left glyphicon glyphicon-menu-left" href=""></a>
<a class="control control-right glyphicon glyphicon-menu-right" href=""></a>
</div>
</div>
<script>
$(document).ready(function () {
$('.control-right').click(function () {
$(this).blur();
$(this).parents('.Blog').find('.Blog-item').first().insertAfter($(this).parents('.Blog').find('.Blog-item').last());
return false;
});
$('.control-left').click(function () {
$(this).blur();
$(this).parents('.Blog').find('.Blog-item').last().insertBefore($(this).parents('.Blog').find('.Blog-item').first());
return false;
});
});
</script>
Here's the fiddle: http://jsfiddle.net/bcw8dysawk/z1wo4uy6/3/
If I understand you correctly, I think you are after something like this:
http://jsfiddle.net/uh2skm0e/
I basically used jQuery's animate function to animate elements on the page and inserted a modified version of your original code into the animate's callback function.
I completed the 'next slide' operation by modifying the margin-leftcss attribute and the 'previous slide' operation by modifying the left css attribute.
You can see both options and pick your preferred method (left is generally used).
I also needed to add a position:relative to the .Blog-item css rule since the script manipulates z-index and this requires elements to have an explicit CSS position.
Two things to mention:
1) My solution is a pure JavaScript solution. You can look into using the transition CSS attribute to achieve animations without the need for JavaScript, but you may need to reorganise your code slightly (which leads me onto my next point)
2) Usually with sliders, the element positions are not actually changed in the markup...it's only the visibility settings (display CSS attribute) that are changed. So when 'slide 2' displays, all slides are set to display:none except for 'slide 2'. This means all you need to do is use JavaScript to add a class to the visible slide and it will display...couple this with the transition CSS attribute and you can easily achieve some good effects.
Let me know if this is what you were after.
I'm trying to get the icon to display in the middle of the words 'some text'.
Could anyone advise?
http://jsfiddle.net/LZxxB/50/
<div>
<div style="display:inline-block;">some</div>
<span class='ui-btn-icon-notext ui-icon-arrow-u-l' style="display:inline-block;"></span>
<div style="display:inline-block;">text</div>
</div>
Here is one way to do it. You basically make an icon button that is not a button.
The HTML:
<div>
<div style="display:inline-block;">some</div>
<span class="ui-nodisc-icon ui-alt-icon nonbuttonicon" >
<span class="ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-inline"></span>
</span>
<div style="display:inline-block;">text</div>
</div>
The CSS:
.nonbuttonicon .ui-btn {
background: transparent;
cursor: default;
border: 0;
margin: 0;
}
.nonbuttonicon .ui-btn:hover{
background: inherit;
}
DEMO
UPDATE:
Here is a way without using jQM buttons and a single span:
<div>
<div style="display:inline-block;">some</div>
<span class="ui-alt-icon ui-icon-delete ui-btn-icon-notext inlineIcon"></span>
<div style="display:inline-block;">text</div>
</div>
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
}
.inlineIcon:after{
background-color: transparent;
}
Updated DEMO
An if you like the white icon on top of the round disk, the CSS becomes even simpler:
<span class="ui-icon-delete ui-btn-icon-notext inlineIcon"></span>
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
}
DEMO
These lines of code will reset the jquery mobile css that is displaying it differently. You might need to tweak it a little bit to fit your needs.
div span.ui-icon-arrow-u-l:after {position:relative;}
div span.ui-icon-arrow-u-l {display:inline-block;height:30px;margin-top:0;width:16px;}
Hope this helps.
I created a notecard image where i overlayed multiple images on top of it. These are elements of the notecard. I want it so that when I hover over the notecard, I can completely change the contents on the notecard image (overlaying new things onto the notecard).
So right now, I have this right now:
<div style="position:relative;">
<a href="#games">
<img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/>
<img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/>
<img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/>
</a>
</div>
Where the notecard changes into a "hovered" version, but I am unable to change anything else. I want it so that whenever the mouse pointer is in the notecard (including if its on other elements inside the notecard), the contents change. I want to completely scrap the contents of it (so the title and icon) and change it so I can add text and overlay new images.
How can I do this in JS/HTML/etc?
If the two versions (hover/non-hover) are significantly different (and you want a no-js solution), you could have two divs, one set to hide, one set to show. Then on-hover, you change their visibility. Fiddle.
<div class="card">
<div class="no-hover">
stuff you want to show when the user is just looking
</div>
<div class="on-hover">
stuff you want to show when the user hovers
</div>
</div>
CSS:
.no-hover {
display: block;
}
.on-hover {
display: none;
}
.card:hover > .on-hover {
display: block;
}
.card:hover > .no-hover {
display: none;
}
It's extra HTML elements, but might be easier to maintain.
Based on your comment to Learner's answer, here is an example of the idea you are describing:
HTML:
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS:
.outer {
width: 304px;
height: 304px;
background-color: black;
}
.inner {
float: left;
width: 150px;
height: 150px;
background-color: red;
border: 1px solid black;
display: none;
}
.outer:hover .inner {
display: block;
}
DEMO
If you are trying to achieve something like this:
http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm
Here's your solution:
http://www.robertkuzma.com/2011/01/jquery-animated-swap-div-content-on-hover-effect/
How to align two pictures so that they are center of the div when using JqueryMobile and as far from the both sides? --p--p--
<div class="ui-grid-a" style="margin: 10px;"">
<div class="ui-block-a" id="pic" align="center">
<img src="images/image1_100x100.jpg" data-theme="c" id="pictureId"/>
</div>
<div class="ui-block-b">
<label> </label>
</div>
<div class="ui-block-c" id="pic" align="center">
<img src="images/image2_100x100.jpg" data-theme="c" id="pictureId2"/>
</div>
</div>
<style>
div#pic { color:red; border:4px solid grey; border-radius: 15px; width:130px; height:130px
text-align:center; background-color: white; margin: 0 auto;}
</style>
Second question is that what is the correct way to make a gap between divs? I am using now empty div, but I think that there might be something better?
Cheers,
Sami
You can always add css to that and overwrite the JQM stuff when you insert your css after the JQM css links.
I took your code and modified it a little bit so it should give you a starting pont. I don't know if any of your or JQM css interferes with that as I can't try out right now.
The CSS in my case is in no way smaller because of all the compatibility css (prefixed properties). But the advantage is that box layout is a lot more flexible in that it also allows to center the content in 2 directions and also allows for sorting and alignment.
http://www.w3.org/TR/css3-flexbox/
This is just an alternative.
http://dabblet.com/gist/3132163
I got it working. I guess it is not so sophisticated solution, but it is working.
.pics {
background-color: white;
border-radius: 15px;
border: 4px solid grey;
height: 130px;
padding: 0px;
text-align: center;
width: 130px !important;
}
.picLeft {
float:left;
margin-left: 10px !important;
}
.picRight {
float:right;
margin-right: 10px !important;
}
I am open to any better solutions and thanks Torsten!
Sami