At my website guestspeaker.earth I have buttons down the right hand side that are clickable to jump to other pages. Each button is a table row, split into two columns, to help me organise and align the contents. The L/H column has an image with a link, the R/H column has a heading and a paragraph containing text, all surrounded by a link anchor. It works but it generates errors because of course you shouldn't have tags within a <a> tag. (There are also problems with using 'width' and 'align', I know.). I'm struggling to come up with an elegant alternative. I don't want to use Java. I'm open to alternatives that don't look exactly like what I've got, if it's not possible to mimic the current layout. Any help greatly appreciated, as I'm a beginner here.
<table class="rightpanel">
<tr class="rightpanellinkbox">
<td class="rightpanellinkbox" width="90"><a href="current-bookings.htm">
<img src="images/lecture-audience.jpg" alt="Current bookings" width="70" align="center"></a>
</td>
<td class="rightpanellinkbox"><a href="current-bookings.htm">
<h3>Current bookings</h3>
<p class="panel">Upcoming talks David is giving around the country</p></a>
</td>
</tr>
</table>
The CSS is:
table.rightpanel {
margin-left:auto;
margin-top: 10px;
text-align: center;
background-color:#000066;
margin-left: 10px;
margin-bottom:35px;
width: 85% }
td.rightpanellinkbox {
padding-top:2px;
border-bottom: 1px solid #0066CC }
tr.rightpanellinkbox { padding-top:2px; }
p.panel {
color: white;
margin-right: 10px;
margin-left: 10px;
text-align:left;
font-size: 75% }
Related
I put together this fiddle
What I have is 2 divs and then one of them has 2 more divs in it. What I am trying to do it properly position label and span within second div
<div id="someotherdiv">
</div>
<div class="reportuserinfo">
<div class="leftdivinfo">
<label>Teacher:</label><span>Teacher Name</span><br/>
<label>District:</label><span>District Name</span><br/>
<label>School:</label><span>School Name</span>
</div>
<div class="rightdivinfo">
<label>Class:</label><span>Class Name</span><br/>
<label>Content:</label><span id="currcontent">Content</span><br/>
<label>Unit:</label><span id="currunit"></span>
</div>
</div>
If you look in fiddle right now label is floating to the right and so is span but they look strange, what I am attempting to accomplish is something like this on both sides of second div:
Teacher: Teacher Name
District: District Name
School: School Name
The way they look right now is
Teacher: Teacher Name
District: District Name
School: School Name
Thanks for your help.
I just added width:30%; in your css class ".reportuserinfo label" and it fixed the issue (fiddle). You need to define width in order to fix the text alignment issue. You can adjust space margins as per your requirements.
Here is how your code looks like to me now :-
.reportuserinfo label {
float: left;;
margin-right: 30px;
font-weight: bold;
text-align: right;
width:30%;
}
You should define a min-width style in your css apart from width:40% to ensure that the text you are trying to write does not scroll if browser width is decreased
.leftdivinfo {
float:left;
min-width: 200px;
width:40%;
background: yellow;
padding-left: 30px;
padding-right: 30px;
}
Have you tried using tables? You could enclose this information in a table, then right-align the text in the left column:
table {
border: none;
}
td:first-child {
text-align: right;
}
td {
padding: 5px;
}
<table>
<tr>
<td>Class Teacher:</td>
<td>John Smith</td>
</tr>
<tr>
<td>District:</td>
<td>Smithsville</td>
</tr>
<tr>
<td>School:</td>
<td>Smith's High School</td>
</tr>
</table>
Try setting width to auto and adding display:inline-block.
.leftdivinfo {
float:left;
width: auto;
background: yellow;
padding-left: 10px;
padding-right: 10px;
display:inline-block
}
Tables might be a better way to make this.
EDIT:
I see you want the colons aligned, add min-width:70px; to the label class.
For my school project i would like to achieve
if the user hovers his mouse pointer over a table the bgcolor of the cell should change
I tried
changing the display of anchor to block and changing the cellpadding and tweaking a few things here and there.
My Problem is
the cell-background changes on mouse over but it does not cover the ENTIRE cell (there are still gaps left on all the four sides where it shows differernt color)
i think there are many easy ways to fix this and i sort of combine them all and do something silly which makes it all go wrong.
Any simple fixes?
P.S : i know the table tags are deprecated but i struggle to make rows and columns any other way. I find the other ways very tough. The table tag would not be causing it now, or would it? Also it is just a basic framework so no links have an url nor are there any proper colors.
HTML:
<div id = "heading"> EARTH HOUR </div>
<table style=width:100% cellpadding=7>
<tr>
<td width=25% align=center bgcolor=blue>AIM</td>
<td width=25% align=center bgcolor=blue>ACHIEVEMENTS</td>
<td width=25% align=center bgcolor=blue>YOUR HELP</td>
<td width=25% align=center bgcolor=blue>FAQ'S</td>
</tr>
</table>
<center><img src="earth.jpg"
style="width:300px;height:280px;position:relative;top:25px;">
</center>
CSS:
#heading {
padding:8px;
text-align:center;
background-image:url("images.jpg"); color:#00FF00;
font-size:300%;
margin:-8px -8px 0px -8px;
font-weight:bold;
}
table, tr, td {
border-collapse:collapse;
border: 3px solid red;
color: white;
font-size:110%; font-weight:bold;
}
html, body { margin: 0; padding: 0; }
html { height: 100% }
body { min-height: 100% }
#text { font-size:150%; margin:7px; }
a { display:block;}
a:hover{ background-color:red; }
</style>
The reason is most likely that the hover is set on the link tag a and not on the td tag; therefore you still see a minor gap between the <a> and the surrounding <td>
See this example on codepen.io
I changed this:
table, tr, td {
...
padding: 0;
}
td:hover { background-color: red; }
/*
a:hover { background-color: red; } <-- removed
*/
You should really be using a <nav> and <ul> element instead of the table method. Check out w3 schools html layout.
Tables for layoutare difficult to work with in general and it seems you are experiencing that first hand!
My HTML:
<table style="width:100%;">
<tbody>
<tr style="cursor:pointer; border-bottom:1px solid #ACACAC; height:60px;">
<td style="text-align:right; vertical-align:middle; padding:10px 10px 10px 0px;">
<span style="color:#F87E20;">Copy</span>
<div style="display:inline; color:#ACACAC;"> | </div>
<span style="color:#F87E20;">Export</span>
<div style="display:inline; color:#ACACAC;"> | </div>
<span style="color:#F87E20;">Delete</span>
</td>
</tr>
</tbody>
</table>
The result:
This is all fine, and is working wonderfully. I want to make some QOL changes, though, and while looking into some of the changes I wanted to make, ran into something that is confusing me quite a bit.
The entire row is clickable, as well as the Copy, Export and Delete spans. This becomes a problem when I try to click on Export, but miss by 2 or 3 pixels, and instead navigate away from this area. I wanted to make the clickable area for the spans bigger, so I gave the a style property like so: padding:10px 0px 10px 0px;
The padding works as intended, enlarging the clickable area around the spans, making it easier to click on them. However, I was expecting the padding to also make the entire row taller, but instead it's as if the spans' padding is just flowing over the padding on the parent.
Here are some images to help explain the situation:
Parent:
And Child:
I don't understand why the child's padding is flowing outside it's container, and I don't want to go on in this direction without understanding what's going on. I was wondering if anyone could please help me understand what's happening here?
Your spans are inline elements. Top and bottom padding is ignored in case of inline elements.
By default, spans are inline, and divs are block. However, you can always override these with display: block; or display: inline;. Block elements (also inline-blocks) have full padding support.
See:
table {
width: 100%;
border-bottom: 1px solid #ACACAC;
}
tr {
cursor: pointer;
height: 60px;
}
td {
text-align: right;
vertical-align: middle;
padding: 10px 10px 10px 0px;
background-color: #e0c000;
}
span {
display: inline-block;
color: #F87E20;
background-color: #f0e000;
}
.padded {
padding: 10px 0 10px;
}
div {
display: inline;
color: #ACACAC;
}
<table>
<tbody>
<tr>
<td>
<span>Copy</span>
<div> | </div>
<span class="padded">Export</span>
<div> | </div>
<span>Delete</span>
</td>
</tr>
</tbody>
</table>
See also this article for more on this.
I have a table I have simplified for this question while preserving the problem.
It is a single row with three cells. The middle one contains an image and the first and last ones fill the remaining space and are textually supposed to be empty.
The height of the first and last cell adapts to that of the central (image) one as it is the highest, which does work -
but they become a tad bigger than they should visually creating a hole beneath the central cell.
HTML:
<article class="content" id="pc">
<table id="contentTable">
<tr>
<td class="pad" id="padL"></td>
<td id="cc">
<a href="#"><img src="http://38.media.tumblr.com/b9dc51057ece7352d07d40f4c59f0c65/tumblr_nb0xmfghdm1tin2h1o1_500.jpg" width="250"/>
</a>
</td>
<td class="pad" id="padR"></td>
</tr>
</table>
</article>
CSS:
#contentTable {
table-layout: fixed;
width: 700px;
}
#cc {
width: 500px;
}
.pad {
background-color: gray;
vertical-align: middle;
}
#padR {
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
}
#padL {
border-top-left-radius: 2em;
border-bottom-left-radius: 2em;
}
Here is a screen shot of the problem with the space highlighted in blue
And a CodePen if it helps.
Why does it occur and how can I remove it?
Since your image is inline, it obeys rules of baseline and has space at the bottom.
I had success by setting:
img {
display:block;
}
To get rid of other table spacing (not showing in your screen-shot), I suggest adding:
#contentTable {
border-collapse:collapse;
...
}
#contentTable tr td{
padding:0;
}
WORKING EXAMPLE
EDIT
Per your comment, here's an example using an embedded YouTube video (iframe). Iframes default to display:inline (replaced element), too.
iframe { display:block; }
WORKING EXAMPLE
Add a class to the cell containing the picture.
<td class="pad" id="cc">
I’m trying to recreate this sort of layout:
This is the code I’m currently using to accomplish it:
<table style="border:0px;">
<tbody>
<tr style="border:0px;">
<td><img src="twophones.jpg" alt="" /></td>
<td>
<table style="border:0px;">
<tbody>
<tr width="100%" style="border:0px;">
<td width="100%">
<center>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br>
<h33>Coming soon to the App Store and Google Play.</h33>
<table style="border:0px; width:410px;">
<tr style="border:0px;"><td style="border:0px;"><img src="dot.png"></td></tr>
<tr style="border:0px;" width="410">
<td style="border:0px;"><img src="app.jpg" alt="" /></td>
<td><img src="android.jpg" alt="" /></td>
</tr>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Unfortunately, I’m sick of maintaining this table gunk. How can I maintain the same layout, but using standard CSS techniques?
Here are a couple of my attempts:
<div id="parent"> <div id="viewport">
<a href="#">
<img src="twophones.jpg" style="float:left;> <img src="twophones.jpg" alt="" />
<h11 style="width:100%;float:right; display: table-cell; vertical-align: middle;">DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<span><h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11><br>
<h33>Coming soon to the App Store and Google Play.</h33>
<br>
<h33 style="width:100%;float:right; display: table-cell; vertical-align: middle;">Coming soon to the App Store and Google Play.</h33>
</span>
</a>
</div> </div>
<div id="parent"> <div id="parent">
<img src="twophones.jpg" style="float:left;"> <img src="twophones.jpg" style="float:left;>
<div style="width:65%;float:right;"> <div style="width:65%;float:right;">
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br> <br>
<h33>Coming soon to the App Store and Google Play.</h33>
<h33>Coming soon to the App Store and Google Play.</h33>
</div> </div>
First thing you want do to when doing a layout with CSS is, well, not touching the CSS and dealing purely with the content. How best could we represent this content? I think this includes all the content rather semantically:
<section>
<img src="twophones.jpg" alt="">
<h2>Discover the brands and styles designed for you</h2>
<p>Coming soon to the App Store and Google Play</p>
<ul>
<li class="iphone">
<a href="#">
Available on the
<strong>App Store</strong>
</a>
</li>
<li class="android">
<a href="#">
Available on the
<strong>Android Market</strong>
</a>
</li>
</ul>
</section>
It contains all the content, but it doesn’t look great. It looks sort of like this:
(picture of two phones)
Discover the brands and styles designed for you
Coming soon to the App Store and Google Play
Available on the App Store
Available on the Android Market
Your layout doesn’t quite look like that. First big difference is that nothing’s centered here, but that’s trivial to fix: (take a look)
section {
text-align: center;
}
And what about those buttons? Well, each one functions sort of as a blocky part of the page, but we still want it to be inline, so we’ll apply a display of inline-block. Furthermore, we want the bolded part to be on another line, so we’ll set its display to block, which should force that. Lastly for now, we know it’s got a orangish background and border, and looks like it’s got a little shadow on the text, so putting all this together:
section li a {
display: inline-block;
background: orange; /* fallback for browsers that
don't support gradients */
background: linear-gradient(#f9a60d, #f37111);
color: white;
text-shadow: 0 0 -1px 0 black;
border: 1px solid #e79d48;
border-top-color: #ffe37d;
border-radius: 5px;
box-shadow: 0 5px 0 #a95511;
padding: 8px;
text-decoration: none; /* no underlines on our link, please */
text-align: left; /* within the button, left-aligned */
}
section li a strong {
display: block;
}
Nice buttons! But we could still use some icons on them—fortunately, that’s easy: just add a little more padding on the left and apply a background image: (try it)
section li a {
padding-left: 50px;
}
section li.iphone a {
background: orange url(iphone-icon.png) no-repeat 10px 10px;
background: linear-gradient(#f9a60d, #f37111), url(iphone-icon.png) no-repeat 10px 10px;
}
/* similar for Android */
Now how do you get the buttons to appear in a line? Fortunately, that’s simple. First, remove any margins and padding on the list, then make each item inline-block (try it):
section ul {
margin: 0;
padding: 0;
}
section li {
display: inline-block;
}
Now how about that image on the side? It turns out CSS has us covered. We just tell it we want to float it to the left. As a common trick, we’ll also set an overflow: hidden on the container, so the float is entirely contained within the container. (You can’t see it standalone, but you may see the effect if you try to embed it in a larger web page.)
section {
overflow: hidden;
}
section img {
float: left;
}
Try it. Then we have just one minor visual tweak: we want the header to be uppercased. Fortunately, CSS has us covered there, too! Just apply
section h2 {
text-transform: uppercase;
}
And we’re done. Of course, there’s more you could do: adjust the margins and/or padding to change the spacing; change the font if necessary, etc., etc., but I’ve explored a few techniques that are generally applicable:
Floats are used and abused all the time in CSS. They’re useful.
Changing display can be useful to force elements to display in or out
of a line.
Playing with background can put icons on things.
I don’t mean for this to be a huge code dump; rather, I’d hope you’d learn something out of it, and be able to do similar things yourself.
I don't think I can go any more in-depth or explain anything better than the fantastic answer by icktoofay, but here is a simple layout that could also get you started.
Here is the demo.
Let's start with the basic HTML layout:
<div class="wrap">
<div class="image">
<img src="http://www.placehold.it/400X500" />
</div>
<div class="information">
<h1>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h1>
<h2>Coming soon to the App Store and Google Play.</h2>
<a class="storeLinks">Play store</a>
<a class="storeLinks">APP store</a>
</div>
</div>
Now let's add in some CSS to layout your HTML elements. In this example:
display: table-cell; can be used to vertically align our content in conjunction with vertical-align: middle; and place our image to the left of the text.
html,body { height: 100%; } allows us to give our wrapping .wrap div a height of 100% so that all the content contained within <div class="wrap"> can be vertically centered.
.wrap > div will target only the divs that are directly after <div class="wrap">.
margin: 0 auto;, along with a fixed width, keep all our content horizontally centered.
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.wrap {
display: table;
height: 100%;
width: 900px;
margin: 0 auto;
}
.wrap > div {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
width: 400px;
}
.information {
width: 500px;
text-align: center;
}
h1 {
text-align: center;
padding: 10px;
margin: 10px;
}
h2 {
padding: 10px;
margin: 10px;
}
.storeLinks {
display: inline-block;
padding: 20px;
background: #DDD;
padding: 10px;
}