Trying to use divs rather than a table and the columns won't line up even though they all have the width set the same in the CSS. Here it is
<div class="title_container">
<div class="duty_date">
Date
</div>
<div class="duty_name">
Duty Name
</div>
<div class="duty_start">
Start Time
</div>
<div class="duty_end">
End Time
</div>
<div class="duty_location">
Duty Location
</div>
<div class="duty_manager">
Duty Manager
</div>
<div class="duty_members">
Required Members
</div>
<div class="duty_spaces">
Spaces
</div>
<div class="duty_notes">
Notes
</div>
</div>
and the css:
.duty_date, .duty_name, .duty_start, .duty_end, .duty_location, .duty_members,
.duty_manager, .duty_spaces, .duty_notes {
text-align: center;
border-right-style:solid;
border-right-width: 1px;
display: table-cell;
vertical-align: middle;
height:50px;
}
.duty_date, .duty_spaces {max-width:70px; width:70px;}
.duty_name, .duty_location {max-width: 150px; width:150px;}
.duty_start, .duty_end {max-width:90px; width:90px;}
.duty_manager, .duty_members {max-width:80px; width:80px;}
.duty_notes {max-width:180px; width:180px;}
Should I just use a table?
Should I just use a table?
Yes! That's tabular data, so you should just use a table.
It's a common fallacy to think "tables must never be used". Trying to emulate a table with divs is just as bad as using tables for layout.
In this case I think using a table would be perfectly acceptable. When using a table for actual design elements in a page, the <div> tags are a better option, but for displaying straightforward information like in this example, go ahead and use a table.
IMO yes - definitely a table and save yourself the pain!
From a semantic point of view using tables is the right choice for "tabular data", this will also enable you to use more structured tags like <th>. Please have a look at the specs http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html.
In my firefox browser, it looks OK. You must have a different browser. But I would suggest you use table because that's exactly what html table is for, unless you have a strong reason not to.
If you wanted to use <div>, use:
.duty_date, .duty_name, .duty_start, .duty_end, .duty_location, .duty_members,
.duty_manager, .duty_spaces, .duty_notes
{
text-align: center;
border-right-style: solid;
border-right-width: 1px;
display: block;
height: 50px;
line-height: 50px;
float: left;
}
This is untested :)
Setting line-height equal to the height of an element will give you text that is centered vertically. You might have to add a clearing element after each row. So it would be like:
<div>Row1Cell1</div>
<div>Row1Cell2</div>
etc...
<div class="clear"></div>
<div>Row2Cell1</div>
etc...
With
.clear
{
clear: both;
}
Related
I'm hoping someone here can assist me. I've created a table for my site using tags, since the 'old school' way of creating it with <table> does not work on a mobile site - everything is cut off along the right hand side, without the option to slide it over.
My code is:
<style>
.list_item1 {
display: inline-block;
margin: 5px;
padding: 1px;
width: 200px;
}
.list_item2 {
display: inline-block;
margin: 5px;
padding: 1px;
width: 600px;
}
#wraplist {
width:800px;
column-count:2;
column-gap:10px;
-moz-column-count:2;
-moz-column-gap:20px;
-webkit-column-count:2;
-webkit-column-gap:20px;
}
</style>
With the following HTML:
<div id="wraplist">
<div class="list_item1"><li>A</li></div>
<div class="list_item1"><li>B</li></div>
<div class="list_item1"><li>C</li></div>
<div class="list_item1"><li>D</li></div>
<div class="list_item1"><li>E</li></div>
<div class="list_item2"><li>F</li></div>
<div class="list_item2"><li>G</li></div>
<div class="list_item2"><li>H</li></div>
<div class="list_item2"><li>I</li></div>
<div class="list_item2"><li>J</li></div>
</div>
<div style='clear:both;'> </div>
In case you're wondering why I'm using a Div instead of a <ul> controlled through the CSS, it's because for whatever reason, it doesn't work. I've literally copied and pasted other code that was proven to work, within my site and it simply shows as one list instead of a list divided into two columns. The div creates two lists but they don't show on a mobile site. The outcome is that "list_item1" shows, then one line - the first one, from "list_item2" shows with a very large font, and everything else has vanished.
I've created two 'list items' due to the fact that I need the column to be larger to make room for the extra text in the second row. I can't have them equal in size.
Does anyone have any ideas as to how to fix this so that it displays on a mobile device? Or an alternative method that does?
Imagine a math problem on the web. I would like to display the math problem and then have the user be able to type their answer to the right of it. I am trying to set up the structure. I have custom buttons that I will use to change the inner text of the answer.
The math problem is given by "problemtext" and the answer is given by "problemanswer". When the user taps on the number pad, I will place that number in the "problemanswer" segment.
The problem with this set up is that the answer is showing up below the problem.
But I want the answer to be directly to the right of the problem, not below it. Further, I'd like the answer to have a box (or border) around it. How can I do this? What should my html/css look like?
<div id="problem" class="text" style="display:none">
<div id="problemoverall" align="center">
<div id="problemtext" style="font: bold 65px Arial;">
</div>
<div id="problemanswer" style="font: bold 65px Arial;">
</div>
</div>
</div>
Here's some relevant CSS I have
.text {
text-align:center;
font-size:16px;
line-height: 165%;
color:#f1f1f1;
}
.text p {
margin: 8px 0;
}
Use display: inline;. Add this css rule:
#problemtext, #problemanswer{
display: inline;
}
Have a look:
http://jsfiddle.net/cherniv/dPSav/1/
I'm trying to convert my site from using tables to just using css and divs but I'm running into a lot of problems with trying to figure how to exactly do it, I've been looking for tutorials on centering a site with css and how to put divs side by side but I can't really find one that does both and I keep getting confused by how to exactly achieve this, I asked around a bit and I got told to use absolute positioning but still I can't really wrap my head around this.
So basically how would I arrange the 2 central div side by side while keeping the whole thing centered in the browser? The following image is the layout I'm trying to achieve:
the blue boxes are eventual other stuff I might want to put in them, such as a blog requiring again the use of side by side divs.
right now I have the following layout:
<div id="wrap">
<div id="banner"> banner </div>
<div id="navbar"> navigation links </div>
<div id="body"> stuff </div>
<div id="footer"> stuff </div>
</div>
General idea: http://jsfiddle.net/JjbJE/
A little specific but provide you a great adventure to learn HTML | CSS : http://jsfiddle.net/JjbJE/3/
float:left|right this property does the side by side trick
clear:both this property clear away the float property
Other things are pretty easy to learn, just head to W3Schools
First you need a main container to center everything. Then two separate divs. See the HTML below:
<div id="main">
<div class="box">Left Box</div>
<div class="box">Right Box</div>
<div class="clear"></div>
</div>
Here is the CSS you will need:
#main{
width:960px;
margin:0 auto;
}
.box{
width:450px;
float:left;
border:solid 1px #000000;
}
.clear{
clear:both;
}
Hope that helps.
Here's my general overview on converting to a CSS based layout - if you have a table based layout, this is a good plan - in the end you can do more, Google will like you more, and it's much cooler.
My strategy is to look at all the groups of things on your page. Whatever needs to go into a group together, put inside a div. Assign this div a class and/or id to style it. If the divs are grouped, put them together in a div too.
In your case, you have two chunks of content to group inside of divs. Style them to be the size and shape you like, background, border, whatever is needed. Then group them together in an additional div, and center it. This and the rest of the page content can go inside a container div, which will determine the width of the page, how it's aligned, etc.
One possibility is to have a centered wrapper class and contain the divisons inside of that:
<div class="wrapper">
<header></header>
<div id="middle">
<div class="main-article clearfix"></div>
<aside></aside>
</div>
<footer></footer>
</div>
Then to style, center the wrapper, float the aside and main-article:
.wrapper { width: 1024px; margin: 0 auto; /* the auto centers it */ }
header, footer, aside, { display: block; }
.main-article { width: 50%; float: right; }
aside { width: 50%; float: left; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
Note: This is untested, and uses the clearfix from the HTML5 Boilerplate.
Update 01.22.2014: This "Holy Grail Layout" has ben solved by Flexbox. Check out Solved By Flexbox for more information on recreating this layout (and many more).
I am trying to shift my style away from using tables to control formatting, but I haven't seen a simple css solution that does exactly the same thing as
<table><tr><td>aribitrary-html-A</td><td>aribitrary-html-B</td></tr><table>
All I want is to make sure aribitrary-html-A and aribitrary-html-B are aligned horizontally. I have tried various CSS concoctions using display: inline, clear: none, and float: left but they all have unwanted side-effects of moving my content around, while the table-tr solution just does what I want, regardless of what's in the arbitrary HTML, and regardless of what is in HTML that contains my table.
Am I missing something?
Why not use a grid system then like 960gs
You probably need this
<div id="wrap">
<div id="left">
content 1
</div>
<div id="right">
content 1
</div>
</div>
#wrap {
width: 50%; /* change this as you wish */
}
#left, #right {
display: block;
float: left;
}
You need to use <div>s and decent CSS. For people that aren't confident enough (or lazy, like me) Yahoos YUI CSS Grid Builder is invaluable! Enjoy!
Maybe this might help you?
<div style="width:400px;margin:0 auto;">
<div style="background-color:red;float:left;height:200px;width:200px;">
</div>
<div style="background-color:blue;float:right;height:200px;width:200px;">
</div>
</div>
Just don't put your css within style attributes like I did.
Just create two Divs and align the one you want to have on the left side.
Like so (update):
<div id="wrap" style=" width:300px;
margin:auto;
border: 1px solid black;
padding:1px">
<div id ="A" style="float:left;
border: 1px solid black;"> aribitrary-html-A </div>
<div id = "B" style="border: 1px solid black;"> aribitrary-html-A</div>
</div>
Update: I added a wrapper with a defined width. Also I used some borders to visualize the table-like layout. Hope that helps.
Wrap element in a div, set fixed width for the wrapper. Give each element in the div a width and set the margin to 0 auto.
Just set the CSS "float" property to left on every element you want to display horizontally, and make sure each of those elements have a set width.
I'm new to CSS and racking my brain on the following:
I have a row of images that are sourced from a database query. I display the photos in a row which wraps within a page. For example, if there are 20 photos, it will display 5 per row based on the width of the page and the photo.
My challenge: I want to position a DIV in the same relative spot on each photo. This div will contain a link to take an action on the photo. All of the action code is working, but I cannot, for the life of me, correctly position the DIV.
I can't post an image of the mockup I'm trying to achieve (I'm too new), but here's a description:
Imagine a row of photos the size of a postage stamp. In the upper right corner of each, is a gray box containing a link. I'm unable to consistently position the gray box in the same relative position on each photo. Each photo is the same size, but since the number of photos is unknown, I can't simply "position:abosulte;" the action box manually.
My HTML looks roughly as follows: I've simplified the loop; its a dump of a query from ColdFusion of an indeterminate number of photos.
<LOOP>
<div id="photo" style="display:inline;"><img src="abc"></div>
<div id="redBox" style="????">ACTION</div>
</LOOP>
Thoughts?
Many kind thanks in advance.
Probably easier to add your box within this div, something like:
<div id="photo" style="display:inline;">
<div id="redBox" style="position:relative;top:-10px;left:-10px">ACTION</div>
<img src="abc">
</div>
You could then offset as required using position:relative (you'll see I've guessed the amounts above, but you can obviously tweak to suit!)
Hope this helps!
Try <style>
#photo {
display: inline-block;
position: relative;
}
.action {
/* Optional */
background: #CCC;
color: #FFF;
padding: 2px 3px;
/* Necessary */
display: inline-block;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
</style>
<div id="photo">
<div class="action">Foo</div>
<img src="abc">
</div>
maybe you could wrap it all in another div?
<LOOP>
<div class="container" style="display: inline-block;">
<div class="photo"><img src="abc"></div>
<div class="redBox" style="position:relative; top: -20px; right; 10px;">ACTION</div>
</div>
</LOOP>
I may be wrong, but it looks like you're trying to reinvent the wheel...
Check out the map element (HTML4, HTML 5)