HTML layout: Title and Button - html

I'm to implement a fullscreen layout for a Web app according to custom specs. I've got most of it under control but there's one part I have some trouble with.
To economize on space in an otherwise already crowded GUI, a "Log out" button should go into the title row rather than elsewhere. The title row, of course, contains a title. The button should appear in its default dimensions for the given browser/opsys combination at the top right, with a little padding. The title should be centered in the remaining space in that row. Here's a picture:
+====================+=======+
| ACME Widgets | [Btn] |
+====================+=======+
I don't know how wide the button will be, nor should I need to. The layout should scale smoothly on a range of devices and resolutions, from about 200 px width to 2000:
+==================================================+=======+
| ACME Widgets | [Btn] |
+==================================================+=======+
...with the title continuing to be centered in its area, which again will always be (total available width - width required for the button). The page may end up being used in a JavaScript-less environment, so dynamic size calculation is not an option. Nor (before you ask) is talking the customer out of his design.
Can anyone please suggest HTML (and, if required, CSS) to achieve this layout?
Update More constraints/explanation (sorry): This app could be viewed by people with poor vision, who like to use their zoom button (Ctrl-+) to blow up font sizes. Therefore, I'd like to go with as few assumptions about things like text sizes as possible. Obviously, on a tiny display with big zoom I would eventually not have enough space for the unpadded title and button; but until then I'd like to stay flexible.

I have two possible solutions. I will admit, they seem like these are simply modifications to some answers already given but should hopefully address the comments you've left so far.
CSS approach:
Lets say you determine that a nice width for your button is 5em. This of course scales with the browser's text zoom to always be, well, 5em.
Then perhaps you could float this to the right, and put a margin-right on your title of 5em.
#buttonContainer {
float:right;
display:inline;
width:5em;
text-align:right;
}
#titleContainer {
text-align:center;
margin-right:5em;
border:1px solid blue;
}
<div id="buttonContainer">
<input id="btnLogOut" type="button" value="Log Out" />
</div>
<div id="titleContainer">
<h1 style="text-align:center;" id="title">ACME Widgets</h1>
</div>
This approach may not be picture-perfect, but you can tweak the em unit and arrive at a nice solution hopefully.
Table-approach:
Another approach is a modification of the table-based approach given by borayeris. I have modified this to not make any assumptions about the width of the button...
<table border="0" width="100%">
<tr>
<td width="99%" align="center">ACME Widgets</td>
<td width="1%" align="right">button</td>
</tr>
</table>
Good luck!

You can use a floating div.
<div style="float:right">[Btn]</div>
<h1 style="text-align:center;">ACME Widgets</h1>
Edit: second attempt, using a displayed-but-invisible div with the same button as content to center the title in the remaining space (aka doing math in css :)
<div style="float:right">[Btn]</div>
<h1 style="text-align:center;">ACME Widgets<div style="visibility:hidden">[Btn]</div></h1>

If table is acceptaable use that
<table border="0" width="100%">
<tr>
<td align="center">ACME Widgets</td>
<td width="60">button</td>
</tr>
</table>

Might not be the most elegant solution but something like this should work. This is based off Adrian's solution
CSS
h1 {position: relative; left: 0; right: 100px; text-align: center}
.logout {float: right; width: 100px}
HTML
<div class="logout">Log me out</div>
<h1>ACME widgets</h1>

Related

How to Divide an A3 html document onto two A4 [duplicate]

I want to have two columns on my web page. For me the simples way to do that is to use a table:
<table>
<tr>
<td>
Content of the first column.
</td>
<td>
Content of the second column.
</td>
</tr>
</table>
I like this solution because, first of all, it works (it gives exactly what I want), it is also really simple and stable (I will always have two columns, no matter how big is my window). It is easy to control the size and position of the table.
However, I know that people do not like the table-layout and, as far as I know, they use div and css instead. So, I would like also to try this approach. Can anybody help me with that?
I would like to have a simple solution (without tricks) that is easy to remember. It also needs to be stable (so that it will not accidentally happen that one column is under another one or they overlap or something like that).
i recommend to look this article
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
see 4. Place the columns side by side special
To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.
#main {
float:left;
width:500px;
background:#9c9;
}
#sidebar {
float:right;
width:250px;
background:#c9c;
}
Note that the sum of the widths should be equal to the width given to #wrap in Step 3.
I agree with #haha on this one, for the most part. But there are several cross-browser related issues with using the "float:right" and could ultimately give you more of a headache than you want. If you know what the widths are going to be for each column use a float:left on both and save yourself the trouble. Another thing you can incorporate into your methodology is build column classes into your CSS.
So try something like this:
CSS
.col-wrapper{width:960px; margin:0 auto;}
.col{margin:0 10px; float:left; display:inline;}
.col-670{width:670px;}
.col-250{width:250px;}
HTML
<div class="col-wrapper">
<div class="col col-670">[Page Content]</div>
<div class="col col-250">[Page Sidebar]</div>
</div>
Basically you need 3 divs. First as wrapper, second as left and third as right.
.wrapper {
width:500px;
overflow:hidden;
}
.left {
width:250px;
float:left;
}
.right {
width:250px;
float:right;
}
Example how to make 2 columns http://jsfiddle.net/huhu/HDGvN/
CSS Cheat Sheet for reference
I found a real cool Grid which I also use for columns. Check it out Simple Grid. Wich this CSS you can simply use:
<div class="grid">
<div class="col-1-2">
<div class="content">
<p>...insert content left side...</p>
</div>
</div>
<div class="col-1-2">
<div class="content">
<p>...insert content right side...</p>
</div>
</div>
</div>
I use it for all my projects.
The simple and best solution is to use tables for layouts. You're doing it right. There are a number of reasons tables are better.
They perform better than CSS
They work on all browsers without any fuss
You can debug them easily with the border=1 attribute

