Our organization works in a content management system and for expedited reasons we've arranged pictures using tables. I'd like to get away from that practice and provide a road map (CSS) to doing it properly.
We arrange pictures in a row side-by-side with a title under the picture, normally two lines of text.
Here is an example of what I start constructing.
<style>
#piccaption
{
font-size: x-small;
}
#picimages
{
text-align:center;
margin:0px auto;
}
#picimages a
{
margin:0px 0px;
display:inline-block;
text-decoration:none;
color:black;
}
</style>
Using this with my HTML...
<div id="picimages">
<img alt="Picture ALT" src="http://webaddress.com/picture.jpg" width="140px" height="203px" />
<div id="piccaption"><span>Picture Caption</span><br />
<span>Second Line</span></div>
</div>
</div>
Can someone help me with the proper way to do this as well as place a 2nd, 3rd picture next to this first one with a nice padding between the pictures?
Thanks,
Dave
An easy way to lay multiple blocks out horizontally would be to set the display to inline-block, with margins on either side to space them the way you like. Inline-block works in all browsers from Internet Explorer 8 and up (if you really need to make it compatible with Internet Explorer 7, you can add *display: inline after the inline-block).
The advantage of using inline-block instead of floats is that even if an image has an exceptionally long caption, the layout doesn't break as it would with floats.
Also, be sure to use classes instead of IDs for elements that occur more than once on a page.
Here is a jsFiddle example based on the code you pasted: http://jsfiddle.net/skymaiden/zvpHW/
Related
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
I have two divs floating left. I dont really want to use position absolute though, is there another way to keep the side by side without using position absolute? or is this the only way?
<div class="moreinfo" id="darkgray">
<p>
Today, hate speech continues to profilerate throughout the Internet, normalized in the form of YouTube comments, animated GIFs, and tweets. Online anonymity affords users a sense of security that fosters a culture of cruelty and bigotry. Our goal is to create a conversation about the consequences of hateful speech that rethinks how we communicate online. Social media is full of positive potential; we can tap into it by holding each other accountable.
</p>
</div>
<div class="moreinfo" id="lightgray">
<h2>
"WE NEED TO TEACH OUR CHILDREN NOT TO STAND SILENTLY BY WHILE OTHERS ARE BEING TORMENTED. IN THE END, THEY WILL BE SAFER ONLINE & OFFLINE."
READ ARTICLE BY WIRED SAFETY
</h2>
</div>
<div class="clear"></div>
css
.moreinfo{
width:715px;
height:250px;
float:left;
color:white;
}
You can use display: inline-block to have them side by side.
Here is an example: http://jsfiddle.net/2sZCb/
.moreinfo {
display: inline-block;
}
Here is a good article on the same issue you're having:
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
the best way i noticed was to use percent 50% for the width of both
the css you have written is work correctly for keeping div side by side, but you have to take precaution about the width of the inner floating divs, it should not be greater than the parent's width.
try this (reduce the width of the moreinfo just for demo.):
.moreinfo{
width:150px;
height:300px;
float:left;
color:black;}
the best solution is using display:table and display:table-cell for being sure that they are side by side
Set the containing element to a width large enough to contain both the way you want.
body {
min-width: 1450px;
}
Here's a fiddle
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.
I actually wanted the two grids in one div , I mean one grid in right, other in the left .....but for now the grid is appearing down. Its same as you split in a table with two rows !! same as that I need to split a div and add two grids side by side . Hope you get my point . Thanking you all in advance for your awesome support and replies
Create two divs inside your main div
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
With CSS, fix each one to the correct side
#left { float:left }
#right { float:right }
It all depends on the design you want to achieve for that table. There are multiple approaches, each of them yielding slightly different results.
You can change the display CSS property on the divs. The best value to use would be table-cell; however, this value is not supported by any version of IE. You can also try inline or inline-block values.
You can make the divs float to the left in their container.
You can use absolute or relative positioning of the divs in their container; however, that approach doesn't work well with fluid designs.
You can switch to span.
This is an expansion of Omar Abid's accepted answer. I started with that and had to make further modifications so it would work in my example of the stated question.
I made this work with class names instead of IDs so I could call the same CSS in multiple instances. This gave me the the ability to simulate two equal size cells. In my example, I set fixed size with ems so that it could preserve its appearance cross a range of table and desktop browser sizes (in my mobile CSS, I have a different strategy).
To align an image in the left div, I had to make a separate block (the last one in the CSS code).
This should address the question in most instances
<div class="BrandContainer">
<div class="BrandContainerTitle">
<h1>...</h1>
</div>
<div class="BrandContainerImage">
<img alt="Demo image" src="..." />
</div>
</div>
CSS:
.BrandContainer
{
width: 22em;
}
.BrandContainerTitle
{
vertical-align: top;
float: right;
width: 10em;
}
.BrandContainerImage
{
vertical-align: top;
float: left;
}
.BrandContainerImage img
{
width: 10em;
}
Use a table. It makes more sense to use tables where they are more efficient. Things like that is what tables are made for, and div is not made for.
If I have two layers on a page, split horrizontally, with the second layer overlapping part of the first layer, is it possible to make it "click through"?
I have links in the first layer, which the second layer overlaps, which stops the links from being clickable. Is there a way to make the layer display, but be click through, while still having it's own links clickable?
edit:
Here is an example, with html and a stylesheet.
The test links become unclickable when inline with the header in Layer3, but below that they are fine. Is there a way to rectify this?
<title>Test</title>
<link rel="stylesheet" href="test.css" type="text/css">
<body>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div id="Layer2" class="Layer2"><h1>TEST</h1>
<div id="rightlayer">
TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>
</div>
</div>
<div id="Layer3" class="Layer3"><h1>Ed Hardy Auctions</h1>
</div>
</div>
</body>
</html>
And the css
#Layer0 {
width:100%;
height:100%;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#Layer1 {
position:absolute;
left:10px;
width:200px;
margin-top:17px;
font-size:1.0em;
padding-left:12px;
padding-top:8px;
}
#Layer2 {
background:#fff;
margin-left:199px;
color:#000;
}
#rightlayer {
float:right;
}
.Layer3 {
position:absolute;
top:67%;
padding:20px;
width: 100%;
}
Thought I would update this as I'd been struggling with this for a few hours and think i've found a solution. Looked into using Jquery but the CSS property:
pointer-events:none;
...did exactly what I wanted.
It is not possible if you want the divs to stay in their current x,y, (and most importantly) z - only the "top" layer is clickable.
Addendum post OP edit:
Think of CSS layout as if you were physically working with bits of paper (this is much easier to visualise if you give all your "layer" divs a different background colour). The rendering engine cuts out a bit of paper in the dimensions you give it (or it works out) for each element it finds. It does this in the order it encounters them putting each bit of paper on the page as it goes - the last item is going to be on top.
Now you've told the rendering engine to put your 3rd div in a position where it overlaps the 2nd. And now you expect to be able to "see" the covered content. Wouldn't work with paper, won't work with HTML. Just because it's transparent doesn't mean it's not taking up space.
So you have to change something.
Looking at your CSS and markup (which honestly could be cleaned up, but I'll assume there's other mark-up you're not showing us which justifies it) there's a couple of easy win ways:
1). Set a z-index of -1 on Layer3 - z-index is how you can change the layering order from the default (as encountered). This just moves the entirety of Layer3 below the rest of the page so what was hidden becomes exposed, but also vice versa depending on content.
2). Change the width from 100% to e.g. 80%, or more likely given your use of pos:abs set left:0px and right:199px; (I'm guessing that padding-left on Layer2 is an intended column width?). The cost of this is that your Layer3 is no longer 100% width
3). Google "CSS column layout" and find a pattern that reflects what you need and adapt that. Every CSS layout which can be done has been done a million times already. Standard techniques exist which solve your problems. CSS is hard if you haven't built up the experience, so leverage the experience of others. Don't reinvent wheels.
It would be a mammoth job, but it is possible.
You would need to capture the click event on the top layer/div, and find the cursor x-y position.
Then find all links in the layer/div underneath the top layer, and see if it's position on the screen falls around the current mouse position.
You could then trigger the click of the matched link.
I would use jQuery (if you are not already) for this and then re-post with a jQuery tag if you run into troubles.
It is hard to tell without seeing some code.
You could try setting z-index on the bottom layer but that works on elements that have been positioned with absolute, relative or fixed (position:absolute).
edit after seeing code:
Add position:relative; z-index:100; to #rightLayer.
Or you could remove the width:100% from .Layer3.
You may want to refactor your code and go with a two column layout for #rightLayer and .Layer3.
css
#Layer0 {
width:100%;
height:100%;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#Layer1 {
width:200px;
margin-top:17px;
font-size:1.0em;
padding-left:12px;
padding-top:8px;
}
#Layer2 {
background:#fff;
margin-left:199px;
color:#000;
}
#rightlayer {
float:right;
}
.Layer3 {
}
html
<div id="Layer0">
<div id="Layer2" class="Layer2">
<h1>TEST</h1>
</div>
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div class="content">
<div id="rightlayer">
TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>
</div>
<div id="Layer3" class="Layer3">
<h1>Ed Hardy Auctions</h1>
</div>
</div>
</div>
I'm assuming from the example that the links in the rightlayer are the only links that need to be clicked, and that you don't have links in the other layers. If so, you could solve the problem by changing the z-index order of the divs.
Layer1 and Layer3 have position absolute, so if you add a position style (absolute or relative) to Layer2, you will be able to pull that div to the front, also pulling the rightlayer div to be in a higher layer than Layer3.
I added the following to the CSS:
#Layer2 {
position: relative;
z-index: 1;
}
From what I can see that leaves the current page setup just the way it is, but pulls all the elements (including the rightlayer with the links) to the front, so you'd be able to click all the links in it.
For debugging purposes I suggest adding background colors to all the different layers to get an idea of the z-index order of the different layers. With the background color in place it was quite easy to spot the layer that was falling over the links, but also to verify that the new z-index order makes the links available.
Hope this helps!
I submitted a bug years ago to the Firefox Bugzilla saying that there was this very bug in Firefox.
I was told by a Mozilla engineer that this was not actually a bug and that it is the correct behaviour as per the HTML/CSS specifications.
Unfortunately I can't find the original bug to reference as it was about 6 years ago.
The reason I submitted the bug was because I could click through the top div onto the links below when using IE (6 I think) but Firefox would not let me.
As usual, it turned out hat IE had the incorrect implementation and Firefox was working as intended by the spec.
Just because a div is transparent does not mean you should be able to click through it.
I'm not sure how you could get around this with JavaScript or CSS. I would take a step back and have a re-think about what you're trying to achieve and how you're trying to achieve it.
Greg
Can you not simply set the width of the div to auto (the default for absolute positioning - i.e. just delete the width:100% from .Layer3).
That way the div will only be as wide as is necessary, rather than unnecessarily overlapping the links.