CSS Coding

Huscurian
Huscurian
edited August 2012 in Campaign Portal Building
Hello,

I am trying to apply my CSS coding skills to one of my campaigns. So far, I have not been able to figure out how to align the table here:

|Form of Government|Impericracy|
|Official Language|Tyramin|
|Home Nation|Gregar|
|Capital|Imperiane|
|Head of State|Impericrat|
|Head of Government|Valorum Prefect|
|Senior Military Commander|Surface Marshal|
|Executive Branch|Imperial Palace|
|Legislative Branch|The Commonality|
|Military|Freemen Armies of Gregalion|
||Naval Armed Forces of Gregalion|
||Air Forces of Gregalion|
||Free Space Navy of Gregalion|
||Special Legions|
||Star Eagles|
|Founded|00 AS; -14FE|
|Currency|Quinton|

Is there any way to be able to align the table to the right, by fixing it to a certain pixel and not making it move and then enable text to wrap itself around the table detailing this specific planet? I wanted to be able to create tables where information is provided.

On a second note, how do you anchor text to another part of the page? Is it HTML 4 coding that I have to do? Or did the Obsidian Portal upgrade to HTML 5?

Helpful advice would be great! as I'm starting out.

Comments

  • Langy
    Langy
    Posts: 364
    Well, first off the table will need a class. Stick:

    table(classname).

    Right above where the table starts.

    Next, stick float:right into the class's CSS to make it float to the right and have text wrap around it. I'm not all that sure what you mean by fixing it to a certain pixel, however - do you want that text to [i]always[/i] appear to be, say, 100 pixels down and 100 pixels to the left of the edge of the screen, no matter where you're scrolled to on the page? If so, use position:fixed and left: or right: and top: or bottom: to maneuver the table to the position you'd like. If you want the table to scroll with the page, use position:relative instead.

    I'm not sure what you mean by 'anchor text to another part of the page'. OP pages utilize the XHTML 1.0 Transitional doctype, so I assume that's what you need to code it in.
  • gaaran
    gaaran
    Posts: 740
    I'm not really sure how to combine textile and the CSS stuff (I do everything in HTML), but yes, Langy is right.

    1. Assign the table a class.
    2. You want the table to be in a fixed position relative to your content, I would use position:absolute. This will fix the table's position, but it will be relative to the container it's in (i.e. the campaign content).
    3. Assign pixel values, sure as top:100px;left:100px; That will position the top left corner 100px from the top and left side of the container.

    I don't think you can have the text dynamically flow around a fixed position div. If you want the text to conform to the shape of the table, then the table will probably have to scroll with the rest of the page (unless there's a technique i don't know about, that would be handy). Then you would want to do a float:left or right, and then position it like normal.

    Do you have a link to what you are trying to do?
  • Langy
    Langy
    Posts: 364
    Position:Absolute won't do what he wants. Specifically, it will make it so the table is overlayed on top of any text (or the other way around; depends on where the text and the table are), rather than make it so text wraps around the table.
  • gaaran
    gaaran
    Posts: 740
    yeah, that's why i mentioned floating it, same as you. I thought position:fixed did about the same thing as absolute, except the "top" and "left" were from the page border, rather than the container. If position:fixed will allow the text to wrap, that's news to me, I'll have to try it :).
  • Huscurian
    Huscurian
    Posts: 3
    @Langy, thanks for the information. So what you are saying is create a class within the table(). By CSS standards, that means I have to create a list of classes, define them, and then use the # to tag the class. By then, I would have to start using that class in the parenthesis after the table. Am I reading this right or is Obsidian Portal different when it comes to coding?

    Thus far my web programming language(s) usually includes HTML 4.01, some CSS, a little of XHTML, and nothing more. Is there a web programming language that I am not aware of that the Portal uses?

    @gaaran, thanks for your input! :)

    Yes, I do have a link to what I'm trying to do, specifically the page where I am trying to create the border of the table, but make sure the border does not take up the whole page. I wanted the border to be on the right side, where it contains all the useful information in a brief manner while detailing the more meatier parts on the left, text wrapped around the table.

    Here's the link: http://www.obsidianportal.com/campaign/gregalion-1452-and-beyond/wikis/gregalion

    Keep in mind that this is a work in progress.
  • gaaran
    gaaran
    Posts: 740
    You could do something like:

    .table {
    position:relative;
    float:right;
    width:200px;
    top:10px;
    right:10px;
    margin:10px;
    }

    This will make the table 200px wide, on the right, 10px from the top and left of the container (campaign content), and the text should wrap around it. The only thing I'm not sure about is connecting the CSS to textile, I don't use textile. Also, for a class, it's formatted .class, # is for ids (i.e. #id).

    I think that should work, but I usually do all my coding by trial and error, and I haven't tried this :).
  • Langy
    Langy
    Posts: 364 edited August 2012
    Huscarian: That's about right. In order to add the class to the table in Textile (http://redcloth.org/hobix.com/textile/), just use something like this:

    table(class-name-here).
    | Table Starts Here | Continues|
    | More Cells | Ends Here |

    That table(class-name-here). part is what gives the table its class. Check out the textile reference for more info on things like that.

    If you aren't using the css implementation in OP, you can instead use:

    table{styling-goes-here}.
    | Table Starts Here | Continues|
    | More Cells | Ends Here |

    Put everything that you'd normally put in a style="" declaration in the 'styling-goes-here' part. So if you were trying to use style="float:right;color:red", you'd just put in table{float:right;color:red}.
    Post edited by Langy on
Sign In or Register to comment.

June 2024
The Planewalker’s Guild

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions