CSS doesn't seem to affect TD structure - html

I'm coding a quick site for a school project and I'm extremely rusty hangs head in shame. I can't seem to get the width to affect the tags or center the text in them.
I have no idea why but if you could explain to me what I have to do to get the links on the nav bar centered and for the image to sit atop the loading text and act as a title. The loading should be centered btw but calc() doesn't like me ;~;
http://jsfiddle.net/MasterWhipper/6Z6z6/
<div id="navBar">
<table id="navText">
<tr>
<td><div class="navTd">Home</div></td>
<td width="396px">Loading</td>
<td><div class="navTd">Donate</div></td>
<td><div class="navTd">About Us</div></td>
</tr>
</table>
<img src="http://i.imgur.com/Y7OE90F.png" class="titleIMG"/>
</div>
Note: would it be easier to use a list for what I'm trying to do?

the best idea it is to use the HTML5 nav tag, it has been thought for navigations menu as yours:
<nav>
Home |
Loading |
Donate |
About us
</nav>
It is a solution that fits with your problem and plus it is the current standard! You will not have problem with CSS.
Here you are more info about HTML5 nav tag:
http://html5doctor.com/nav-element/

first things first...you don't need <div class="navTd"> inside a <td>
Assign everything to <td> and that would do.
Then, instead of using calc (its still not cross-browser), use display:inline-block; to allocate width to the td
#navText > td {
display:inline-block;
z-index: 3;
text-align: center;
}
working demo

Instead of using table structure use ul, li tags for navigation... You can easily style them :)
<div id="navBar">
<ul>
<li>Home</li>
<li>Loading</li>
<li>Donate</li>
<li>About Us</li>
</ul>
<img src="http://i.imgur.com/Y7OE90F.png" class="titleIMG"/>
</div>

Once again, people are professing their hatred of table. Don't worry about it.
Here, I made it work with tables. Three things I changed:
Set the table to table-layout: fixed;
Put your navTd class on the td, not the div. Otherwise you're telling the div to take a certain size of the td, not the td to take a certain size of the table
Removed the px to 396px. The width attribute does not use CSS syntax. You may want to use CSS for the width though, just to be more HTML5-zealous-friendly.
http://jsfiddle.net/6Z6z6/3/

Related

HTML <a> tag wider than specified width

http://exfluor.com/productsMain.html
I can't seem to get the boundary of the clickable link area to stay within the bounds of the <div> it is making a link(11 buttons linking to product categories). Even with using a class to specify the width, it spans the entire width of the <td> it is in. I've run out of options.
<a href="bycategory.php?cat=anhydrides">
<div class="category" align="center">
Anhydrides<br><img src="images/cat/anhydrides.jpg" alt="">
</div>
</a>
Use block display:
.catTable a {
...
display: block;
}
To set element's witdth it must have block or inline-block display. Also consider setting overflow: hidden.
Add word-wrap: break-word property to your as. It will break your links appropriately. You should pay attention though: You will not get automatic hyphenation from this. For that you would have to look into some library like hypenator
See this fiddle as an example: http://jsfiddle.net/8Lrhr22u/
Your HTML is not valid. You can't put div into a (well you can but it's not reliable). Instead try to improve markup a little (span instead of div):
<a href="bycategory.php?cat=hydrofluorocarbons">
<span class="category" align="center">Hydrofluorocarbons<br>
<img src="images/cat/hydrofluorocarbons.jpg" alt="">
</span>
</a>
However it's not really necessary, since setting a to display: inline-block should fix the issue:
.catTable a {
display: inline-block;
}

Right Align Text at end of line without table

