homepage Welcome to WebmasterWorld Guest from 54.167.173.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Help needed with CSS and layout of buttons with text.
aliUK




msg:3740319
 9:00 am on Sep 8, 2008 (gmt 0)

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.

 

csuguy




msg:3740336
 9:42 am on Sep 8, 2008 (gmt 0)

lol why'd you post it three times?

Anyways, please post your relevant code so we can better see what your trying to do.

aliUK




msg:3740360
 10:41 am on Sep 8, 2008 (gmt 0)

HTML Code
<code>
<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>
</code>

I want it to resize the font and button when the user changes their view>text size which is why I'm working with %

alt131




msg:3740364
 11:01 am on Sep 8, 2008 (gmt 0)

Hi aliuk!. Here is a non-table option.
As you've said you're "new" to css I've used an example page for cut and paste.

wrap the text to the max length of the button ...

Adjust the "width" on div.button to the desired measurement. If the "button" images vary in width, remove width and padding and div.button will expand to the width of the image only.

which is above it so that each button has equal space between them

Adjust margin to get the desired spacings

... align the buttons up with each other so they are all in a straight line as the text maybe wrapped once, twice, three or sometimes fout times.

This technique sets a minimum height on each button "container" so the ""buttons" can be lined-up horizontally. Adjust the min-height (.button), and height (in the conditional comment for ie) to get the desired dimension. Note height:auto allows the button containers to expand if more text is added, or if the user increases font-sizes, while still remaining horizontally "lined-up".
The float:left means the buttons will wrap themselves to another row if the number of button containers, user settings, screen resolution etc means there is not enough horizontal space for them to fit on one line


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Title</title>
<style type="text/css">
.button {
width:8em; /*set a desired maximum width, or remove and allow to size depending on image width*/
margin:1em 0.6em; /* modify to suit */
padding: 0.6em; /*modify to suit */
min-height:12em; /*adjust to suit your height */
height:auto; /*allows conforming browsers to expand*/
float:left; /* allows buttons to fill width of screen if number of "buttons" for each row is undecided */
text-align:center; /* if wish to centre any content (such as the "button" image and h4 in the eg)*/
font-family:verdana,helvetica,arial,sans-serif; /*just for example */
border:1px solid #d3d3d3; /*just for example */
}

.button p {
text-align:left;
font-size:0.8em; /*just for example */
}

</style>
<!--[if lte IE 6 ]>
<style type="text/css">
.button {
height: 12em; /*adjust to suit your height as for min-height above */
}
</style>
<![endif]-->
</head>

<body>

<div class="button">
<a href="#" title="?"><img alt="?" src="myimage.jpg" height="50" width="50" ></a>
<h4>Button1</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

<div class="button">
<a href="#" title="?"><img alt="?" src="myimage.jpg" height="50" width="50" ></a>
<h4>Button2</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

<div class="button">
<a href="#" title="?"><img alt="?" src="myimage.jpg" height="50" width="50" ></a>
<h4>Button3</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

<div class="button">
<a href="#" title="?"><img alt="?" src="myimage.jpg" height="50" width="50" ></a>
<h4>Button4</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

<div class="button">
<a href="#" title="?"><img alt="?" src="myimage.jpg" height="50" width="50" ></a>
<h4>Button5</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

</body>
</html>

[edit]With the submit issue I crossed-posted with you. Add your styles for the img and a, as desired [/edit]

[edited by: alt131 at 11:19 am (utc) on Sep. 8, 2008]

aliUK




msg:3740378
 11:47 am on Sep 8, 2008 (gmt 0)

Thank you so much Alt131,

I fiddled with you code and managed to get it working almost 100% correctly and solved one of my other issues such as knowing how many icons could fit in the users window. However, I get a slightly weird layout when I resize my windows on the some lines it has like quiet a lot of blank space and then a button /icon

for example I get

button1...Button2....Button3
.....................Button4
Button5...Button6....Button7

another one was

button1...Button2....Button3
Button4...Button5....Button6
.....................Button7
Button8

Any ideas what maybe causing this?

My code that generates this dynamically creates the following for each required button :
<code>
<div class="button">
<a href="#" src ="mde.gif"/></a>
<a href="#">Buttonx</a>
</div>
</code>

And I modified the style in the header of your example to the following:

<code>
<style type="text/css">
.button {
//width:8em; /*set a desired maximum width, or remove and allow to size depending on image width*/
margin:1em 0.6em; /* modify to suit */
padding: 0.6em; /*modify to suit */
min-height:1em; /*adjust to suit your height */
height:auto; /*allows conforming browsers to expand*/
float:left; /* allows buttons to fill width of screen if number of "buttons" for each row is unknown/undecided */
text-align:center; /* if wish to centre any content (such as the "button" image and h4 in the eg)*/
font-family:verdana,helvetica,arial,sans-serif; /*just for example */
border:0px //solid #d3d3d3; /*just for example */
}
</style>
</code>

aliUK




msg:3740382
 11:49 am on Sep 8, 2008 (gmt 0)

I wanted the Button X to have the same href as the img.

alt131




msg:3740437
 1:42 pm on Sep 8, 2008 (gmt 0)

I wanted the Button X to have the same href as the img.
<code>
<div class="button">
<a href="#" src ="mde.gif"/></a>
<a href="#">Buttonx</a>
</div>
</code>

Double-check the input for the generated code - the bolded element is neither a link or an image.

One way to give Button X and the image the same href is this:

In your css:
.button a {
display:block;
text-decoration:none;
border:1px solid red; /* to show the clickable area for testing */
}

.button a strong {
display:block;
}

In your xhtml:
<div class="button">
<a href="#" title="?">
<img alt="?" src="mygif.gif" height="50" width="50" /><strong>Button X</strong></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>


display:bock on the a: makes the link expand around both image and strong, and display:block on the strong makes it start on a "new line" below the image.


I modified the style in the header of your example to the following:
//width:8em; /*set a desired maximum width, or remove and allow to size depending on image width*/
border:0px //solid #d3d3d3; /*just for example */

Remove the // and use /* .... */ to comment out in css:
/* width:8em; set a desired maximum width */
/*border:0px solid #d3d3d3; just for example */ (commenting out the border should remove it. If you have a border set for divs elsewhere, insert border-style:none)

Also, in my first post I said:
If the "button" images vary in width, remove width and padding and div.button will expand to the width of the image only.
Rubbish! Removing the width means .button expands to contain the widest child element - in this case the length of the example text. A width is needed to stop that. Hope that hasn't tripped you up too much.


I get a slightly weird layout when I resize my windows on the some lines it has like quiet a lot of blank space and then a button /icon
Any ideas what maybe causing this?

A couple of thoughts, but having seen an example of the generated code, wonder if that might be the culprit.

Before chasing possibilities, if none of this helps you resolve the issue, post the css and some "examplified" (Guidelines [webmasterworld.com]) generated code so that can be checked first.

aliUK




msg:3740479
 3:07 pm on Sep 8, 2008 (gmt 0)

Thanks for your help its workign perfectl now.

I really appreciate your assistance

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved