http://jsfiddle.net/PRAPc/
I want a search icon like this rendered in the beginning of the textbox and I can't get the following to work. Please help.
html:
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-ws="collapse" style="margin-top:0" id="myapp" data-maq-appstates="{}">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div class="midArea_div">
<div class="searchBox_div">
<input type="text" data-dojo-type="dijit.form.TextBox" class="searchBox"></input>
</div>
</div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
js:
require([
"dijit/dijit",
"dojo/parser",
"maqetta/space",
"maqetta/AppStates",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/TextBox"
]);
css:
html,body {
height: 100%;
width: 100%;
}
.logo_a{
background:url("icon1.png");
}
.logo{
width:60px;
height:50px;
display:inline-block;
vertical-align:middle;
}
.logo_a:active{
background-position:0 1px;
}
#top_bar{
padding:0px;
background: -webkit-linear-gradient(#464646, #121212);
background: -moz-linear-gradient(#464646, #121212);
background: -ms-linear-gradient(#464646, #121212);
background: -o-linear-gradient(#464646, #121212);
background: linear-gradient(#464646, #121212);
color: #ccc;
text-shadow:none;
height:50px;
width:100%;
}
#top_bar_divider{
background-color:#1ba0e1;
height:4px;
width:100%;
}
.searchBox{
height: 30px;
width: 400px;
padding-left:30px;
font-size:20px;
}
.searchBox_div{
display:inline-block;
verticle-align:middle;
background: #FFF url("http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png") no-repeat scroll 5px 6px;
}
.midArea_div{
margin-left: 100px;
verticle-align:middle;
display:inline-block;
}
.searchIcon{
}
Your current method doesn't work because the textbox is on top of its background so it isn't visible. You can do this using a pseudo-element on .searchBox_div (doesn't work in <= IE8).
jsFiddle
.searchBox_div {
position:relative;
}
.searchBox_div:before {
content:"";
display:block;
position:absolute;
background: url(http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png) no-repeat center center;
width:24px;
height:24px;
left:4px;
top:50%;
margin-top:-12px;
z-index:1;
}
Alternatively you could apply these styles to another div inside .searchBox_div to get around the IE8 issue at the cost of more markup.
jsFiddle
HTML
<div class="midArea_div">
<div class="searchBox_div">
<input type="text" data-dojo-type="dijit.form.TextBox" class="searchBox"></input>
<div class="overlay"></div>
</div>
</div>
CSS
.searchBox_div {
position:relative;
}
.overlay {
position:absolute;
background: url(http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png) no-repeat center center;
width:24px;
height:24px;
left:4px;
top:50%;
margin-top:-12px;
z-index:1;
}
Related
I am left with 2 labels and can't find solution.
I have done this much HTML and CSS
<div id="incoming_call" class="bottom_toolbar_incoming_call" style="bottom:90px; position: fixed; right: 3px; z-index: 9999; height:45px; width:250px; background-color:lightgray;">
<img src="http://findicons.com/files/icons/766/base_software/128/circle_red.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:200px; position: relative;" id="Reject" />
<img src="http://findicons.com/files/icons/766/base_software/128/circle_green.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:100px; position: relative;" id="answer" />
</div>
I would put the images inside a position:absolute div like this
#incoming_call{
border: 2px solid black;
}
#call{
color:green;
}
#images{
position:absolute;
top:0px;
}
<div id="incoming_call" class="bottom_toolbar_incoming_call" style="bottom:90px; position: fixed; right: 3px; z-index: 9999; height:45px; width:250px; background-color:lightgray;">
<div id="call">call from 7040</div>
<div id="time">0:01</div>
<div id="images">
<img src="http://findicons.com/files/icons/766/base_software/128/circle_red.png" alt="Reject" style=" width:40px; height:40px; display: inline-block; padding:2px; left:200px; position: relative;" id="Reject" />
<img src="http://findicons.com/files/icons/766/base_software/128/circle_green.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:100px; position: relative;" id="answer" />
</div>
</div>
Try this way:
Takes care of vertical alignment (as it appears in your design)
Content height adjusts according to adjacent column
No browser issues as well
Red and Green color using CSS - Hence no images required
.parent-container {
width: 320px;
}
.box {
border: 2px solid #000;
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.box__cell {
display: table-cell;
width: 50%;
vertical-align: middle;
padding: 0 15px;
}
ul {
padding: 0;
list-style-type: none;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #000;
}
.b-red {
background: red;
}
.b-green {
background: green;
}
.t-green {
color: green;
}
.text-right {
text-align: right;
}
.list-item li {
display: block;
}
.list-inline li {
display: inline-block;
}
<div class="parent-container">
<div class="box">
<div class="box__cell box__cell--left">
<div id="incoming_call">
<ul class="list-item">
<li class="t-green">Incoming Call</li>
<li><b>00: 05</b></li>
</ul>
</div>
</div>
<div class="box__cell box__cell--left">
<ul class="list-inline text-right">
<li class="circle b-red">
</li>
<li class="circle b-green">
</li>
</ul>
</div>
</div>
</div>
I am trying to create a list that will show messages. The image below is what I wish to achive. Check the codepen for how it looks as of now!:
As you can see apart of the ui jumps up as it it utilizing float. I can't set a fixed height on the avatar red area as the message area can vary in height (basically the whole message can vary in size). I've gotten it to work by removing the float on the text-container however I'm not able to lineup the green arrow then. Any ideas?
Hree is codepen code for yous to fiddle with!
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="center">
<ol id="holder" class="scroll" style="background:pink;">
<li class="message">
<div class="thumb-fav-container">
<div class="thumb-fav-row">
<div class="thumb">
</div>
<div class="thumb-fav-num">
1000
</div>
</div>
<div class="thumb-fav-row">
<div class="fav">
</div>
<div class="thumb-fav-num">
0
</div>
</div>
</div>
<div class="message-avatar-container">
<div class="message-avatar">
</div>
</div>
<div class="text-container">
message
<br>1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
</div>
<div class="text-arrow">
</div>
</li>
<li class="message">
<div class="thumb-fav-container">
<div class="thumb-fav-row">
<div class="thumb">
</div>
<div class="thumb-fav-num">
1000
</div>
</div>
<div class="thumb-fav-row">
<div class="fav">
</div>
<div class="thumb-fav-num">
0
</div>
</div>
</div>
<div class="message-avatar-container">
<div class="message-avatar">
</div>
</div>
<div class="text-container">
message
<br>1
<br>2
<br>3
<br>4
</div>
<div class="text-arrow">
</div>
</li>
</ol>
</div>
</body>
</html>
css:
/* Styles go here */
div.center
{
max-width: 1200px;
width: 1000px;
min-width:800px;
display: block;
margin-left: auto;
margin-right: auto;
}
ol {
list-style-type: none;
padding: 0em;
margin: 0em;
}
li {
display: inline;
margin: 0em;
padding: 0em;
left: 0em;
}
message {
background: red;
width: 100%;
height: auto;
}
div.thumb-fav-container {
margin-top: 20px;
float:left;
padding:10px;
width:70px;
background: lime;
}
div.thumb-fav-row {
height:20px;
margin-left:5px;
margin-bottom:5px;
background: silver;
}
div.thumb {
float:left;
width:20px;
height:20px;
background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
background-size: contain;
}
div.fav {
float: left;
width:20px;
height:20px;
background-image:url('https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png');
background-size: contain;
}
div.thumb-fav-num {
float: left;
margin-left:10px;
text-align: center;
background: pink;
}
div.text-container {
float:left;
margin-left:10px;
margin-top: 10px;
width:700px;
padding:20px;
background: silver;
}
div.text-arrow {
margin-top:20px;
float:left;
width: 0;
height: 0;
border-bottom: 30px solid transparent;
border-left: 30px solid lime;
border-top: 30px solid transparent;
}
div.message-avatar-container {
float:right;
padding:10px;
margin-top: 20px;
width:100px;
height:70px;
background: red;
}
div.message-avatar {
float:left;
width:50px;
height:50px;
background-image:url('http://findicons.com/files/icons/1072/face_avatars/300/a04.png');
background-size: contain;
}
Little mistake in your CSS:
Instead of:
message {
background: red;
width: 100%;
height: auto;
}
You should have:
.message {
clear:both;
float:left;
height: auto;
}
This yields the expected output (demo):
I am building a website and right now I'm just about to complete the homepage. Now, the footer has a few links in it along with a few images next to each other like a contact us bar. But the links don't seem to align with the images even after trying everything. They seem to hang a little lower than the paragraphs or spans. I tried converting the spans on the same line to links but now all of them hang low.
HTML:
<div id="brdr_btm">
<div id="contactOptionContainer">
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/pGiDhI2.png?1"/>
<div id="ctcLinks">
La Martiniere College, Lucknow
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/E8Ow3O7.png?1">
<div id="ctcLinks">
secretariat#lmun.org
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" id="ic_call" src="http://i.imgur.com/1di7mj9.png?1">
<!--<div id="phoneno">-->
<div id="ctcLinks">
+91 9670680417 (Sec. Gen), <!-- was span -->
+91 9415444444 (Dep. Sec. Gen) <!-- was span -->
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/2HZVi1r.png?1">
</div>
</div>
</div>
CSS:
#brdr_btm
{
display:flex;
position:relative;
height: 25px;
width: 100%;
background-color: #70A5DA;
top:100%;
vertical-align:bottom;
margin_top:10px;
clear:both;
box-sizing:content-box;
/*z-index:-1;*/
}
#contactUs
{
margin:auto;
}
#contactOptionContainer
{
position:relative;
display:inline-block;
margin-top:auto;
margin-bottom:auto;
/* text-align:center;*/
box-sizing:content-box;
width:auto;
}
.ctcObject
{
display:inline-block;
margin-left:auto;
margin-right:5em;
/* margin-bottom:6px;*/
/* margin-top:auto;*/
}
.ic_contact
{
position:relative;
margin-top:6.25px;
margin-bottom:6.25px;
height: 12.5px;
width: 12.5px;
-webkit-user-drag:none;
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-drag:none;
/* z-index:-1;*/
}
#ic_call
{
margin-top: -2px;
height:10.5px;
width:10.5px;
}
#ctcLinks
{
position:relative;
display:inline-block;
}
#ctcLinks a
{
position:relative;
margin-top:-6px;
margin-bottom:0px;
/* display:inline-block;*/
font-size:0.8em;
color:#FFFFFF;
/* text-align:center;*/
}
#phoneno
{
position:relative;
display:inline-block;
text-align:center;
}
#phoneno span
{
margin-left:0;
margin-right:0;
margin-bottom:6px;
margin-top: -1px;
text-align:center;
display:inline-block;
color:#ffffff;
vertical-align:middle;
font-size:0.9em;
}
How do I prevent this from happening and what causes it?
What might be the solution to the problem?
Here's my JSFiddle: http://jsfiddle.net/mfxefccz/
You should add to .ic_contact and #ctcLinks this style
display: inline-block;
height: 100%;
vertical-align: middle;
#brdr_btm
{
display:flex;
position:relative;
height: 25px;
width: 100%;
background-color: #70A5DA;
top:100%;
vertical-align:bottom;
margin_top:10px;
clear:both;
box-sizing:content-box;
/*z-index:-1;*/
}
#contactUs
{
margin:auto;
}
#contactOptionContainer
{
position:relative;
display:inline-block;
margin-top:auto;
margin-bottom:auto;
/* text-align:center;*/
box-sizing:content-box;
width:auto;
}
.ctcObject
{
display:inline-block;
margin-left:auto;
margin-right:5em;
/* margin-bottom:6px;*/
/* margin-top:auto;*/
}
.ic_contact
{
position:relative;
margin-top:6.25px;
margin-bottom:6.25px;
height: 12.5px;
width: 12.5px;
display: inline-block;
height: 100%;
vertical-align: middle;
-webkit-user-drag:none;
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-drag:none;
/* z-index:-1;*/
}
#ic_call
{
margin-top: -2px;
height:10.5px;
width:10.5px;
}
#ctcLinks
{
position:relative;
display: inline-block;
height: 100%;
vertical-align: middle;
display:inline-block;
}
#ctcLinks a
{
position:relative;
margin-top:-6px;
margin-bottom:0px;
/* display:inline-block;*/
font-size:0.8em;
color:#FFFFFF;
/* text-align:center;*/
}
#phoneno
{
position:relative;
display:inline-block;
text-align:center;
}
#phoneno span
{
margin-left:0;
margin-right:0;
margin-bottom:6px;
margin-top: -1px;
text-align:center;
display:inline-block;
color:#ffffff;
vertical-align:middle;
font-size:0.9em;
}
<div id="brdr_btm">
<div id="contactOptionContainer">
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/pGiDhI2.png?1"/>
<div id="ctcLinks">
La Martiniere College, Lucknow
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/E8Ow3O7.png?1">
<div id="ctcLinks">
secretariat#lmun.org
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" id="ic_call" src="http://i.imgur.com/1di7mj9.png?1">
<!--<div id="phoneno">-->
<div id="ctcLinks">
+91 9670680417 (Sec. Gen), <!-- was span -->
+91 9415444444 (Dep. Sec. Gen) <!-- was span -->
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/2HZVi1r.png?1">
</div>
</div>
</div>
Here a demo.
So, displayed it like an inline-block, because display: inline-block; don't work with blocks. And give then a height: 100%. In this case in means 100% from a parent. So we always have an image or block in the vertical center.
You have set margins for .ic_contact. If you remove margin-bottom for .ic_contact, your images and links would align properly. see here
.ic_contact
{
position:relative;
margin-top:6.25px;
height: 12.5px;
width: 12.5px;
}
links-column:first-child: margin-left:0%
is not triggering, I have the exact same code on another section of the site (rev-column) and this is working so not sure why it doesn't work.
fiddle: https://jsfiddle.net/82hLzm2v/2/
<div class="twelve columns">
<div class="links-section-header"></div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
</div>
.links-column { width: 32%; margin-left:1%; float:left; }
.links-column:first-child { margin-left: 0%; }
}.links-cats-wrap{
display:block;
float:left;
width:100%;
height:400px;
background-color:#fff;
margin-bottom:10px;
border:1px solid #DDDDDD;
Laravel code:
#foreach ($links as $link)
<div class="twelve columns">
<div class="links-section-header">{{ $link->category }}</div>
#foreach ($link->linksitems as $linksitem)
<div class="links-column">
<div class="links-cats-wrap">
<div class="links-cats-img"><img class="u-full-width" src="images/links/{{ $linksitem->img }}"> </div>
<div class="links-cats-link">{{ $linksitem->link }}</div>
<div class="links-cats-desc">{{ $linksitem->text }}</div>
</div>
</div>
</div>
#endforeach
#endforeach
Your first <div class="links-column"> is not the first first child of the parent div.
You need to move <div class="links-section-header"></div> outside <div class="twelve columns">.
Code adapted from your JSFiddle.
/* For devices larger than 550px */
/* Review Columns*/
.rev-column:first-child { margin-left: 0%; }
.rev-column:nth-child(odd){ margin-left: 0%; }
.rev-column { width: 49%; margin-left:2%; float:left; }
/* Links Columns*/
.links-column { width: 32%; margin-left:1%; float:left; }
.links-column:first-child { margin-left: 0%; }
/*Columns*/
.container { width: 100%; height:auto; overflow:hidden; padding: 0 0px; box-sizing: border-box; }
.column,
.columns {
margin-left: 2%;}
.column:first-child,
.columns:first-child {
margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 49%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 68%; }
.nine.columns { width: 76.0%; } /*increased from 74% column margin decreased from 4% to 2%*/
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
.links-wrap{
width:100%;
min-height:400px;
height:auto;
overflow:hidden;
background-color:#f2f2f2;
}.links-center-wrap{
width:960px;
height:auto;
min-height:400px;
overflow:hidden;
background-color:;
margin: 0 auto;
padding-top:10px;
padding-bottom:10px;
}.links-wrap-wrap{
width:960px;
height:auto;
overflow:hidden;
}.links-section-header{
color:#fff;
width:100%;
height:30px;
line-height: 30px;
background-color:#605860;
margin-bottom:10px;
}.links-cats-wrap{
display:block;
float:left;
width:100%;
height:400px;
background-color:#fff;
margin-bottom:10px;
border:1px solid #DDDDDD;
}.links-cats-wrap:last-child {
margin-right: 0px;
}.links-cats-img{
width:100%;
height:160px;
background-color:;
line-height:40px;
color:#fff;
font-weight:700;
font-size:16px;
}.links-cats-link{
width:100%;
height:60px;
background-color:;
line-height:60px;
font-weight:300;
font-size:16px;
margin: 0 auto;
text-align:center;
}.links-cats-link:hover{
color:#ff0000;
}.links-cats-desc{
width:100%;
height:110px;
padding:20px;
background-color:;
line-height:20px;
}.links-share{
width:300px;
height:30px;
}.links-share-twitter{
color:#fff;
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:#32ccfe;
text-align:center;
}.links-share-facebook{
color:#fff;
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:#3E5B97;
text-align:center;
}.links-share-google{
color:#fff;
float:left;
width:100px;
height:30px;
line-height:30px;
background-color:#F8694D;
text-align:center;
<!-- content -->
<div class="links-section-header"></div>
<div class="twelve columns">
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
<div class="links-column">
<div class="links-cats-wrap">
</div>
</div>
</div>
How to place an image between a fixed header/footer and prevent overlap?
How to centre an image on the page when the window is bigger than its max-width/height?
The current working example: http://john-marshall.net
CSS
#content {
position:relative;
}
#headerwrap {
position:fixed;
width: 100%;
height:60;
background-color:#fff;
z-index:99;
}
#header {
border-top: 1px solid #000;
margin:20 20 0 20;
}
#title {
font-size:15px;
font-family: "Fugue-Regular";
font-weight:100;
padding-top:5px;
}
#footerwrap {
position:fixed;
width: 100%;
height:60;
bottom:0;
background-color:#fff;
z-index:99;
}
#footer {
border-bottom: 1px solid #000;
height:40;
margin:0 20 20 20;
}
/*gallery*/
#gallerywrap{
position:fixed;
margin:60 20 60 20;
text-align: center;
}
#gallery{
width:100%;
height:auto;
}
.img {
max-width: 100%;
max-height: 100%;
}
HTML
<body>
<div id="content">
<div id="headerwrap">
<div id="header">
<div id="title">John Marshall</div>
<div id="menuli">
<ul>
<li>Project 1</li>
</ul>
</div>
</div>
</div>
<div id="gallerywrap">
<div id="gallery">
<img src="http://john-marshall.net/images/selected/cafe.jpg" class="img" alt="Cafe" />
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
CSS :
#gallery{
width:100%;
height:auto;
margin:0px auto;
}
try this and check your margin in #gallerywrap.
Make the following changes to your css :
#gallerywrap {
position: fixed;
margin: 60px 0px 60px 0px;
text-align: center;
width: 100%;
}
Is this the effect you are looking for ?