I have a parent DIV wrap and 3 main child DIVs.inputQ,inputQL,inputQR. I am using a background color for wrap, but this color is not showing up for inputQL, inputQR.Since inputQL, inputQR are inside wrap, I believe its background color should be added to child one as well. I am a beginner in this area, can you please let me what is wrong here ? how can I add same background color for inputQL, inputQR ?
Fiddle : https://jsfiddle.net/anoopcr/hfmghkp0/
<div class="wrap">
<div class="inputQ">
<div class="InputQuest">Text Middle</div>
<div><input id="amnttext" class="textbox"></input></div>
</div>
<div class="inputQL">
<div class="InputQuest">Text Left</div>
<div><input id="loandtext" class="textbox"></input></div>
</div>
<div class="inputQR">
<div class="InputQuest">Text Right</div>
<div><input id="emidtext" class="textbox"></input></div>
</div>
</div>
CSS:
.wrap {
width: 80%;
margin-top: 80px;
margin: auto;
padding: 10px;
background:#eee;
}
.inputQ{width:60%;margin: auto; padding:10px;height:50px;margin-top:50px; }
.inputQL{width:45%;margin: auto; height:50px;margin-top:50px;float:left;}
.inputQR{width:45%;margin: auto; height:50px;margin-top:50px;float:right; }
.InputQuest
{
width:50%;
float:left;
font-family: arial;
font-size:18px;
text-align:center;
line-height: 30px;
margin:auto;
}
.textbox
{
float:left;
margin:auto;
font-size:16px;
font-family: verdana;
padding:5px;
border:1px solid #ccc;
border-radius:4px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
width:30%;
}
You Also neede to cell .wrap { overflow: hidden; }
try this
.wrap {
width: 80%;
margin-top: 80px;
margin: auto;
padding: 10px;
background:#eee;
overflow: hidden;
}
.inputQ{width:60%;margin: auto; padding:10px;height:50px;margin-top:50px; }
.inputQL{width:45%;margin: auto; height:50px;margin-top:50px;float:left;}
.inputQR{width:45%;margin: auto; height:50px;margin-top:50px;float:right; }
.InputQuest
{
width:50%;
float:left;
font-family: arial;
font-size:18px;
text-align:center;
line-height: 30px;
margin:auto;
}
.textbox
{
float:left;
margin:auto;
font-size:16px;
font-family: verdana;
padding:5px;
border:1px solid #ccc;
border-radius:4px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
width:30%;
}
<div class="wrap">
<div class="inputQ">
<div class="InputQuest">Text Middle</div>
<div><input id="amnttext" class="textbox"></input></div>
</div>
<div class="inputQL">
<div class="InputQuest">Text Left</div>
<div><input id="loandtext" class="textbox"></input></div>
</div>
<div class="inputQR">
<div class="InputQuest">Text Right</div>
<div><input id="emidtext" class="textbox"></input></div>
</div>
</div>
Related
I want to have 2 elements in a div but only one should be visible, and I want to have a vertical scrollbar.
Unfortunately, the second element is visible and there is no scrollbar.
#visu {
top:10px;
height:180px;
width:50%;
overflow:auto;
background-color:yellow;
}
#element1 {
position:absolute;
top:15px;
left:80px;
}
#element2 {
position:absolute;
top:200px;
left:80px;
}
.element {
margin-right:-50px;
}
.namecontainer {
display:flex;
border:4px solid #000033; border-radius:10px;
padding:10px; box-sizing:border-box;
background-color:white;
width:280px;
height:150px;
margin-left:0px;
align-items: center;
justify-content:center:
color:#1a1a1a;
}
.namecontainer p {
font-size:35px;
font-family: 'Arial';
font-weight:bold;
color:#1a1a1a;
text-align:center;
width:380px;
}
<div id="visu">
<div id="element1" class="element">
<div class="namecontainer">
<p class= "name" id="name1" >element 1</p>
</div>
</div>
<div id="element2" class="element">
<div class="namecontainer">
<p class= "name" id="name3" >element 2</p>
</div>
</div>
</div>
You need to play with margin and drop absolute positionnong cause it takes element off the flow and is not necessary here https://jsfiddle.net/vpdc5L4m/13/
#visu {
top: 10px;
height: 180px;
width: 50%;
overflow: auto;
background-color: yellow;
}
#element1 {}
#element2 {}
.element {
margin: 15px auto ;
}
.namecontainer {
display: flex;
border: 4px solid #000033;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
background-color: white;
width: 280px;
height: 150px;
margin:auto;
align-items: center;
justify-content: center: color: #1a1a1a;
}
.namecontainer p {
font-size: 35px;
font-family: 'Arial';
font-weight: bold;
color: #1a1a1a;
text-align: center;
width: 380px;
}
<div id="visu">
<div id="element1" class="element">
<div class="namecontainer">
<p class="name" id="name1">element 1</p>
</div>
</div>
<div id="element2" class="element">
<div class="namecontainer">
<p class="name" id="name2">element 2</p>
</div>
</div>
<div id="element3" class="element">
<div class="namecontainer">
<p class="name" id="name3">a third one ?</p>
</div>
</div>
</div>
To hide a CSS element, you can use
display: none;
Basically I want to have something like this: http://i.stack.imgur.com/GwtOm.png
I want the div containing the headline to fit to the size of the headlines. I know this can be achieved with display:inline-block; or display:table-cell; but when I add another div that I want to overlap the line, it pushes everything down.
Not sure if there’s a way to avoid that or if there's a better way to get the effect I’m going for. Any suggestions are much appreciated!
Two code examples:
body,html {margin:0;border:0;padding:0; vertical-align: baseline; line-height: 1;
}
.banner {
width:600px;
height: 400px;
background-color:grey;
}
.outer {
display:table;
margin:0 auto;
background-color:pink;
position:relative;
}
.inner {
display:table-cell;
}
.top{
border-bottom: 2px black solid;
}
.top, .bottom{
padding:20px;
text-align:justify;
}
.overlap{
position:relative;
background-color:pink;
text-align:center;
top:65px;
z-index: 100;
line-height:1;
padding:0 10px;
}
.txty{
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:16px;
}
<div class="banner">
<div class="outer">
<div class="inner">
<div class="overlap"><span class="txty">AND</span></div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="top">
<span class="txty">
Hi, this div fits to the content and it is horizontally centered, too.
</span>
</div>
<div class="bottom">
<span class="txty">
hey cool</span>
</div>
</div>
</div>
</div>
Or the other way I tried was this:
body {
background-color:grey;
margin:0;
}
.overr {
position:relative;
background-color:green;
display:inline-block;
text-align:center;
top:43px;
z-index: 100;
line-height:1;
padding:0 10px;
}
.outer {
text-align:center;
background-color:pink;
position:relative;
top:20px;
}
.inner1 {
display:inline-block;
background-color:green;
line-height:0;
}
.a{
border-bottom:4px solid black;
}
.b {
display:inline-block;
line-height:0;
}
<div class="outer">
<div class="overr">AND</div>
</div>
<div class="outer">
<div class="inner1">
<div class="a">
<p>hi, this div fits to the content and it is centered, too. Cool!</p>
</div>
<div class="b">
<p> test</p>
</div>
</div>
</div>
try position:absolute and adjust top and left
.overlap{
position:absolute;
background-color:pink;
text-align:center;
top:65px;
z-index: 100;
line-height:1;
padding:0 10px;
}
else apply float to the div and apply proper margins
I have a question regarding HTML tables. I created HTML table using Divs. Some cells contain images so they have fixed size. The bottom cell is resizable according to data filled in other box. So, I don't want to use absolute option in this solute. Here's my code:
<!DOCTYPE html>
<html>
<header>
<style type="text/css">
object
{
outline: none;
display:block;
}
html, body {
margin:0; padding:0;
height:100%;
}
.divTable
{
width: 135px;
height: 100%;
display: table;
float:left;
background-color:blue;
}
.newDiv{
position: relative;
left:135px;
height:100%;
width:100%;
display: block;
background-color:yellow;
border:1px solid #BBBDBF;
border-left:0px;
}
.divTableRow
{
width: 135px;
height: 30px;
display: table-row;
}
.divTableCell
{
width: 135px;
height: 30px;
background: white url('Images/bottom_up.png') 0 0 no-repeat;
display: table-cell;
text-align:center;
vertical-align:middle;
}
.divTableTopCell
{
width: 135px;
height: 30px;
background: white url('Images/top_up.png') 0 0 no-repeat;
display: table-cell;
text-align: center;
border-bottom:1px solid #848385;
vertical-align:middle;
}
.divTableBottomBox
{
position:relative;
width: 133px;
height: 100%;
background-color: #d0d2d3;
display: block;
border:1px solid #BBBDBF;
clear:both;
}
.divParent{
position: relative;
display:block;
min-height:700px;
min-width:700px;
}
</style>
</header>
<body>
<div class='divParent'>
<div class="divTable">
<div class="divTableRow">
<div id = 'accountDetails' class="divTableTopCell">
Account Details
</div>
</div>
<div class="divTableRow">
<div id = 'locations' class="divTableCell">
Locations
</div>
</div>
<div class="divTableRow">
<div id = 'users' class="divTableCell">
Users
</div>
</div>
<div class="divTableRow">
<div id = 'training' class="divTableCell">
Training
</div>
</div>
<div class="divTableRow">
<div id = 'contracts' class="divTableCell">
Contracts
</div>
</div>
<div class='divTableBottomBox'>
</div>
</div>
<div class='newDiv'>
Helllo <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</body>
</html>
Any help would be appreciated.
By the looks of it, you are marking up tabular data. If you have tabular table, it is semantically correct to use an actual HTML table. You shouldn’t try to fake it with divs. They're less suited for the task and are semantically invalid.
Thank you for the response. I fixed it.
Here's the solution:
<!DOCTYPE html>
<html>
<header>
<style type="text/css">
object
{
outline: none;
display:block;
}
html, body {
margin:0; padding:0;
height:100%;
}
.divLeftContainer{
min-height:100%;
height:100%;
display:block;
background-color:red;
float:left;
}
.divTable
{
float:left;
width: 135px;
height: auto;
display: table;
background-color:blue;
}
.newDiv{
position: relative;
left:135px;
height:100%;
width:100%;
display: block;
background-color:yellow;
border:1px solid #BBBDBF;
border-left:0px;
}
.divTableRow
{
width: 135px;
height: 100%;
display: table-row;
border:0px;
}
.divTableCell
{
width: 135px;
height: 30px;
background: white url('Images/bottom_up.png') 0 0 no-repeat;
display: table-cell;
text-align:center;
vertical-align:middle;
}
.divTableTopCell
{
width: 135px;
height: 30px;
background: white url('Images/top_up.png') 0 0 no-repeat;
display: table-cell;
text-align: center;
border-bottom:1px solid #848385;
vertical-align:middle;
}
.divTableBottomBox
{
width: 133px;
display:block;
height:100%;
background-color: #d0d2d3;
border:1px solid #BBBDBF;
border-top:0px;
margin-bottom:0px;
bottom:0px;
}
.divParent{
position: relative;
display:block;
height:700px;
min-height:700px;
min-width:700px;
}
</style>
</header>
<body>
<div class='divParent'>
<div class='divLeftContainer'>
<div class="divTable">
<div class="divTableRow">
<div id = 'accountDetails' class="divTableTopCell">
Account Details
</div>
</div>
<div class="divTableRow">
<div id = 'locations' class="divTableCell">
Locations
</div>
</div>
<div class="divTableRow">
<div id = 'users' class="divTableCell">
Users
</div>
</div>
<div class="divTableRow">
<div id = 'training' class="divTableCell">
Training
</div>
</div>
<div class="divTableRow">
<div id = 'contracts' class="divTableCell">
Contracts
</div>
</div>
</div>
<div class='divTableBottomBox'>
</div>
</div>
<div class='newDiv'>
Helllo <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</body>
</html>
There are two issues that I have;
1) I'd like the images in the header to stay within my 990px header during browser window resize.
2) How do I align (middle) images withtin header?
This is what I get after resize
Orange image goes under black one.
While they suppose to stay like this (within 990px of course)
Here is the code:
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding: 0;
margin: 0;
}
h1 {
padding: 0px;
margin: 0px;
}
#container {
margin:0px auto;
border:0px solid #bbb;
padding:10px;
min-width: 990px;
}
.white-box {
width: 180px;
margin: 0px;
}
#main-header {
border:1px solid #bbb;
height:98px;
padding:3px;
background:#FFF
min-width: 930px;
}
#main-content {
margin-top:10px;
padding-bottom:10px;
}
#main-body {
margin-left:10px;
width:666px;
height:150px;
}
#main-footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
}
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 5px;
border-radius: 8px;
background-color: #fff;
}
.box1 {
width: 200px;
float: left;
}
.box2 {
margin-left: 224px;
}
div.left {
width: 200px;
float: left;
}
div.right {
width: 730px;
float: right;
margin-right:3px;
}
</style>
</head>
<body>
<div id="main-header">
<div class="left"><img src="imgn/banners/logo.gif" border="0" alt=""></div>
<div class="right"><img src="imgn/banners/banner1.gif" border="0" alt=""></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
</div>
<div id="main-footer">Main Footer</div>
</div>
</body>
HTML:
<div id="main-header">
<div class="left"><img src="imgn/banners/logo.gif" alt="" border="0"></div>
<div class="right"><img src="imgn/banners/banner1.gif" alt="" border="0"></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="main-footer">Main Footer</div>
</div>
CSS:
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding: 0;
margin: 0;
}
h1 {
padding: 0px;
margin: 0px;
}
#container {
margin:0px auto;
border:0px solid #bbb;
padding:10px;
min-width: 990px;
}
.white-box {
width: 180px;
margin: 0px;
}
#main-header {
border:1px solid #bbb;
height:98px;
padding:3px;
background:#FFF
min-width: 933px;
}
#main-content {
margin-top:10px;
padding-bottom:10px;
}
#main-body {
margin-left:10px;
width:666px;
height:150px;
}
#main-footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
}
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 5px;
border-radius: 8px;
background-color: #fff;
}
.box1 {
width: 200px;
float: left;
}
.box2 {
float:right; margin-left:0px; width:748px;
}
div.left {
width: 200px;
float: left;
}
div.right {
width: 730px;
float: right;
margin-right:3px;
}
Use the CSS background-image property instead of using an image. This way you can set the width of the container div as a percentage of the width of the outer container div based on the new size of the window after resize.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body { background-color: #e8e8e8; font-family: Arial, Helvetica, sans-serif; font-size:12px; padding: 0; margin: 0; }
h1 { padding: 0px; margin: 0px; }
#wrapper{width:990px; margin:0 auto;}
#container { margin:0px auto; border:0px solid #bbb; padding:10px; width: 990px; }
.white-box { width: 180px; margin: 0px; }
#main-header { border:1px solid #bbb; height:98px; padding:3px; background:#FFF; width: 990px; margin:0px auto; }
#main-content { margin-top:10px; padding-bottom:10px; }
#main-body { margin-left:10px; width:666px; height:150px; }
#main-footer { margin-top:10px; margin-bottom:10px; padding:10px; border:1px solid #bbb; }
.box { padding: 8px; border: 1px solid silver; -moz-border-radius: 8px; -o-border-radius: 8px; -webkit-border-radius: 5px; border-radius: 8px; background-color: #fff; }
.box1 { width: 200px; float: left; }
.box2 { float:right; margin-left:0px; width:748px; }
div.left { width: 200px; float: left; }
div.right { width: 730px; float: right; margin-right:3px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="main-header">
<div class="left"><img src="http://img89.imageshack.us/img89/2675/logoxnx.gif" alt="" border="0"></div>
<div class="right"><img src="http://img199.imageshack.us/img199/9759/banner2b.gif" alt="" border="0"></div>
</div>
<div id="container">
<div id="main-content">
<div class="box box1">
left
</div>
<div class="box box2">
<p>Main Bbody 1...</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="main-footer">Main Footer</div>
</div>
</div>
</body>
</html>
As suggested by Pete in another thread: You need to increase the min-width of #main-header to around 950px
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;
}