Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: CSS div/span

  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS div/span

    I'm in the proccess of making a site which will dynamicly post art, with the news poster "cutenews"

    This is how I want to post the news:

    <span id="art">
    <h1>February 23, 2005</h1>
    <img src="../art/draw/test.jpg" width="50px" height="50px">
    <p>0 Comments</p>
    </span>

    And the css file is:

    #art {
    position: relative;
    margin: 10px;
    padding: 5px;
    height: 50%;
    width: 50%;
    border: 1px solid #000000;
    background-color: #ffffff;
    text-align: center;
    }

    #art p {
    font-size: 12px;
    margin: 0;
    padding: 0;
    }

    #art img {
    border: none;
    }

    #art h1 {
    font-size: 15px;
    margin: 0;
    padding: 0;
    }

    #art a {
    text-decoration:none;
    color: #000000;
    }

    -----

    I originally did this with div tags and not spans (there is one large div covering all of these new spans) but they would align verticaly, and not horizontally. So I tried to put in "float: left;" under #art. this "solved" the problem of alignment but made the div tag incasing the previous div tags, truncate at about 20 pixels from the top.

    Trying with the spans, with firefox, the content of the span gets pushed to the center of the outlaying div tag, and the span itself stays at the left, with a small width and hieght of about 10x20px. In IE the span shows as normal, except the width gets cut down to eliminate space waste.

    I just want this to work in Firefox withought the outlaying div tag being truncated (remember these spans will be dynamicly posted, so it would be best to have the height set dynamicly as well), if it looks like fodder in IE I could care less right now

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you're using multiple spans, you'll need to change the id="art" to class="art" and all #art should be .art in your CSS. IDs are for elements that appear once in the document, and classes are for elements that appear multiple times in the document.

  • #3
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No go. same problem.

    I tried changing the text-align: center; in the css file, rather completely removing it, and in the php file using the <center> tag on the inside of the span, since the contents were being pushed outside, but still no luck.

    Removing the <center> tags after that, put the contents of the span inbetween two of those smaller spans with the .art class properties. One above, one below. Again, same problem, now its all left aligned though.

    IE still shows it the way I intend, though.

    (P.S.: in the css document, it says height/width=50% just to prove to myself that IE parses the size of the span while FF does not. Which is true, IE shows the span very large)

  • #4
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Firefox is doing what it should do - <span> is an inline tag, not a block tag like <div>
    You can use CSS to make the <span> behave like a block:

    span {display:block;}

    You probably just want that to apply to these spans so just make a class.
    Bear in mind non-styling browsers.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Not sure I understand fully but are you trying to make a line of images run horizontally? If so, what about trying a <ul><li></li></ul> and tell it to display inline?

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, span is a problem too. Is this what you're going for? http://offtone.com/art.html

  • #7
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thats exactly what im trying to do.

    So lets see if I understand correctly from your coding.
    Use <div> tags instead of span tags, with a class instead of an ID?

    This will make it line horizontally?

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not quite. I've floated each item to the left, and given the body itself a width of 400px. You can emulate this with any container (wrap it all in a div and give it a width).

    Then .art's margin is 10px and padding 5px. There is a 1px border. The width for .art is calculated by:

    Code:
    // Assume container_width is 400
    width = (container_width / 2) - (margin * 2 + padding * 2 + border * 2)
          = (400 / 2) - (10 * 2 + 5 * 2 + 1 * 2)
          = 168px
    Your container needs to have a fixed width, or you you'll have to use percentages for padding and margin (and your border may cause problems).

    If you don't care if they take up the full width of their container, you just set the width/margin/padding/border to whatever you want.

  • #9
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thats the problem though, these <span> tag's were already in a <div> container. But the div container had a background color, and when I floated the spans (even when they were div's) it truncated the length of my div container and thus cuttong of the background color, throwing off the whole idea in the first place.

    http://thevault.afraid.org
    Go there and click "Drawings" in the navigation menu, I through my web server temporarly on a rediercter i found for free, so maybe you guys would have better chances helping me out

  • #10
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Try this.

    CSS code

    Code:
    span.clear_float
    {
    clear:both;
    }
    HTML code, after the spans in the truncated div
    Code:
    <span class="clear_float" />
    HTH, Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #11
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No go, still truncates the div container

  • #12
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump, the span with a display: block; as part of the style made them line verticaly again, floating them to the left, truncated my div container still also


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •