September 8, 200818 yr Hi, Sorry this is my first post here so hopefully people will understand my question.I'm fairly new to css. I've been using ORACLE Application Express(APEX) is connected to a ORACLE database to develope my webpages. I have a section on my webpage that I can retrieve data from using SQL. However I need some help with the layout using css. I'm not sure if I should use CSS or tables for layout but from what I've read table layouts are a big NO NO. So I am trying to do the following with CSS. I have 5 Button with text at the bottom of the button on each row. By button I mean an img with a href attached to it. Now the problem I am having is to wrap the text to the max length of the button which is above it so that each button has equal space between them. I also have a problem trying to align the buttons up with each other so they are all in a straight line as the text maybe wraped once,twice, three or sometimes fout times.I want the buttons to be all in line with each other. Ok so I want to have the following. button 1....button 2....button 3....button 4....button 5 some text...some text...button 3....etc about ......about.......is used.....etc button 1....button 2....for.........etc nothing.....etc At the moment I have places it in a table but hopefully I can move away for the table and layout it in a flexibly way. Thanks you for your assistance in advance.
September 8, 200818 yr Author Here is a sample of my code HTML <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>Test</title> <style type=text/css> img { border:medium none; } a { color:#000000; text-decoration:none; } </style> </head> <body> <table width="100%" id="items" class="formlayout"> <tr> <td width="20%"> <a style="word-break: normal;vertical-align: top; " href="#"> <img src ="mde.gif"/><br/>Button 1</a> </td> <td width="20%"> <a style="word-break: normal;vertical-align: top; " href="#"> <img src ="mde.gif"/><br/>Button with really long text that should wrap</a> </td> <td width="20%"> <a style="word-break: normal;vertical-align: top; " href="#"> <img src ="mde.gif"/><br/>Button 3 with really long text as well</a> <td width="20%"> <a style="word-break: normal;vertical-align: top; " href="#"> <img src ="mde.gif"/><br/>Button 4</a> </td> <td width="20%"> <a style="word-break: normal;vertical-align: top; " href="#"> <img src ="mde.gif"/><br/>Button</a> </td> </tr> <tr> <td width="20%"> <a style="word-break: normal;vertical-align: top; " href="#"> <img src ="mde.gif"/><br/>Button 6 thats got long text and it keeps going on</a> </td> <td width="20%"> <a style="word-break: normal;vertical-align: top; " href="#"> <img src ="mde.gif"/><br/>Button 7 thats got long text and it keeps going on and on and on and on</a> </td> <td width="20%"> <a style="word-break: normal;vertical-align: top; " href="#"> <img src ="mde.gif"/><br/>Another Button</a> </td> <td width="20%"> <a style="word-break: normal;vertical-align: top; " href="#"> <img src ="mde.gif"/><br/>Long long long long long long long long button</a> </td> <td width="20%"> <a style="word-break: normal;vertical-align: top; " href="#"> <img src ="mde.gif"/><br/>Button 10</a> </td> </tr> <tr> <td width="20%"> <a style="word-break: normal;vertical-align: top; " href="#"> <img src ="mde.gif"/><br/>Button 11 on row 3</a> </td> </tr> </table> </body> </html> I have attached the mde.gif as well. I want it to resize the font and button when the user changes their view>text size which is why I'm working with %
September 8, 200818 yr You can just create 5 divs and float them left (or right) and put your stuff inside. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > <head> <meta http-equiv="Content-Language" content="en-gb" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .column { width: 100px; margin-right: 10px; float: left; background-color: #0000f2; border: 1px solid #333333; } </style> </head> <body> <div class="column"> Column 1 <br /> Link 1 </div> <div class="column"> Column 2 <br /> Link 1 </div> <div class="column"> Column 3 <br /> Link 1 </div> <div class="column"> Column 4 <br /> Link 1 </div> <div class="column"> Column 5 <br /> Link 1 </div> </body> </html>
Create an account or sign in to comment