Why isn't this centering?

I can't get this to center. I've tried adding aligns everywhere, and every different combination of tags. I know the HTML isn't great... but I'm just trying to get something functional right now - not worrying about best practices.
<table class='navbar' width='100%'>
<tr>
<td class='navbar'>
<a href='#' class='cta cta-big cta-red'><center><span class='icon-go'>No</span></a></center>
</td>
<td class='navbar'>
<center><a href='#' class='cta cta-big cta-yellow'><span class='icon-download'>Maybe</span></a></center>
</td>
<td class='navbar'>
<center><a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a>
</td>
</tr>
</table>
Any help would be appreciated! Thanks!
These answers show there are different kinds of "centering" in CSS, let's call these two text centering and block centering. The 'text-align' property governs where lines of text flush up, right, left, center, justified (right and left with extra padding between the words to make them flush up). This is what usually is thought of as "centering", and what you can see as icons in WYSIWYG text editing.
When you do layout you often have another centering task, you want one box to be in the center of another box. By the CSS way of thinking this is the box model (almost everything is a box to CSS), and you can reformulate "center this box inside that box" into "make sure that the left margin and the right margin of the inner box are the same". For instance if the outer box is 200 pixels wide, and the inner box is 120 pixels wide, you want the left margin = right margin, or in other words each margin will have to be 40 pixels. (40+120+40 = 200).
Hard-coding this is a lot of calculation, and it will break if either box changes size. Fortunately we have the margin: auto value which does it for us (it does "OK, this box is 120 pixels wide, we have room for 200 pixels, then I'll split the extra 80 in half and give it to each margin"), and it will keep working even when the layout (and box sizes) change.
Finally we have vertical alignment. CSS doesn't do that satisfactory yet, but there is a trick. See http://www.w3.org/Style/Examples/007/center for more on this.
Oh, and the HTML 'center' element mixed those two above models, but it didn't do it very well. I would advise you to stay away from the center tag (besides it is a good idea to keep style apart from markup).
Get rid of the <center> tags:
<table class='navbar' width='100%'>
<tr>
<td class='navbar'>
<a href='#' class='cta cta-big cta-red'><span class='icon-go'>No</span></a>
</td>
<td class='navbar'>
<a href='#' class='cta cta-big cta-yellow'><span class='icon-download'>Maybe</span></a>
</td>
<td class='navbar'>
<a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a>
</td>
</tr>
</table>
And use CSS to do the centering:
table {
text-align:center;
}
Demo: http://jsfiddle.net/w7rWx/
"Not worrying about best practices" is often a difficult way to "get something functional", especially cross-browser. It's in your best interest to at least make an effort, consider adopting a different approach towards HTML/CSS.
Try this css.
.center {
float: none;
margin: 0 auto;
padding: 0;
position: relative;
}
margin: 0 auto; does the trick of centering. BTW, mentioning the width attribute also will make sure that the right and left margins depending on the window size.
In the first <td>, you have your HTML organized like so:
<a><center><span></span></a></center>
You're closing the tags in the wrong order; from the other two lines, it looks like you meant to do:
<center><a><span></span></a></center>
And in the third <td>, you didn't close the <center> at all.
Here's a fiddle with those changes made, and it looks like it works.
As already said: get rid of the center tag…
As for code Wesley Murch already gave you a very good answer though it will apply to all your table. I you want your style to apply only to a few elements try this:
.center{
text-align:center;
}
And apply it to "td" element by writing:
<td class='navbar center'>
<a href='#' class='cta cta-big cta-green'><span class='icon-check'>Yes</span></a>
</td>

A Compressed Version of float: left

