I have a page with this elements:
<body>
<div class="C2">
<div class="Ban">
<div class="blockWithLabel position BankCode">
<span>BankCode</span>
<br />
<input type="text"/>
</div>
<div class="blockWithLabel position BranchCode">
<span>BranchCode</span>
<br />
<input type="text" style="width:500px"/>
</div>
<div class="blockWithLabel position AccountNumber">
<span>AccountNumber</span>
<br />
<input type="text"/>
</div>
<div class="blockWithLabel position CheckDigits">
<span>CheckDigits</span>
<br />
<input type="text"/>
</div>
<div class="blockWithLabel position BankName">
<span>BankName</span>
<br />
<input type="text"/>
</div>
<div class="position validator">
<div class="validator">VALIDATOR</div>
</div>
</div>
</div>
</body>
I want to apply this style:
.Ban { overflow:hidden }
div.blockWithLabel { display:inline-table; overflow:none; }
.C2 { background-color: blue; }
.C2 div.blockWithLabel { background-color:yellow; margin:2px;}
.C2 div.position { float:left}
With all browsers, I have (if the width of the screen is enough big) 6 elements in the same line
Now, I want to make breaks using
.C2 div.position.AccountNumber, .C2 div.position.validator { clear:left }
The problem is that with IE7, AccountNumber appears in a new line, but the next elements CheckDigit and BankName doesn't appear in the same line but in the previous !!
How can I fix it ?
use conditional comments for IE7
<!--[if lte IE 7]>
<style type="text/css">
/* hide other layout for other browsers by
setting display to none
*/
.C2 {
display:none;
}
</style>
Use ie7 formatting here with tables instead of divs.
<table>
<TR>
<T...................
<![endif]-->
Related
I'm trying to center a form on the screen using Materialize. I tried everything, but I can not do it for all resolutions and also be responsive. In certain resolutions it works perfect, but when you add or remove controls (), in some resolutions it looks good, in others it goes wrong. Some help? Thank you!
Code
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.card {
margin: 1rem 0 1rem 0 !important;
}
.card .card-title {
background-color: #26a69a;
}
.card-title span {
display: block;
text-align: center;
padding: 5px;
}
.card-content {
padding: 30px;
}
.valign {
width: 100%;
}
.valign-wrapper {
width: 100%;
background: url("http://vunature.com/wp-content/uploads/2016/10/trees-woods-tree-nature-path-forest-landscape-amazing-pictures-of-wallpapers.jpg") no-repeat;
}
.circle {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<header class="navbar-fixed">
<nav class="top-nav">
<div class="nav-wrapper grey darken-3">
<a class="brand-logo center" href="#">Logo</a>
<ul class="right">
<li>
Register
</li>
<li>
Log in
</li>
</ul>
</div>
</nav>
</header>
<div class="valign-wrapper">
<div class="valign">
<div class="container">
<div class="card">
<div class="card-title white-text">
<span>Register</span>
</div>
<div class="card-content">
<p>
Text text text text text text text text text text text text text text text text text text text text text text text
</p>
<form action="#" enctype="multipart/form-data" id="externalRegisterForm" method="post" novalidate="novalidate">
<div class="validation-summary-valid text-danger" data-valmsg-summary="true">
<ul>
<li style="display:none" />
</ul>
</div>
<div>
<section style="position: absolute; left: 50%; transform: translateX(-50%); display: none;">
<input type="submit" class="btn" value="Sign In">
<input type="submit" class="btn" value="x">
</section>
<img class="circle" src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" width="128" height="128" alt="">
</div>
<div class="row">
<div class="input-field col s12 m4 l4 xl4">
<input class="validate" data-val="true" data-val-required="El campo Nombre de usuario es obligatorio." id="UserName" name="UserName" type="text" />
<label for="UserName" class="active">Username</label>
</div>
<div class="input-field col s12 m4 l4 xl4">
<input class="validate" data-val="true" data-val-required="El campo Nombre(s) es obligatorio." id="Name" name="Name" type="text" />
<label for="Name" class="active">Name</label>
</div>
<div class="input-field col s12 m4 l4 xl4">
<input class="validate" data-val="true" data-val-required="El campo Apellido(s) es obligatorio." id="LastName" name="LastName" type="text" />
<label for="LastName" class="active">Last name</label>
</div>
<div class="input-field col s12">
<input class="validate" data-val="true" data-val-required="El campo Email es obligatorio." id="Email" name="Email" type="text" />
<label for="Email" class="active">Email</label>
</div>
</div>
</form>
</div>
<div class="card-action">
<input type="submit" class="btn" value="Sign In" form="externalRegisterForm" />
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<script type="text/javascript">
$(function() {
$('.button-collapse').sideNav();
});
</script>
</body>
</html>
EDIT
https://image.ibb.co/h7ESBk/1.jpg
See the white line below. It is a resolution of 1366x768. If you add more input, it looks "normal" and responsive. But if you delete an input you can see how the white background is larger.
Based on the feedback you gave in the comments, I think all you need is to add min-height: calc(100vh - 64px); to .valign-wrapper.
That will fill the whole page. You may have to modify the background property as well to make sure the image fills up the whole element, I couldn't load the image so I couldn't test that. The vertical alignment is already working.
Before:
After:
These UI libraries have been offering a 'grid' solution to this for some time now. However, I find vanilla CSS flexbox (whether hard coded or scripted with JS in the browser) to be super easy for centering both ways.
As for breakpoints, you will need them. I went thru all this on this here project https://github.com/rhroyston/firebase-v4-auth. Feel free to copy& paste as you need. Snippet below.
//ON LOAD INITIALLY ASSUME PHONE
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
doc.getElementById("title").style.display = "flex";
doc.getElementById("title-right").style.display = "none";
if (width >= 840) {
//IT'S A DESKTOP
doc.getElementById("title").style.display = "none";
doc.getElementById("title-right").style.display = "flex";
}
else if (width >= 480) {
//IT'S A TABLET
doc.getElementById("title").style.display = "flex";
doc.getElementById("title-right").style.display = "none";
}
//ON RESIZE INITIALLY ASSUME PHONE
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function actualResizeHandler() {
// assuming device is a phone
doc.getElementById("title").style.display = "flex";
doc.getElementById("title-right").style.display = "none";
if (window.innerWidth >= 840) {
//device is a desktop
doc.getElementById("title").style.display = "none";
doc.getElementById("title-right").style.display = "flex";
}
else if (window.innerWidth >= 480) {
//device is a tablet
doc.getElementById("title").style.display = "none";
doc.getElementById("title-right").style.display = "flex";
}
}
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
This question already has answers here:
Div side by side without float
(6 answers)
Closed 6 years ago.
This code is layed out in 1 column. I want to get a tabular 2 column layout.
<span id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>
How can I achieve this without using float?
fiddle
You can use the flexbox for that:
.container {
display: flex;
}
<div class="container">
<div id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</div>
<div id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</div>
</div>
Note that I changed your span to div elements (since span are inline and should not contain block elements).
I also wrapped the entire block with div.container so I'll be able to set that container as the flexbox.
Assuming you want the columns to be able to be shown/hidden, you could do this:
<head>
<script>
$('.next').click(function() {
var next = $('.col').next();
var curr = $('.col');
next.addClass('col-active');
curr.removeClass('col-active');
});
</script>
<style>
.col {
display: none;
}
.col-active {
display: block !important;
}
</style>
</head>
<body>
<span id="col1" class="col col-active">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2" class="col">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<a class="next">Next Page</a>
</body>
This essentially shows and hides the columns based on the <a> being clicked. I use this quite a lot when having sliders/tabulated pages.
Hope this helps :)
I was wondering if I could display divs according to the radio button selected without using Jquery, just pure css. Problem is I'm not sure if I can overcome the scope defined for it. Here's a mock up of what I've written for it.
<div class="tester">
<input type="radio" name="chk" class="chkbox chkbox1" id="chk1" checked/>
<label for="chk1">Paypal</label>
<input type="radio" name="chk" class="chkbox chkbox2" id="chk2" />
<label for="chk2">Braintree</label>
<input type="radio" name="chk" class="chkbox chkbox3" id="chk3" />
<label for="chk3">Du</label>
</div>
<div class="test">
<div id="chkbox1" class="box">Paypal</div>
<div id="chkbox2" class="box">Braintree</div>
<div id="chkbox3" class="box">Du</div>
</div>
</div>
<div class="test">
<div id="chkbox1" class="box"> Paypal </div>
<div id="chkbox2" class="box"> Braintree </div>
<div id="chkbox3" class="box"> Du </div>
</div>
</div>
CSS
.box{
border: 2px solid #ccc;
padding:20px;
margin:20px 0 0;
max-height:150px;
max-width:300px;
display:none /* By Default the box is hidden */
}
.chkbox1:checked ~ .test > #chkbox1,
.chkbox2:checked ~ .test > #chkbox2,
.chkbox3:checked ~ .test > #chkbox3 {
display: block
}
Any ideas?
JSfiddle for it here.
Im trying to get descriptions next to a 485 wide picture, I did it on my ways, but when trying to add a new line with the same picture and description something like this:
(source: gyazo.com)
But when I copy and paste the exact same line of code and add margin-top to that div, or even <br /> it won't make any space between them, that's how it is looking now:
(source: gyazo.com)
What is causing that? very interesting..
I am using twitter bootstrap framework.
Code:
<body>
<div class="container">
<div class="works">
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
</div>
<br />
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
</div>
</div>
</div>
<br />
</body>
CSS
.name-col {
color: #d3d3d3;
}
.title-col {
color: #b2b2b2;
float: left;
position: relative;
top: 7px;
}
.field2 {
margin-top: 50px;
}
.works {
margin-top: 10%;
}
.examplefloat {
float: left;
border: solid 1px #000;
margin-left: 50px;
}
.tag_webdesign {
background-image: url("../img/web-design.png");
width: 89px;
height: 37px;
float: left;
}
.work1 {
float: left;
}
Live preview:
http://justxp.plutohost.net/themetheory/portfolio.html
What is causing that problem?
Thanks
Add this rule to your CSS
.field1 {
margin-bottom: 30px;
overflow: hidden;
}
This will clear the floated elements in your .field1 container and apply a margin of 30px to its bottom.
Find the end </div> that pairs with the <div class="works">
Add above that end </div>:
<div style="clear:both"></div>
Should look like this.................
<body>
<div class="container">
<div class="works">
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
<div style="clear:both></div> //MY ADDITION
</div>
<br />
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
<div style="clear:both></div> //MY ADDITION
</div>
</div>
</div>
<br />
</body>
What you want to do is use a clearfix solution on your .field1 divs: https://stackoverflow.com/a/1633170/1778054
In essence, add this to your CSS:
/* For modern browsers */
.field1:before,
.field1:after {
content:"";
display:table;
}
.field1:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.field1 {
zoom:1;
}
If you take the float:left; off the .examplefloat (used on the images) class it will fix the margin issue.
I've been working on our company website this morning and I've hit a bit of a problem. I have the page formatted into two cells, one on the right and one on the left. The one on the right contains an image which is around 790 pixels wide. When I shrink the browser window to the point to where it will no longer fit, the whole cell jumps below the first cell. How can I prevent this from happening?
Code...
xhtml
<!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>
<title>
Test
</title>
<link href="StyleSheet1.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg2ODI4NzA2OWQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFCUNoZWNrQm94MU+tEbqmFYLAUCuNpKlG5GJdxlTP" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKUzskuAuzRsusGAoznisYGAuzR9tkMAuzRirUFAoLk17sJArursYYIEh1rVMqwd3ohPqFy9J1P74IvCz4=" />
</div>
<div style = "padding-left:15%;">
<div class = "header">
<img src="images/logoclr.bmp" style="height:56px;width:253px;border-width:0px;" />
<input name="TextBox1" type="text" id="TextBox1" style="width:414px;" />
<input type="submit" name="Button1" value="Search" id="Button1" />
</div>
<br /><br /><br /><br /><br />
<div class="loginSide">
<div class = "internalBox">
Log On To Invoice Viewer
</div>
<br />
<span>Login ID:</span>
<br />
<input name="TextBox2" type="text" id="TextBox2" />
*<br />
<br />
<span id="Label1">Password</span>
<br />
<input name="TextBox3" type="text" id="TextBox3" />
*<br />
<br />
<input id="CheckBox1" type="checkbox" name="CheckBox1" />
Remember my Login ID<br />
<br />
<div style="padding-left:20px;"><input type="submit" name="Button2" value="Login" id="Button2" /></div>
<br />
</div>
<div class = "imageSide">
<img src="images/1_back11.jpg" style="border-width:0px;" />
</div>
</div>
</form>
</body>
</html>
css
body
{
background-color:rgb(227,227,225);
font-family:Verdana;
font-size:.8em;
margin-left:auto;
}
.loginSide
{
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:275px;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}
.imageSide
{
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:792px;
padding:10px;
background-color:rgb(223,232,237);
float:left;
}
.internalBox
{
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
background-color:rgb(54,113,109);
color:White;
}
Try to set an id to the div that wraps everything (e.g. <div id="wrapper" style="padding-left:15%;">) and create a CSS selector for it where you specify a minimum width:
#wrapper {
min-width: 900px;
}
The width you should choose according to the minimum width where the image div doesn't wrap. Of course, now that you have a selector for the wrapper, you could move the padding-left into the CSS as well instead of having it inline.
Here's and example fiddle
You can try to make the width of your cells dynamic. If you use a percentage instead of a fixed width it will automatically adjust to the window size.
.imageSide
{
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:70%;
padding:10px;
background-color:rgb(223,232,237);
float:left;
}
.loginSide
{
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:30%;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}
Just Don't provide the width of imageSide because it must adjust with remaining width of browser window while loginSide must stick to its own solid width.
Try this fiddle.
One more thing, you are using float: left in both loginSide and imageSide, just use it at loginSide, imageSide will than adjust automatically.
Here is the updated fiddle.
And, finally if you want your own code without any much altration, i got this also for you. :)
Here is the your second updated fiddle with imageSide width:792px also..
Cheers.. :)
Figured it out, I wrapped the image in this div:
<div style = "overflow: hidden;">