Super-impose an image on two columns

image1.png

Hello

I know how to create a two columns in a page by using the < div >. However, what is the best way to create a structure such as the image is super imposed on the two columns and float text around the image, which is on a different level (see attachment). Please tell us what rules should I use in CSS3 to make it happen.

Thank you

That's how I did in the past, it's a pretty decent fake float: Center...

http://CSS-tricks.com/float-Center/

Tags: Dreamweaver

Similar Questions

  • Best way to have an image on two columns in a CSS page layout?

    My home page is a presentation of three typical fixed-width columns. For the Interior, the content pages, I need basically the same layout, except that I need to have an image that spans the columns left and Center at the top. Below the image, columns on the left and in the Center should continue on. The right column does not change every m

    My first thought is to start with a two column layout where the left column contains the image. Then I would divide the left column into two columns that start below the image, using a top margin or maybe another attribute of proper positioning.

    But before that I have to create a whole new layout for these pages, I thought I'd check and see if there may be a way easier or better to do. any ideas?

    I dare say?  Yes!  What is the absolute positioning.

    Example:

    http://ALT-Web.com/notjustagrid/index.html

    Nancy O.

  • Should be changed to two full pages in a single page with two columns

    I have a schedule that is formatted to 8 1/2 x 11 size.  I want to change this option to display two pages on one page into two columns?  How can I do this?  Thanks in advance.

    It's extremely well beyond what is possible or even imaginable for PDF editing. Redo in Word; You can use export as Word, copy paste and export the images as tools to do this. Then again the PDF file.

  • JComboBox with two columns

    Hello

    I found a nice piece of code in the forum, which extends a JComboBox to display
    two columns.
    Now I am trying to add my own demands, namely the combo should be editable
    and only the first column should appear in the edit field and become the
    selected value.

    I thought to write an own editor that "catches" the posting process for
    manipulate the text that will be displayed. Because the rendering engine uses a
    JPanel to display columns, I expect this Panel must be passed in the
    setItem method (...) the editor. But it isn't, and I can't even detect
    what object is passed.

    I wonder if this approach is advisable at all. If comments or ideas
    are welcome.
    import java.awt.*;
    import java.awt.event.*;
    import javax.swing.*;
     
    public class Main extends JFrame {        
        public static final long serialVersionUID= 70L;
    
        public Main() {        
            setDefaultCloseOperation(EXIT_ON_CLOSE);
            final JComboBox<Object> priceList = new JComboBox<>(new Object[] {
                new Object[] { "Lemon", 0.5 },
                new Object[] { "Cherry", 3 },
                new Object[] { "Apple", 1 },
            });
            priceList.setEditable(true);
         priceList.setEditor(new MyEditor());
            priceList.setRenderer(new MyRenderer());
            add(priceList, BorderLayout.CENTER);
    
         JButton b= new JButton("OK");
         b.addActionListener(new ActionListener() {
           public void actionPerformed(ActionEvent e) {
             System.out.println(priceList.getSelectedItem());
           }
         });
            add(b, BorderLayout.SOUTH);
            pack();
        }
        
        public static void main(String... args) 
        throws Exception {                
            SwingUtilities.invokeLater(new Runnable() {
                public void run() {
                    new Main().setVisible(true);
                }
            });
        }
    
    
    
      class MyEditor extends JTextField implements ComboBoxEditor {
        public static final long serialVersionUID= 71L;
    
        public Component getEditorComponent() {
          return this;
        }
    
        public Object getItem() {
          return getText();
        }
    
        public void setItem(Object obj) {
          System.out.println("Setting item");
          System.out.println(obj);
          if (obj instanceof JPanel) System.out.println("Panel");
          if (obj instanceof JLabel) System.out.println("Label");
          if (obj instanceof String) System.out.println("String");
          setText("Hello");
        }
      }
    
     
    /** 
     * This class uses panel with two labels to render the list (combobox) cell.
     */
      class MyRenderer extends JPanel implements ListCellRenderer<Object> {
        public static final long serialVersionUID= 72L;
        JLabel labels[] = { new JLabel(), new JLabel() };
    
        public MyRenderer() {
            setLayout(new GridBagLayout());
            // Add labels
            GridBagConstraints c = new GridBagConstraints();
            c.fill = GridBagConstraints.HORIZONTAL;
            c.weightx = 0.1;
            add(labels[0],c);
            add(labels[1]);
        }
    
        public Component getListCellRendererComponent(JList<?> list, Object value,
                   int index, boolean isSelected, boolean cellHasFocus) {
            Object rowData[] = (Object[])value;
            // Prepare colors
            Color foreground = isSelected? 
                list.getSelectionForeground(): list.getForeground();
            Color background = isSelected?
                list.getSelectionBackground(): list.getBackground();
            // Set panel colors
            setForeground(foreground);
            setBackground(background);
            int col = 0;
            for(JLabel label : labels) {
                label.setBackground(background);
                label.setForeground(foreground);
                label.setText( String.valueOf(rowData[col++]) );
            }
            return this;
        }
      }
    
    }

    As an alternative, I thought that usiing a JComboBox 'ordinary' with the strings in column 1 as elements and you try to change the popup so that it displays and column 2.

    You can render the comboBox and the popup differently. Just check for an index of-1 for the drop-down list box.

    Different examples of how you can restore more than one column in a combo box. The example of "text pane" has been changed so that the drop-down list box shows only one column while the popup shows the two columns:

    import java.awt.*;
    import java.awt.event.*;
    import java.util.*;
    import javax.swing.*;
    import javax.swing.text.*;
    
    public class ComboBoxMultiColumn extends JFrame
    {
         public ComboBoxMultiColumn()
         {
              getContentPane().setLayout( new GridLayout(0, 2) );
    
              Vector items = new Vector();
              items.addElement( new Item("123456789", "Car" ) );
              items.addElement( new Item("23", "Plane" ) );
              items.addElement( new Item("345", "Train" ) );
              items.addElement( new Item("4567", "Nuclear Submarine" ) );
    
              //  Use a JTextArea as a renderer
    
              JComboBox comboBox1 = new JComboBox( items );
              comboBox1.setRenderer( new TextAreaRenderer(5) );
    
              getContentPane().add( new JLabel("TextArea Renderer") );
              getContentPane().add( comboBox1 );
    
              //  Use a JTextPane as a renderer
    
              JComboBox comboBox2 = new JComboBox( items );
              comboBox2.setRenderer( new TextPaneRenderer(10) );
    
              getContentPane().add( new JLabel("TextPane Renderer") );
              getContentPane().add( comboBox2 );
    
              //  Use a JPanel as a renderer
    
              JComboBox comboBox3 = new JComboBox( items );
              comboBox3.setRenderer( new PanelRenderer(50) );
    
              getContentPane().add( new JLabel("Panel Renderer") );
              getContentPane().add( comboBox3 );
    
              //  Using HTML
    
              JComboBox comboBox4 = new JComboBox( items );
              comboBox4.setRenderer( new HTMLRenderer() );
    
              getContentPane().add( new JLabel("HTML Renderer") );
              getContentPane().add( comboBox4 );
         }
    
         class Item
         {
              private String id;
              private String description;
    
              public Item(String id, String description)
              {
                   this.id = id;
                   this.description = description;
              }
    
              public String getId()
              {
                   return id;
              }
    
              public String getDescription()
              {
                   return description;
              }
    
              public String toString()
              {
                   return description;
              }
         }
    
         public static void main(String[] args)
         {
              JFrame frame = new ComboBoxMultiColumn();
              frame.setDefaultCloseOperation( EXIT_ON_CLOSE );
              frame.pack();
              frame.setVisible( true );
         }
    
         /*
         **  Tabs are easier to use in a JTextArea, but not very flexible
         */
         class TextAreaRenderer extends JTextArea implements ListCellRenderer
         {
              public TextAreaRenderer(int tabSize)
              {
                   setTabSize(tabSize);
              }
    
              public Component getListCellRendererComponent(JList list, Object value,
                   int index, boolean isSelected, boolean cellHasFocus)
              {
                   Item item = (Item)value;
                   setText(item.getId() + "\t" + item.getDescription());
                   setBackground(isSelected ? list.getSelectionBackground() : null);
                   setForeground(isSelected ? list.getSelectionForeground() : null);
                   return this;
              }
         }
    
         /*
         **  Tabs are harder to use in a JTextPane, but much more flexible
         */
         class TextPaneRenderer extends JTextPane implements ListCellRenderer
         {
              public TextPaneRenderer(int tabColumn)
              {
                   setMargin( new Insets(0, 0, 0, 0) );
    
                   FontMetrics fm = getFontMetrics( getFont() );
                   int width = fm.charWidth( 'w' ) * tabColumn;
    
                   TabStop[] tabs = new TabStop[1];
                   tabs[0] = new TabStop( width, TabStop.ALIGN_LEFT, TabStop.LEAD_NONE );
                   TabSet tabSet = new TabSet(tabs);
    
                   SimpleAttributeSet attributes = new SimpleAttributeSet();
                   StyleConstants.setTabSet(attributes, tabSet);
                   getStyledDocument().setParagraphAttributes(0, 0, attributes, false);
              }
    
              public Component getListCellRendererComponent(JList list, Object value,
                   int index, boolean isSelected, boolean cellHasFocus)
              {
                   Item item = (Item)value;
    
                   if (index == -1)
                        setText( item.getDescription() );
                   else
                        setText(item.getId() + "\t" + item.getDescription());
    
                   setBackground(isSelected ? list.getSelectionBackground() : null);
                   setForeground(isSelected ? list.getSelectionForeground() : null);
                   return this;
              }
         }
    
         /*
         **  Use a panel to hold multiple components
         */
         class PanelRenderer implements ListCellRenderer
         {
              private JPanel renderer;
              private JLabel first;
              private JLabel second;
    
              public PanelRenderer(int firstColumnWidth)
              {
                   renderer = new JPanel();
                   renderer.setLayout(new BoxLayout(renderer, BoxLayout.X_AXIS) );
    
                   first = new JLabel(" ");
                   Dimension d = first.getPreferredSize();
                   d.width = firstColumnWidth;
                   first.setMaximumSize(d);
                   second = new JLabel();
                   renderer.add(first );
                   renderer.add(second );
              }
    
              public Component getListCellRendererComponent(JList list, Object value,
                   int index, boolean isSelected, boolean cellHasFocus)
              {
                   Item item = (Item)value;
    
                   first.setText( item.getId() );
                   second.setText( item.getDescription() );
    
                   renderer.setBackground(isSelected ? list.getSelectionBackground() : null);
                   renderer.setForeground(isSelected ? list.getSelectionForeground() : null);
    
                   return renderer;
              }
         }
    
         /*
         **  Use HTML to format the text
         */
         class HTMLRenderer extends DefaultListCellRenderer
         {
              private static final String START = "
    "; private static final String MIDDLE = ""; private static final String END = "
    "; public Component getListCellRendererComponent(JList list, Object value, int index, boolean isSelected, boolean cellHasFocus) { super.getListCellRendererComponent( list, value, index, isSelected, cellHasFocus); Item item = (Item)value; setText(START + item.getId() + MIDDLE + item.getDescription() + END); return this; } } }
  • Accordion in two columns effect

    I did progress since first creating this page:

    http://www.inroadsracing.com/team.html

    There are a few things that I am trying to solve:

    1. the code for the accordion is there, but I have to Miss smething to get it to work. Should I float two columns separately, perhaps?

    2. I need to add more people below, using the first two as reference. How can I be sure that the line remains in place correctly, IE, if it were of cells, how to make sure the images (which are all in line 100 x 150 place exactly?

    3. any other matter of code. that I would be pleased to entrance.

    Thank you!

    Have a look here for a better option http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm

    GRAMPS

  • Question about the display of an image between the columns in a report

    Hi people,

    I looked at the examples I have come across, but I guess I'm missing something. I have a PL/SQL procedure that returns a sql statement to a report. I want to display an image between the two columns. I already have the pictures stored in the APEX. Can someone please tell me what I'm doing wrong here?

    SELECT the id INTO file_id OF APEX_APPLICATION_FILES
    WHERE filename = 'Blue Free';

    q: = "select";
    q : = q || ' current_status_cd,';
    q : = q || "APEX_UTIL. GET_FILE(p_file_id => file_id,p_mime_type => ''image/jpeg'',p_inline => ''YES'') M,';
    q : = q || "UserID,';
    q : = q || "usernum,';
    q : = q || "LastName,';
    q : = q || "First name";
    q : = q || "from une_table";

    Return to q;

    Thank you very much

    -Adam

    Published by: avonnieda on November 11, 2008 12:28

    Adam:

    The references of the generated query "une_table." Is this a valid table in the application schema analysis?
    If so, change the query to be

    q: = "select";
    q : = q || ' current_status_cd,';
    q : = q ||'' ' "image,';
    q : = q || "UserID,';
    q : = q || "usernum,';
    q : = q || "LastName,';
    q : = q || "First name";
    q : = q || "from une_table";

    CITY

  • Number of matches between two columns

    Column1 Column2
    5 5
    5 2
    5 5
    4 3
    4 4
    Football match
    3

    I basically you want to compare two columns and count matches in the corresponding lines. I tried using the following formula:

    SUMPRODUCT (--($column1=$column2))

    ... but it doesn't work! Any suggestion?

    Tiago,

    It seems you are trying to use array formulas (maybe since excel?) who do not work in number.

    Here's how I would solve this problem:

    Make sure that the table where data is named 'Data' (as shown, or change the table name references to match your table name)

    Add a new column (C)

    C2 = AND (A2 = B2, A2≠ "")

    It's shorthand dethrone select cell C2, then type (or copy and paste it here) the formula:

    = AND(A2=B2, A2≠"")

    Select cell C2, copy

    Select cells C2 at the end of the C column, paste

    the formula say to check to see if the cell in column A is NOT empty, and is equal to the cel in column B

    Now in the summary table (single cell table):

    A1 = COUNTIF (Data::C, TRUE)

  • iBooks/iPad two columns per page

    Since this morning after an update to the iPad, iBooks is showing the book pages in two columns instead of a full page, from left to right.  How can I change this back to a page on the screen?

    I saw that too. Stupid solution. Increase your font a to the top of the smallest.

    The smaller police apparently goes into two columns.

  • Compare two columns and get the percentage of cells that match

    Hello

    I'm looking to take two columns of data from different tables in the same document, which should have a high enough percentage of boxes and have another cell tabulate the corresponding percentage. I can the of seem to figure out how to do this, but it seems really possible.

    Any help is greatly appreciated.

    Thank you!

    C1 = A1 = B1

    It's shorthand dethrone select cell C1 and type (or copy and paste it here) the formula:

    = A1 = B1

    Select cell C1, copy

    Select the column C, paste

    Select cell E2, and then type 'TRUE '.

    Select cell E3 and then type "FALSE".

    F2 = COUNTIF ($C, E2)

    F3 = COUNTIF ($C, E3)

    G2 = F2÷SUM(F$2:F$3)

    G3 = F3÷SUM(F$2:F$3)

  • How to view the menu of bookmarks in two columns

    Firefox 3.6.7 under Windows 7. I wish I had the menu bookmark appears in two columns to avoid the bottom of the scroll list.

    Sorry, it's not a function for this integrated into Firefox.

    See if this extension fits your needs.
    https://addons.Mozilla.org/en-us/Firefox/addon/74381/

    Read all the comments from the user before installing it, there might be a problem on Win7 or with later versions of 3.6. versions #.

  • Combine the two columns of text

    I have two columns of text (say that name is a column and the name is the other)

    I would like to combine the two columns for the text of these two columns are in a column. (First name and last name in the same column)

    Is this possible? If so is there a tutorial somewhere?

    Hi Danielle,

    The & (concatenation operator) is your friend.

    Formula in D2 (fill down)

    "B2 &" "& C2.

    & joins elements into a single string.

    "" inserts a space.

    Kind regards

    Ian.

  • How to compare two columns in Xl

    I want to compare two columns in the file of Xl. column A contains phrases and column B contains the words

    For example

    Column A                                                                       Column B                                                                           Column C

    I have an Apple and I'll eat every day Apple Apple

    I have a banana and eat weekly banana papaya

    Oranges are rich in nutritions cauliflowers Oranges

    Papaya is good for health                                               Grapes                                                                                 Papaya

    Oranges

    Lichi

    Banana

    I want to check each value of column B in each cell in column A, and if it matches then it should return the corresponding value in the result to me. Column C should Look Like as shown above.

    Can someone point me in the right direction here of what formula to use for this Xl.

    Thank you

    This is a forum for Mac OS X technologies, so here's an Applescript solution:

    1. Copy-paste the script in the Script Editor
    2. Select the cells in columns A and B
    3. Command + c to copy to the Clipboard
    4. Click on the button "run" in the Script Editor
    5. Click once in the top cell in column C where you want the data
    6. Command + v to paste

    Here are the results:

    There is no verification error here. You must select and copy to the Clipboard before the race.

    SG

    the value LstOfLsts to makeListOfLists (the Clipboard as a 'class utf8 ')

    the value theSentences to getCol1Vals (LstOfLsts)

    the value collected in getCol2Vals (LstOfLsts)

    game of theMatches to «»

    Repeat with I in collected items

    If theSentences contains I then ¬

    the value of theMatches to theMatches & i & return

    end Repeat

    Set the Clipboard for theMatches

    to getCol1Vals (LofL)

    game of col1Vals to «»

    Repeat with en LofL points

    the value col1Vals to the col1Vals & "" & i point 1

    end Repeat

    end getCol1Vals

    to getCol2Vals (LofL)

    the value col2Vals to {}

    Repeat with en LofL points

    If i's point 2 is not "" then ¬

    i copy point 2 to the end of col2Vals

    end Repeat

    return col2Vals

    end getCol2Vals

    at makeListOfLists (theTxt)

    value was to theTxt paragraphs

    the value text point of delimiters

    the value theListOfLists to {}

    Repeat with I from 1 to count was

    the value theListOfLists to the theListOfLists & {the was point i text elements}

    end Repeat

    the value point text delimiters to «»

    return theListOfLists

    end makeListOfLists

  • How to read the two columns of data in a file of PDM.

    Hi all

    I am reading two data columns for the 2nd of a PDM file two sheets, as shown below.

    Two columns of data must then be shared so they can be displayed in a xy chart and also apply a linear adjustment VI. I implemented the graph xy and linear adjustment using a txt file (see below), therefore all the outputs work, however this application with a tdms file turns a little more tax.

    So, essentially, that I don't know how read the correct leaf and therefore the columns in the PDM file and then how to produce the graph xy and linear adjustment of the data types produce. Here's my current attempt, which produces several errors of the type of terminal, as well as not being able to select the exact data in the PDM.

    Any help/suggestions/example vi on this asap would be greatly appreciated.

    Thanks in advance,

    Pete

    Also the PDM file viewer. VI helps you easily understand the structure of data files.

  • How to read the two columns of data from the Port series

    Hello

    I'm reading two columns of data from the serial port.

    Example:

    52439 52430

    52440 52437

    52209 52214

    51065 51070

    52206 52390

    I use the serial of Visa service and I can read the first column of data from the serial port, but I can't understand how to read the second column.

    I want to both sets of chart data.

    I enclose my VI.

    Thank you for your help.

    The analysis of string function takes a "Format string" on top (with the right button of the function and choose Help, which explains all the entries).  In particular, you can say 'Give me two numbers separated by a tab' and the output will be two numbers (whole or floating, depending on the chosen format).  In particular, %d\t%d specifies a decimal integer, , whole decimal.

  • Two column csv to waveform curve

    Part of my bed VI data from a csv file. It has two columns, one is time of sample to the 24-hour (24 h 00), the other is reading which is an integer. I can't know how to associate these columns to a graph. It appears to correctly display the data points but does not show my reading on axis x. time I tried to separate the file and then get back together but have had no success. Any help would be greatly appreciated.


Maybe you are looking for

  • Backup photos and drop?

    I have a Mac Book Pro (circa 2009) running El Capitan 10.11.5. I recently bought a Seagate 1 TB portable drive more. I want SOME pictures of my library of Photos to SMT. My Mac is completed. I have 64 GB of photos on my hard drive and I need to acces

  • HP-au006tx: Hi, I bought the version au006tx of the laptop.can hp I spend my hard drive to ssd?

    Hi I bought the hp au006tx laptop.i want to upgrade my internal hdd to ssd.is my latop upgradable? I have Samsung 850 EVO 500 GB 2.5 inch SATA III internal SSD.is portable laptop.kindly answer me.my it compatible with my computer model is hp au006tx.

  • Post here if you receive from ICS

    This is for people who have received their ICS until next week and we can let someone know if ICS really unwind to Droid Razr/Maxx message with your name and in what region you are in. Thank you

  • key codes

    upgrade to laptop from 7 to 10 months and want to go back. Code illegible key so used software to extract the key code. Question - is the key code for the same as the original 7 10 upgrade? I have a 7 installation disk but wonder about the key code t

  • What Microsoft Starter Pack?

    Greetings, I've heard of 'Microsoft Starter Pack' and my company is interested in obtaining service, just I can not find a detailed explanation about that service and what exactly it serves businesses and how to get it, what is nature...