I started looking into CSS more deeply and decided I would like to convert my site's html that mainly consists of tables to divs.
I'm trying to accomplish the same thing with divs as with tables on this test page. But I'm having a few problems:
Couldn't make columns
Vertical text alignment
How far I've gotten:
Code:
<style type="text/css">
body {
background-color:#000;
}
/* TABLE CSS */
td {
font-family: Tahoma;
font-size: 12px;
}
.line {
border-collapse:separate;
border:1px solid #222222;
border-spacing:1px 1px;
margin-left:auto;
margin-right:auto;
background-color: #000000;
padding: 1px;
width:400px;
}
.topic {
background-color:#3C0;
font-weight: bold;
height: 23px;
color:#FFF;
text-align:center;
}
.row {
background-color: #111111;
border-bottom: 1px solid black;
color: #ffffff;
height:12px;
line-height:21px;
padding:0px;
}
.row:Hover {
background-color: #252525;
}
/* DIV CSS */
div.line {
border-collapse:separate;
border:1px solid #222222;
border-spacing:1px 1px;
align:center;
background-color: #000000;
padding: 1px;
width:400px;
}
div.topic {
background-color:#3C0;
font-family: Tahoma;
font-size: 12px;
height: 23px;
font-color:#FFF;
text-align:center;
}
div.row {
background-color: #111111;
border-bottom: 1px solid black;
color: #ffffff;
padding:6px;
font-family: Tahoma;
font-size:12px;
}
div.row:Hover {
background-color: #252525;
}
</style>
<body>
<table class="line">
<tbody>
<tr>
<td class="topic" colspan="3">Table</td>
</tr>
<tr class="row">
<td width="20%" align="left">Test</td>
<td width="20%" align="center">1</td>
</tr>
<tr class="row">
<td align="left">Test</td>
<td align="center">2</td>
</tr>
</tbody>
</table>
<p>
<div class="line">
<div class="topic">Div</div>
<div class="row">Test</div><div class="row">1</div>
<div class="row">Test</div><div class="row">2</div>
</div>
</p>
It's good to see that you are converting tables into divs, however make sure you only do this where necessary.
If the data on the page is tabular, then it makes sense for this to be put in a table element.
Div's are for layout and structure, table's are for displaying tabular data.
A collegue of mine once spent ages building a forum out of divs which followed a table structure. This was all because he'd been told "tables are bad, use divs and CSS". It's important to remember this is only referring to layout structure.
If your structure has rows and columns, then use a table. tables are still valid useful HTML elements, and are far from deprecated.
Here you go:
HTML:
<div id="wrap">
<h2> Div </h2>
<div class="section">
<div> Test </div>
<div> 1 </div>
</div>
<div class="section">
<div> Test </div>
<div> 2 </div>
</div>
</div>
CSS:
#wrap {
border: 2px solid #333;
padding: 2px;
}
h2 {
background: green;
color: white;
text-align: center;
font-weight: bold;
padding: 4px 0;
}
.section {
overflow: auto;
margin-top: 2px;
}
.section > div {
float:left;
width: 50%;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #333;
color: white;
padding: 4px 0;
}
.section > div + div {
text-align: center;
border-left: 2px solid black;
}
Live demo: http://jsfiddle.net/jNQrM/1/
Get a good book - I recommend CSS: The Missing Manual (Missing Manuals)
look up float a long with display esp relative
Put float:left; on this class :
div.row
Take a look to the css display property.
.line {
display: table;
}
.row {
display: table-cell;
}
But you should get some problems with internet explorer. In that caase you could use display: inline; with a zoom:1;
Related
I have spent considerable time researching this and could not find a working solution from the other answers presented here. With that said, I apologize if this seems to be a duplicate; none of the researched solutions worked and I am completely baffled as to why.
The following is the portion of code which is slightly off-center. Oddly, I have the same set-up on a different page - the only difference being one link in the table says "Resume" instead of "Main" - and that is centered perfectly.
EDIT: Sorry, here is the fiddle with the changes suggested by blearn and UndoingTech.
<body class="center style">
<div class="center style">
<object data="Resume.pdf" type="application/pdf" width="100%" height="600px">
</object>
<div style="center" align="center">
Download Resume
</div>
<div style="width:50%;margin:0 auto; justify-content:center" align="center">
<table class="center">
<tr style="color:orangered;text-align:center" class="linkoutline">
<td><a href="index.html"
class="link">Main</a></td>
<td><a href="projects.html"
class="link">Projects</a></td>
<td><a href="https://github.com/mygithub"
class="link">
GitHub</a></td>
<td><a href="https://www.linkedin.com/in/mylinkedin"
class="link">
LinkedIn</a></td>
</tr>
</table>
</div>
</div>
</body>
Here is the css formatting:
html, body
{
padding:0;
margin:0;
}
body.center
{
margin-left:15%;
margin-right:15%;
}
body.style
{
font-family:Helvetica;
font-size:12pt;
background-color:#FFAB91;
}
div.center
{
margin-left:1%;
margin-right:1%;
padding-left:1%;
padding-right:1%;
}
div.style
{
background-color:white;
overflow:hidden;
height:100vh;
}
p.center
{
/*
Should be slightly narrower than the div
*/
margin-left:5%;
margin-right:5%;
}
td
{
/*
Make cell spacing with a transparent horizontal border
*/
border-left: solid 15px transparent;
border-right: solid 15px transparent;
}
td.vertpadding
{
/*
Some space between table cells
*/
border-bottom: solid 40px transparent;
}
table.center
{
position:absolute;
bottom:20px;
}
ol, ul
{
margin-top:0;
margin-bottom:0;
padding-left:15;
padding-right:15;
}
h4.small
{
margin-top:0;
margin-bottom:5;
color:steelblue;
font-weight:normal;
font-size:12pt;
}
a
{
color:orangered;
text-decoration:none;
}
a:visited
{
color:firebrick;
}
a:hover, a:active
{
/*
Increase font upon mouseover
*/
font-size:125%;
}
Many solutions recommended doing things such as set the parent container's text-align to center; that did not work. Reducing the child div width and setting margin to 0 auto only worked on the other page, but not this one. The table is only off by about a half an inch. If I set the left margin to something like 30%, it works, but I would like to have the margin be dynamically determined by the dimensions of the parent div if at all possible.
Remove position:absolute from
table.center
{
position:absolute;
bottom:20px;
}
This will make the table fall within its containing div's positioning. Right now, it is statically placing it at an exact location on the html page.
I have made a few edits to your code in this fiddle. Here is a summary of what I did:
Like bleam said, I took out the position code. I added text-align: center to the parent div and margin:auto to the table.
#edited {
border: 5px solid red;
text-align: center;
/* Added after EDIT */
position: absolute:
bottom: 20px;
}
table.center {
/*position: absolute;
bottom: 20px;*/
border: 5px solid blue;
margin: auto;
}
I also changed this line <div style="width:50%;margin:0 auto; justify-content:center" align="center"> to this <div id="edited">. The borders are not needed. They are only there so you can see the boundaries.
EDIT: I have added the position code to the #edited part. That might work for you.
You can center the table keeping it absolutely positioned using the transform trick as shown below so that bottom:20px; works as expected
table.center {
position: absolute;
left:50%; /*add this */
bottom: 20px;
transform: translate(-50%); /* and this */
border: 5px solid red;
/*margin: auto; no longer needed*/
}
html,
body {
padding: 0;
margin: 0;
}
body.center {
margin-left: 15%;
margin-right: 15%;
}
body.style {
font-family: Helvetica;
font-size: 12pt;
background-color: #FFAB91;
}
div.center {
margin-left: 1%;
margin-right: 1%;
padding-left: 1%;
padding-right: 1%;
}
div.style {
background-color: white;
overflow: hidden;
height: 100vh;
}
p.center {
/*
Should be slightly narrower than the div
*/
margin-left: 5%;
margin-right: 5%;
}
td {
/*
Make cell spacing with a transparent horizontal border
*/
border-left: solid 15px transparent;
border-right: solid 15px transparent;
}
td.vertpadding {
/*
Some space between table cells
*/
border-bottom: solid 40px transparent;
}
#edited {
border: 5px solid red;
text-align: center;
}
table.center {
position: absolute;
left:50%;
bottom: 20px;
transform: translate(-50%);
border: 5px solid red;
/*margin: auto;*/
}
ol,
ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 15;
padding-right: 15;
}
h4.small {
margin-top: 0;
margin-bottom: 5;
color: steelblue;
font-weight: normal;
font-size: 12pt;
}
a {
color: orangered;
text-decoration: none;
}
a:visited {
color: firebrick;
}
a:hover,
a:active {
/*
Increase font upon mouseover
*/
font-size: 125%;
}
<body class="center style">
<div class="center style">
<object data="Resume.pdf" type="application/pdf" width="100%" height="600px">
</object>
<div style="center" align="center">
Download Resume
</div>
<div id="edited">
<table class="center">
<tr style="color:orangered;text-align:center" class="linkoutline">
<td>Main
</td>
<td>Projects
</td>
<td><a href="https://github.com/mygithub" class="link">
GitHub</a>
</td>
<td><a href="https://www.linkedin.com/in/mylinkedin" class="link">
LinkedIn</a>
</td>
</tr>
</table>
</div>
</div>
</body>
im trying to create a website, but im having trouble with 2 parts;
1. I am unable to vertically align the Website title vertically so that its is in the middle of the div.
2. Im trying to left align the menu table with the header div right above it and make it stay as such for all browser types.
I have tried to do different things to get both the above to work, but nothing seems to work and am unable to align either of the elements. Could someone help me please.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game Portal</title>
<style>
body{
background-color: black;
}
h1.header{
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
font-size: 30px;
color: #fff;
text-transform: uppercase;
}
#headerdiv{
margin: 0px auto;
border: 1px solid red;
width: 70%;
height: 100px;
padding-top:30px;
}
th, td {
padding: 15px;
table-layout: fixed;
width: 180px;
height: 75px;
padding: 0px;
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #808080;
border-collapse: collapse;
}
td {
text-align: center;
font-family:"Times New Roman", Helvetica, sans-serif;
font-size: 15pt;
border-radius:5px
height: 100px;
}
a{
color: #808080;
}
#titleSize{
font-size: 25px;
}
#nav {
line-height:30px;
background-color:#4D4D4D;
height:80px;
width:100%;
}
</style>
</head>
<body>
<div id="headerdiv">
<h1 class="header">game<span id="titleSize">portal</span></h1>
</div>
<div id="nav">
<table style="background-color: #4D4D4D; padding-left: 15%;">
<tr>
<td>Home</td>
<td>Games</td>
<td>News</td>
<td>Contact Us</td>
</tr>
<table>
</div>
</body>
</html>
I have tried messing with the positions (abs, fixed, relative) as well as with the margins, but nothing seems to move either of the elements. Thanks in advance.
One way to do it is through padding:
#headerdiv{
width: 200px;
margin:0px auto;
border: 1px solid red;
width: 70%;
height: 70px;
padding-top:30px;
}
Here height has been changed and the rest to 100 has been added to padding-top
There are many ways to do that, example:
http://jsfiddle.net/ovLhjmwb/
For example: Is more easy to have a container that contains all the child elements (and give it a width)
.container {
width: 400px;
margin: auto;
}
Also, vertical aligned text, is a little difficult to do, the easiest way is to use the vertical-align property (that comes with table elements)
#headerdiv table{
vertical-align: middle;
height: 100%;
width: 100%;
}
So I guess there are some more probs. For example use more HTML5 tags and not so many of ID's or classes. Keep your DOM-tree as simple as possible. You will get a better structure and your xode is more readable. BTW I fixed your problems in my solution as well.
HTML:
<header>
<h1>Game<span>Portal</span></h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Games</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
body{
background: black;
}
header {
width: 70%;
display: block;
margin: 0 auto;
height: 100px;
border: 1px solid red;
}
header h1 {
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 30px;
color: white;
text-transform: uppercase;
padding-top:13px;
}
header h1 span {
font-size: 25px;
}
nav {
width:70%;
margin:0 auto;
text-align:left;
height: 100px;
background: #4D4D4D;
}
nav ul {
margin-left:-40px;
}
nav ul li {
float:left;
list-style-type:none;
}
nav ul li a{
color: #808080;
height: 62px;
padding:38px 20px 0 20px;
border-left:1px solid #808080;
display: block;
font-size: 15pt;
}
I've created a container <div id="container"> for my content, which in return has a simple <div id="leftbar"> and <div id="content"> for the main text of the page.
I've made the <div id="container"> as a display:table in styles, and both <div id="leftbar"> and <div id="content"> as display:table-cell.
The problem I'm having now is, whenever I try to change padding on the <div id="content">, it affects padding in <div id="leftbar"> for some reason. And it applies only for the top padding.
How can I resolve this, and better yet, why is this happening? Is it because of the table structure?
Providing with code, and jsfiddle. In jsfiddle change the last padding line in CSS to see how it shifts everything in the left bar.
HTML:
<body>
<div id="wrapper">
<div id="header"><img src="http://i.imgur.com/krQBHIx.jpg" width="690" height="100"/></div>
<div id="container">
<div id="leftbar">
<ul>
<p class="heading">Navigation</p>
<li>Main</li>
<li>Articles</li>
<li>Lessons</li>
<li>About</li>
</ul>
<p class="heading" style="background: #bb0;">Subscribe</p>
<form action="subscribe.php" method="POST" name="form1">
Subscribe to our RSS feed and get all the fresh news and articles directly in your mail box!<br /><br />
<label><p>Enter your name:</p><input type="text"/></label>
<label><p>Enter your e-mail:</p><input type="text"/></label>
<input type="submit" name="submit" value="Send!"/>
</form>
</div>
<div id="content">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</div>
</div>
<div id="footer"><img src="http://i.imgur.com/2GzQuoo.jpg" width="690" height="18"/></div>
</div>
</body>
CSS:
/* Styles */
*
{
padding: 0;
margin: 0;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
font: 14px Verdana, Tahoma, sans-serif;
}
*:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
a
{
color: #000;
text-decoration: none;
}
body
{
background: #606B79;
}
p
{
font: 14px Tahoma, Verdana, sans-serif;
}
#wrapper
{
width: 690px;
margin: 10px auto;
}
#header img
{
display: block;
height: 100%;
}
#footer img
{
border: 1px solid black;
border-top: none;
display: block;
}
#container
{
display: table;
width: 100%;
border-left: 1px solid black;
border-right: 1px solid black;
background: #fff;
}
#leftbar
{
display: table-cell;
width: 184px;
border-right: 2px solid black;
height: 100px;
padding: 5px;
}
#leftbar ul
{
list-style: none;
margin-bottom: 15px;
}
.heading
{
text-align: center;
background-color: #a22;
color: #fff;
padding: 3px;
margin-bottom: 7px;
}
#leftbar ul li
{
border: 1px solid gray;
border-bottom: none;
}
#leftbar ul li:last-child
{
border: 1px solid gray;
}
#leftbar a
{
display: block;
padding: 2px 4px;
}
#leftbar a:hover
{
background: #ccc;
}
#leftbar form
{
border: 1px solid gray;
padding: 10px;
text-align: justify;
}
#leftbar form input
{
width: 149px;
margin: 3px 0;
}
#leftbar form input[type="submit"]
{
height: 25px;
background: #ccc;
margin-top: 20px;
}
#content
{
display: table-cell;
width: 506px;
text-align: justify;
padding: 25px;
}
jsfiddle: http://jsfiddle.net/9Qtpj/
Help me, please?
The content in your #leftbar div is aligned to the baseline. To fix your current html/css change the following:
#leftbar
{
vertical-align: top;
display: table-cell;
width: 184px;
border-right: 2px solid black;
height: 100px;
padding: 5px;
}
BUT! You really should be using another method for this. Displaying non-table elements as tables can have its issues, and isn't needed anymore.
Start learning about flexbox [the latest and greatest in web layout] - http://css-tricks.com/snippets/css/a-guide-to-flexbox/ and use floats as a fallback [see #AlexPrinceton's answer].
Try to change your CSS styles. Don use display:table for aligning elements if you can use "float"
Here is your code
CSS
#container {
width:100%;
overflow:hidden
}
#content {
float:right;
width:506px;
padding:25px;
}
#leftbar {
width:184px;
float:left;
padding:5px;
}
This is basically what I want. Record ID on the left, then the actual post on the right. Instead I get this.
body{
background-color: #333333;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
}
h2{
display:inline;
}
h2 a{
color:#ffffff;
}
hr{
border: 1px solid #db8039;
}
.post {
margin-left:auto;
margin-right:auto;
width: 66%;
background-color: #1a1a1a;
border-radius:10px;
font-size: 15px;
padding: 10px 10px 5px 10px;
}
.button{
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#222));
background: -moz-linear-gradient(top, #333, #222);
color:#888;
height:40px;
}
div.test{
border: 1px solid white;
}
<div id="post'.$row['postId'].'" class="post">
<div id="left" style="float:left">
<h2>0</h2>
</div>
<div id="right">
<div style="float:left;">
<h2><a href=#>TITLE</a></h2>
</div>
<div style="float:right;">
Posted By: USER on DATE
</div>
<br style="clear:both;"/>
<hr />
<p>BODY</p>
</div>
</div>
I'm sure this is extremely simple to do, I am just at a loss, my CSS skills are... sub par I suppose.
Any help would be greatly appreciated! Thanks!
I made a complete new 1 if you wish to check it out
Demo
Edit: New Demo
HTML
<div class="container">
<div class="count">1</div>
<div class="upper">Test 2</div>
<hr>
<div class="down">Body</div>
</div>
CSS
.container {
width: 500px;
height: 100px;
background: #000;
position: relative;
}
.count {
float: left;
color: #fff;
font-size: 30px;
line-height: 100px;
width: 50px;
text-align: center;
}
.upper {
color: #fff;
font-size: 22px;
line-height: 40px;
}
.down {
color: #fff;
font-size: 22px;
line-height: 40px;
}
Though I don't recommend to use this, it will be pretty easier to achieve this using tables too
Table Demo
HTML
<table border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
CSS
table {
width: 50%;
margin: 30px;
}
table tr:nth-child(1) td:nth-child(1) {
width: 100px;
}
Try adding the following rules:
#left{
width:5%;
display:inline-block
}
#left h2{
font-size:40px;
}
#right{
width:94%;
display:inline-block
}
jsfiddle: http://jsfiddle.net/dPX8J/15/
I'm trying to design a web page and i have a 3 column 1 row table set up (Bottom Of The Page). This is illustrated in the following figure.
As you can see in that figure, some border is appearing at the start of td tag (Marked By Black Circles). I've made the border 0 and still there is no effect. Why is happening and how should i resolve it?
I've Provided The Code Below..
HTML
<div class="wrapper col3">
<div id="intro">
<div class="fl_left">
<div class="UpperSlideShow">
</div>
<div class="LowerFlyUps">
<table class="HoverTable" cellpadding="0" cellspacing="0" border="0" style="margin-left:2px;">
<tr>
<td>
<div class="box" id="box">
<div class="inner">
<h4>Header One</h4>
<p>Content One, Team Pwn helped us identify the root cause of our problems and delivered effective solutions to tackle them.</p>
</div>
</div>
</td>
<td>
<div class="box" id="box1">
<div class="inner">
<h4>Header Two</h4>
<p>Content One, Team Pwn helped us identify the root cause of our problems and delivered effective solutions to tackle them.</p>
</div>
</div>
</td>
<td>
<div class="box" id="box2">
<div class="inner">
<h4>Header Three</h4>
<p>Content One, Team Pwn helped us identify the root cause of our problems and delivered effective solutions to tackle them.</p>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="fl_right"><img src="images/demo/380x300.gif" alt="" /></div>
<br class="clear" />
</div>
</div>
CSS
table.HoverTable
{
border: 0px;
}
table.HoverTable tr
{
border: 0px;
}
table.HoverTable tr rd
{
border: 0px;
}
.box {
position: absolute;
bottom: 0;
width: 175px;
height: 40px;
overflow: hidden;
color: #FFFFFF;
font: 12px Tahoma,sans-serif;
background-color: #284062;
margin-right: 10px;
float: left;
text-align:center;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.box h4 {
padding-bottom: 10px;
border-bottom: 1px solid #fff;
font: 18px Tahoma,sans-serif;
text-transform: capitalize;
margin: 10px;
}
.box p {
margin: 0 10px;
}
#intro
{
padding:30px 0 5px 0;
font-size:16px;
font-family:Georgia, "Times New Roman", Times, serif;
}
#intro .fl_left
{
display:block;
float:left;
width:575px;
height:300px;
margin:0;
color:#FFFFFF;
background-color:#2684B7;
}
#intro .fl_left h3
{
font-size: 24px;
padding:0;
border:none;
color:#FFFFFF;
text-align:center;
line-height:2em;
}
#intro .fl_left p
{
margin:0;
padding:0;
line-height:1.6em;
}
#intro .fl_left p.readmore
{
display:block;
width:100%;
margin:20px 0 0 0;
padding:0;
text-align:right;
line-height:normal;
}
#intro .fl_left p.readmore a
{
padding:8px 15px;
font-size:18px;
color:#FFFFFF;
background-color:#1C5E82;
}
#intro .fl_right{float:right;}
Javascript
$(document).ready(function() {
$(".box").hover(function ()
{
$(this).animate({height: 200});
}, function ()
{
$(this).animate({height: 40});
}
);
});
This is causing it, the border-left and right. http://jsfiddle.net/SdDeH/4/
table tbody td {
vertical-align: top;
border-collapse: collapse;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
}
change to
table tbody td {
vertical-align: top;
border-collapse: collapse;
}
I was not able to duplicate your issue. But you could try adding border-collapse:collapse; to the table.
table.HoverTable
{
border: 0px;
border-collapse:collapse;
}