I'm trying to make a 2x2 grid, which fills up the entire window in an iPhone, with a table.
Currently it looks like this:http://dl.dropbox.com/u/182509/photo.PNG
Note the squshed-uppy-ness of the right column, and the gap at the left.
I cant fix either.
Relevant css:
body { margin: 0; position: absolute; height: 100%; }
.full { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: white; }
table { border-width: 0px; border-spacing: 0px; border-style: hidden; border-color: gray; border-collapse: collapse; background-color: white; width: 100%; height: 100%; left: 0; top: 0px; margin: 0; padding: 0px; position: absolute; }
td { border-width: 1px; padding: 1px; border-style: solid; border-color: gray; background-color: white; width: 50%; height: 160px; }
and html:
<div id="helpView" class="full">
<table id="help">
<tr>
<td>Hey..</td>
<td>Hi.</td>
</tr>
<tr>
<td>Hello.</td>
<td>Greetings!</td>
</tr>
</table>
</div>
Any help appreciated
Since your td has border set to 1px, it adds to the total width of what we are seeing, so you have to reduce the width of your td. See box model for reference:
http://www.w3.org/TR/CSS2/box.html
or you can set the left of your table to -1 to adjust it to left:
table{left:-1}
it will work since the position is absolute.
You've overcomplicated things.
http://jsfiddle.net/Z3rs5/
You should write simple code, also, do't cram all of the CSS statements in one row, every time you do that, God kills a kitten!
Related
I'm having some trouble getting a table with width: 100% flush with it's parent div. For some reason a less than 1px gap is seen on either side of the table.
I've tried setting all margins and padding to 0 as well as setting the min and max width for the div but it still won't use all of the available contents. Would really appreciate any help someone can give on this. Here's the css for the table and it's parent div as well as some images of the issue:
.library,
.player,
.playlist {
box-sizing: border-box;
}
.playlist {
position: fixed;
border: 1px solid black;
width: 70%;
height: 90%;
left: 30%;
top: 10%;
}
.playlist table {
margin: 0;
padding: 0;
width: 100%;
border-collapse: collapse;
}
.playlist th,
td {
margin: 0;
padding: 0;
border: 2px solid black;
}
Can't understand how to make this trick or this with css. I mean the header and the flag. The line is not straight. They are inclined/sloping bordered.
Could you, please, give an example or just exmplain this works?
Have a look at https://jsfiddle.net/josedvq/3HG6d/
HTML
<div class="triangle-up-left"></div>
CSS
.triangle-up-left {
width: 0;
height: 0;
padding-bottom: 10%;
padding-left: 10%;
overflow: hidden;
}
.triangle-up-left:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-bottom: 500px solid transparent;
border-left: 500px solid #4679BD;
}
They use a trick where you make some borders transparent in order to create a triangle. More information about this technique at How do CSS triangles work?
I can't seem to make an element move in CSS. It's a form with a background and it's centered. I can't see what I'm doing wrong.
#skyformbox {
width: 50%;
margin: 0 auto;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-
content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
<div align="left">
<div id="skyformbox">
[gravityform id="12" title="false" description="false"]
</div>
</div>
Why are you positioning 2000px left? As far as I know the "left" property will only work if the positioning is set to absolute...
Anyway try this:
#skyformbox {
width: 50%;
margin-left: 0px;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
Setting the margin-left to 0px did the trick for me (assuming that what you're trying to do here is to get the form to align to the left side of the page).
here i have two tables
<div class="ex1">
<table>
<th> table1</th>
<tr>..</tr>
<tr>....</tr>
</table>
</div>
<div class="ex2">
<table>
<th>table2</th>
<tr>..</tr>
<tr>....</tr>
</table>
</div>
my css for those class ,what i wrote is
.ex1{
display: block;
position: relative;
margin: 0;
padding: 0;
border: 0px solid #CCC;
overflow: hidden;
clear: right;
height: 392px;
width: 630px;
}
.ex2{
display: block;
position: relative;
clear: right;
margin: 3px 0 0 0;
border: 1px solid #CCC;
padding-top: 0px;
color: #5A5655;
background-color: #F8F8F8;
text-align: left;
overflow: auto;
z-index: 88;
height: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
width: 620x;
}
here what i want is when i wrote the above code ,it displays the 2 tables fine,i want to display the table2 first ,then i want to display the table1 by using css only without touching the html code....
how can i do this one ? can anyone help me...
http://jsfiddle.net/Y3BMe/
Use position:absolute for the second table with top: 0 and then move down the first table by using the margin-top property
In your real world example it may require some tweaking - see css positioning for help
I'm trying to make liquid HTML layout with header (taking all available width and 130px height), 2 columns (1: 300px width all possible height, 2: all available width after column 2 took its 300px and 15-20px margin between them).
Atm I've got this:
HTML:
<div class="wrapper">
<div class="header">
<!-- .... -->
</div>
<div class="content">
<div class="left-column">
<!-- ... -->
</div>
<div class="right-column">
<!-- ... -->
</div>
</div>
</div>
CSS:
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
min-width: 1000px;
min-height: 500px;
}
body {
font: 12px sans-serif;
background-color: #fff;
color: #000;
}
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
.header {
padding: 0 30px;
height: 100px;
left: 0px;
right: 0px;
position: absolute;
border: 1px solid black;
border-top: none;
}
.content {
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 0px;
margin: 10px 20px;
border: 1px solid black;
}
.left-column {
float: left;
width: 300px;
border: 1px solid black;
}
.right-column {
margin-left: 315px;
border: 1px solid black;
}
The question is: are there any better solutions?
Thanks.
I took your HTML and created this fiddle for you: http://jsfiddle.net/RdQJY/1/. I didn't use any of your CSS though - I just don't like positioning used in the way you are using it, so decided to write it from scratch (sorry about that). The lorem ipsum text is just there as a placeholder - if you remove it, you'll see that the divs will occupy the whole window. Hope this helps!
P.S.: the only drawback to my method of having equal-height columns is that there is no easy way to apply a bottom border to them.