[RESOLVED] Disallow <a> from 'breaking' when text-wrapped in browser window

**captainscall** · 07-20-2012 11:01 AM

Hello,

This will make sense if you just take a look. Two problems:

1. The <a>'s get split apart when text-wrapped to a new line. I want them intact, like legitimate buttons.

2. When they text-wrap, they overlap vertically. Maybe just some margin-top?

Please give me the fix.

Take a look here, shrink the browser window to see what I mean:
http://getdtsi.com/dtsi_wop/makeedits.php

Don't bother clicking the links, you will be kicked out of the program. I just have this page accessible without the password. Here is the CSS I've got for the links:

Code:

.topnav a:link, a:visited {
color: black;
text-decoration: none;
font-weight: bold;
font-family: Sans-serif;
border: 2px solid #555555;
background: #BBBBBB;
padding: 3px;
}

.topnav a:hover, a:active {
color: grey;
text-decoration: none;
font-weight: bold;
font-family: Sans-serif;
border: 2px solid #555555;
background: #EEEEEE;
padding: 3px;
}

Thanks again

**captainscall** · 07-20-2012 12:24 PM

I tried wrapping all of the <a>'s in <div>'s to see if it would keep 'em intact. No go.

**coothead** · 07-20-2012 12:38 PM

Hi there captainscall,

Have you tried, "min-width"?....

Code:

.topnav { 
    min-width:1050px;
 }

coothead

**captainscall** · 07-20-2012 12:48 PM

min-width is a step in the right direction and is appreciated, but I would still rather allow the links to wrap up with the shrinking window, just keep them intact

**jedaisoul** · 07-20-2012 01:14 PM

A way to stop text from wrapping at a certain point is to use   (a non-breaking space) instead of a space.

**captainscall** · 07-20-2012 01:20 PM

Good call jedaisoul. That fixes problem #1.

Now for the vertical overlap...?

**coothead** · 07-20-2012 01:31 PM

Hi there captainscall,

I have tidied up your code, it should now work as you desire...

Code:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>DTSIwop - Editing Work Order</title>

<style>
body {
    font-family:arial,helvetica,sans-serif;
 }
.topnav {
    margin:0 0 10px;
    padding:0;
    list-style-type:none;
 }
.topnav li {
    display:inline-block;
    padding-right:3px;
    margin-bottom:4px;
 }
.topnav a{
    display:inline-block;
    margin-right:3px;
 }
.topnav a:link, .topnav a:visited {
    color: black;
    text-decoration: none;
    font-weight: bold;
    font-family: Sans-serif;
    border: 2px solid #555;
    background: #bbb;
    padding: 3px;
    height: auto;
 }
.topnav a:hover, .topnav a:active {
    color: grey;
    text-decoration: none;
    font-weight: bold;
    font-family: Sans-serif;
    border:2px solid #555;
    background: #eee;
    padding: 3px;
    height: auto;
 }
body.edit a#edit, body.edit a:visited#edit {
    border:4px solid red; 
 }
</style>

</head>
<body class="edit">

<ul class="topnav">
 <li><a id="create" href="create.php">Create Work Order</a>-</li> 
 <li><a id="edit" href="edit.php">Edit/View Work Order</a>-</li>  
 <li><a id="view" href="view.php">Print Work Order</a>-</li> 
 <li><a id="editcust" href="editcust.php">Manage Customers</a>-</li> 
 <li><a id="delete" href="deleteentry.php">Delete an entry</a>-</li> 
 <li><a href="/dtsi_wop">Main Menu Page</a>-</li> 
 <li><a href="index.php?logout=go">Log out</a></li> 
</ul>

<hr>No work order selected...

</body>
</html>

coothead

**captainscall** · 07-20-2012 01:41 PM

coothead -- excellence. That's the fix. <li>'s are more 'workable' than simply <a>'s.

Thanks

**coothead** · 07-20-2012 01:46 PM

No problem, you're very welcome.

coothead

Thread: [RESOLVED] Disallow <a> from 'breaking' when text-wrapped in browser window

Thread Tools

Display

[RESOLVED] Disallow <a> from 'breaking' when text-wrapped in browser window

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions