css adding breaks

Discussion in 'HTML' started by iamdave, Jan 18, 2008.

  1. iamdave

    iamdave Guest

    OK, so I'm moving from tables to css thanks to suggestions. One thing
    I don't understand is that when I do a link like:

    <a href="url">text</a> I get a break. For instance the text won't stay
    in one sentence, the next words after the link drops down into a new
    paragraph.

    Any idea how to stop that?

    css also seems to make it tough to break as you want. For instance

    <a href="url">text</a><br>
    <a href="url">text</a><br>
    <a href="url">text</a><br>

    instead of giving me:

    text
    text
    text

    gives me :

    text text text

    I can't seem to control breaks while using css

    Dave
    iamdave, Jan 18, 2008
    #1
    1. Advertising

  2. ..oO(iamdave)

    >OK, so I'm moving from tables to css thanks to suggestions. One thing
    >I don't understand is that when I do a link like:
    >
    ><a href="url">text</a> I get a break. For instance the text won't stay
    >in one sentence, the next words after the link drops down into a new
    >paragraph.
    >
    >Any idea how to stop that?


    It's something else in your code, so please post a URL.

    >css also seems to make it tough to break as you want. For instance
    >
    ><a href="url">text</a><br>
    ><a href="url">text</a><br>
    ><a href="url">text</a><br>
    >
    >instead of giving me:
    >
    >text
    >text
    >text
    >
    >gives me :
    >
    >text text text
    >
    >I can't seem to control breaks while using css


    Same thing - code error. Post a URL.

    Micha
    Michael Fesser, Jan 18, 2008
    #2
    1. Advertising

  3. iamdave

    iamdave Guest

    On Jan 18, 11:57 am, Michael Fesser <> wrote:
    > .oO(iamdave)


    > It's something else in your code, so please post a URL.
    >
    >
    > Micha


    Haven't published it. Here's the page code.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    <html>
    <head>
    <title>Layout 13</title>
    <meta http-equiv="content-type" content="text/html;
    charset=iso-8859-1">
    <meta name="generator" content="HAPedit 3.1">
    <style type="text/css">
    html,body{margin:0;padding:0}
    body{font: 76% arial,sans-serif}
    p{margin:0 10px 10px}
    a{display:block;color: #981793;padding:10px}
    div#header h1{height:80px;line-height:80px;margin:0;
    padding-left:10px;background: #EEE;color: #ffd700}
    div#content p{line-height:1.4}
    div#navigation{background:#000000}
    div#extra{background:#FF8539}
    div#footer{background: #333;color: #FFF}
    div#footer p{margin:0;padding:5px 10px}

    div#wrapper{float:left;width:100%}
    div#content{margin-left: 130px; margin-right: 200px}
    div#navigation{float:left;width:125px;margin-left:-100%}
    div#extra{float:left;width:200px;margin-left:-200px}
    div#footer{clear:left;width:100%}
    </style>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1>new pics will go here</h1>
    </div>
    <div id="wrapper">
    <div id="content">
    <p>text</p>
    </div>
    </div>
    <div id="navigation">
    <p><strong>2) Navigation here.</strong><p><a href="http://
    the316band.com/contact.htm"><img src="/images/316-contact.gif"
    width="75" height="75" border="0"></a><br>
    <a href="http://the316band.com/schedule.htm"><img src="/images/316-
    events.gif" width="75" height="75" border="0"></a><br>
    <a href="http://the316band.com/listen.htm"><img src="/images/316-
    audio.gif" width="75" height="75" border="0"></a><br>
    <a href="http://the316band.com/pictures.htm"><img src="/images/316-
    pics.gif" width="75" height="75" border="0"></a><br>
    <a href="http://the316band.com/bios.htm"><img src="/images/316-
    bios.gif" width="75" height="75" border="0"></a><br>
    <a href="http://the316band.com/purpose.htm"><img src="/images/316-
    purpose.gif" width="75" height="75" border="0"></a><br>
    <a href="http://the316band.com/links.htm"><img src="/images/316-
    links.gif" width="75" height="75" border="0"></a><br>
    <a href="http://the316band.com"><img src="/images/316-home.gif"
    width="75" height="75" border="0"></a></p>
    </div>
    <div id="extra">
    <p>text.</p>
    </div>
    <div id="footer"> <p align="center"><a href="/contact.htm"><font
    color="#FFFFFF">contact </font></a> | <a href="/schedule.htm"><font
    color="#FFFFFF">schedule </font></a> | <a href="/listen.htm"><font
    color="#FFFFFF">listen</font></a> | <a href="/pictures.htm"><font
    color="#FFFFFF">pics</font></a> | <a href="/bios.htm"><font
    color="#FFFFFF">bios</font></a> | <a href="/purpose.htm"><font
    color="#FFFFFF">purpose</font></a> | <a href="/links.htm"><font
    color="#FFFFFF">links</font></a> | <a href="http://
    the316band.com"><font color="#FFFFFF">home</font></a><br>
    <a href="/are_you_saved.htm"><font color="#FFFFFF">Are
    you saved?</font></a> | <a href="/need_peace.htm"><font
    color="#FFFFFF">Need
    peace?</font></a> </p>
    <p align="left">Copyright 2008 The 3:16 Band - all rights reserved</
    p></div>
    </div>
    </body>
    </html>

    The bottom footer is the where problem #1 arises. Problem #2 was on
    the left side nav. But I seem to be able to get around that by
    restricting the width of that column.

    Thanks a lot! :)

    Dave
    iamdave, Jan 18, 2008
    #3
  4. ..oO(iamdave)

    >On Jan 18, 11:57 am, Michael Fesser <> wrote:
    >> .oO(iamdave)

    >
    >> It's something else in your code, so please post a URL.

    >
    >Haven't published it. Here's the page code.


    Nest time please get some webspace or use the one of your ISP to upload
    a test case. Don't expect people to copy and paste your code onto their
    own machines.

    >body{font: 76% arial,sans-serif}


    76% will be way too small for many people, but the main problem ...

    >a{display:block;color: #981793;padding:10px}


    .... is this. Remove the 'display: block'.

    >The bottom footer is the where problem #1 arises. Problem #2 was on
    >the left side nav. But I seem to be able to get around that by
    >restricting the width of that column.


    For a navigation bar using an unordered list would make more sense.

    Micha
    Michael Fesser, Jan 18, 2008
    #4
  5. iamdave

    iamdave Guest

    On Jan 18, 12:32 pm, Michael Fesser <> wrote:
    > .oO(iamdave)
    >


    > Nest time please get some webspace or use the one of your ISP to upload
    > a test case. Don't expect people to copy and paste your code onto their
    > own machines.


    Sorry, my fault. I posted it now. It was just goofy looking and I was
    ashamed to have it up there. It's live now at http://the316band.com

    > >body{font: 76% arial,sans-serif}

    >
    > 76% will be way too small for many people


    I'm the novice with css and got this template from somewhere on the
    net to get started using css instead of tables. Not sure even what 76%
    is. I increased it to 90% though figuring it needed to be higher.

    > , but the main problem ...
    >
    > >a{display:block;color: #981793;padding:10px}

    >
    > ... is this. Remove the 'display: block'.
    >
    > >The bottom footer is the where problem #1 arises. Problem #2 was on
    > >the left side nav. But I seem to be able to get around that by
    > >restricting the width of that column.


    thank you much!

    > For a navigation bar using an unordered list would make more sense.
    >
    > Micha


    I'll look into that and learn about that also. :)

    If I may, a couple new questions from a rookie.

    - In Firefox I get a little red line under my links at the bottom of
    the page in the footer section. any way to get rid of those?

    - In both IE and firefox an extra space is created directly before and
    after every hyperlink. Nothing I do seems to move the "extra" space. I
    tried deleting any space which didn't change anything. Still 2 spaces
    before and after hyperlinks.

    - For some reason in IE sometimes hovering over a link doesn't give
    you the url or little hand showing you it's a hyperlink. But you go
    back to it again it finally will. I see this especially in the footer
    section. It just doesn't seem to like the links very well for some
    reason.

    I ordered 2 books on css so I can gain some more insight into this. My
    next step is to make a file so that I don't have to call the css files
    on every page. I forget what they call that but realize how useful it
    will be for the entire site to look much better and be easier to
    maintain.

    Thanks again, I certainly appreciate your help.

    Dave
    iamdave, Jan 18, 2008
    #5
  6. iamdave wrote:

    > Michael Fesser wrote:
    >> .oO(iamdave)
    >>> body{font: 76% arial,sans-serif}

    >>
    >> 76% will be way too small for many people

    >
    > I'm the novice with css and got this template from somewhere on the
    > net to get started using css instead of tables. Not sure even what
    > 76% is. I increased it to 90% though figuring it needed to be higher.


    The percentage is the .. percentage .. of your visitors chosen default
    font size. 90% is only 90% of my chosen size. Or yours. Or BillyBob's.
    See this page of mine, which may help in understanding:
    http://k75s.home.att.net/fontsize.html

    If 100% looks too large in *your* browsers, decrease your own default by
    a little bit.

    I'd also recommend you not use pixel (px) sizing for anything but sizes
    of images, and borders 'round stuff. Use em units instead. This way,
    when the visitor with vision problems comes by and increases the size to
    something s/he can read, your content doesn't escape outside your
    constrained limits.

    > I ordered 2 books on css so I can gain some more insight into this. My
    > next step is to make a file so that I don't have to call the css
    > files on every page. I forget what they call that but realize how
    > useful it will be for the entire site to look much better and be
    > easier to maintain.


    I'd call it using "external css" rather than "inpage..." ;-)

    While you wait for your books, have a play here:
    http://htmldog.com/

    You have HTML errors on your page:
    <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fthe316band.com%2F>

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Jan 18, 2008
    #6
  7. iamdave

    John Hosking Guest

    iamdave wrote:
    > On Jan 18, 12:32 pm, Michael Fesser wrote:


    >
    > Sorry, my fault. I posted it now. It was just goofy looking and I was
    > ashamed to have it up there. It's live now at http://the316band.com/
    >
    >>> body{font: 76% arial,sans-serif}

    >> 76% will be way too small for many people

    >
    > I'm the novice with css and got this template from somewhere on the
    > net to get started using css instead of tables. Not sure even what 76%
    > is. I increased it to 90% though figuring it needed to be higher.


    You were right, but the number is 100%. 90% might be okay for your
    copyright text, though.


    >
    >> For a navigation bar using an unordered list would make more sense.
    >>

    >
    > I'll look into that and learn about that also. :)
    >
    > If I may, a couple new questions from a rookie.
    >
    > - In Firefox I get a little red line under my links at the bottom of
    > the page in the footer section. any way to get rid of those?


    The line is there because that's how browsers typically display links.
    The underlines are also how people recognise where the links are. Since
    you're talking about a menu, it might not confuse anybody to remove the
    underlines, but I wouldn't suggest you do it otherwise.

    To your a rule you could add the declaration "text-decoration:none;"
    (without quotes). But this will affect the other links on your page,
    such as those in the sidebar. So consider making a separate ruleset

    ..footer a { color:#FFFFFF; text-decoration:none; }

    to come after your .footer and a rule sets.

    Then you can (and should) take all the <font> declaraions out of the markup.

    >
    > - In both IE and firefox an extra space is created directly before and
    > after every hyperlink. Nothing I do seems to move the "extra" space. I
    > tried deleting any space which didn't change anything. Still 2 spaces
    > before and after hyperlinks.


    That'll be the padding:10px; in your CSS for a. Delete that. It'll be:
    a {color:#981793; }

    This will also clear up the problem I see in FF where only part of the
    link is underlined.

    >
    > - For some reason in IE sometimes hovering over a link doesn't give
    > you the url or little hand showing you it's a hyperlink. But you go
    > back to it again it finally will. I see this especially in the footer
    > section. It just doesn't seem to like the links very well for some
    > reason.


    I don't know (although I see that too), but maybe it's because your
    footer links are inside a <p> which has a line-height declared. What
    happens when you remove that declaration from the p rule, or you change
    the links from <p> contents to <ul> list items as Michael suggested?

    May I also suggest you consolidate your declations for one element to a
    single rule set? So instead of two rules for .footer you get
    div#footer {background:#333; color:#FFF; clear:left; width:100%; }.

    I also suggest you declare color where you specify background-color, and
    vice-versa.



    --
    John
    Read about the UIP: http://improve-usenet.org/
    John Hosking, Jan 20, 2008
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Raj Mudaliar
    Replies:
    0
    Views:
    2,243
    Raj Mudaliar
    Jul 14, 2003
  2. PJ
    Replies:
    1
    Views:
    514
    Sasha Shevelev
    Aug 4, 2003
  3. Andy
    Replies:
    0
    Views:
    302
  4. Greg N.

    add line breaks through css?

    Greg N., Aug 11, 2005, in forum: HTML
    Replies:
    25
    Views:
    20,415
    Spartanicus
    Aug 23, 2005
  5. Replies:
    2
    Views:
    1,346
Loading...

Share This Page