CSS Template Help Needed

MercyInReach

I am so stuck, I managed to figure out the background image, getting the middle section to be a transparent color, but now I am trying to figure out how to

1. get the icon and character/player name to be in the center

2. get the page links to be in the center

I am using the basic css code as a starting part; this is what I have so far:

CSS

Code:

 body { background-image: url("https://pixabay.com/get/57e2d54a4a52a814f6d1867dda6d49214b6ac3e45657724c732c7bd192/taj-mahal-1209004_1920.jpg");

 background-repeat: no-repeat;
  background-size: auto;
  background-attachment: fixed; }

#sitecontainer { width: 1100px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 40px; margin: 0 auto; background: hsla(0, 100%, 70%, 0.6);

#charheader .portraitcontainer { float: center; margin-center: 20px; margin-bottom: 20px; }

#charheader .portraitcontainer { width: 95px; height: 95px; }

#toolbar ul, #pagetabs { list-style-type: none; margin: 0; padding: 0; }

#toolbar ul li, #pagetabs li { display: inline-block; margin-center: 20px; }

#toolbar ul ul li, #pagetabs ul li { display: block; margin-center: 0; }

#toolbar ul ul li a, #pagetabs ul li a { display: block; padding: 5px 10px; }

#toolbar ul, #pagetabs { margin: 0; padding: 0; }

#alltabs { clear: both; }

#charheader a, #footer a { text-decoration: none; }

/* Styles for dropdown menus */
#toolbar ul#toolbar-dropdown-nav a, #charheader ul.nestedPages a { color: #0645AD; text-decoration: none; background: none; }

ul#toolbar-dropdown-nav, #charheader ul.nestedPages { background-color: #ffffff; border: 1px solid #666; }

ul#toolbar-dropdown-nav li, #charheader ul#pagetabs li ul.nestedPages li { width: 150px; text-align: left; font-weight: normal; }

#toolbar ul#toolbar-dropdown-nav .dropdown-hover, #charheader ul.nestedPages .dropdown-hover { background: #666; }

#toolbar ul#toolbar-dropdown-nav .dropdown-hover a, #charheader ul.nestedPages .dropdown-hover a { color: #ffffff; }

#charcontent { clear: both; }

#footer { padding: 20px 0; text-align: center; }

this is what it looks like right now

Image

Sanne Moderator

(Just a heads up, you can paste code using the [ code ] tags without spaces! That'll prevent formatting errors with smileys and the like too.

)

float:center; doesn't exist, float is meant to align an element left or right only. margin-center also doesn't exist, it's only margin-top, margin-bottom, margin-right and margin-left (or margin if you want to address all 4 sides at once). That's why this isn't centering. An easier way to center the image and character/player name is to address the #charheader ID and use text-align:center;

That should also center the links, since they're nestled in the #pagetabs element which is contained within the #charheader element. If the links still don't center correctly, try also addressing #pagetabs with the text-align:center; code.

Edit: Just to elaborate on my previous paragraph, the HTML structure can be seen here. If you tell #charheader to align its text content inside to the center, it will align both images and text for everything within #charheader, including all the elements inside it (.portraitcontainer, #characterName, #playedBy and #pagetabs)

Code:

#charheader, #pagetabs {
	text-align:center;
}

MercyInReach Topic Starter

Sanne wrote:

(Just a heads up, you can paste code using the [ code ] tags without spaces! That'll prevent formatting errors with smileys and the like too.

)

Fixed!

Gonna read through the info you put a couple times and hope it gets through my head...

Auberon Moderator

I've learned something new on this day! Thanks, Sanne.

Good luck with your template, Mercy. I really like the background you're working with.

Sanne Moderator

Okay I'm making a tiny bit of a mess here lol. You can load the default CSS which has a bunch of code that aligns everything into a default state. If you don't load the default CSS, you start with more of a blank slate.

In the event you DON'T load the default CSS, you only need this code:

Code:

#charheader {
	text-align:center;
}

In the event you DO load the default CSS, you will need to reset the existing float for the .portraitcontainer class. So your code will need both of these to center everything:

Code:

#charheader {
	text-align:center;
}

.portraitcontainer {
	float:none;
	margin:auto;
}

I've been editing this post a bunch of times because I keep mixing things up, I'm sorry! As it stands now, this is my final code suggestion.

You are on: Forums » Art & Creativity » CSS Template Help Needed

Moderators: Mina, Keke, Cass, Claine, Sanne, Dragonfire, Ilmarinen, Darth_Angelus