I have what seems like a simple problem, but i have yet to find a solution. I have a series of divs which may vary in height, thought they will generally be the same width. I would like a fluid layout that basically ends up generating a variable number of columns as the page is resized. Perfect for float left. The problem is that when the divs are different heights, there ends up being a lot of white space vertically between the elements.
Clearly, the simple solution is to write some javascript to do all of this for me. But i would hate to have to resort to that if there's a css solution.
Here is a simple example:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Simple Float Example</title>
<style type="text/css">
.dv { border: solid 1px red; float: left; width: 300px; }
</style>
</head>
<body>
<div>
<div style="height: 40px;" class="dv"></div>
<div style="height: 20px;" class="dv"></div>
<div style="height: 60px;" class="dv"></div>
<div style="height: 20px;" class="dv"></div>
</div>
</body>
</html>
You'll see that when the page is very narrow, everything looks as you would expect. All of the divs stack up. If you expand the page to full size, yet again - everything looks fine. But when there are 2 or 3 columns, look how much extra space there is. I'd post an image, but my reputation does not yet permit me to do so.
Anyway, i experimented with various display and position settings, and i couldn't get it to really do what i want.
Any suggestions? Thanks!
-RP
Are you after this type of look?
http://desandro.com/resources/jquery-masonry/
If so, no, there is no easy way to handle that with pure CSS. You need a bit of JS as well.
There is no particularly good way to generically handle this with CSS.
Read this previous answer I wrote that goes over the various options, and shows that they don't work:
CSS Floating Divs At Variable Heights
You're stuck with JavaScript. Fortunately, the JavaScript you need has already been written in the form of a jQuery plugin:
jQuery Masonry
I've suggested the same thing before:
Position floated elements directly under each other
css alignment question

How to create two columns on a web page?

I want to have two columns on my web page. For me the simples way to do that is to use a table:
<table>
<tr>
<td>
Content of the first column.
</td>
<td>
Content of the second column.
</td>
</tr>
</table>
I like this solution because, first of all, it works (it gives exactly what I want), it is also really simple and stable (I will always have two columns, no matter how big is my window). It is easy to control the size and position of the table.
However, I know that people do not like the table-layout and, as far as I know, they use div and css instead. So, I would like also to try this approach. Can anybody help me with that?
I would like to have a simple solution (without tricks) that is easy to remember. It also needs to be stable (so that it will not accidentally happen that one column is under another one or they overlap or something like that).
i recommend to look this article
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
see 4. Place the columns side by side special
To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.
#main {
float:left;
width:500px;
background:#9c9;
}
#sidebar {
float:right;
width:250px;
background:#c9c;
}
Note that the sum of the widths should be equal to the width given to #wrap in Step 3.
I agree with #haha on this one, for the most part. But there are several cross-browser related issues with using the "float:right" and could ultimately give you more of a headache than you want. If you know what the widths are going to be for each column use a float:left on both and save yourself the trouble. Another thing you can incorporate into your methodology is build column classes into your CSS.
So try something like this:
CSS
.col-wrapper{width:960px; margin:0 auto;}
.col{margin:0 10px; float:left; display:inline;}
.col-670{width:670px;}
.col-250{width:250px;}
HTML
<div class="col-wrapper">
<div class="col col-670">[Page Content]</div>
<div class="col col-250">[Page Sidebar]</div>
</div>
Basically you need 3 divs. First as wrapper, second as left and third as right.
.wrapper {
width:500px;
overflow:hidden;
}
.left {
width:250px;
float:left;
}
.right {
width:250px;
float:right;
}
Example how to make 2 columns http://jsfiddle.net/huhu/HDGvN/
CSS Cheat Sheet for reference
I found a real cool Grid which I also use for columns. Check it out Simple Grid. Wich this CSS you can simply use:
<div class="grid">
<div class="col-1-2">
<div class="content">
<p>...insert content left side...</p>
</div>
</div>
<div class="col-1-2">
<div class="content">
<p>...insert content right side...</p>
</div>
</div>
</div>
I use it for all my projects.
The simple and best solution is to use tables for layouts. You're doing it right. There are a number of reasons tables are better.
They perform better than CSS
They work on all browsers without any fuss
You can debug them easily with the border=1 attribute

HTML Table with cell background text

What is the best way to go about displaying an html table with text in the background of each cell? I am making a calendar and I would like to have grey dates in the background of actual text.
The only thing I can think of at this point is to have the date and the cell content in separate divs that float over one another but even that isn't implementing well within a table.
By the way using an image to display the date is not really an option IMHO.
Use relative positioning in the content span:
<tr>
<td>
<span class="day">6</span>
<span class="contents">Contents go here</span>
</td>
</tr>
And in CSS:
span.day {
line-height: 20px; /* just to give it a height */
display: block;
color: #aaa;
}
span.contents {
position: relative;
top: -20px;
}
Now the spans are overlapping, with contents over day number. You might want to adjust the position but this should work.
Even though this would work, I would advise you to use images. You can embed all the required dates in one image file (the CSS sprite technique), it gives you greater control with less browser specific issues.
Hmm... if I understood correctly, the way I would do it is probably something like the following in each cell:
<div class="cell_container" style="position:relative;">
<div class="cell_bg" style="position:absolute; width:100%;
height:100%; z-index:0; color: gray;">29/12/2009</div>
<div class="cell_fg" style="position:absolute; width:100%;
height:100%; z-index:1;">Jim's birthday</div>
</div>
Naturally, you can move the styles into a seperate css file. You might also be able to do away with the container div and just apply the "position:relative;" style to the containing cell. The major downside to this method is that you will lose the ability to vertically align in IE, without some trickily implemented workaround.
I realize you said that using an image is "not an option IMHO", but may I suggest that using images would give you a lot more flexibility in the appearance of the date. You could use any font available to your image editor, rather than the limited set of fonts you can count on in a browser. And all sorts of image tweaking tricks could be aplied that would be immpossible in the browser.