CSS help needed - position tags/labels at top of page
Asked by Michelle Rau HP:

Hello, I need some CSS advice on how to position the page tags/labels plus the "edit labels" pencil at the top of each page instead of at the bottom.

We are using Confluence server 6.2.3. I am not a space admin, so user macros and changing global layouts aren't an option. I am a beginner at CSS, but learning.

**In wiki #1,** the former wiki admin added this to the stylesheet, along with some custom fonts and other styling:

```
/* make labels (tags) prominent */ 
div#main-content {margin-top: .75em;} 
div#labels-section:before {content:"Tags \00a0/ \00a0"; color:#3B73AF; float: left; margin-left:-3.25em;} 
div#labels-section {position: absolute; top: .75em; left: 1.5em; width: auto; margin-left:3.25em;} 
div#labels-section ul.label-list.label-list-right {text-align: left;} 
div.dialog-panel-body div.labels-editor {position: inherit; top: 0; left: 0;} 
div.labels-editor ul.label-list.label-list-right li.label-container:nth-child(2){margin-left: 0;} 
div.breadcrumbs-section {display:inline-table;}
```

This puts the page tags up above the breadcrumb, which looks okay on wiki #1.

![wiki1_tags.PNG](/t5/image/serverpage/image-id/39557iCB46F30FEFB81910/image-size/large?v=v2&px=999 "wiki1_tags.PNG")

**Wiki #2** does not have custom fonts or styling in its stylesheet.  
I tried to use the same css on wiki #2. (same confluence version, same wikispace, different wiki) I was able to do some minor positioning adjustments.

```
/* put labels (tags) at top of page instead of bottom */ 
/* set distance from top of page for Tags text */ 
div#main-content {margin-top: .10em;} 
/* set position from left margin */ 
div#labels-section:before {content:"Tags \00a0/ \00a0"; font-size: 12px; color:#brown; float: left; margin-left:-2.2em;} 
/* set distance from top of page for labels list */ 
div#labels-section {position: absolute; top: .10em; left: 1.5em; width: 50%; margin-left:3.25em;} 
div#labels-section ul.label-list.label-list-right {font-size: 12px; color:#brown; text-align: left;} 
div.dialog-panel-body div.labels-editor {position: inherit; top: 0; left: 0;} 
div.labels-editor ul.label-list.label-list-right li.label-container:nth-child(2){margin-left: 0;} 
div.breadcrumbs-section {display:inline-table;}
```

However, the original result was a "squashed" narrow area for the tags at the top of the page, which wrapped and obscured the breadcrumb nav, not good. When I tried to adjust the width of the tag listing, the tags stopped wrapping, but now the edit pencil is way, way to the right of the tag listing. I want it right next to the tag listing.

![wiki2_tags.PNG](/t5/image/serverpage/image-id/39560i7A9C3B957B1FD43E/image-size/large?v=v2&px=999 "wiki2_tags.PNG")  
Moving the edit tags pencil to the beginning of the line would be okay, but I am not sure how to do this.

Thoughts, help? Thank you.


Answers:
author: Michelle Rau HP
body: [@Stephen Sifers](/t5/user/viewprofilepage/user-id/2145523) Thank you for this input, it gave me the confidence to tinker more. I ended up removing the "Tags" text and the end result is simpler:

```
/* move title-heading down to make room for tags */ 
div#title-heading {margin-top: 15px;} 
 
/* put labels (tags) at top of page instead of bottom */ 
div#main-content {margin-top: .12em;} 
/* set distance from top and side of page for labels list and edit labels icon*/ 
div#labels-section {position: absolute; top: .30em; left: 3.0em; width:auto;} 
div#labels-section ul.label-list.label-list-right {font-size: 12px; color:#brown; text-align: left;} 
div.dialog-panel-body div.labels-editor {position: absolute; top: .10em; left: -2.2em;} 
div.breadcrumbs-section {display:inline-table;} 
```

And the appearance is much more satisfactory:

![Capture.PNG](https://community.atlassian.com/t5/image/serverpage/image-id/39790i2978E34E67D99278/image-size/large?v=v2&px=999 "Capture.PNG")I may attempt to put some "Add Labels" text at some point, but for now this is much improved over the starting point. Thanks again!


author: Stephen Sifers
body: Hello Michelle,

I am no CSS expert myself, but I do understand a bit as to how it functions and what items you can shift around. With this said, you have a solid start to your stylesheet, just a few items I would suggest editing. Example code here:

```
/* put labels (tags) at top of page instead of bottom */ 
/* set distance from top of page for Tags text */ 
div#main-content {margin-top: .10em;} 
/* set position from left margin */ 
div#labels-section:before {content:"Tags \00a0/ \00a0"; font-size: 12px; color:#brown; float: left; margin-left:-2.2em;} 
/* set distance from top of page for labels list */ 
/* Adjust width as well */
div#labels-section {position: absolute; top: .10em; left: 1.5em; width: 50%; margin-left:3.25em; width:500px;} 
div#labels-section ul.label-list.label-list-right {font-size: 12px; color:#brown; text-align: center;} 
div.dialog-panel-body div.labels-editor {position: inherit; top: 0; left: 0;} 
div.labels-editor ul.label-list.label-list-right li.label-container:nth-child(2){margin-left: 0;} 
div.breadcrumbs-section {display:inline-table;} 
/* move title-heading down */ 
div#title-heading {margin-top: 20px;} 
```

Example screenshot:

![image.png](https://community.atlassian.com/t5/image/serverpage/image-id/39699i31E115895D957454/image-size/large?v=v2&px=999 "image.png")

The following are edits that were made:

Adjusting labels to center align:

```
div#labels-section ul.label-list.label-list-right {font-size: 12px; color:#brown; text-align: center;}   
```

Width (set to 500px) was added to the end of this line

```
div#labels-section {position: absolute; top: .10em; left: 1.5em; width: 50%; margin-left:3.25em; width:500px;}   
```

Adjusted the title-heading top margin:

```
/* move title-heading down */  
div#title-heading {margin-top: 20px;}  
```

Please let us know if this works for you and you're able to accomplish your goal.

Regards,  
Stephen Sifers


Tags: confluence-server

server