I am trying to make a alert for my project which looks good but when I make it a mobile page the text goes under the icon. I want it to stay aligned beside the icon.
HTML:
<div class="rds-alert">
<img class="rds-alert-icon"/>
<div class="rds-alert-message">
<span class="rds-alert-so">Congratulation</span> Your submission has been approved.
</div>
</div>
CSS:
.rds-alert-so{
font-size:30px;
}
.rds-alert-icon{
width:70px;
height:70px;
vertical-align:middle;
margin-right:12px;
}
.rds-alert-message{
display:inline;
}
Jsfiddle: http://jsfiddle.net/0f2rpvc8/
Here's one way:
.rds-alert-so {
font-size:30px;
}
.rds-alert-icon {
width:70px;
height:70px;
margin-right:12px;
display:table-cell;
}
.rds-alert-message {
display:table-cell;
vertical-align:middle;
}
.rds-alert {
display:table-row;
}
<div class="rds-alert">
<img class="rds-alert-icon" />
<div class="rds-alert-message"> <span class="rds-alert-so">Congratulation</span> Your submission has been approved.</div>
</div>
or
.rds-alert-icon {
float: left;
}
http://jsfiddle.net/2Lfkrxup/
Related
I am working on some side buttons for a project and would like the link the hover styles for both elements, but am not sure how to go about this. In the example below if I highlight the link name (search) it rolls over and changes to a red text and if I highlight the image, it changes to the rollover image as expected. However what I would like to achieve is to link both so when I hover over the icon the link changes to red as well and vice versa.
#linkchoice{
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#image:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover{
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
I have made a JSFiddle as well here
https://jsfiddle.net/bzsvgwp8/
Thanks
Just update your css from
#image:hover {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover {
color: #EB0307;
}
to
#linkchoice:hover #image {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color: #EB0307;
}
You will see the combined hover effect !
The first solution could be to use the hover on the parent div:
#linkchoice {
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#linkchoice:hover #image {
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
in the second solution you can simplify the html using a single div, in this way:
#linkchoice{
width:100px;
height:100px;
}
#linkname{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:top;
padding-top:75px;
font-size:15px;
text-align:center;
}
#linkname:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
color:#EB0307;
}
<div id='linkchoice'>
<div id='linkname'>Search</div>
</div>
I have been constructing UI development for a year now and I want to explore new structures in regards to designing.
so I am styling my panel-heading that it would look something like this.
as of now I have only done the default style for panel heading via bootstrap css.
I just posted an example to how can make it with position. if you don't need then check 2nd snippet
.main {
position:relative;
}
.tilt {
position:absolute;
top:30px;
left:0px;
transform:rotate(-90deg);
color:#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
}
.tilt p {
margin:0px;
}
<div class="main">
<div class="tilt">
<p>
HELLO
</p>
</div>
</div>
.tilt {
transform:rotate(-90deg);
color#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
display:inline-block;
margin-top:22px;
}
.tilt p {
margin:0px;
}
<div class="tilt">
<p>
HELLO
</p>
</div>
I have this problem, I can't seem to figure out how do I make this red DIV not past through the div on the right side, I want to make it stay between the right and the left div menu.
Website Screenshot
HTML Code:
<body>
<div class="navigationBar_default">
<div class="facetubeLogo_default"></div>
<div class="facetubeText_container_default"><center><strong class="facetubeText_default"></strong></center></div>
</div>
<div class="content_default">
<div class="leftMenu_onProfile">
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/myProfileButton_onLeftMenu_onProfile.png" /><br>MY PROFILE</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/optionsButton_onLeftMenu_onProfile.png" /><br>GENERAL</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/generalButton_onLeftMenu_onProfile.png" /><br>OPTIONS</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/supportUsButton_onLeftMenu_onProfile.png" /><br>SUPPORT US</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/logOutButton_onLeftMenu_onProfile.png" /><br>LOG OUT</button>
</div>
<!-- there must be some stuff here, otherwise leftMenu_onProfile will glitch out. -->
<div class="contentCenter_onProfile">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaAAAAAAAAAAAAAAAAAA
</div>
<!-- there must be some stuff here, otherwise leftMenu_onProfile will glitch out. -->
<div class="rightMenu_onProfile">user1<br>user2<br>user3<br>user4<br>user5</div>
</div>
CSS Code:
.navigationBar_default {
background-color:#202020;
width:100%;
height:32px;
margin-left:-8px;
margin-right:-8px;
border:0;
top:0;
position:fixed;
}
.facetubeLogo_default {
background-image:url("../images/facetube_icon_30x30_png.png");
width:30px;
height:30px;
margin-top:1px;
margin-left:1px;
float:left;
}
.facetubeText_container_default {
margin-top:6px;
}
.content_default {
width:100%;
height:100%;
margin-top:32px;
margin-left:-8px;
margin-right:-8px;
margin-bottom:-8px;
}
.leftMenu_onProfile {
background-color:#0d0d0d;
margin-top:0px;
margin-left:-8px;
width:240px;
float:left;
}
.leftMenu_buttonOnProfile {
background-color:#0d0d0d;
border:0;
border-bottom:1px solid #ffffff;
width:240px;
height:48px;
color:#ffffff;
}
.leftMenu_buttonImage {
float:left;
margin-top:-2px;
margin-right:-6px;
}
.contentCenter_onProfile {
background-color:red;
padding:2px; /* padding is originally removed */
margin:0px;
top:0px;
}
.rightMenu_onProfile {
background-color:#0d0d0d;
margin-top:-20px;
margin-right:-16px;
width:300px;
color:#ffffff;
float:right;
}
I have feeling it has to do something with content_default and the width:100% but I don't know. I tried everything and I couldn't figure it out.
:/
Try this:
.contentCenter_onProfile {
background-color:red;
padding:2px; /* padding is originally removed */
margin:0 300px;
top:0px;
width: 50%; /* SET THIS */
white-space: pre-wrap;
word-break: break-all;
}
By setting the width, you can ensure the div does not overlap the right hand side div.
Setting float: left or float: right causes the elements to overlap.
So i've read multiple times that putting display:inline-block; in your span will fix it. But i just can't get it to work for me. Probably i just missed something, but i would like help on this.
<html>
<head>
<style>
#font-face {
font-family:myRobotoRegular;
src:url(fonts/Roboto-Regular.ttf);
}
#font-face {
font-family:myRobotoBold;
src:url(fonts/Roboto-Bold.ttf);
}
#font-face {
font-family:myRobotoLight;
src:url(fonts/Roboto-Light.ttf);
}
body {
background-color:black;
color:white;
}
h1 {
font-family:myRobotoBold;
text-align:center;
}
.right {
float:right;
width:49%;
}
.individual {
height:100%;
margin:0 auto;
overflow-y:scroll;
padding-right:10px;
text-align:left;
width:440px;
}
.bannerGreen {
background-color:#0D731D;
padding:10px;
}
.bannerTitle {
font-family:myRobotoBold;
}
.bannerRarity {
font-family:myRobotoLight;
}
.description {
background-color:black;
font-family:myRobotoRegular;
padding:20px 10px 10px 10px;
}
.quotes {
color:#C0B9A7;
}
.orangeStat {
color:#F26A1C;
display:inline-block;
font-family:myRobotoBold;
font-size:20px;
}
.yellowStat {
color:#FFD30B;
display:inline-block;
font-family:myRobotoBold;
font-size:20px;
}
.imgDiv {
float:right;
margin-top:-10px;
}
.img {
height:58px;
}
</style>
</head>
<body>
<div class="mainDiv">
<div class="right">
<div class="individual">
<h1>
CATEGORY
</h1>
<div class="bannerGreen">
<div class="imgDiv">
<img class="img" src="">
</div>
<span class="bannerTitle">
TITLE
</span>
<br>
<span class="bannerRarity">
SUBTITLE
</span>
</div>
<div class="description">
DESCRIPTION
<span class="yellowStat">
STATISTICS
</span>
DESCRIPTION
<span class="orangeStat">
A STATISTIC
</span>.
</div>
<br>
</div>
</div>
</div>
</body>
</html>
The "A" in "A STATISTIC" should well be able to be on the first line, but instead it follows the entire span to the second line.
(Bonus points if you recognize this. ;) )
EDIT: Inline instead of inline-block surely fixes the problem, but then the period after the .orangeStat span jumps away from the span. And i'd like it to not jump away but i do not want it to be included in the span either. Is there a way to get that?
Well, if you want the A and STATISTIC to be treated individually, then you should put them in individual (inline-)block elements:
<span class="orangeStat">
A
</span>
<span class="orangeStat">
STATISTIC
</span>
OR (edit):
Use inline instead of inline-block and to remove the space between the STATISTIC and the period, try something like this:
<span class="orangeStat">
A STATISTIC<!--
--></span>.
Increase the width of the outer container
.individual {
width: 490px;
}
The words are coming in second line because there is no enought space in the container.
Or
Decrease the font-size of yellowStat and orangeStat
I have this code :
<div class="richiedi_info_item">
<label>Message</label>
<span style="color:Red;"> *</span>
<div class="richiedi_info_item_nota">
<a id="notaInfo" href="javascript:void(0);">Click</a>
</div>
</div>
.richiedi_info_item_nota
{
float:right;
width:252px;
}
.richiedi_info_item
{
margin-top:15px;
width:400px;
}
.richiedi_info_item label
{
float:left;
height:16px;
line-height:20px;
}
and (on every browser expect IE7) the text Message and the link Click is aligned on the same line. Seems that span (with the red *) create a new line.
Why? And how can I fix this problem?
You can remove the floats (left and right) and set the div to display:inline, like this:
.richiedi_info_item_nota
{
display:inline;
width:252px;
}
.richiedi_info_item label
{
height:16px;
line-height:20px;
}
EDIT:
IE7 Does not handle floats very well, especially with inline elements (span and label) so I added another div around both of the items and floated it.
HTML
<div class="richiedi_info_item">
<div id="floating">
<label>Message</label>
<span style="color:Red;"> *</span>
</div>
<div class="richiedi_info_item_nota">
<a id="notaInfo" href="javascript:void(0);">Click</a>
</div>
</div>
CSS
.richiedi_info_item_nota
{
width:21px;
clear:both;
float:right;
}
.richiedi_info_item
{
margin-top:15px;
width:400px;
}
.richiedi_info_item label
{
height:16px;
line-height:20px;
}
#floating {
float:left;
}
WORKING EXAMPLE
JsFiddle Demo