- This topic is empty.
-
AuthorPosts
-
October 28, 2016 at 10:03 am #247159
TV
ParticipantI’m having trouble with getting my text to get to the top and slightly to the left. I’ve googled it and tried ‘Relative Positioning” “Absolute Positioning” and “Fixed Positioning.” Nothing works. I’m sure I messed up my css code, but I’m not seeing it.
<!DOCTYPE html>
<html>
<head>
<link href=”../css/about.css” type=”text/css”
rel=”stylesheet” />
<style type=”text/css”>
* {
margin:0;
padding:0;
}
table {
width: 100%;
height: 100%;
}
html, body {
height: 100%;
}</style> </head> <body> <table border="1";> <td colspan="2" align="center" class="abadayTitle">Abaday Strawbear Productions</td> <tr> <td width="12%" class="abadayMenu">Menu</td> <td rowspan="5" align="left"> <p>Abaday Strawbear Productions</p> <p>AboutAboutAbout</p> <p>AboutAboutAbout</p> <p>AboutAboutAbout</p> </td> </tr> <tr> <td class= "abadayMenu">About</td> </tr> <tr> <td class="abadayMenu">Services</td> </tr> <td class="abadayMenu">Portfolio</td> </tr> <tr> <td class="abadayMenu">Contact Us</td> </tr> <tr> <td colspan="2" class= "abadayCopyright"><p>©2016 Abaday Strawbear Productions</p></td> </table> </body>
td.abadayTitle {
font-family: Impact;
color: #8e2323;
background-color: #d3d9de;
font-size: 25px;
font-weight: bold;
text-transform: uppercase;
word-spacing: 0.2em;}p.abadayContent {
font-family: Baskerville, serif;
color: #000000;
font-size: 18px
position: fixed;
margin-top: 18px;}td.abadayMenu {
font-family: Baskerville, serif;
color: #b8860b;
background-color: #d3d9de;
font-size: 16px;
text-align: center;}td.abadayCopyright {
font-family:”American Typewriter”, monospace;
color: #8e2323;
background-color: #d3d9de;
font-size: 11px;
text-align: center;}October 28, 2016 at 10:21 am #247161Shikkediel
ParticipantLike this perhaps?
October 28, 2016 at 10:39 am #247162Shikkediel
ParticipantThere’s a glitch in the Codepen matrix…
Follow the white rabbit.October 28, 2016 at 10:43 am #247163Beverleyh
Participant[EDIT] Typing an answer on mobile takes a bit of time… simultaneous posting ahoy! Evening, Shikk :D
You should really provide a demo in codepen.io so that we can see what’s happening.
Briefly looking at your code, I’m assuming you’re referring to the text in the main table cell (the paragraph elements). You should know that the default vertical alignment of table cells is the middle. In HTML4 you could make contents sit towards the top of a td using the valign attribute with a ‘top’ value. Unfortunately, it isn’t supported in HTML5 (the version of HTML you’re using as per the doctype). Instead you can use the CSS equivelant vertical-align property https://developer.mozilla.org/en/docs/Web/CSS/vertical-align
That said, you shouldn’t be using tables for web layouts at all anymore. Might be a good opportunity to move to a div based layout http://learnlayout.com
To answer your positioning observation;
I’ve googled it and tried ‘Relative Positioning” “Absolute Positioning” and “Fixed Positioning.” Nothing works.
You can’t position in a table cell unless you use a wrapper element https://css-tricks.com/absolutely-position-element-within-a-table-cell/
But I wouldn’t even go there when you can use divs for the whole shebang. Tables are for statistical data, not layout.
October 28, 2016 at 10:53 am #247165Shikkediel
ParticipantHi there, Bev. A much better answer than my quick fix of course. :-)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.