/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Jul 20.2012

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:
    [URL=”http://getdtsi.com/dtsi_wop/makeedits.php”]http://getdtsi.com/dtsi_wop/makeedits.php[/URL]

    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;
    }[/CODE]

    Thanks again

    to post a comment
    CSS

    8 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @captainscallauthorJul 20.2012 — I tried wrapping all of the <a>'s in <div>'s to see if it would keep 'em intact. No go.
    Copy linkTweet thisAlerts:
    @cootheadJul 20.2012 — Hi there captainscall,

    Have you tried, "[i]min-width[/i]"?....

    [color=navy].topnav {
    min-width:1050px;
    }
    [/color]
    [i]coothead[/i]
    Copy linkTweet thisAlerts:
    @captainscallauthorJul 20.2012 — 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
    Copy linkTweet thisAlerts:
    @jedaisoulJul 20.2012 — A way to stop text from wrapping at a certain point is to use &nbsp; (a non-breaking space) instead of a space.
    Copy linkTweet thisAlerts:
    @captainscallauthorJul 20.2012 — Good call jedaisoul. That fixes problem #1.

    Now for the vertical overlap...?
    Copy linkTweet thisAlerts:
    @cootheadJul 20.2012 — Hi there captainscall,

    I have tidied up your code, it should now work as you desire...
    [color=navy]&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;

    &lt;meta charset="utf-8"&gt;

    &lt;title&gt;DTSIwop - Editing Work Order&lt;/title&gt;

    &lt;style&gt;
    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;
    }
    &lt;/style&gt;

    &lt;/head&gt;
    &lt;body class="edit"&gt;

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

    &lt;hr&gt;No work order selected...

    &lt;/body&gt;
    &lt;/html&gt;
    [/color]
    [i]coothead[/i]
    Copy linkTweet thisAlerts:
    @captainscallauthorJul 20.2012 — coothead -- excellence. That's the fix. <li>'s are more 'workable' than simply <a>'s.

    Thanks
    Copy linkTweet thisAlerts:
    @cootheadJul 20.2012 — [indent]No problem, you're very welcome. ?[/indent]

    [i]coothead[/i]
    ×

    Success!

    Help @captainscall spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...