How Do I Get A Border From YUI GRID Tool? - html

I'm very new to YUI. And I used this tool to generate some css grid layouts. But even though I get the code, when rendered in browser I can't able to see the borders at all. But others(like alignment, the number of columns..) are correct.
How do I add border to the YUI generated code?
Thanks in advance

You can add a border to YUI2 grids by adding styles to the yui-u class
.yui-u {
border: 1px solid black;
}
However, borders don't play very nice with YUI2 grids because it relies on percentage based widths for columns, so you'll have to insert another div inside each unit and add a border to that div:
<style>.yui-u-inner { border: 1px solid black; }</style>
<div class="yui-g">
<div class="yui-u first">
<div class="yui-u-inner"></div>
</div>
<div class="yui-u">
<div class="yui-u-inner"></div>
</div>
</div>
There may be more elegant solutions.
You should consider moving to YUI3. YUI2 is only on maintenance mode and there is no new development besides basic bug fixing. YUI3 is quite active and in particular its CSS grids are a lot simpler to use.

Related

Div structure, same auto widths for every column

lets see this table:
<table border="1">
<tr><td>1111</td><td>42342324</td><td>ffffffff</td></tr>
<tr><td>11</td><td>442324</td><td>fdadasdfffffff</td></tr>
</table>
I need to do something like that but with DIV elements (sorry, boss wont allow tables). The real problem is, how to set same widths without direct setting it? I mean, if the first row is longer, then it will be actual width, otherwise the 2nd row's.
Preferably without javascript/jQuery hacking.
I'm assuming you want the "columns" to grow in width together with the content? dynamically setting the width of each div in the column?
I can't think of a way to do this with css, but some jiggery pokery with some divs might work.
<style>
.table{
border:1px solid black;
position:relative;
}
.column{
border:1px solid red;
display:inline-block;
}
.cell{
border:1px solid blue;
float:left;
clear:both;
}
</style>
<div class="table">
<div class="column">
<div class"cell">11</div>
<div class"cell">ffff</div>
</div>
<div class="column">
<div class"cell">1111</div>
<div class"cell">f</div>
</div>
<div class="column">
<div class"cell">1</div>
<div class"cell">fff</div>
</div>
</div>
I think you want to check out flexbox for modern browsers, with a JavaScript fallback for older browsers.
http://css-tricks.com/using-flexbox/
Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New" syntax. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids
http://caniuse.com/flexbox shows pretty decent support.. IE10, FF, Chrome, Safari, and even Opera! *
*using combined "old and new" syntax
<div id="main_div">
<div id="nr1"> </div>
<div id="nr2"> </div>
</div>
and you use css to style : width ,height ,margin ,position of each div

How to correctly use tableless layout with borders using CSS?

I'm working on a new HTML page and I want to use a table-less layout. Bear in mind that what follows here is only part of the page, but I think it paints a clear picture of what I'm trying to do.
The HTML below is meant to render six cells with text inside. I want the cells to be sized appropriately to contain the text inside.
The problem I'm having is that the borders are drawn incorrectly. In both IE and Firefox, I see two problems:
1) One of the borders is drawn outside the table.
2) The borders between the cells in the first row are drawn incompletely.
<!DOCTYPE html>
<html>
<head>
<style>
html
{
}
.reviewRow
{
clear:both;
}
.reviewBlock
{
float:left;
border-top: 1px solid #444;
border-left: 1px solid #444;
}
.rightBorder
{
border-right: 1px solid #444;
}
.bottomBorder
{
border-bottom: 1px solid #444;
}
</style>
</head>
<body>
<div class='reviewRow'>
<div style="width:200px;" class='reviewBlock'>
THIS TEXT IS MUCH LONGER THAN THE TEXT IN THE OTHER CELLS
</div>
<div style="width: 225px" class='reviewBlock'>
ABC
</div>
<div style="width: 100px" class="reviewBlock rightBorder">
December 25, 2012
</div>
</div>
<div class='reviewRow bottomBorder'>
<div style="width:300px;" class='reviewBlock'>
Hello, World!
</div>
<div style="width: 125px" class='reviewBlock'>
123
</div>
<div style="width: 100px" class="reviewBlock rightBorder">
May 1, 2013
</div>
</div>
<div style='clear:both;'></div>
</body>
</html>
Don't go what others say, that don't make layouts using tables, but when it comes to tabular data and if you use div's for making a table doesn't make any sense to me, just don't use tables for designing layouts, but YOU SHOULD USE IT FOR TABULAR DATA
Still if you want to use you can refer this
By the way, to answer the question... You can use display:table, table-cell and table-row (in CSS3)
But I agree with Mr. Alien : just use tables for tabular data.
See the height of html elements are computed based on the content inside them unless you explicitly specify it.
Your second div has taken only the height necessary to show ABC and hence the border showed up only that much. To fix this you must specify a certain height to each of the div so that they appear just as you want.
If you are trying to show data in a tabular manner just use tables. They are there for that purpose only. You can obviously style them in order to make them better looking.
If you're trying to do this for tabular data, then by all means use a table that's what it's there for. Not doing so it about like trying to use Photoshop to make a spreadsheet when Excel would be the better tool.
You can change the number of columns a cell takes up by using the colspan attribute. By default, of course, a cell takes up 1 column (colspan="1"), but if you need it to take up more, you simply change the number. You can do the same thing for rows with rowspan.

