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)
Related
I'm trying to format a slide in a bootstrap that has the format of the following fiddle: fiddle
The two divs with "hidden" in them are meant to disappear when on desktop so that when someone is using a tablet or phone they stack on top of each other. This works fine in the fiddle where the height is set to a fixed number
height: 100px;
But I don't want to set the height this way. If I remove this line you can see in the fiddle that "hidden2" drops down in a weird way instead of acting as a spacer for the text content on the bottom. I've also noticed if I remove the img tag the grid works fine.
I'm not sure why it does this and with real content it just looks like there's no spacer and all the text hugs the left side. Any ideas?
Edited: You can have a width of the content so there is space on both sides, and using the bootstrap grid system drop the text content down.
HTML
<div class="whole">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<img src="http://placehold.it/100x100"/>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">text content</div>
</div>>
CSS
div {
height: 100px;
background: red;
border: 1px solid black;
text-align: center;
}
img {
border-radius: 50%;
}
.whole {
margin: 0 10%;
width: 80%;
}
As much as i understood from your question, you're trying to preserve the functionality found on the fiddle link you provided, but also preserving equal heights. I also understand that you do not want to assign the height manually (i.e in your case, hard-coded).
There are two ways of approaching the solution: Javascript or CSS3.
Javascript:
I usually wouldn't solve layout issues with Javascript, but since your scenario has more than one row invloved, the easy way is JavaScript. With the help of jQuery, you can iterate through the div elements, having an initialized variable (example: var bHeight = 0). Check for each element's height; if it's greater, assign it to bHeight.
Your code should something like this:
$(document).ready(function(){
var bHeight = 0;
$("div").each(function(){
if($(this).height() > bHeight)
bHeight = $(this).height();
}); //end of loop
//now, assign height to all
$("div").height(bHeight);
});
This method will allow you to assign the height of your columns dynamically.
CSS3:
A little research online cold introduce you to the CSS3 display: flex, yet it's totally up to you to decide regarding browser support (CSS flex Property), and more details on solving your issue here: (A Complete Guide to Flexbox)
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?
I'm having some trouble with a header in a webpage. It has several pages, and in one of them there are several big pictures. In that particular page I have observed that the header div moves a few pixels to the left, which is very obnoxious when changing between pages.
I know that the problem disappears when I remove the first picture (id="problem1"), or one of the divs with two pictures ((id="problem2" and "problem3")), but I can't figure out what's happening.
I'm using this css code to produce two colums:
.contenedor { overflow: auto; }
.div1 { float:left; width:440px;}
.div2 { float:right; width:440px;}
And this one for the header:
#header {
height: 100px;
background: #0072b8;
font-family: Arial;
font-size: 16px;
color: white;
}
This is the header that magically changes its possition:
<div id="header">
<img src="http://placekitten.com/237/100" width="237px" height="100px" border="0" style="padding: 0 3.5em; float: left;">
</div>
And this is the code that defines one of the divs that have two colums:
<div class="contenedor">
<div class="div1">
<img src="http://placekitten.com/300/305" width="300px" height="305px"/>
</div>
<div class="div2">
<img src="http://placekitten.com/300/305" width="300px" height="305px"/>
</div>
</div>
You can see the rest of the code and its result here:
JSFiddle
What puzzles me the most is that if I leave just 2 of the problematic elements, the div position is the right one, the same one that in all the other pages that doesn't have these pictures, but when I add the third one it moves.
This is happening because you have a scroll bar on some pages but not on others and your DIV elements are set to 'auto' so they expand the available browser space (which as im sure you know changes when the browser is resized, or in this case when the presence of a scroll bar changes the available space).
To fix this, it would be easiest to just design the page with
html {
overflow-y:scroll;
}
This will make sure that a scroll bar is on the page at all times and the page size won't change over it.
I believe the problem is that you have a scroll bar on the problem pages. Your content is longer then the height of the browser window. When your content is higher than the window a scroll bar is added to the page. This is unavoidable.
I would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.
website: http://ctuchicago.squarespace.com/
I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.
http://jsfiddle.net/mrtsherman/D5ZRs/
div:hover img { background: url('blah'); }
<div>
<img src="" />
Repair
Sales
</div>
Put the image inside the a tag. Then use position: relative to position the image...
for example
a img{
position: relative;
left: -50px;
}
This seems to work... partially XD
<div class="frontdiv fblankd">
<a href="/audio-video" id="hav" style="width: auto;">
<div style="
height: 80px;
margin-left: 81px;
background: white;
color: black;
">
<h3>AUDIO / VIDEO</h3>
<p>Music Server, Home Theatre, Zone Systems, Universal Remote Control</p>
</div>
</a>
</div>
The basic idea is to have your content in the a tag (like ever body has been saying).
What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.
Wrap the <p>, and <h3> tags inside the <a> tags.
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;
}