I cannot get a table row data (td) to decrease it's width. The problem is that the avatar td seems to take up the majority of the entire row. I need the text with Traveler column to move to the left as shown
Here is the current progress of what I have:
This is what it's supposed to look like.
If you look, the gray container has text on the right side and text that should be directly next to the avatar image
There is an established two columns of text (that row is 3 table cells long) The problem is that one of my td's has a width that is causing the column starting with Traveler to be pushed so far right.
So here's my HTML:
<div id="reviews">
<table cellpadding="0" cellspacing="0">
<tr class="reviewuserinfo">
<td width="60px"><img class="avatar" src="/avatar/35274"/></td>
<td>Traveler<br>posted on 15 May, 2008</td>
<td align="right" style="padding-right:15px">Joined 2 years ago<br>12 reviews and 49 comments posted</td>
</tr>
<tr class="reviewuserdata">
<td style="width:100%" colspan="3">
<table cellpadding="0" cellspacing="0" class="reviewchart">
<tr><td><h2>Overall Rating <img class="stars" src="/stars/3.9/large" /> <span class="rating">4.5</span></h2></td></tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<tr><td class="reviewlabel" style="padding-top:15px">QUALITY OF THE DANCERS</td></tr>
<tr><td class="reviewlabel">PRIVATE DANCES, VALUE FOR MONEY</td></tr>
<tr><td class="reviewlabel">OVERALL HOSPITALITY</td></tr>
<tr><td class="reviewlabel">GUEST TO DANCER RATIO</td></tr>
<tr><td class="reviewlabel">VARIETY OF DANCERS</td></tr>
<tr><td class="reviewlabel">VALUE FOR MONEY, COVER CHARGE</td></tr>
<tr><td class="reviewlabel">VALUE FOR MONEY, DRINKS</td></tr>
<tr><td class="reviewlabel">VALUE FOR MONEY, FOOD</td></tr>
<tr><td class="reviewlabel">OVERALL ATMOSPHERE</td></tr>
<tr><td class="reviewlabel">SOUND SYSTEM AND DJ</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
And finally here's my CSS:
#CHARSET "UTF-8";
.page {
position: relative;
background-color: #ffffff;
width: 1200px;
margin: 0px auto;
box-sizing: border-box;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
}
table {
border:0px;
width:100%
}
table.reviewsouter .reviewleft{
width:800px
}
table.reviewsouter .reviewright{
width:400px
}
#reviewspotlight {
position: relative;
background-color:#000000;
height:111px;
z-index:19997;
font-family: DinWebCond, Sans-serif;
color:#ffffff;
}
#reviews {
position: relative;
background-color:#ffffff;
color:#000000;
border-right:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo {
background-color:#f0f0f0;
height:60px;
border-left:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo img.avatar{
position:relative;
width:40px;
height:40px;
margin:10px 0px 10px 10px;
display: inline-block;
vertical-align: middle;
}
#reviews table tr.reviewuserinfo div {
display:block
}
#reviews table tr.reviewuserdata {
background-color:#ffffff;
height: 315px;
border-left:1px solid #ffffff;
vertical-align: top;
}
#reviews table td h2 {
position:relative;
display:inline-block;
white-space:nowrap;
font:24px/24px DinWebCond,Sans-serif;
margin:0px;
text-transform:uppercase;
/**padding:20px 0px 9px 15px;*/
/**padding-top:20px;*/
/**padding-left:20px;*/
}
#reviews table td h2 img.stars {
position:absolute;
margin-left:10px;
display:inline-block;
}
#reviews table td h2 span.rating{
position:absolute;
margin-left:145px;
display:inline-block;
color:#e85a06;
font-weight:bold;
}
table.reviewchart {
position:relative;
display:inline-block;
white-space:nowrap;
border-collapse: collapse;
font:14px/14px DinWebCond,Sans-serif;
margin:0px;
text-transform:uppercase;
/**padding:20px 0px 9px 15px;*/
padding-top:20px;
padding-left:20px;
}
table.reviewchart td.reviewlabel{
/**padding-top:15px;*/
padding-bottom:15px;
}
UPDATE
Ok so i was able to fix the width position for the text by adding a colspan of 3 however the word Traveler is pushed to the right still. I tried setting margins and paddings but that did not work.
Here is my current progress:
Late to the party, but yes, colspan="3" is needed. Then, what you can do is add width="1%" to the cell with the image and update your css to have margin: 10px; instead of margin: 10px 0 10px 10px; for the image. That should fix it.
.page {
position: relative;
background-color: #ffffff;
width: 1200px;
margin: 0px auto;
box-sizing: border-box;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
}
table {
border:0px;
width:100%
}
table.reviewsouter .reviewleft{
width:800px
}
table.reviewsouter .reviewright{
width:400px
}
#reviewspotlight {
position: relative;
background-color:#000000;
height:111px;
z-index:19997;
font-family: DinWebCond, Sans-serif;
color:#ffffff;
}
#reviews {
position: relative;
background-color:#ffffff;
color:#000000;
border-right:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo {
background-color:#f0f0f0;
height:60px;
border-left:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo img.avatar{
position:relative;
width:40px;
height:40px;
margin:10px;
display: inline-block;
vertical-align: middle;
}
#reviews table tr.reviewuserinfo div {
display:block
}
#reviews table tr.reviewuserdata {
background-color:#ffffff;
height: 315px;
border-left:1px solid #ffffff;
vertical-align: top;
}
#reviews table td h2 {
position:relative;
display:inline-block;
white-space:nowrap;
font:24px/24px DinWebCond,Sans-serif;
margin:0px;
text-transform:uppercase;
/**padding:20px 0px 9px 15px;*/
/**padding-top:20px;*/
/**padding-left:20px;*/
}
#reviews table td h2 img.stars {
position:absolute;
margin-left:10px;
display:inline-block;
}
#reviews table td h2 span.rating{
position:absolute;
margin-left:145px;
display:inline-block;
color:#e85a06;
font-weight:bold;
}
table.reviewchart {
position:relative;
display:inline-block;
white-space:nowrap;
border-collapse: collapse;
font:14px/14px DinWebCond,Sans-serif;
margin:0px;
text-transform:uppercase;
/**padding:20px 0px 9px 15px;*/
padding-top:20px;
padding-left:20px;
}
table.reviewchart td.reviewlabel{
/**padding-top:15px;*/
padding-bottom:15px;
}
<div id="reviews">
<table cellpadding="0" cellspacing="0">
<tr class="reviewuserinfo">
<td width="1%"><img class="avatar" src="/avatar/35274"/></td>
<td>Traveler<br>posted on 15 May, 2008</td>
<td align="right" style="padding-right:15px">Joined 2 years ago<br>12 reviews and 49 comments posted</td>
</tr>
<tr class="reviewuserdata">
<td style="width:100%" colspan="3">
<table cellpadding="0" cellspacing="0" class="reviewchart">
<tr><td><h2>Overall Rating <img class="stars" src="/stars/3.9/large" /> <span class="rating">4.5</span></h2></td></tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<tr><td class="reviewlabel" style="padding-top:15px">QUALITY OF THE DANCERS</td></tr>
<tr><td class="reviewlabel">PRIVATE DANCES, VALUE FOR MONEY</td></tr>
<tr><td class="reviewlabel">OVERALL HOSPITALITY</td></tr>
<tr><td class="reviewlabel">GUEST TO DANCER RATIO</td></tr>
<tr><td class="reviewlabel">VARIETY OF DANCERS</td></tr>
<tr><td class="reviewlabel">VALUE FOR MONEY, COVER CHARGE</td></tr>
<tr><td class="reviewlabel">VALUE FOR MONEY, DRINKS</td></tr>
<tr><td class="reviewlabel">VALUE FOR MONEY, FOOD</td></tr>
<tr><td class="reviewlabel">OVERALL ATMOSPHERE</td></tr>
<tr><td class="reviewlabel">SOUND SYSTEM AND DJ</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Everything after the column with the image is one big column . You're telling it to alight right so it's moving everything to the very right of that column. remove this or make it align="left" and it should fix your issue.
Related
I'm using tables for my website layout, and I want to divide one table into two, but having both the tables in the same column. (Specifically, one being 300px and the other being 200). I cannot figure out how to do this.
Here's the code I'm currently using:
<style>
.menuleft {
background:white;
width:17%;
height:500px;
padding: 10px;
border-radius:12px 0px 0px 12px;
border:1px dashed pink;
}
.menuright {
background:white;
width:17%;
height:500px;
padding: 10px;
border-radius:0px 12px 12px 0px;
border:1px dashed pink;
}
.maintable {
background:white;
border: 1px dashed pink;
padding: 10px;
height:500px;
width:60%;
}
</style>
<tr>
<td colspan = "2" height="100px">
title
</td>
</tr>
<tr valign="top" class="main">
<td class="menuleft">
</td>
<td class="maintable">
</td>
<td class="menuright">
</td>
</tr>
your description is not really clear, but as far as I understand if you want to divide rows or columns you simply use colspan and rowspan.
check this link for more infos
I am using the following plugin.
https://github.com/dabeng/OrgChart.
In some resolution, the vertical line is not fitting properly.
https://github.com/dabeng/OrgChart/issues/410
I have analysed the rendered html and tried with the same code.
I am getting the same issue for some resolutions.
Please see the following fiddler.
.downline{
height:30px;
width:2px;
background:red;
text-align:center;
background: red;
text-align: center;
background-color: rgba(217, 83, 79, 0.8);
margin: 0px auto;
height: 55px;
width: 2px;
float: none;
}
.leftLine{
border-right:1px solid green;
}
.rightLine{
border-left:1px solid green;
}
table{
margin:50px;
border-spacing: 0 !important;
border-collapse: separate !important;
}
.item{
padding:5px;
border:1px solid black;
}
<table>
<tr>
<td colspan="2">
<div class="downline">
</div>
</td>
</tr>
<tr>
<td class="leftLine">
</td>
<td class="rightLine">
</td>
</tr>
<tr>
<td colspan="2" >
<div class="item">
Test 123
</div>
</td>
</tr>
</table>
I'm trying to make a 2x5 table with a large image taking up the left most five cells and 5 links taking up the rightmost ones. I am having trouble fitting the table to the image.
I'd like the table to be a single rectangle in the end but currently the table is bigger than the image inside of it. Also, is there any way to do this just using CSS (no JS)?
Thank you in advance.
Here is jsfiddle: https://jsfiddle.net/3ktLpcmx/2/
and code:
HTML:
<table style="height:376px; width:600px; border-spacing:0px; padding:0px; border-collapse:collapse; border:none;" cellspacing=0 cellpadding=0>
<tr>
<td rowspan="5"><img style="display: block;" src="http://wallpapercave.com/wp/ckdySrm.png" width="500" /></td>
<td class="linktd">Mmmmmhmmm</td>
</tr>
<tr>
<td class="linktd">hmmmhhhhhmmm</td>
</tr>
<tr>
<td class="linktd" >MMMM MMMM!</td>
</tr>
<tr>
<td class="linktd">mmmmmmm hm mmmmm</td>
</tr>
<tr>
<td class="linktd">Hmmm, mmmhmmmm</td>
</tr>
</table>
CSS:
body {
text-align: center;
}
.linktd {
background-color: #58809d;
text-align:center;
vertical-align:middle;
width: 165px;
height:20%;
}
.linktd:hover {
background-color: #282969;
}
.homelink {
/*margin-bottom: 10px;*/
padding: 15px 10px 10px 10px;
width: 165px;
height:100%;
display:inline-block;
background-color:#58809d;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
.homelink:hover {
background-color:#282969;
}
EDIT:
Things I have tried include removing the padding on the links, setting table height to auto (then links don't fill their cells), setting table to 375px (size of image), setting table to 376px, and setting the link-tds to 20% of table.
I do not think a table is needed here. nav could do for a menu .
display:flex will help size, align, grow and center things.
nav,
nav span,
nav span a {
display: flex;
}
nav span {
flex-flow: column;
}
a {
flex: 1;
width: 165px;
justify-content: center;
align-items: center;
background-color: #58809d;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
background-color: #282969;
}
nav img {
display: block;
}
<nav>
<img src="http://wallpapercave.com/wp/ckdySrm.png" width="500" />
<span>
Mmmmmhmmm
hmmmhhhhhmmm
MMMM MMMM!
mmmmmmm hm mmmmm
Hmmm, mmmhmmmm
</span>
</nav>
J.Joe, Your answer works well and is clever. Thank you.
<table style="height:376px; width:600px; border-spacing:0px; padding:0px; border-collapse:collapse; border:none;" cellspacing=0 cellpadding=0>
<tr>
<td class = "test" rowspan="5"></td>
<td class="linktd">Mmmmmhmmm</td>
</tr>
<tr>
<td class="linktd">hmmmhhhhhmmm</td>
</tr>
<tr>
<td class="linktd" >MMMM MMMM!</td>
and
body {
text-align: center;
}
.test{
background-color: #cccccc;
background-image:url('http://wallpapercave.com/wp/ckdySrm.png');
background-size:cover;
}
.linktd {
background-color: #58809d;
text-align:center;
vertical-align:middle;
width: 165px;
height:20%;
}
.linktd:hover {
background-color: #282969;
}
.homelink {
/*margin-bottom: 10px;*/
padding: 15px 10px 10px 10px;
width: 165px;
height:100%;
display:inline-block;
background-color:#58809d;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
.homelink:hover {
background-color:#282969;
}
Here is the result I need to achieve:
Here is what I have thus far:
As you can see, there are several updates to be made.
My questions are:
1./ How do I get the text next to the avatar to line up 10px to the right of the avatar. Currently its being thrown below the avatar.
2./ Once I align up the text next to the avatar, how do I then line up my text that sits at the very right? I believe I can create a div and float right
I'm only a few days into CSS so I'm still a newbie so please any details would be phenomenial
Here is my HTML:
<div class="page">
<table class="reviewsouter" cellspacing="0" cellpadding="0">
<tr>
<td class="reviewleft">
<div id="reviews">
<table cellpadding="0" cellspacing="0">
<tr class="reviewuserinfo">
<td>
<div>test</div>
<img class="avatar" src="/avatar/35274"/>
</td>
</tr>
<tr class="reviewuserdata">
<td></td>
</tr>
</table>
</div>
</td>
<td class="reviewright"></td>
</tr>
</table>
</div>
And Here is my CSS:
#CHARSET "UTF-8";
.page {
position: relative;
background-color: #ffffff;
width: 1200px;
margin: 0px auto;
box-sizing: border-box;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
}
table {
border:0px;
width:100%
}
table.reviewsouter .reviewleft{
width:800px
}
table.reviewsouter .reviewright{
width:400px
}
#reviewspotlight {
position: relative;
background-color:#000000;
height:111px;
z-index:19997;
font-family: DinWebCond, Sans-serif;
color:#ffffff;
}
#reviews {
position: relative;
background-color:#ffffff;
color:#000000;
border-right:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo {
background-color:#f0f0f0;
height:60px;
border-left:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo img.avatar{
position:relative;
width:40px;
height:40px;
margin:10px 0px 10px 10px;
}
#reviews table tr.reviewuserinfo div {
display:block
}
#reviews table tr.reviewuserdata {
background-color:#ffffff;
height: 315px;
border-left:1px solid #ffffff;
}
Any help would be great.
UPDATE
Ok so I got this far now:
Here is my new HTML for this div(the reviewuserinfo div):
<tr class="reviewuserinfo">
<td width="60px"><img class="avatar" src="/act/avatar/35274"/></td>
<td>Text2</td>
<td align="right" style="padding-right:15px">Text3</td>
</tr>
What I need now is to move the text up so it starts at the same position as the top of the avatar - basically horizontal to the top of the image avatar
What do you think about this https://jsfiddle.net/2Lzo9vfc/107/
HTML
<div class="page">
<div class="left">
<img src="http://placehold.it/50x50" alt="">
<div class="left-content">
<h4>Lorem ipsum</h4>
<p>Posted bla bla</p>
</div>
</div>
<div class="right">
<p>Joined lorem ipsum</p>
<p>12 reviews bla lorem ipsum</p>
</div>
</div>
CSS
body, h4, p {
margin: 0;
padding: 0;
}
.page {
padding: 20px;
background: #F0F0F0;
clear: both;
display:inline-block;
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.left-content, img {
display: inline-block;
vertical-align: middle;
}
What if you simply add horizontal cells and include the image and text in each one of them?
My layout so far for the site is as follows:
HTML
<div class="tabArea">
some more code
</div>
<table class="tablesorter">
<tbody>
some more stuff here
</tbody>
</table>
CSS
table.tablesorter{
margin:0px auto 0px;
font-family:sans-serif;
border-radius: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: #F5F5F5;
width:750px;
height:400px;
}
div.tabArea {
font-weight:bold;
padding:0px;
position:relative;
text-align:center;
}
I would align the tabArea div to that it is flush on the left with the centered table. I am using text-align to center. However, the centers the div on the whole page. Moreover, if I align to the left, then it will go all the way to the left. How do I achieve this?
You'll want to use the <tr> and <td> tag when working with <tbody>, otherwise it "throws" the text out of table. For the tabArea to align correctly (to the outer left corner of the table), you'll've to put all of the content in a container. Try this:
<div id="container">
<div class="tabArea"> some more code</div>
<table class="tablesorter">
<tbody>
<tr>
<td>some more stuff here</td>
</tr>
</tbody>
</table>
</div>
.tablesorter {
font-family:sans-serif;
border-radius: 10px;
padding: 0 10px 0 10px;
background-color: #F5F5F5;
width:750px;
height:400px;
}
#container { margin: 0 auto; width: 750px;}
.tabArea { font-weight:bold; text-align: left;}
Hope this helps.
Here is the solution:
http://jsfiddle.net/pgxh6r31/
<div class="tabArea">
some more code
</div>
<table class="tablesorter">
<tbody>
<tr>
<td>
some more stuff here
</td>
</tr>
</tbody>
</table>
table.tablesorter{
margin:0px auto 0px;
font-family:sans-serif;
border-radius: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: #F5F5F5;
width:750px;
height:400px;
}
div.tabArea {
width: 750px;
font-weight:bold;
padding:0px;
position:relative;
margin: auto;
border: 1px solid black;
}
table td {
border : 1px solid black;
}