I spent a little while trying to figure out how to achieve the following effect without using a table but couldn't figure it out: http://jsfiddle.net/sKFzA/
CSS :
.header{width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{width:99%;}
.dateCol{vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
HTML :
<table class="header">
<tr>
<td class="titleCol">This is the blog title</td>
<td class="dateCol"> <span> </span><span class="dateText">1/23/2012</span>
</td>
</tr>
</table>
To explain it, I have a blog title and a blog date. The title could be long and wrap. At the end of the last line, wrapped or not, I want the blog date to be aligned to the right.
So I have two questions. Is there any reason not to use a table for this? If so, how would you achieve it without assuming static font sizes?
CSS has properties that allow any element to behave like specific components of a table.
http://cssdeck.com/labs/rjiesryc
<header>
<h1>This is the blog title</h1>
<time datetime="2012-01-23">1/23/2012</time>
</header>
CSS
header {
display: table;
width: 100%;
}
header h1, header time {
display: table-cell;
}
header time {
/*vertical-align: bottom;*/
}
With the help of cimmanon and the others, I've gathered that:
The only reason's not to use a table here is because layout is not technically a table's intended purpose and also by not using a table you can separate your layout (CSS) from your markup (HTML). However, if I were to use a table, I am not aware of of any negative effects.
There doesn't seem to be a good solution to this exact layout without the concept of table, but my table solution can be achieved without using an HTML table by applying styles to display other elements as the table. So I replaced my table elements with divs. The span with the space before the date allows the smaller sized date to stay aligned to the title's baseline without having to hard-code line height's or font sizes. So if the font sizes change, I don't have to worry about updating any other magic numbers hard-coded around them.
http://jsfiddle.net/K35gT/
HTML
<div class="header">
<div class="titleCol">This is the blog title</div>
<div class="dateCol">
<span> </span><span class="dateText">1/23/2012</span>
</div>
</div>
Styles:
.header{display:table;width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{display:table-cell;width:99%;}
.dateCol{display:table-cell;vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
You do not need tables at all, simply block elements with the right styles.
If it was my website, I would do this:
<header>
<h1>This is the blog title</h1>
<time datetime="2012-01-23">1/23/2012</time>
</header>
Combined with this CSS:
header {position:relative; width:100%; font:25px Arial,Helvetica,sans-serif;}
header > h1 {margin:0px;}
header > time {display:block; font-size:12px; text-align:right;}
You can decide if you want to use HTML5 elements, or general elements and if you want to hook in class names or not. Here's the jsFiddle for above: http://jsfiddle.net/sKFzA/13/
Something like this? I hope i got you right.
HTML:
<div id="titleRow">This is the blog title</div>
<div id="dateText"><span id="spandate">1/23/2012</span></div>
CSS:
#titleRow{width:80%; height: 25px; font:25px Arial,Helvetica,sans-serif;
float:left;text-align: left;}
#dateText{width:20%; height: 25px; font-size:12px;float:left; text-align: right; position: relative;}
#spandate { position: absolute; bottom: 0; right: 0;}
See here: http://jsfiddle.net/sKFzA/31/

how to set a element's width to be from somewhere specific to the end of the page(horizontally)

Here's the problem. I am trying to place some <div> elements beside each other. The width of the divs are not specified and are dependent on their content. I am using the CSS code below to position the <div>s beside each other:
#div{
height: 50px;
float:left;
margin-left:0;
}
I want the last <div>s width to cover the rest of the page (horizontally). With absolute positioning it is possible to set a left position for the last <div> and then use width:100% for the CSS style. But since I don't know the size of the other <div>s, I can not use this approach.
Can anyone help me with my case?
Depending on your browser support needs, you can either use a table-based layout (either with tables or via css) as #user2519211 has shown, or you can use flexbox, which will be much quicker and flexible (ha) in the long run.
You only need to set the container of the elements that you want to cover the page to have display: flex (with browser prefixes included)
Here's a JS Bin showing this: http://jsbin.com/uqepit/2/edit
From there you can do any number of things, including reordering, baseline shifting, etc. If flexbox is an option, Chris Coyer has done some great research on what's currently supported (and behind what syntax). You can see that here:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://css-tricks.com/using-flexbox/
You can either use a table to do this:
<table>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td style="width: 100%;">asdf</td>
</tr>
</table>
Or the display: table css declaration if you must use divs:
<div style="display: table; width: 100%;">
<div style="display: table-cell;">asdf</div>
<div style="display: table-cell;">asdf</div>
<div style="display: table-cell;">asdf</div>
<div style="display: table-cell; width: 100%;">asdf</div>
</div>

Mixing relative and absolute sizes in CSS

I have a question about a problem, of which I originally thought, that it would be fairly simple to solve. But apparently it is not - at least not with only CSS.
This is the basic situation:
<div id="wrapper" style="height:90%;width:410px;background:#aaaaaa;">
<div id="top" style="margin:5px;width:400px;background:#ffffff;">
</div>
<div id="content" style="margin:5px;width:400px;background:#ffffff;">
</div>
</div>
I have a wrapper div that fills up 90% of the screen height and two inner divs. The first div "top" contains some varying elements. The second div "content" should fill out the remaining space of the wrapper div.
So far, I haven't found a way to set the div "content" to fill up the remaining space - even if I would know the exact height of the div "top" as I only know the relative height of the wrapper div.
Thus, I would be happy to learn of a method to either the div "content" to fill up the remaining space or how to mix relative and absolute sizes (i.e. height:100%-100px).
There is currently no cross-browser solution to achieve what you're trying with div elements and CSS. You can however get the behavior you want with the tried and true method of using a table instead.
<html>
<head>
<style type="text/css">
#wrapper {
height:90%;width:410px;background:#aaaaaa;border-spacing:5px;
}
#wrapper td {
padding:0;vertical-align:top;
}
#top {
background:#ffffff;
}
#content {
height:100%;background:#ffffff;
}
</style>
</head>
<body>
<table id="wrapper" role="presentation">
<tr>
<td id="top">Top</td>
</tr>
<tr>
<td id="content">Content</td>
</tr>
</table>
</body>
</html>
EDIT:
It appears I stirred a nest of hornets with my answer. There seems to be a near-religious following of people who say using tables for layout is bad. In many cases that is absolutely true, however there are situations where a table will do what CSS cannot. This is one of those situations, where a CSS alternative is on the horizon, but most browsers do not support it yet. It is up to the site designer to decide whether he wants to have a layout with cross-browser functionality now, or use a pure CSS layout with its limitations that may become easier to maintain in the future.
Your HTML code is really wrong:
don't use comma's after attributes
don't use inline CSS, put all CSS in a stylesheet and load the stylesheet in your HTML page
CSS syntax is: propertie: value; example: width: 10px; not: width=10px
To use 100% - 100px you can use CSS3 calc, but this feature has less browser support. You can use JS to make a sort of calc function.
There is no cross-browser way to get the content div to fill all available space with CSS, but it is fairly easy to make things look as if it did:
<html>
<head>
<style type="text/css">
#wrapper {
width:400px;height:90%;border-style:none solid;border-color:#aaaaaa;border-width:5px;background:#ffffff;
}
#top {
border-bottom: 5px solid #aaaaaa;
}
#content {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
This should be sufficient for most situations, unless you want to use something like an onmouseover handler on the content.

