I'm making a menu selection bar, and I'm running into a problem when I mouse over. The icon's corners should all be curved, but only the left hand side ones are.
Here's a demo of the code: https://jsfiddle.net/gfqgcwq5/
From what I can tell, it seems like inline-block is the culprit here:
.wrapper{
display:inline-block;
margin:10px;
}
I just don't know how to accomplish the inline array without it. I'm not great at css, so if someone could lend me a hand, I'd appreciate it.
try this one:
.icon{
border-radius:8px;
padding-top:15px;
padding-bottom:5px;
transition:.1s;
font-size:60px;
display: inline-table;
}
.icon:hover{
cursor:pointer;
background-color: #00B1EB;
color:#fff;
}
span#picture > span {
padding-right:9px;
padding-left:10px;
padding-top:7px;
padding-bottom:10px;
}
.text{
text-align:center;
}
.wrapper{
display:inline-block;margin:10px;
}
DEMO HERE
Used to this
Define your .icon display inline-block
as like this
.icon{display:inline-block;line-height:60px;}
or you can used to
.icon{display:block;}
Demo
Remember that the border-radius is a property (in this case) of the .icon class, if you use the inspector you will see that the wrapper has the proper size and shapewraper
So as the other says the issue is on the display of the .icon class, If your idea is to have more than one .icon elements inside of the wrapper and inline, you should use display: inline-block;, if your call is to have just one per wrapper use display: block;.
Hope this helps you.
You gotta give icon block display: inline-block property in order to work !!
.icon {
border-radius: 8px;
padding: 15px;
padding-bottom: 5px;
transition: .5s all ease;
font-size: 60px;
display: inline-block;
}
.icon:hover {
cursor: pointer;
background-color: #00B1EB;
color: #fff;
}
span#picture > span {
padding-right: 9px;
padding-left: 10px;
padding-top: 7px;
padding-bottom: 10px;
}
.text {
text-align: center;
}
.wrapper {
display: inline-block;
margin: 10px;
}
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
<div class="text">PICTURES</div>
</div>
<div class="wrapper">
<span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
<div class="text">PICTURES</div>
</div>
<div class="wrapper">
<span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
<div class="text">PICTURES</div>
</div>
<div class="wrapper">
<span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
<div class="text">PICTURES</div>
</div>
Apply padding for the text div to allow the entire curve to visible.
.text{
text-align:center;
padding:0px 7px;
}
DEMO
Related
I am trying to align my items list to the right side of the web page. Also, I wanted to have a vertical thin separator between the left and center data structure (hierarchy) and my right list.
Right.component.html :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header-divider">
<ul class="selection-list">
<li *ngFor="let item of getSelections()">
<button class="btn" (click)="deselect(item)" *ngIf="item.selected">
<i class="fa fa-close"> {{ item.displayName }} </i>
</button>
</li>
</ul>
</div>
Right.component.css :
.selection-list {
list-style: none;
margin-top: 5px;
margin-bottom: 10px;
line-height: 15px;
font-size: 16px;
color: #555;
padding-left: 23px;
text-transform: capitalize;
right: 0;
}
.btn {
border: none;
padding: 0;
background: none;
}
.header-divider {
border-left:1px solid #38546d;
height:30px;
position:relative;
right:20px;
top:10px;
}
Right now, it just appears below my hierarchy structure. What should I do to fix this?
I always favor the use of flexbox which is a great simple way to use all available space inside a container. This is how I would do it:
-----(Edited)-----
.flex-container {
display: flex;
height: 50px;
border: solid 1px peru;
}
.sendToRight {
margin-left: auto;
}
<div class="flex-container">
<div class="PLCheck">
fortuneSelect
</div>
<div class="sendToRight"> <!-- add class to div for manipulation -->
rightSideComp
</div>
</div>
In this example, the margin-left:auto makes your .sendToRight div move all the way to the right. You could also use justify-content: space-between; in your container element to achieve the same result.
I'm currently working on an old website that was created with some old crappy WYSIWYG editor. I'm new to web-dev and still trying to get my head around positioning elements properly. My current issue is, from what I have read, using absolute positioning is BAD, but how would you change this?
So this is the old code:
<div id="wb_Text1"
style="margin:0;
padding:0;
position:absolute;
left:187px;
top:24px;
width:83px;
height:147px;
text-align:left;
z-index:1;
border:0px #C0C0C0 solid;
overflow-y:hidden;
background-color:transparent;
">
<div style="font-family:'.Helvetica Neue DeskInterface';font-size:15px;color:#000000;">
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>W</strong>
</span>
</div>
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>A</strong>
</span>
</div>
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>C</strong>
</span>
</div>
</div>
And what I have come up with to replace it is:
HTML
<div class="logo-ul">
<ul>
<li>W</li>
<li>A</li>
<li>C</li>
</ul>
</div>
CSS
.logo-ul {
list-style-type: none;
color: white;
font-size: 2em;
z-index:24;
float: right;
margin-right: 80%;
}
Which looks fine until you collapse the window and it falls apart :( lol.
You can see what I'm doing here http://media.wacmotorcycles.co.uk/
How should I be writing this please?
Thanks.
Try changing #logo to
#logo {
max-width: 165px;
max-height: 171px;
margin: 0.75em 0;
float: left;
}
And, .logo-ul to
.logo-ul {
list-style-type: none;
color: white;
font-size: 2em;
z-index: 24;
float: left;
}
There is nothing inherently wrong with absolute positioning. If used incorrectly, it can have unexpected results when working with responsive layouts.
In your specific case, the W A C might be better implemented as part of the logo image itself rather than text. It's not offering any semantic or SEO benefit to include the letters in a list. Short of that, this is one way to implement what I think you're after:
.logo {
height: 6rem;
padding-left: 50px;
}
.logo-letter {
display: block;
height: 2rem;
}
<div class="logo">
<span class="logo-letter">W</span>
<span class="logo-letter">A</span>
<span class="logo-letter">C</span>
</div>
First of all, here are some images explaining what exactly I'm trying to do:
How it should be:
This is how it is right now:
This is the markup:
<div class="info">
<img src="http://placehold.it/40x40" class="img-rounded avatar">
<h5 class="name">John Doe</h5>
<time>2 days ago</time>
<a class="follow"><i class="fa fa-twitter"></i>Follow me</a>
<a class="like">112 likes</a>
</div>
CSS:
.info {
border:1px solid #E6E6E6;
padding-top:20px;
padding-bottom:20px;
}
img.avatar {
float:left;
padding-left:20px;
padding-right:20px;
}
h5.name {
margin:0;
}
span.date {
font-size:12px;
}
a.like {
float:right;
padding-right:20px;
}
Here's a jsbin example with what I'm trying to do.
Any suggestions on how can I align them as in the screenshot?
Instead of assigning various classes to hyperlinks, nest them in the block element.
I changed your code, and updated the jsbin, is this what you were seeking?
http://jsbin.com/lajugiciyi/1/edit
.info {
border: 1px solid #E6E6E6;
padding: 20px 0
}
.avatar {
float: left;
padding: 0 20px;
}
.name {
display: inline-block
}
.name h5 {
margin: 0;
padding: 3px 0 0;
}
.like {
float: right;
padding: 0 20px;
}
.follow {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
You want the follow/like buttons to be aligned with the name, right?
HTML:
<div class="info">
<img src="http://placehold.it/40x40" class="img-rounded avatar" />
<div>
<h5 class="name">John Doe</h5>
<a class="follow"><i class="fa fa-twitter"></i>Follow me</a>
<a class="like">112 likes</a>
</div>
<time>2 days ago</time>
</div>
CSS:
h5.name {
margin:0;
display:inline;
}
http://jsfiddle.net/1319Lw2r/1/
Add the following:
a.follow {
margin-left: 10%; /* adjust to your liking */
}
I would recommend using margin instead of padding where you have it in your example, as well.
For example, padding is pushing the text inside the <a> tag which makes the anchor wider than it needs. By using margin instead it pushes the anchor while keeping it's size constrained to the content. You can test this by putting a border around the <a> tag.
I am making a CSS design for a SIM game I play, and a customer asked for 4 boxes, two large and in between them, two horizontally aligned boxes. They work fine, unless I try and add headers. The entire website is set up in a ridiculous amount of tables, basically coding from the 90s. All boxes I have made are div and aligned to meet up with the existing boxes on the page.
The main boxes are how I want the headers on all four boxes, separate and do not scroll. However, as you can see from this fiddle, nothing is aligning. When I try to put headers on the horizontal boxes, it really messes up the align. I am a fairly new coder, and would greatly appreciate some help.
div {
display: block;
color: #fff;
}
.topcontain{
width:500px;
height:300px;
}
.topleftbox {
width:240px;
height:300px;
overflow:auto;
float:left;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}
.toprightbox {
width:240px;
height:300px;
overflow:auto;
float:right;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}
.bottomcontain {
width:500px;
height:300px;
}
.header {
width:500px;
float:center;
background:#060e23;
color:#fff;
text-align:center;
display:block;
font-size: 14px;
border: 1px solid #030711;
opacity: 1.0;
}
.bottombox {
width:500px;
height:300px;
overflow:auto;
float:center;
background:#505665;
font-size: 12px;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
opacity: .75;
}
.credit {
width:500px;
float:center;
background:#060e23;
color:#fff;
text-align:center;
display:block;
font-size: 12px;
border: 1px solid #030711;
opacity: .85;
}
.top {
font-family: 'Snippet', sans-serif;
background : #060e23;
color : #fff;
font-size : 15px;
padding : 5px 15px;
font-weight : normal;
text-align : center;
border: 1px solid #030711;
opacity: .90;
}
Here is how it looks on the page I am coding:
example
Thank you again!
http://jsfiddle.net/6bEsE/6/
<div class="bottomcontain">
<div class="header">Lorem ipsum</div>
<div class="bottombox">
[TOP]
</div>
</div>
<div class="topcontain">
<div class="topleftbox">
<div class="top">Lorem ipsum</div>
<div>
[MIDDLE LEFT]
</div>
</div>
<div class="toprightbox">
<div class="top">Lorem ipsum</div>
<div>
[MIDDLE RIGHT]
</div>
</div>
</div>
<div class="bottomcontain">
<div class="header">Lorem ipsum</div>
<div class="bottombox">
[BOTTOM]
</div>
</div>
<div class="credit">Layout and CSS by Echo [#15480]</div>
I did a fast clean of your code (5 minutes)
But it is far from finishing it
First of all, you have bad closing of divs.
Second, you have fixed height for divs. A div with fixed width and height and more text than can fit in it will create scrolls.
before inserting all that text, try to fix the containers starting from the simple example i provided above. Also you may need to change a bit the html structure, to group those floating middle divs.
Demo Fiddle
In CSS
.clear{
clear:both;
}
In HTML
<div class="clear"> </div>
I'm trying to align a button and some text at the bottom of a div much like the example below with the Price and the Check it out button. What's the best way to do this. I've made a div, styled it to get the text, and picture right. I just need to attach the button to the right-hand side and the price to the left, inline with each other.
Similar to the product displays in the website thisiswhyimbroke.com
http://www.thisiswhyimbroke.com/
^^ Price and the Check It Out button. How do I achieve this?
Try like this: DEMO
Try to use reset you CSS first.
CSS:
*{
padding:0;
margin:0;
}
#priceAndButton {
width:100%;
display:block;
height:30px;
line-height:30px;
}
#priceAndButton h4 {
float:left;
vertical-align:middle;
}
#priceAndButton img {
float:right;
}
Hope this helps you
I have created a working fiddle with your requirements:
http://jsfiddle.net/8993H/
HTML:
<div id="main-container">
<div class="img-div"><img src="http://tiwibzone.tiwib.netdna-cdn.com/images/beer-chug-flowmeter1-300x250.jpg"/></div>
<div class="rhs">
<div class="button-nav">
<span class="price">$35.00</span>
<span class="check-btn"><button>Check It Out</button></span>
</div>
</div>
</div>
CSS:
#main-container{
width:100%;
border: 1px solid #aaa;
}
.img-div{
width:50%
}
.img-div img{
width:100%;
}
.rhs{
width:48%;
float:right;
position:relative;
}
.button-nav{
position:absolute;
bottom:10px;
width:100%;
}
.price{
float:left;
}
.check-btn{
float:right;
}
Try this:
button{
float:right
}
#price{
float:left
}
Here i created one working fiddle for your requirement.. You can re use this CSS. Hope This will help you.
HTML
<div class="desc">
<img height="200px" width="200px" src="http://www.clker.com/cliparts/8/2/2/6/11971154711712468971BigRedSmile_A_screwdriver_1.svg.med.png"/>
<p>Move over sliced bread, the water jet pack is officially the greatest thing ever. For only sixty eight grand you can own your very own water thrusting jetpack. It can lift you up to 30 feet high and thrust forward at 30 miles per hour – practically guaranteeing certain death.</p>
<div class="button">
Check it out
</div>
<div class="price">$500.00</div>
</div>
CSS
.desc{
text-align:jstify;
width:50%;
}
.button a{
background-color: #faab37;
color: white;
display: block;
float: right;
padding: 7px 8px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.button a:hover{
background-color:#f9bd66;
}
Hope This is What your expected output