I am laying out a website with a table, and the logo goes in the top row of the table. The logo is a mostly transparent image with a green background, and it is in a table with a red background. However, the table cell is not shrinking to fit the image vertically and so it is showing some of the background red below the image when I don't want it to. I have tried setting the margin and padding all to 0, setting cell-spacing and cell-padding to 0, and removing borders, but none of it has worked.
My browser's page inspector tool shows that the td element is responsible for extending the height of the cell, not the tr or table
What am I missing? I feel like it is something really simple.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles2.css" />
</head>
<body>
<div id="wrapper">
<table id="layoutTable" >
<tr>
<td class="layoutTabletd">
<img id="logoImage" src="res/logobar2.png"/>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS:
#wrapper
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#layoutTable
{
background-color: #FF0000;
margin: 0px;
padding: 0px;
border-collapse: collapse;
}
#layoutTable tr td.layoutTabletd
{
border: 1px solid black;
padding: 0px;
margin: 0px;
}
#logoImage
{
background-color: #00FF00;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
Result:
Solved: http://jsfiddle.net/r0801v5v/
#layoutTable
{
line-height:0;
background-color: #FF0000;
margin: 0px;
padding: 0px;
border-collapse: collapse;
}
Notice the added line-height:0; - I am not exactly sure why this happens but I've seen it before. Hope I helped.
Related
I am facing problem with the borders of div and h2. I tried everything to remove the little space at the bottom of
h2 but failed. Also, I wish that the border of h2 overlap the border of div.
<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 80%;
margin: 0 auto;
margin-top: 100px;
border: 2px solid black;
}
div h2 {
border: 2px solid black;
}
</style>
</head>
<body>
<div>
<h2>Level 2 Heading</h2>
</div>
</body>
</html>
I noticed that problem occurs based on the zoom in or zoom out. If you zoom in the problem will disappear if you zoom out it will happen again. But anyway.
if you use the property outline instead of border for the div the problem will disappear at all screen sizes. More info about outline property
CSS I changed
div {
width: 80%;
margin: 0 auto;
margin-top: 100px;
outline: 2px solid black;
}
div h2 {
border: 2px solid red;
margin: 0;
}
Or you could just give the container div border of 4px if you want it that thick and remove the h2 border completely and the opposite is correct.
Suppose I have a table like this on an HTML page, with a purple border around the th cells and a green border around the td cells:
Some code that produces this (the CSS for the view-small class isn't in use in the above display but it's about to be explained):
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Table Transformation</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>
<style>
body { font-family: "Opens Sans", sans-serif; }
td { border: 1px solid green; }
th { border: 1px solid purple; }
.view-small table { display: block; width: 100%; }
.view-small tbody { display: block; }
.view-small tr { display: block; width: 100%; margin: 2em auto; position; relative; }
.view-small th { display: block; width: 100%; position: absolute; left: 50%; transform: translateX(-50%); }
.view-small td { display: inline-block; height: 1em; width: 30%; transform: translateY(1.5em); }
</style>
</head>
<body class="">
<h1>Table Example</h1>
<table>
<tr>
<th>Numbers</th>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<th>Countries</th>
<td>Canada</td>
<td>Mexico</td>
<td>Guatemala</td>
</tr>
<tr>
<th>Planets</th>
<td>Mars</td>
<td>Jupiter</td>
<td>Saturn</td>
</tr>
</table>
<p>End of test</p>
</body>
</html>
We were thinking that for smaller devices, it would be neat if we could save horizontal space by display each row header over its corresponding data cells. If I set class="view-small" in the body tag in the code above, I get this in Chrome on Windows and pretty much the same thing in Firefox and IE11:
This demonstrates what I'm going for. What I'd really like to achieve includes having the data cells take up the horizontal space that the full row would have occupied. In the above code, I have their width set artificially to 30%, but that isn't ideal!
I'm going to tinker with this some more, but I thought I'd see whether anyone else has tried anything like this or seen a solution somewhere!
Try to change the width and margin values. The total value of width (including both horizontal margins) should be around 33%. These '3' after dot make it more precise.
div{
width: 30.3333333333%;
margin: 0 1.5%;
display: inline-block;
border: 1px solid black;
height: 20px;
box-sizing: border-box;
float: left;
}
<div></div>
<div></div>
<div></div>
I have a website with a fluid/dynamic layout in which I need to center specific text elements between images. Everything is all fine and dandy and I have done so by changing the margins of the text elements, however if I were to change the text inside my p tags, the images would no longer be aligned they way they are or the text would no longer appear exactly centered next to the adjacent images.
JSFiddle that resembles my "problem": http://jsfiddle.net/3s4bhwg4/4/
Ideal image if my JSFiddle does not look correct:
Is there a more maintainable way to achieve the same results of centering the text or is using margins to this extent acceptable/considered good practice?
I'm very rusty with web design, so I'll take any criticism happily.
Note: Resizing the JSFiddle width seems to break the layout. However resizing it on my local webpage keeps it constant....
CSS:
#wrapper{
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
WIDTH: 100%;
}
.row{
width: 100%;
}
/*Please execuse my use of left/right in naming my ids. */
#contentleft{
float: left;
width: 60%;
}
#contentleft h1{
margin: 30% 5% 0 40%;
}
#contentleft p{
margin: 0 5% 0 40%;
}
#contentright{
float: right;
width: 40%;
}
#contentright p{
margin: 17% 30% 43% 10%;
}
img{
width: 100%;
}
HTML:
<div id="wrapper">
<div class="row">Header</div>
<div id="contentleft">
<IMG src="http://img2.wikia.nocookie.net/__cb20081223173835/uncyclopedia/images/7/7e/Mountain.jpg"></IMG>
<H1>Random.</H1>
<P> Both texts must be centered next to their adjacent images as well. </P>
</div>
<div id="contentright">
<P>The margins of this text pushes the image down so it aligns with the corner of the other image.
</P>
<IMG src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg"></IMG>
</div>
</div>
This is the closest I could get using a table as suggested by #JStephen: JSFIDDLE
The only way I could make it work was to keep one image un-scaled.
And I couldn't get them to meet exactly in the corners.
EDIT:
Working correctly now...
I managed to hack it by inserting the lower image in the cell above it in the first row, setting its height to 1px and opacity to 0 and floating it. This works because the table layout is fixed so the first row is used to format the table. (By floating the hidden image, the centering of the text is unaffected.) I then set the width of the visible copy of the second image to 100%.
Added padding: 0; in td as well as border-collapse: collapse; in Table to make the corners touch exactly like your pic. (It seems the default padding is not zero)
It works as long as the height of the text is less than that of the (visible) images
HTML
<body>
<div class="row">Header</div>
<table id="wrapper">
<tr id="cont-top">
<td>
<img src="http://img2.wikia.nocookie.net/__cb20081223173835/uncyclopedia/images/7/7e/Mountain.jpg" />
</td>
<td>
<img src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg" />
<p>The margins of this text pushes the image down so it aligns with the corner of the other image.</p>
</td>
</tr>
<tr id="cont-bottom">
<td>
<h1>Random.</h1>
<p> Both texts must be centered next to their adjacent images as well. </p>
</td>
<td>
<img src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg" />
</td>
</tr>
</table>
</body>
CSS
#wrapper {
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
height: 100%;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
z-index: 0;
}
td, tr{
padding: 0;
position: relative;
}
td{
/*outline: 1px dotted red;*/
}
.row {
width: 100%;
padding: 0.5em;
height: 4%;
}
/*top row********/
#cont-top {
height: auto;
margin: 0;
padding: 0;
}
/*image*/
#cont-top td:first-child {
width: 60%;
}
#cont-top img{
width: 100%;
vertical-align: bottom;
z-index: 20;
}
/*text*/
#cont-top td:last-child{
padding: 0;
}
#cont-top td:last-child p {
margin: 0 10px;
vertical-align: central;
}
/*formatting hack*/
#cont-top td:last-child img{
width: 100%;
height: 1px;
line-height: 1px;
float: left;
/*opacity: 0;*/
}
/*bottom row********/
#cont-bottom {
height: auto;
position: relative;
}
/*image*/
#cont-bottom td:last-child {
vertical-align: top;
}
#cont-bottom img{
vertical-align: top;
width: 100%;
left: 0;
z-index: 20;
}
/*text*/
#cont-bottom td:first-child {
vertical-align: central;
padding: 0 10px;
}
Lets say we have this html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="navbar"></div>
<div id="main">
<textarea id="input"></textarea>
<textarea id="output"></textarea>
</div>
</body>
</html>
and this css:
html,body,#main{
height:100%;
}
html{ border: 1px solid red; }
body{ border: 1px solid green; }
#main{ border: 1px solid blue; }
#navbar{ height: 30px; }
textarea{
width: 45%;
height: 60%;
resize: vertical;
}
#input{
float: left;
}
#main{
float: right;
}
If you look at result then you can see here body is out of html tag, #main is out of body and html tag.. How I can make so all the elements to not go out of parent height? So I want the result to be like this:
For one thing, the body has defaults margins of 8px;
Start by resetting those.
body {
margin:0px;
}
Additionally, borders are not calculated into the heights, rather they are added. Therefore the heights were really 100% + 2px borders. You can change this by adding box-sizing: border-box;.
This will solve the problems with the html/body. Now, for #main - the reason this was occuring, was because a 30px nav was placed outside of it. #main was actually 100%, however it was 100% under 30px, that's why you saw a gap.
Updated jsFiddle here
I hope, you can help me, I have a horizontal menu, my problem is the following:
The first is normal stretch with table, the second is what I want: stretch + even gaps between texts.
I achieved this with additional non breaking spaces, but it works only by fixed menu widths, so if I change the menu width I have to change the count of the nbsp characters. Is there any way to do this with css, and without those non breaking spaces?
The count of the menupoints and the menu width can change, so I need an automatical solution without javascript. No settings by individual columns, unless you can give me an algorithm which I can run on server side.
I don't think this is possible with css only, but I'm not a css guru, that's why I asked....
<style>
* {
margin: 0px;
padding: 0px;
font-size: 16px;
}
table {
width: 400px;
}
td {
border: 1px solid blue;
text-align: center;
}
</style>
<table>
<tr>
<td>aa</td>
<td>aaaaaaaaaaaaa</td>
<td>aaaaaaaaa</td>
</tr>
</table>
<table>
<tr>
<td> aa </td>
<td> aaaaaaaaaaaaa </td>
<td> aaaaaaaaa </td>
</tr>
</table>
Not sure of all the parameters here ("stretch" is not very clear), but wouldn't some left and right padding on the links do it? Because this is a menu, I won't use a table but a <ul> instead. There are plenty of variations on this if it's not what you want:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
ul, li {margin: 0; padding: 0;}
ul {list-style: none; display: table; border-spacing: 5px; }
li {display: table-cell; background: #f7f7f7; border: 1px solid blue; }
li a {padding: 0 30px;}
</style>
</head>
<body>
<ul>
<li>aa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaa</li>
</ul>
</body>
</html>
Edit: The below answer does not work well with Internet Explorer versions as recent as IE 11. Its algorithm for cell sizing appears to work differently than other browsers.
While this will require some cross-browser testing, here's what I've been using:
http://jsfiddle.net/aaronadams/j3cEQ/
HTML:
<p>Default spacing:</p>
<ul>
<li>aa</li>
<li>aaaa aaaa aaaa</li>
<li>aaa aaa aaa</li>
<li>aa aa</li>
</ul>
<p>Even spacing:</p>
<ul class="even">
<li>aa</li>
<li>aaaa aaaa aaaa</li>
<li>aaa aaa aaa</li>
<li>aa aa</li>
</ul>
CSS:
ul {
display: table;
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 30em;
text-align: center;
}
li {
display: table-cell;
margin: 0;
padding: 0 0.125em;
white-space: nowrap;
}
.even li {
width: 1%;
}
So far, this is providing me with a menu that works really well across all screen sizes; on mobile it shrinks to screen width, on desktop it grows up to a certain size, and the links are always evenly spaced.
Credit here for the inspiration: https://stackoverflow.com/a/16509901/802414
You can set the width for the individual columns.
JSFiddle
HTML
<table>
<tr>
<td class="first">aa</td>
<td class="second">aaaaaaaaaaaaa</td>
<td class="third">aaaa aaaaaaaaaaaaa</td>
</tr>
</table>
CSS
table {
width: 400px;
}
td {
border: 1px solid #d3d3d3;
text-align: center;
}
.first {
width: 30%;
}
.second {
width: 45%;
}
.third {
width: 30%;
}
JSFIDDLE
You can set the "padding left and right for individual column
HTML
<table>
<tr>
<td class="first">aa</td>
<td class="second">aaaaaaaaaaaaa</td>
<td class="third">aaaa aaaaaaaaaaaaa</td>
</tr>
</table>
CSS
table { width: 400px; }
td { border: 1px solid #d3d3d3; text-align: center;}
.first { padding: 0 3em; }
.second { padding: 0 2em; }
.third { padding: 0 4em; }
This can be achieved with CSS by making the parent element text-align: justify, and the child elements display:inline-block; However, justified text only works properly when there's at least 2 lines. The pseudo :after element is used to force an extra (very tiny) line:
#container {
height: 125px;
text-align: justify;
border: 10px solid black;
font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
min-width: 600px;
}
#container div {
width: 150px;
height: 125px;
display: inline-block;
background: red;
}
#container:after {
content: '';
width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
display: inline-block;
}
Credit to https://css-tricks.com/equidistant-objects-with-css/ for this technique.