H1 CSS reset failing?

Im going mad trying to figure out why the title link (in the left) and the other links in the nav bar (right) are not the same height.
The difference is subtle in Safari, but bigger in IE6.
Im missing something in the css reset of H1?
SAFARI
alt text http://img218.imageshack.us/img218/702/safari.png
IE6
alt text http://img64.imageshack.us/img64/870/ie6.png
The HTML
<div id="navbar">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<h1>title</h1>
</td>
<td align="right">
about
answers
contact
<input type="text" name="search" value="" id="searchbox"> <a class="color4" href="sss">search</a>
</td>
</tr>
</table>
</div>
and the css
#navbar a, h1 a { padding: 3px 5px; vertical-align: middle;}
h1 has been reset
h1 {margin:0;padding:0;}
h1 {font-size:100%;font-weight:normal;}
h1 a { padding: 3px 5px; vertical-align: middle;}
sets a style for a link within an h1, not the h1 itself.
h1 {margin:0;padding:0;}
h1 {font-size:100%;font-weight:normal;}
sets the style for an h1. So the styles for the link still stand, they have not been overwritten.
I think it's because the text input in the right table cell is causing that table cell to "stretch" a little taller than the left table cell (and it will be slightly different on different browsers depending how large they draw the text input box) and thus throwing off the alignment a bit. Try vertical-align:bottom; on the left table cell.
There are some very subtle differences in the way different browsers render styling. This is just another example of it.
To see a REALLY good example of this, try looking at the Acid 2 test in each browser to see some of the differences.
First, if this happens cross-browser, use Firebug in Firefox to tell you where an element's style rules are coming from.
Second, I'd check the line height on the <a> and <h1> as well as the margins on the <a>.