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
Related
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).
I've been looking for solutions everywhere but I can't understand how to separate the text from the iframe. Everything I tried did not work (for example, this answer).
This is a screenshot to have an idea:
this is the HTML (I used it very rarely in my life and never worked with containers before, so I'm sure the error is clearly visible to someone more skilled than me):
<div class="container">
<iframe src="link" width="500px" height="500px" align="left" style="border: 1px solid #ccc" frameborder=0></iframe>
<article>
<font face="calibri" size="30" style="background-color: powderblue;">title</font>
<h4></h4>
<font face="verdana">text</font>
</article>
</div>
This is the CSS (I was testing margin-left: 10px but 10 or 1000px won't change anything):
article {
margin-left: 10px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
body {
max-width: 100%;
}
div.container {
width: 100%;
border: 1px solid gray;
}
iframe {
float: left;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 20px;
}
I think you could solve it by setting position: relative; to your article tag. This way, you could then specify the position offset that you want it to have using the left property instead of using the margin-left property.
I mean:
article {
position: relative;
left: 10px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
body {
max-width: 100%;
}
div.container {
width: 100%;
border: 1px solid gray;
}
iframe {
float: left;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 20px;
}
If this is not exactly what you wanted, I also think that the position property, together with the left, right, top and bottom properties, seem quite suitable for your problem, so I suggest you should take a look of them.
HTML5 does not support those for iframe style, there is no way to set them through style sheet.
Hello I had problem positioning a div to the center of the page.
CSS:
.fancyClass{
border: 1px solid #999;
border-radius: 10px;
display: inline-block;
margin: 0 auto;
}
Am I doing something wrong? Also I should mention that this div is inside another div, so could that be a problem? How to avoid it than?
Have you tried to enter the width to be smaller than the outer div?
Something like that:
.fancyClass{
width: 50%;
margin: 0 auto; <!-- that does the actual centering -->
#all the other attributes you have
}
Please Try this and let us know
HTML:
<div class="outterDiv">
<div class="innerDiv">
some thing here
</div>
</div>
CSS:
.outterDiv{
width: 100%;
background-color: #ccc;
padding: 25px;
}
.innerDiv{
width: 50%;
background-color: #eee;
margin: 0 auto;
text-align: center;
}
fiddle EXAMPLE HERE
here you can see the div is horizontally and vertically centered in page. Here is the Demo.
have a look at CSS.
body{margin:0 auto;
text-align:center;
}
.fancyClass{
border: 1px solid #999;
border-radius: 10px;
display: inline-block;
text-align:left;
width: 25%;
height: 25%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
<div class="fancyClass">
this text will be center
</div>
This should do the work:
margin-right:25%;
margin-left:25%;
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.
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!