How to fill in a border in HTML?

I know how to create a border, How do I fill in the rest inside the border with a different color? Here's what I have so far:
<div style="width:200px;height:100px;border:6px outset orange;">text</div>
Use
background:#fff
or any color;
and one more advise never use inline css for optimal output use external CSS
<div id="something">text</div>
#something
{
width:200px;
height:100px;
//likewise
}
Here you go: http://jsfiddle.net/XVDkS/
Explanation: it adds box shadows (at least 2 of them) after the border (with 0 blur). Manipulate the number of shadows & the width of them according to your need. You can as well use blurring, if required. Read the MDN article for more details on box-shadows.
It's a CSS3 solution, so old IE versions won't play nice (unless you do dark magics on it).
use the background property, for example:
background:#ccc;
which would leave your code looking like this:
<div style="width:200px;height:100px;border:6px solid orange; background:#ccc;">text</div>
<div style="width:200px;height:100px;border:6px outset orange;background:#000000">text</div>
use css background property
If you mean a background this will help
CSS
backgound:black;
HTMl with CSS
<div style="width:200px;height:100px;border:6px outset orange;background:black;">text</div>
you can use groove or ridge in place of outset,
See here is some examples for this on W3schools
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none
or if you want 2 borders and a different border then you try this
<div style="width:200px;height:100px;border:1px solid #000">
<div style="width:190px;height:90px;border:5px solid orange">
<div style="width:188px;height:88px;border:1px solid #000">
test
</div>
</div>
</div>
Demo is here:
http://jsfiddle.net/SPhec/

image border not displaying html email

I am trying to send an html email with an image border as
<p align="center">
<img src="images/pic1.jpg" width="443" height="148" align="middle"
style="border: 1px solid grey; padding:10px;" border="1"/>
</p>
However, the border just does not display in any of the email clients. How can i fix this?
Main problem is Microsoft Outlook, enclosing the image in a table seems to do the job.
It's a hassle to enclose every image, but dats em breaks:
<p align="center">
<table><tr><td style="border: 1px solid grey;">
<img src="images/pic1.jpg" width="443" height="148" align="middle"
style="padding:10px;"/>
</td></tr></table>
</p>
To be honest your in for a hard time using "p" tags. Tables will 100% be the way to go in this situation. I know I know, tables blow, but for email clients that use word as their html render cough outlook cough and ones like hotmail and gmail running html 1 (this might be a little bit of a strech but its somewhere around there), you never really know how things are going to turn out.
As for an answer to your question, try display:block on your image. Generally you want to put display:block on all your images as well as heights and width to insure there are no weird gaps between image slices.
According to this: http://www.campaignmonitor.com/css/ border should be working properly.
I would try two things:
First add the following to the image, which will also help with Gmail rendering bugs
display:block;
And also, maybe try:
border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
a little bit off topic but mailchimp has a great tool for translating a normal HTML layout with seperate CSS classes into an inline CSS version
http://beaker.mailchimp.com/inline-css
and also a great tutorial how to code HTML emails the right way
http://kb.mailchimp.com/article/how-to-code-html-emails/
and regarding your CSS problem.
Try wrapping the image in a table cell and give the cell the border.
Unfortunately with HTML E-mails, tables are your friend, yet again.
Have fun
try changing the color either to it's value, #808080 or it's properly spelled version 'gray'

How does google add the light blue colored vertical and horizontal bars (html/Css)

As shown in this screenshot:
I tried looking in the source code , but couldn't find it myself.
For the header, they use empty divs with the class .gbh, which provides the style border-top: 1px solid #C9D7F1;
Firebug's Parsing
<span id="ghead" style="visiblity:visible;">
<div id="guser" width="100%">...</div>
<div class=gbh style=left:0></div>
<div class=gbh style=right:0></div>
</span>
Just use firebug or other similar tool and it'll take you 15 seconds.
border-left:1px solid #D3E1F9;