Super-impose an image over two columns
Hello,
I know how to create a two columns within a page using <div>. However, what is the best way to create a structure such that the image is super-imposed over the two columns and float the text around the image, which is on a different level (see attached). Please advise which rules should I use in CSS3 to make that happen.
Thanks
This is how I've done it in the past, it's a pretty decent fake float:center...
http://css-tricks.com/float-center/
Similar Messages
-
Best way to have an image span two columns in a CSS layout?
My homepage is a typical fixed width three column layout. For the inside, content pages, I basically need the same layout except I need to have an image that spans the left and center columns at the top. Below the image, the left and center columns should continue on. The right column should not change at all m
My first thought is to start with a two column layout where the left column would contain the image. Then, I would divide the left column into two columns that would start below the image, using a top margin or perhaps another appropriate positioning attribute.
But before I create a completely new layout for these pages, I thought I'd check and see if there may be an easier or better way to do this. any ideas?Thank you, Thank you, Thank you for both responses. But I have to say I went with the AP div solution. In either case, I would have needed a second layout but this way was a much simpler modification to the three column index page. I did try it both ways as I'm still a-learning. I'm finally getting to the point where when I set or change a setting - especially positioning attributes like margins, the outcome is what I expect. I have also experimented enough where I see there is often more than one way to produce the desired result. However, I'm afraid that in many of these cases I can't explain why one method might be better, or preferred over another. Or if in some instances it simply doesn't matter, unless the final issue is arriving at the most efficient and lightest amount of code required to do the job (that's what I call the Holy Grail in programming and scripting).
As an audio engineer as well, I'm reminded of certain discussions on how to achieve the best sound for this or that, and after going round and round about effects, the science of acoustics, which plug in works best and for what, often the only thing ever really settled upon is "just go by what sounds the best to you". I digress.
So using the AP div in this case, what, if anything is the downside? Does it matter that its content as well as the rest of the page will be dynamic? I wouldn't think so. Might there be issues with older browsers or mobile browsers? The former is not a concern, but the latter is. Might I be tempted to use an AP div at another time because it's so easy to implement, but then may not be an appropriate use? I think I can properly evaluate that if and when the time comes.
Am I just over-thinking all this? : )
Thank you again!
Edited to add: I wanted to mark both responses as correct, but it wouldn't let me do it. No offense I hope! -
Is it possible for text to span over two column?
Gurus,
I have a two column document and my Chapter/Book title has to be place center on page over the two column and the paragraph underneath is to be place in each column, i want to used only one text frame for all the text, can i span the Chapter title over the column or just make another frame?You can create frames anywhere you want. I usually do that -- move the 2 column frame down and insert a new frame at the top. You can connect the top frame with the rest, so the text runs through it (and you can see when and where text reflows), or you can simply let it exist as a stand-alone frame. In both cases you have to move the frame if you have a major text reflow.
A cunning trick that might work for you is to insert a table instead. The table (one row, one column) can be dragged wider than its containing text frame. You will have to move down the text in the right hand side column manually, though.
More control over columns is definitively on my wish list! In ye olde WordPerfect 4.0 (about 1984) one could switch columns on and off at will, anywhere on a page ... -
How do I superimpose one image over another
How do I super impose one image over another?
Open image A
Open image B
On image B, use one of the selection tools, e.g. selection brush, lasso tool, to select the object which you wish to "superimpose"
Go to Edit menu>copy to put the object on the clipboard
Go back to image A
Go to Edit>paste. The object will be on its own layer
Get the move tool out of the toolbox, and position the object and resize, if indicated -
Images in text column to move?
Hi,
I placed an image over a column of text and used the text wrap tool. Now, is there a way for the image to move and shift down and keep in place with the copy as I add more text either before or after this article? I'm imagining, some sort of linking tool?
This would avoid having to continuously move images so that they keep in place (in relation to the copy) as more articles are added.
Thanks!Yes, Quark was able to anchor frames going back to at least version 3,
probably further. And it worked the same way: cut the frame, paste into
text. Quark had fewer anchored frame options, in fact, none that I
remember. Objects pasted inline, so you could baseline shift them, but
that was about it. I pretty much stopped using Quark after version 4, so
maybe its anchored frame options have improved in recent versions.
Kenneth Benson
Pegasus Type, Inc.
www.pegtype.com -
I´ve made four Columns with text and an Image over the middle of two columns. How do I put a text u
I´ve made four Columns with text and an Image over the middle of two columns. How do I put a text under the Image that spans over the Columns?
Did you mean that?
or
Did you mean that?
Let me know. -
Podcast Image is Not Updating for over Two Weeks
Hi. I use Wordpress - > Feedburner - > iTunes Store and my designated podcast image has not been updated in the Store for over two weeks. However I will note that on the Apple Podcast App, and in the iTunes Podcasting Section in my iTunes Library, the image updated almost immediately. It's only in the store that it's a problem, plus, that is the URL we use to share on Social Media. So it's code red!
I have been following all the threads, and understand that sometimes the store gets "stuck," but we are reaching hair-pulling-out-of-our-skulls mode, considering our large audience-base and the regularity with which we share the podcast on Social Media.
The outdated image, which iTunes Store is still displaying, does not exist anywhere on or offline at all. It is behaving as a ghost, not the scary kind the really f*cking annoying kind. I have no idea how in the world the store is still accessing it. It is 2014, and I simply cannot believe that Apple Technology would be this sluggish, and so I'm beginning to suspect I've messed something up somewhere, and really I'm at a loss and I can't keep telling my superiors that it's someone else's fault and HELP HELP HELP
anyway (clears throat)
Here is the wordpress RSS: http://stephenmansfield.tv/category/podcast/feed/
Here is the Feedburner RSS: http://feeds.feedburner.com/MansfieldPodcast
Here is the correct media URL I entered in "SmartCast -> Podcast Image Location" on Feedburner over two weeks ago:
http://stephenmansfield.tv/wp-content/uploads/smp-icon-2013-1400x1400.jpg
Here is our iTunes Podcast URL which is magically (read stupidly) displaying a non-existent jpg file as our image:
https://itunes.apple.com/us/podcast/stephen-mansfield-podcast/id433416409?mt=2
BLARGH!! Thanks!!
isaacdarnall.com
idintify media
ebooks | podcasting | music | photosAfter over 8 weeks, I got my image updated. I don't know exactly what did it. First I followed Roger's advice and changing the file name to a name that had never been used before. The fact that I reset back to an earlier image, thus a file name that had already been used, maybe confused it a little bit. So I changed the file name and re-uploaded. I also compressed the file size down a notch to make it smaller.
Finally, I bugged Apple tech support on the phone to no end (sorry sir, we don't know how to fix this, sorry sir, we don't really understand podcasting) until they gave me this email adress, and there, they told me they reset the feed:
Podcasts at apple .com
It is 2014, and updating a dedicated Podcast image should not be this hard. They need to totally revamp their system. I think the more we complain about this on the forums, the quicker this will happen.
This is the only podcast directory that has this outdated problem. Unfortunately, it's also the most important podcast directory.
Apple Fail. -
Display image in datagrid column
I have a datagrid with a column that displays true or false
if an item "has children" or not. How would I go about placing an
image in the column depending on the value of the column. I want to
have two different images one for false and one for true.make your item renderer a canvas, with 2 images.
when your canvas loads, you have the 'data' of that cell. So
lets say your column's datafield is "hasimage", you can do
something like this:
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="created();">
override public function set data(value:Object):void
if(value != null)
super.data = value;
public function created():void
if(data["hasimage"] == "true")
trueImg.visible = true;
else
falseImg.visible = true;
<mx:Image id="trueImg" src="image" visible="false" />
<mx:Image id="falseImg" src="image" visible="false" />
</mx:Canvas> -
How best to display a two column menu in Flash 8?
I have a flash 8 template and i am using Macromedia Flash Professional 8. I want to create a menu in a scrollable text box, which has two columns exactly aligned like so:
Lamb £2.30 Chicken £2.30
Minced lamb with onions, herbs, Minced chicken with an mixture of
in egg yolk and shallow fried. green chillies cooked over a charcoal grill on
Kebab £2.80 Lamb £2.40
A mix of chicken kebab, seekh kebab and Minced lamb mixed with gram flour, spices, green
shami kebab. Served on a sizzler. chillies and herbs then deep fried.
However, when i test the movie there is no formatting and the text is misaligned. I already have the above text (and there is alot of it) in the exact format, in a word file, so i could copy and paste the text instead of writing it out all over again.
I have been advised that it is better to use the Datagrid component to display the above text in a table?
My question is, how can i use the Datagrid component to display the text aligned exactly as above? Do i need to create html tables and then get the datagrid component to call this html file, xml file or actionscript? I am not familiar with xml or actionscript.
Please can someone help?
Thank you.Hi Ned. Apologies for late reply. Been away.
Anyway, i have created an image of what it is i need. Please see the image below - menu.gif
Not sure what the easiest way is to create such a two column menu in Flash because the tab key on the keyboard does not work in a scrollable textbox only the space bar. And using the space bar does not align the text correctly.
However, i do have a html file which i created using html tables. Is there a way to import the html file into a scrollable textbox in flash? The raw html code example is a little different as i have included the borders, but the idea is the same - a two-column scrollable menu.
Any help would be greatly appreciated.
<html>
<head>
<title></title>
</head>
<body>
<table width="50%" border="1">
<tr>
<td>
<table width="100%" border="1" cellpadding="2"
cellspacing="0">
<tr>
<td>Apples</td>
<td>44%</td>
</tr>
<tr>
<td>Bananas</td>
<td>23%</td>
</tr>
<tr>
<td>Oranges</td>
<td>13%</td>
</tr>
<tr>
<td>Other</td>
<td>10%</td>
</tr>
<tr>
<td>Apples</td>
<td>44%</td>
</tr>
<tr>
<td>Bananas</td>
<td>23%</td>
</tr>
<tr>
<td>Oranges</td>
<td>13%</td>
</tr>
<tr>
<td>Other</td>
<td>10%</td>
</tr>
<tr>
<td>Apples</td>
<td>44%</td>
</tr>
<tr>
<td>Bananas</td>
<td>23%</td>
</tr>
<tr>
<td>Oranges</td>
<td>13%</td>
</tr>
<tr>
<td>Other</td>
<td>10%</td>
</tr>
<tr>
<td>Apples</td>
<td>44%</td>
</tr>
<tr>
<td>Bananas</td>
<td>23%</td>
</tr>
<tr>
<td>Oranges</td>
<td>13%</td>
</tr>
</table>
</td>
<td>
<table width="100%" border="1" cellpadding="2"
cellspacing="0">
<tr>
<td>Apples</td>
<td>44%</td>
</tr>
<tr>
<td>Bananas</td>
<td>23%</td>
</tr>
<tr>
<td>Oranges</td>
<td>13%</td>
</tr>
<tr>
<td>Other</td>
<td>10%</td>
</tr>
<tr>
<td>Apples</td>
<td>44%</td>
</tr>
<tr>
<td>Bananas</td>
<td>23%</td>
</tr>
<tr>
<td>Oranges</td>
<td>13%</td>
</tr>
<tr>
<td>Other</td>
<td>10%</td>
</tr>
<tr>
<td>Apples</td>
<td>44%</td>
</tr>
<tr>
<td>Bananas</td>
<td>23%</td>
</tr>
<tr>
<td>Oranges</td>
<td>13%</td>
</tr>
<tr>
<td>Other</td>
<td>10%</td>
</tr>
<tr>
<td>Apples</td>
<td>44%</td>
</tr>
<tr>
<td>Bananas</td>
<td>23%</td>
</tr>
<tr>
<td>Oranges</td>
<td>13%</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> -
hello, I am trying to draw an image (its a little image of a custom sort indicator) over the header of a jTable, but after extensive reading of the api docs about TableCellRenderer and DefaultTableCellRenderer I cannot come to a solution.
What I want is something like this: let the renderer do the paint and after that I grab the graphics and draw the image over it...
please let me know if I need to restate my problemI extended DefaultTableCellRenderer like you say in your article, but while doing so it lost the default Metal L&F. It become like an ordinary cell of the table. Below is the code:
class DefaultTableHeaderCellRenderer extends javax.swing.table.DefaultTableCellRenderer {
@Override
public Component getTableCellRendererComponent(JTable table, Object value,
boolean isSelected, boolean hasFocus, int row, int column)
super.getTableCellRendererComponent(table, value,
isSelected, hasFocus, row, column);
//setIcon(getIcon(table, column));
setBorder(UIManager.getBorder("TableHeader.cellBorder"));
return this;
protected Icon getIcon(JTable table, int column) {
ImageIcon icon = new ImageIcon("imagens/sortdown.png");
return icon;
}then in my class I call:
this.getTableHeader().setDefaultRenderer(new DefaultTableHeaderCellRenderer());You can see I commented setIcon. It works, the icon is drawn, but this is not what I am after, I wanted to draw the icon over the Metal L&F. Also, is there a way to draw the icon at a specified position?
thanks for the help -
ICal month view - appointments over two days
Very annoying but when entering a new event in the month view it defaults to an all day event - ok I can cope with that.
But when double clicking the new event to change it to a timed event (still in month view) and tabbing through the dates and time, the duration seems to default to 6+ hours, so after 17:00 defaults to being over two days and it is too easy to miss changing the end date.
Is there a way out of this?In the month view, it's all down to the number of events you have on that day plus the size of the window/resolution of the screen.
If there's room, iCal will display all of an event's description, but if you shrink the window or add more events, the description will reduce in size- eventually into two columns - to give a chance of seeing all of them. Once there are more events than fit, you'll see an elipsis ( ... } at the top of the day. When this happens, you can only see ALL that day's events by going to week or day views.
You can potentially fit more in on the month view by turning-off the option to show the event time in month view in iCal Preferences. -
Calendar -- How to view "to do list" in two columns per day in Month view?
In OSX 10.6.8, my old Calendar would automatically go into two column view to show all my "to do" items, but 10.8.5 Calendar isn't doing this when I put over 12-14 items and just says "2 more..." instead of going to two columns and truncating them. -- Is there a way to turn this 2x column view on? or another way to show all of my to items?
Any ideas/help appreciated. TIAthe "Employee Directory" shows you the photos by default. Should not be that hard to add an url via personalizations that points to that directory.
good luck. -
How to display images from BLOB column via APEX 4.0
Hello,
I did the following in order to display images of two Oracle records on the APEX page. I am using APEX Version : 4.0.1.00.03 , Oracle DB Version : 10.2.0.4.0.
1. Created An oracle table TEST_FORM
with 3 columns
( ID number, MIME_TYPE varchar2(255) , Image BLOB )
2. Inserted two records
10001, image/gif, ( actual image1)
10002, image/gif, ( actual image2)
3. created an Oracle procedure
CREATE OR REPLACE PROCEDURE show_my_form ( p_image_id IN test_form.id%type) AS
l_mime test_form.mime_type%type;
l_length NUMBER;
l_file_name VARCHAR2 (2000);
lob_loc test_form.IMAGE%type;
BEGIN
SELECT mime_type, IMAGE
, DBMS_LOB.getlength (IMAGE)
INTO l_mime, lob_loc, l_length
FROM test_form
WHERE id = p_image_id;
owa_util.mime_header(l_mime, false);
htp.p ('Content-length: ' || l_length);
owa_util.http_header_close;
wpg_docload.download_file (lob_loc);
END show_my_form ;
4. In Apex 4.0
step1. Created an interactive report on a new APEX page
step2. Specified the following in the Region Source
select id, mime_type, '<img src="#OWNER#.show_my_form ?p_image_id=#ID#" />' photo
from TEST_FORM
The column result shows as <img src="CCS.show_my_form?p_image_id=#ID#" />
I am unable to display the column image as a link to a proper image photo.
Could you please advise me if I missed anything ?
Thanks a lot.
Regards
Susanna
Edited by: user10318332 on 13/12/2010 15:51
Edited by: user10318332 on 13/12/2010 20:10Maybe the space you have before the ? is causing issues. there shouldn't be any space.
Your procedure looks to be much the same of one that I have.
Have you granted execute on your procedure?
Also, what version DB are you running? This could be another issue: http://daust.blogspot.com/2006/04/xe-calling-stored-procedures.html
But anyway, you don't need to create your own procedure these days. You could do the following:
in your query, have a column: dbms_lob.getlength(blob) photo ; save, then in column attributes for that column, apply a format mask. There is usually a link below the text box for the format mask - BLOB Download Format Mask, which will help you build the format mask. But it is documented here: http://download.oracle.com/docs/cd/E17556_01/doc/user.40/e15517/advnc.htm#BCGGJHEF
Ta,
Trent -
After install of Mavericks, it looks like my system kernal panics and just sits there. I tried waiting over two nights. Tried reinstalling twice, booting ro the repair partition and repairs permissions/drive/verify , with no problems. Tried reseting PVRAM(or whateverit called). Recovery partition now has Mavericks as OS. Im running a iMac i3 27 inch circa 2011. Any ideas? Can still bootcamp into windows.
Thank youbhadotia wrote:Anyway's the file downloaded from dell to update the partition for Studio 1555 is corrupted (checksums don't match). My partition still doesn't boot. I'm working to fix this and will update my post when I'm done.
The file seems to create the CD/DVD/Image and USB just fine. So I used this only to create a CD image which I then wrote on a blank CD which seems to work fine. Also, I played around a bit and had some partial success in booting the partition. I've updated my original opening post with the new findings.
Whew!! what a waste of time! Never want to do all of this again .
Last edited by bhadotia (2012-03-03 00:05:22) -
Topics with Two Columns, and ?s about Margins
I've been searching all over and can't quite get the answers I need. I have a robohelp project which will solely be for written documentation. Some of the topics within this project I would like two have two columns, the left column will just have headings and the right side will have content. I did accomplish this by making a table, however I can't remove the borders. I also tried another way by using this, which works great but when I made printed documentation it didn't make it look like I have on my screen (printed the headings all together then the content on later pages).
#container2 { clear: left; float: left; width: 100%; overflow: hidden; } #container1 { float: left; width: 100%; position: relative; right: 50%; } #col1 { float: left; width: 50%; position: relative; overflow: hidden; } #col2 { float: left; width: 50%; position: relative; overflow: hidden; }
So I guess I have a few questions to try and make this project go smoothly. Since I will only be using this project for written documentation, what would be the best way to make sure that each topic I am working on will print the way I want it to (margins, etc.)? Is there a good way to deal with my two column issue? Would making a style that indents the text be a good solution?You may also want to check out CSS columns. That will allow you to work without using tables and let the browser to take care of the rest. See: http://www.w3schools.com/css/css3_multiple_columns.asp
Kind regards,
Willam
Maybe you are looking for
-
How to Update Product category in bidder data of business Partner
Hi Experts, I am new at SRM, While Doing Supplier Registration i am creating Bidder and Business Partner Using these two bapi 'BBP_CREATE_ORGANIZATION BBP_CREATE_CONTACT_PERSON Now i also want to update Product Category , that should be display on Pr
-
How do I play GIF format in PRE12?
I have brought into PRE12 some video clips in GIF format. They will not play. What can I do?
-
when I try to print I get a disconnected message then the lights on the printer blink all crazy like. I am then prompted on my computer screen to check or update the drivers ( something to do with a coredump??) by inserting the disk that came with i
-
Keynote problems OSStatus error -12945 when trying to play videos
I am trying to run a Keynote version 5.1.1 (1034) presentation on my new machine which has Keynote 6.1. Everything works except the embedded videos which give me this error notice OSStatus error -12945. Does anyone have any advice? I've got to give t
-
What happened to LiveCycle Form Manager?
Hello. Our company is trying to implement an e-Form solution that could help us managing our e-Form documents. We found Adobe LiveCycle and think it is the best option but we want to figure out something we don´t get yet. We see that in LiveCycle 7.2