I want to have a small, either 1 or 2 pixel line down part of the middle of my page to seperate navigation text from content. I want the line to fade to the background color (okay, just fade transparent) at the top and bottom of the line, but I want the middle, solid black part of the line, to expand with the size of the content div on the right.
Is that confusing to read, do I need to elaborate?
EDIT: I've done everything with a table now, I figure that'll be easier. Now my problem is getting the middle part of the line to expand with the other table cell named "content". Everything works with the exception of the sep_mid cell, because I don't want to set a fixed height for the cell, I want it to size based on the "content" cell.
Here's my code:
HTML:
<body>
<div id="wrapper">
<table align="center">
<tr>
<td class="nav" rowspan="3"><p>test</p></td>
<td class="sep_top" rowspan="1"></td>
<td class="content" rowspan="3"><p>Content here!</p></td>
</tr>
<tr> <td class="sep_mid" rowspan="1"></td> </tr>
<tr> <td class="sep_bot" rowspan="1"></td> </tr>
</table>
</div>
</body>
CSS:
body {
background-color: #bbc2c7;
background-image: url('/images/bg.png');
background-repeat: repeat-x;
}
body p {
font-family: Delicious;
}
#font-face {
font-family: "Delicious";
src: url('/fonts/delicious.ttf');
}
#font-face {
font-family: "Delicious";
src: url('/fonts/delicious_bold.ttf');
font-weight: bold;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#wrapper p {
font-weight: bold;
font-size: 16px;
font-family: Delicious;
}
.nav {
text-align: right;
padding-right: 20px;
}
.sep_top {
background-image: url('/images/sep_top.png');
background-repeat: no-repeat;
float: left;
padding: 0px;
margin: 0px;
width: 1px;
height: 15px;
}
.sep_mid {
background-color: #000;
float: left;
padding: 0px;
margin: 0px;
width: 1px;
}
.sep_bot {
background-image: url('/images/sep_bot.png');
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
width: 1px;
height: 15px;
}
.content {
padding-left: 20px;
}
table {
border-collapse: collapse;
}
table td {
border-collapse: collapse;
}
I think the empty table cells should contain at least some content, even if it's just
Related
I have a very simple html table in a Blazor server project and I am trying to reduce the space below the text in the cell. Changing height in the td,th section increases the standard height but does not reduce it. I have tried making margin and padding 0 but this did not reduce the space.
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 12px;
padding: 0px;
margin: 0px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 0px;
margin: 0px;
height: 12px;
padding-bottom: 0px;
margin-bottom: 0px;
}
td {
padding: 0px;
margin: 0;
height: 10px;
padding-bottom: 0px;
margin-bottom: 0;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr {
height:2px;
padding: 0px;
}
</style>
What you are looking for is line-height
<table>
<tr class="loose">
<th>Title</th>
</tr>
<tr class="tight">
<td>Cell</td>
</tr>
</table>
<style>
tr.loose { line-height: 4rem;}
tr.tight { line-height: 1.5rem;}
</style>
Demo: https://blazorrepl.com/repl/GbEnmGcn38GdDUWW44
I have the following code:
#superheader {
width: auto;
height: 100px;
position: relative;
}
#superheader p {
font-family: Sansation;
font-size: 50px;
}
#superheader table {
border: solid;
height: 100px;
}
#header {
height: 140px;
box-shadow: 0em 0.5em 0.5em grey;
position: relative;
background-color: #E6E6E6;
padding-left: 70px;
padding-right: 70px;
font-family: sans-serif;
}
.menuelement {
width: 100px;
height: 40px;
text-align: center;
padding-left: 10px;
padding-right: 10px;
float: left;
position: relative;
}
.menuelement:hover {
background-color: dimgrey;
}
#header>a {
line-height: 2.5;
}
<div id="header">
<div id="superheader">
<div style="margin: auto; width: 630px;">
<table>
<tr>
<td><img src="images/memoji.png" width="100px" height="100px" alt="Icon"></td>
<td>
<p>A TITLE</p>
</td>
</tr>
</table>
</div>
</div>
<a href="template.html">
<div class="menuelement">Page1</div>
</a>
<a href="index.html">
<div class="menuelement">Page2</div>
</a>
<a href="not_found.html">
<div class="menuelement">Page3</div>
</a>
</div>
The table in this example should be 100px in height, however it won't get smaller than 170px.
Where is my mistake?
Well, actually you can't control height or width of the elements with display: table; because by default if their cells height or width is larger than the height or width of the element with display: table; the element will grow. So you need to control the dimension of the cells instead of the table itself.
In your particular case, there are two approaches to overcome this situation.
Controlling the cells: since you used p tag in your table and this tag has a default margin of 1em on top and bottom you can simply override it and because the inner cells are no longer larger than the table itself you can control its dimensions (As long as they do not smaller than cells). Also, keep in mind the font-size and line-height will make your cells bigger than usual, but if you want to keep them as it is, you should drop the default margin.
p {
font-family: Sansation;
font-size: 50px;
margin: 0;
}
table {
border: solid;
height: 100px;
}
<table>
<tr>
<td><img src="images/memoji.png" alt="Icon"></td>
<td>
<p>A TITLE</p>
</td>
</tr>
</table>
Using display: block;: You can simply override the display of the table and make it work as block but you still need to control the inner elements to do not override the table itself. Also, keep in mind you should control the width of the table also because block element by default will fill the available space.
p {
font-family: Sansation;
font-size: 50px;
margin: 0;
}
table {
border: solid;
height: 100px;
display: block;
}
<table>
<tr>
<td><img src="images/memoji.png" alt="Icon"></td>
<td>
<p>A TITLE</p>
</td>
</tr>
</table>
Add the border-spacing: 0px; to your table style to remove spaces between cells:
#superheader table{
border: solid;
height: 100px;
border-spacing: 0px;
}
and then remove white spaces inside cells:
td, td *{
display: table-cell;
margin: 0px;
padding: 0px;
}
I would like to reword this:
I would like to create a white background header with no hover (currently it is white), a full-width yellow box underneath which does not span the height of the screen, possibly expands when I add to it? A small white text box inside, and an image to the right-hand side of this.
So far I have:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
<a class="logo" target="_blank"><img src=".\images\logo.png" border="0" alt="logo" width="90"></a>
<div class="header-left">
<a class="active" href="index.html">Home</a>
Wall
Shop
Blog
FAQ
<div class="header-right">
<a class="active" href="http://instagram.com/woolybox" target="_blank"><img src=".\images\instagram.png" border="0" alt="instagram"img width="20" height="20"></a>
<img src=".\images\twitter.png" border="0" alt="twitter" img width="20" height="20">
</div>
</div>
<table><tr><td>
Hello
</td></tr></table>
</body>
CSS:
html, body {
height: 100%;
min-height: 100%;
border-width: 0;
border-style: solid;
border: #fff;
}
table {
height: 100%;
width: 100%;
background-color: #f4d442;
}
td {
height: 100%;
width: 100%;
vertical-align: middle;
text-align: left;}
.header {
overflow: hidden;
background-color: #ffffff;
padding: 20px 30px;
}
.header a {
float: left;
color: grey;
text-align: center;
background-color: #fff;
padding-top: 16px;
padding: 24px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
padding-top: 4px;
font-weight: bold;
}
.header a:hover {
background-color: #fff;
color: black;
}
.header a.active {
background-color: #fff;
color: #f4d442;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
background-color: #fff;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
My outcome ends up as a thin yellow box like so:
Problem
I am following this mockup I have made using Adobe XD and MDL components. Again, I am extremely out of practice and trying to understand a lot of new things.
MockUp
Does this help? Set the body height and whatnot to 100%. Then play with the inner height relative %s.
<html>
<head>
<style>
html, body { height: 100%; min-height: 100%; border-width: 5; border-style: solid; }
table { height: 100%; width: 100%; }
td { height: 100%; width: 100%; vertical-align: middle; text-align: center;}
</style>
</head>
<body>
<table><tr><td>
Hello
</td></tr></table>
</body>
</html>
Give this a shot....
.boxed {
width: 100vw;
height: 100vh;
box-align: center;
background-color: #f4d442;
padding: 25px;
margin: 0 auto;
The main problem is that your padding and margin are adding extra space around your yellow div. If you right click on your yellow div in the web page and select "Inspect", you'll be able to see the effects of those styles.
Next, if you want the yellow div to be full-screen, you'll need it to take up 100% of its parent container. The parent container must have a defined height, and the grandparent container must have a defined height, etc. all the way up to the highest level: the html tag. In the code snippet below, I've set the yellow div's parent containers' height to make the yellow div full-scren.
html,
body {
height: 100%;
margin: 0 !important;
}
.boxed {
background-color: #f4d442;
height: 100%;
width: 100%;
}
<html>
<body>
<div class="boxed">
</div>
</body>
</html>
Try this:
<div class="boxed">Lorem Epsum</div>
.boxed {width: 100%;box-align: center;background-color: #f4d442;padding: 25px;margin: 0;}
I am trying to use table cells with a background image and transparent text and when you hover over the background image (the td cell) the text appears in a transparent black box.
How do I get the td cell to expand to the entire size of the background image, a width of 100% filling the entire td?
Here is my JS Fiddle where I tried two different approaches (background-size:contain; background-size: cover; and background-size: 100% auto;):
https://jsfiddle.net/wpdyjLgd/#&togetherjs=Bp5OxozhEt
Edited CSS (only includes issue - JSFiddle includes all)
.HomeBody2 {
border-collapse: collapse;
margin: 0;
cellspacing: 0;
cellpadding: 0;
}
#HomeBody2 {
width: 100%;
border-collapse: collapse;
margin: 0;
cellspacing: 0;
cellpadding: 0;
}
.HomeBody2 h1 {
font-family: "Footlight MT Light";
font-size: 56px;
font-weight: bold;
margin: 0;
color: #062F4F;
padding-right: 10px;
padding-left: 10px;
}
.HomeBody2 h2 {
font-family: "Georgia";
color: #FF3B3F;
font-size: 32px;
font-weight: bold;
margin: 0;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
}
.HomeBody2 p {
font-family: "Georgia";
font-size: 24px;
font-weight: none;
margin: 0;
color: transparent;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
}
.HomeBody2 a {
color: #FF3B3F;
font-family: "Georgia";
font-size: 24px;
font-weight: bold;
text-decoration: underline;
}
table td.Why:hover {
border-collapse: collapse;
background: url("images/Money.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: left;
vertical-align: center;
}
table td.Why:hover > p {
color: #FFFFFF !important;
background-color: #000000;
opacity: 0.8;
}
table td.Why {
border-collapse: collapse;
background: url("images/Money.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: left;
vertical-align: center;
}
table td.How:hover {
border-collapse: collapse;
background: url("images/PeopleWorking.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: left;
vertical-align: center;
}
table td.How:hover > p {
color: #FFFFFF !important;
background-color: #000000;
opacity: 0.8;
}
table td.How {
border-collapse: collapse;
background: url("images/PeopleWorking.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: left;
vertical-align: center;
}
<table class="HomeBody2" width="100%">
<tbody>
<tr>
<td class="Why" width="33.5%">
<p>Spend less on administrative burdens by finding everyday solutions for your agency. Every dollar saved is a minute spent on other important tasks like analysis and policy.</p>
</td>
<td class="How" width="66.5%">
<p>We start with a demonstration of a potential solution, often one used by another Federal agency, since our best solutions are ones that have broad applicability. Then we move into a discovery process, determining your agency's needs. From there, we build a prototype, refine and reiterate that prototype, and enter testing once the agency is satisfied. Following more refining, the solution enters a pilot project, then moving into a live production environment for the end results. We work in an agile environment, meaning new solutions are always around the corner, offering capabilities to current and potential clients.</p>
</td>
</tr>
</tbody>
</table>
SOLVED.
This is an example:
HTML:
<table>
<tbody>
<tr style="height: 100%;">
<td class="lefttd">
<img src="http://www.numbeo.com/images/Menu1.svg">
</td>
<td></td>
<td class="righttd"><img src="http://www.online-utility.org/icons/gear_64.png" style="margin-right: 0.5em;">Online-Utility.org </td>
</tr>
</tbody>
</table>
CSS:
table {
border-bottom: 1px solid black;
border-spacing: 0;
background-color: #bcf;
width: 100%;
}
table > tr, table > tr > td {
padding: 0;
margin: 0;
border: 0;
border-spacing: 0;
}
.lefttd {
height: 100%;
vertical-align: middle;
}
.righttd {
width: 95%;
height: 32px;
text-align: right;
font-size: 22px;
line-height: 30px;
vertical-align: middle;
}
a.mmenu {
border: 0;
text-decoration: none;
background-color: #aaa;
height: 100%;
vertical-align: middle;
display: inline-block;
}
img {
width: 32px;
border: 0;
text-decoration: none;
vertical-align: middle;
}
https://jsfiddle.net/adamovic/sw6c3z91/
In Chrome I see this table computed with height 35px... What causes this table to grow height more than 32px and how to fix it?
Add vertical-align: middle; to your image
<img src="http://www.online-utility.org/icons/gear_64.png" style="width: 32px; margin-right: 0.5em; vertical-align: middle;">
Also, you shouldn't be inlining styles like this. It's a terrible practice. Uses classes and stylesheets instead.
Edit: you can try a few other values too. It looks like vertical-align:bottom might work even better. It appears with the font size and line height that that will get you closer to 32px. With middle it's at about 33px
The problem is solved. I haven't properly marked to img vertical-align: middle and also padding: 0 to tr/td.