The page looks as expected on desktop browsers e.g. Firefox, etc. The problem is with display on mobile devices.
When displayed correctly, the dark background of the "BODY" of the page should appear only as a thin frame, with the white background of the "mainFrame" div appearing as central with all contents inside it.
I have tied to change the width of the "mainFrame" class to 100% but it didn't help.
What changes should be made to the css to allow correct display on not desktop and mobile devices browsers?
Please see the CSS and HTML below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir='ltr'>
<head>
<style>
html, body{height:100%;text-align: center;background:#646464;}
body{padding:0px;margin:0px; text-align: center;}
.mainFrame{
width: auto;
min-height:100%;
height: 100%;
background: white;
border: 5px solid #CCCCCC;
margin:auto;
}
html>body .mainFrame {width:auto; height: auto;}
th{
text-align: center;
padding: 9px 0px 9px 0px;
background: #E8E8FF;
font: bold 12px TAHOMA;
color: #404040;
}
td {
font: 11px Tahoma;
background: #DFEFFF;
padding: 8px 5px 8px 3px;
}
td.blank{
padding: 12px 0px;
background: WHITE;
}
.logosmallContainer {
position: relative;
width: 960px;
top: 22px;
}
.logosmallContainer1 {
position: relative;
width: 720px;
top: 22px;
}
.logosmall {
float:right;
}
.jobtabs{
position: relative;
top:40px;
width: 720px;
}
.upperTabs{
position: relative;
font-size: 12px;
width: 720px;
clear:both;
}
.uprTabs {
width:120px;
text-align:center;
padding:0px;
font: 12px tahoma;
float:right;
}
.uprTabs a {
width:120px;
height: 30px;
line-height:30px;
background-color: #EEEEEE;
text-decoration: none;
border-top: 1px #F5F5F5 solid;
border-left: 1px #F5F5F5 solid;
border-bottom: 1px #F5F5F5 solid;
border-right: 1px #F5F5F5 solid;
}
html>body .uprTabs a {width:118px; display:table; }
.uprTabs a:hover{
background-color: #C3E2DB;
text-decoration: none;
border-top: 1px solid #31557f;
border-left: 1px solid #31557f;
border-bottom: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
}
.lowerTabs{
position: relative;
font-size: 12px;
width: 720px;
border-top: solid #007FC0 5px;
clear:both;
}
html>body .lowrTabs a {width:118px; display:table;}
.lowrTabs {
width:120px;
background-color: #EEEEEE;
text-decoration: none;
text-align:center;
font: 12px tahoma;
float:right;
height: 27px;
line-height:27px;
}
.lowrTabs a {
width:120px;
height: 25px;
line-height:25px;
background-color: #EEEEEE;
text-decoration: none;
border-top: 1px #F5F5F5 solid;
border-left: 1px #F5F5F5 solid;
border-bottom: 1px #F5F5F5 solid;
border-right: 1px #F5F5F5 solid;
float:right;
}
.lowrTabs a:hover{
background-color: #C3E2DB;
text-decoration: none;
border-top: 1px #31557f solid;
border-left: 1px #31557f solid;
border-bottom: 1px #E6E6E6 solid;
border-right: 1px #E6E6E6 solid;
}
.vMsg2 {
font: bold 22px arial;
position: relative;
top: 78px;
width: 720px;
text-align: center;
direction:rtl;
clear:both;
}
.vMain {
position: relative;
top: 113px;
width:620px;
direction:rtl;
clear:both;
}
.vMainJobs {
position: relative;
top: 30px;
width:620px;
direction:rtl;
clear:both;
}
.pgn1 {
width: 330px;
top:30px;
position: relative;
}
html>body .pgn1 {display:table;}
.pgnbx {
width: 30px;
height: 20px;
line-height:20px;
float:right;
text-decoration: none;
text-align:center;
}
html>body .pgnbx a {display:table;}
.pgnbx a{
width: 30px;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
background: #FFF;
background: #CDF6ED;
}
.pgnbx a:hover{
width: 30px;
background: #B3E1D7;
border-color: #fff #ccc;
text-decoration: none;
}
.mainXJobs {
height:55px;
clear:both;
}
.ad728Y{
position: relative;
width:728px;
border-top: double thick #D3D3D3;
border-bottom: double thick #D3D3D3;
}
</style>
</head>
<body topmargin='0' leftmargin='0' >
<div class="mainFrame" align="center">
<div class="logosmallContainer1">
<div class="logosmall"><img border="0" src="media/small.jpg" alt="logo"></div>
<DIV class=adtop2>
</div>
</div>
<div class="jobtabs">
<div class="upperTabs">
<DIV class=uprTabs><A href="?Category6">Category 6</DIV>
<DIV class=uprTabs>Category 5</DIV>
<DIV class=uprTabs>Category 4</DIV>
<DIV class=uprTabs>Category 3</DIV>
<DIV class=uprTabs> Category 2</DIV>
<DIV class=uprTabs>Category 1</DIV>
</div>
<div class ="lowerTabs">
<DIV class=lowrTabs>Category 7</DIV>
<DIV class=lowrTabs>Category 8</DIV>
<DIV class=lowrTabs>Category 9</DIV>
<DIV class=lowrTabs>Category 10</DIV>
<DIV class=lowrTabs> Category 11</DIV>
<DIV class=lowrTabs>Category 12</DIV>
</div>
</div>
<div class='vMsg2'><H1>
GENERAL LIST
</H1></div>
<br><br><br><br><br><div class="ad300" id="ad"></div><div class='vMainJobs' dir='ltr'> <table border='0' width='100%' dir='ltr' cellspacing='1'>
<tr>
<th width='100%' colspan='2'>DETAILS</th>
</tr>
<tr>
<td width='18%'height='18' valign='top'>LOCATION </td>
<td height='18'>LONDON</td>
</tr>
<tr>
<td width='18%'height='18' valign='top'>LINK</td>
<td height='18'><a href='https://www.example.com'>https://www.example.com</a></td>
</tr>
</table>
<table border='0'>
<tr>
<td class='blank'>
<a href='#top'>top of page</a>
</td>
</tr>
</table>
</div>
<div class="pgn1">
<div class='pgnbx'>
<a href='?jpage=2'>2</a>
</div>
<div class='pgnbx'>
<a href='?page=3'>3</a>
</div>
<div class='pgnbx'>
<a href='?jpage=4'>4</a>
</div>
<div class='pgnbx'>
<a href='?page=5'>5</a>
</div>
<div class='pgnbx'>
<a href='?jpage=6'>6</a>
</div>
<div class='pgnbx'>
<a href='?page=7'>7</a>
</div>
<div class='pgnbx'>
<a href='?jpage=8'>8</a>
</div>
<div class='pgnbx'>
<a href='?page=9'>9</a>
</div>
<div class='pgnbx'>
<a href='?page=10'>10</a>
</div>
<div class='pgnbx'>
<a href='?jpage=11'>11</a>
</div>
<div class='pgnbx'>
<a href='?page=12'>12</a>
</div>
</div>
<div class="mainXJobs"> </div>
<DIV class="ad728Y"> PUT item "Classicus" here HERE</DIV>
<br><br><br>
</div>
</body>
</font>
</html>
The reason your body does not adjust is because you are assigning width using px. Try to change it to "%" or "vw". You can always assign a max-width or min-width if you want to put a limit on how much you want the width to be.
If you need to have the children adjust to the parent container, assign the width: 100%.
You have to use media query for mobile devices.
For example if I want to add background color for the device of maximum 600px, it will show body background color as
lightblue
after 600px it will be the default.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Related
How do I achieve the following look and feel using html and/or css?
I want to draw a border around column1.
Can this be done in a single table with a div or will I have to create a new table with a single td and multiple rows?
Hopefully this is what you need:
CSS:
.border1
{
border: 2px solid black;
border-bottom:0px;
}
.border2
{
border: 2px solid black;
border-bottom:0px;
border-top:0px;
}
.border3
{
border: 2px solid black;
border-top:0px;
}
table
{
border-collapse: collapse;
}
<table>
<tr>
<td>q</td>
<td class="border1">q</td>
</tr>
<tr>
<td>q</td>
<td class="border2">q</td>
</tr>
<tr>
<td>q</td>
<td class="border2">q</td>
</tr>
<tr>
<td>q</td>
<td class="border3">q</td>
</tr>
</table>
Note: There are other ways to do this but since you wanted to use a table here you go(no need for two tables!!).
You can do it without table:(to set items one each other use flex)
.wrap{
display:flex;
}
.wrap-container{
border:1px solid black;
text-align:center;
width:30%;
margin-right:5px;
}
.elem{
border:1px solid black;
margin:5px;
margin-left: 5.5%;
width:150px;
padding:5px;
}
.title{
}
<div class="wrap">
<div class="wrap-container">
<div class="title">Column1</div>
<div class="elem">value</div>
<div class="elem">value</div>
<div class="elem">value</div>
<div class="elem">value</div>
<div class="elem">value</div>
</div>
<div class="wrap-container">
<div class="title">Column1</div>
<div class="elem">value</div>
<div class="elem">value</div>
<div class="elem">value</div>
<div class="elem">value</div>
<div class="elem">value</div>
</div>
</div>
Here is a fiddle for you.
.option-wrapper {
border: 2px solid blue;
width: 150px;
text-align: center;
}
.option-title {
color: blue;
margin-top: 10px;
}
.options {
margin-top: 10px;
}
.option {
border: 1px solid grey;
margin: 10px;
padding: 6px 0px;
}
<div class="option-wrapper">
<div class="option-title">
column1
</div>
<div class="options">
<div class="option">
option 1
</div>
<div class="option">
option 1
</div>
<div class="option">
option 1
</div>
<div class="option">
option 1
</div>
</div>
</div>
I've created a table-less solution, hopefully, this is what you're looking for.
You can write code like this.
CSS:
<style>
body {
margin: 0px;
padding: 0px;
}
.wrapper {
border: 1px solid red;
padding: 10px;
width: 200px;
}
.wrapper>div {
border: 1px solid blue;
font-size: 14px;
margin-bottom: 10px;
}
.wrapper>div:last-child {
border: 1px solid blue;
font-size: 14px;
margin-bottom: 0px;
}
</style>
HTML:
<div class="wrapper">
<div>view1</div>
<div>view2</div>
<div>view3</div>
<div>view4</div>
<div>view5</div>
</div>
I've used bootstrap columns to setup the layout like a dashboard for a new business concept. I've got some progress bars that sit within a div, however trying order and fit the five bars is proving difficult without the fifth bar jumping out of the div. I'd like the bars stacked in the div with the labels sitting on top or next to the bars. Can you help please. Ps. the id's are just for changing the length of the progress bar.
The code for the bars is:
.container-for-bar{
border:1px solid gray;
height:12px;
width:100px;
padding:1px;
display: inline-block;
}
.bar{
background-color: purple;
width:50%; /*change this for progress*/
height: 100%;
}
.bar-text {
display:inline-block;
font-size: 12px;
}
.bar-text-top {
font-size: 12px;
}
.progress-bar-purple {
background-color: purple;
color: black;
}
/* Bootstrap progress bars*/
.progress-bar-text {
float: left; text-align: center;
padding-left: 2px;
}
.half-unit {
margin-bottom: 20px;
padding-bottom: 4px;
border: 1px solid #383737;
background-image:url('../img/sep-half.html');
background-color: #D8D8D8;
color:black;
height:130px;
padding: 5px;
}
.tipi {
}
.purple {
background-color: #5C005C;
color:white;
}
.half-unit:hover {
background-color: #4f4f4f;
-moz-box-shadow: 3px 3px 2px 0px #151515;
-webkit-box-shadow: 3px 3px 2px 0px #151515;
box-shadow: 3px 3px 2px 0px #151515;
}
.half-unit dtitle {
font-size:10px;
text-transform:uppercase;
color:#000000000000;
margin:0px;
padding:0px;
height:inherit
}
.half-unit hr {
border: 0;
border-top: 1px solid #151515;
border-top-style: dashed;
margin-top:0px;
}
.half-unit h1 {
font-family: 'Raleway', sans-serif;
font-weight:300;
font-size: 20px;
line-height: 1;
letter-spacing: 0px;
color: #000000000000;
padding-top:10px;
padding-left:5px;
margin-top:2px;
text-align:center;
}
.half-unit h4 {
padding-left:5px;
margin-top:2px;
font-size: 13px;
font-weight:lighter;
line-height: 1;
letter-spacing: 0px;
color: #000000;
}
.half-unit bold{
font-family: 'Open Sans', sans-serif;
font-size:26px;
font-weight:bold;
color:#000000;
vertical-align:middle;
}
.green {
background-color: 'green';
}
<div class="col-sm-3 col-lg-3">
<div class="half-unit tipi">
<dtitle>T.I.P.I</dtitle>
<hr>
<div class="col-sm-6">
<div class="bar-text-top"> Extroversion </div>
<div class="container-for-bar">
<div class="bar" id="Extroversion_bar"></div>
</div>
<div class="bar-text-top"> Conscientiousness </div>
<div class="container-for-bar">
<div class="bar" id="Conscientiousness_bar"></div>
</div>
</div>
<div class="col-sm-6">
<div class="bar-text"> Agreeableness </div>
<div class="container-for-bar">
<div class="bar" id="Agreeableness_bar"></div>
</div>
<div class="bar-text"> Calmness </div>
<div class="container-for-bar">
<div class="bar" id="Calmness_bar"></div>
</div>
<div class="bar-text"> Openess </div>
<div class="container-for-bar">
<div class="bar" id="Openess_bar"></div>
</div>
</div>
</div>
I split into rows and then columns, that seemed to work.
I have two different types of div, each should have an arrow attached to the side that points at the image next to it. However, it looks like this:
http://jsfiddle.net/990h3wot/1/
How do I make the arrows move to the side of the divs rather than sit inside them as they are doing now?
Position .home-link-left and .home-link-right relatively and set left and right properties of :before and :after :pseudo-elements.
Fiddle
.home-link-left,
.home-link-right {
vertical-align: middle;
margin: auto;
width: 35vmin;
height: 12vmin;
border: 0.7vmin outset #232323;
background-color: #606060;
background: -webkit-radial-gradient(#707070, #505050);
background: -moz-radial-gradient(#707070, #505050);
background: -o-radial-gradient(#707070, #505050);
background: radial-gradient(#707070, #505050);
color: white;
position: relative;
}
.home-link-left {
border-radius: 20px 0px 0px 20px;
left: 0px;
border-right: 0px solid transparent;
}
.home-link-right {
border-radius: 0px 20px 20px 0px;
right: 0px;
border-left: 0px solid transparent;
}
.home-link-left:before,
.home-link-right:after {
content: '';
position: absolute;
width: 0px;
height: 0px;
border-bottom: 6vmin solid transparent;
border-top: 6vmin solid transparent;
vertical-align: middle;
display: block;
}
.home-link-container {
width: 45vmin;
height: 13vmin;
margin: auto;
vertical-align: middle;
}
.home-link-left:before {
border-left: 4vmin solid red;
right: -4vmin;
}
.home-link-right:after {
border-right: 4vmin solid red;
left: -4vmin;
}
.home-link-image {
border: 0.7vmin outset #333333;
vertical-align: middle;
margin-top: -10%;
margin: auto;
width: 35vmin;
height: 25vmin;
border-radius: 20px;
}
<table id="home-table">
<tr>
<td>
<div class="home-link-container">
<div class="home-link-left">
</div>
</div>
</td>
<td>
<div class="home-link-image"></div>
</td>
</tr>
<tr>
<td>
<div class="home-link-image"></div>
</td>
<td>
<div class="home-link-container">
<div class="home-link-right">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="home-link-container">
<div class="home-link-left">
</div>
</div>
</td>
<td>
<div class="home-link-image"></div>
</td>
</tr>
<tr>
<td>
<div class="home-link-image"></div>
</td>
<td>
<div class="home-link-container">
<div class="home-link-right">
</div>
</div>
</td>
</tr>
</table>
You must give the arrow parents,.home-link-left .home-link-right, position:relative:
.home-link-left, .home-link-right{
vertical-align:middle;
margin:auto;
width:35vmin;
height:12vmin;
border:0.7vmin outset #232323;
background-color:#606060;
background: -webkit-radial-gradient(#707070, #505050);
background: -moz-radial-gradient(#707070, #505050);
background: -o-radial-gradient(#707070, #505050);
background: radial-gradient(#707070, #505050);
color:white;
position:relative;/*<- Position:relative;*/
}
And give the pseudo element arrows a position left or right:
.home-link-left:before{
border-left:4vmin solid red;
right:-4vmax;
}
.home-link-right:after{
border-right:4vmin solid red;
left:-4vmax;
}
JSFiddle
I am creating a table madde with several divs, and I am having an extra space between the first row (styled as head) and the rest of them, only the fist two columns (divs). Here you can see very clear:
There is no style atribute causing this space, at least I am not able to find the reason of it.
I have reproduced it on jsfiddle and you can see that it also sets the extra space: DEMO
Here I bring HTML & Syle related code:
HTML:
<div class="tableWrap">
<div class="tableHeader">
<div class="contentColumn60">
<span class="tableHeaderText">Turno</span>
</div>
<div class="contentColumn20">
<span class="tableHeaderText">Tipo</span>
</div>
<div class="contentColumn10">
<span class="tableHeaderText">Editar</span>
</div>
<div class="contentColumn10">
<span class="tableHeaderText">Reactivar</span>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
STYLE:
.tableWrap{
width: 100%;
height:380px;
border:#ccc 1px solid;
border-radius:3px;
box-shadow: 0 1px 2px #d1d1d1;
margin: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
font-size:12px;
color:#666;}
.tableHeader{
height: 40px;
width: 100%;
background: -moz-linear-gradient(center top , #EDEDED, #EBEBEB) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-bottom: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
border-top: 1px solid #FAFAFA;
display: inline-block;
font-weight: 600;
}
.tableHeaderText{
line-height: 40px;
padding: 0 10px;
}
.tableContent{
height: 40px;
width: 100%;
}
.tableContentText{
line-height: 40px;
padding: 0 0 0 20px;
}
.contentColumn60{
height: 40px;
width: 58%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.contentColumn20{
height: 40px;
width: 20%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.contentColumn10{
height: 40px;
width: 10%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.discontinueIcon{
width: 23px;
height: 23px;
background-size: 98%;
background-image: url(images/error.png);
background-repeat:no-repeat;
margin: 0 auto;
}
.editIcon{
width: 23px;
height: 23px;
background-size: 98%;
background-image: url(images/edit.png);
background-repeat:no-repeat;
margin: 0 auto;
}
Since the elements are inline-block, you could use vertical-align:top to align them as desired. It's worth noting that the default property value is baseline; this explains why they were behaving as they were. UPDATED EXAMPLE HERE
.contentColumn60 {
height: 40px;
width: 58%;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
display: inline-block;
vertical-align: top;
}
.contentColumn20 {
height: 40px;
width: 20%;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
display: inline-block;
vertical-align: top;
}
use overflow:hidden; for content column60,20,10 it works perfect
add a clearfix or use vertical-align:top and overflow:hidden
.contentColumn60:after {
content: "";
display: table;
clear: both;
}
This is basically what I want. Record ID on the left, then the actual post on the right. Instead I get this.
body{
background-color: #333333;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
}
h2{
display:inline;
}
h2 a{
color:#ffffff;
}
hr{
border: 1px solid #db8039;
}
.post {
margin-left:auto;
margin-right:auto;
width: 66%;
background-color: #1a1a1a;
border-radius:10px;
font-size: 15px;
padding: 10px 10px 5px 10px;
}
.button{
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#222));
background: -moz-linear-gradient(top, #333, #222);
color:#888;
height:40px;
}
div.test{
border: 1px solid white;
}
<div id="post'.$row['postId'].'" class="post">
<div id="left" style="float:left">
<h2>0</h2>
</div>
<div id="right">
<div style="float:left;">
<h2><a href=#>TITLE</a></h2>
</div>
<div style="float:right;">
Posted By: USER on DATE
</div>
<br style="clear:both;"/>
<hr />
<p>BODY</p>
</div>
</div>
I'm sure this is extremely simple to do, I am just at a loss, my CSS skills are... sub par I suppose.
Any help would be greatly appreciated! Thanks!
I made a complete new 1 if you wish to check it out
Demo
Edit: New Demo
HTML
<div class="container">
<div class="count">1</div>
<div class="upper">Test 2</div>
<hr>
<div class="down">Body</div>
</div>
CSS
.container {
width: 500px;
height: 100px;
background: #000;
position: relative;
}
.count {
float: left;
color: #fff;
font-size: 30px;
line-height: 100px;
width: 50px;
text-align: center;
}
.upper {
color: #fff;
font-size: 22px;
line-height: 40px;
}
.down {
color: #fff;
font-size: 22px;
line-height: 40px;
}
Though I don't recommend to use this, it will be pretty easier to achieve this using tables too
Table Demo
HTML
<table border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
CSS
table {
width: 50%;
margin: 30px;
}
table tr:nth-child(1) td:nth-child(1) {
width: 100px;
}
Try adding the following rules:
#left{
width:5%;
display:inline-block
}
#left h2{
font-size:40px;
}
#right{
width:94%;
display:inline-block
}
jsfiddle: http://jsfiddle.net/dPX8J/15/