help with CSS

[niqaeli]

I'm trying to figure out what CSS I need to use to make the links list on my journal show up in the header above my entries instead of below them (as the wizard does not provide that as an option!). I'd also like to insert a character between the individual links.

I'm currently running 'Sunday Morning' w/ one column and a heavily colour-modified by way of the wizard version of the 'Light on Dark' theme, and some custom CSS I put together to via trial and error and going through the source and poking at things until they were doing what I wanted; I'm pretty hopeless at CSS in general!

Any help or links to resources that explain CSS in small words would be great. :D

The custom CSS I have on my style, for reference:

html body
{
padding-top: 90px;
margin-right: 0;
margin-left: 0;
}

.module-section-one ul {
color: #44cc44;

margin: 0;
margin-top: .5em;
padding: .25em;

list-style-type: none;
}

.module-section-one li a {
color: #006600;
line-height: 2em;
padding: .25em;
border: none;

}

#container {
width: 100%;
position: relative;
background: none;
}

.module-section-two li {
position: relative;
display: inline;
list-style: none;
}

.module-section-two ul {
margin: .5em;
}

Comments

[syntheid]

There's actually two one-column layouts for Sunday Morning:

1 Column (modules at bottom; no sidebar)
1 Column (modules at top and bottom; no sidebar)

If you use the second one, you can just say you want the link list in the "header" rather than the "footer" in the Modules section.

You... could do it with CSS, kind of like:

.one-column .module-section-two {
max-width: none;
position: absolute;
top: 225px;
width: 92.6%;
}

.one-column #wrap, .one-column #bottom {
margin: 400px 2em 0;
}

but if you do that, it's not going to be flexible, so if you add links, you're going to have to shift the entries down so you can see them, so it's probably easier just to use the wizard to shift it, since, after looking at your code, it looks like you're already on the right layout, you'll just need to tell the links list module to be in the other module section, and it should do it all for you, heh.

(Quick explanation: The actual positioning of the module container that your link list is currently in is below the entries in your layout. To get it to the top, I've basically just told it to take itself out of the order the html tells it to be in, and pin itself to the top. Which it does by kind of layering above the normally positioned elements, and the rest of the elements no longer know where it is. So you have to manually account for it and shift the rest of the page contents downward, so they're not being overlapped, but that means kind of guessing at how tall it's going to be, so if it shrinks or gets bigger, it won't be in sync any more. There might be a better way to do this, but I can't think of it right now.)

[samjohnsson]

Having tried, let me also say that pinning a module to the top of page messes with scrolling and links that direct you into the middle of a page (comment replies, etc). Switching the links module to the header in the second layout is going to be easier.

as for the symbol after the link:
.module-typelist li:after {
content: " | ";
}

should do it, and you can replace the piping with any symbol.

[niqaeli]

Awesome! Thank you. :)

[niqaeli]

*blinking* I'm apparently an unobservant twit because I totally did not register that second 1-column layout option. *uses!* Awesome.