Who's the WP theme.CSS guru around here?

**sarettah** · 03-21-2007, 08:39 PM

I am not a guru but

Code:

<style>

body {
   text-align : center;
   min-width : 500px;
   padding: 0;
   margin: 0;
   
}

DIV.main_page { 
  position:relative; 
  text-align: center;
  left:0px; 
  width: 500px;
  margin-left : auto;
  margin-right : auto;
}

DIV.main_head{
  text-align: center;
  display: table-cell;
  width:500px;
}

DIV.left_text{
  display: table-cell;
  text-align: left;
  width:500px;
 
}


</style>

</head>
  <body>
<br><br>
<div class="main_page">
<div class="main_head">
This text should be centered on the page<br>
</div>
<br>
<div class="left_text">
This text should be left aligned in center of page.<br> 
</div>
</div>
  </body>
</html>

example: http://www.bntnews.com/cssexample.htm

Hope that helps

**spacedog** · 03-21-2007, 08:53 PM

Originally posted by sarettah

I am not a guru but

Code:

<style>

body {
   text-align : center;
   min-width : 500px;
   padding: 0;
   margin: 0;
   
}

DIV.main_page { 
  position:relative; 
  text-align: center;
  left:0px; 
  width: 500px;
  margin-left : auto;
  margin-right : auto;
}

DIV.main_head{
  text-align: center;
  display: table-cell;
  width:500px;
}

DIV.left_text{
  display: table-cell;
  text-align: left;
  width:500px;
 
}


</style>

</head>
  <body>
<br><br>
<div class="main_page">
<div class="main_head">
This text should be centered on the page<br>
</div>
<br>
<div class="left_text">
This text should be left aligned in center of page.<br> 
</div>
</div>
  </body>
</html>

example: http://www.bntnews.com/cssexample.htm

Hope that helps

I understand that & question isn't about how to align the text.

I'm having issue with a conflict somewhere in either header.php or .css & whatever I try to center the 3 colums of blog end up centering the text as well even though the .css is coded for left text. I been going in circles with this for hours & for the life of me can't get all the files to co-operate.

I wish it was simple to code as in your example, but I'm referencing to a blog theme which is made of several different .php templates & somewhere there is a conflict.

anyway, here's the .css

Code:

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
	margin: 0;
	padding: 0;
}

body{
	font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
	font-size: 12px;
	text-align: left;
	vertical-align: top;
	background: #FF6600;
	color: #003300;
}

h1, h2, h3, h4, h5, h6{
	font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
	font-size: 14px;
}

a{
	text-decoration: underline;
	color: #fff;
}

a:hover{
	text-decoration: none;
}

a img, img{
	border: 0;
}

abbr, acronym{ border: 0; }

address, dl, p{ padding: 15px 0 0; }

blockquote{
	margin: 15px 0 0;
	background: #FFCC00;
	color: #fff;
}

blockquote p{ padding: 15px; }

blockquote blockquote{
	margin: 15px;
	background: #FFCC00;
	color: #fff;
}

code{
	background: #FFCC00;
}

dt{ font-weight: bold; }

dd{ padding: 0 0 0 15px; }

hr{
	clear: both;
	margin: 15px 15px 5px 15px;
	border: 0;
	height: 1px;
	text-align: left;
	background: #FFCC00;
	color: #FFCC00;
}

/* Modified image styles of WordPress Default Theme, Kubrick */

.entry img{
	border: 1px solid #FFCC00;
}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignright {
	margin: 5px 0 2px 7px;
	padding: 4px;
	display: inline;
}

img.alignleft {
	margin: 5px 7px 2px 0;
	padding: 4px;
	display: inline;
}

img.wp-smiley{
	border: 0;
	margin: 0;
	padding: 0;
	background-color: transparent;
}

.alignright {
	float: right;
}

.alignleft {
	float: left
}

/* end image styles */

small{
	font-size: 11px;
}

pre{
	width: 90%;
}

input, textarea{
	font-family: Arial, Helvetica, Georgia, sans-serif;
	font-size: 12px;
	padding: 2px;
}

input#s, input#author, input#email, input#url, textarea#comment{
	border: 1px solid #393939;
	background-color: #FF6600;
	padding: 3px;
	color: #fff;
}

input#author, input#email, input#url{
	margin: 0 5px 0 0;
}

#saranwrap{
	margin: 0 auto;
	width: 800px;
	text-align: left;
	vertical-align: top;
}

.airbubble{
	padding: 5px;
	background: #003300;
}

#header{
	width: 800px;
	height: 113px;
	background: #000 ;
	clear: both;
}

#header h1{
	padding: 35px 0 0 20px;
	font-family: Arial, Helvetica, Georgia, Sans-Serif;
	font-size: 36px;
	color: #fff;
}

#top-menu{
	padding: 11px 0 10px 0;
	background: #FFCC00 ;
}

#top-menu ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#top-menu ul li{
	display: inline;
	padding: 0 10px;
	font-family: Arial;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFCC00;
}

#top-menu a{
	text-decoration: none;
}

#top-menu a:hover{
	text-decoration: underline;
}

#banner{
	float: left;
	margin: 5px 0;
	width: 760px;
	height: 250px;
	overflow: hidden;
	background: #FFCC00;
}

#page{
	clear: both;
	float: left;
	width: 760px;
	background: #FFCC00;
	color: #FF6600;
}

.pagecap{
	padding: 19px 20px;
	font-family: Arial;
	font-size: 18px;
	background: #FFCC00;
	color: #fff;
}

#sidebar{
	float: left;
	width: 170px;
}

#sidebar ul{
	margin: 5px 5px 0;
	padding: 0;
	list-style-type: none;
}

#sidebar ul li h2{
	margin-bottom: 1px;
	padding: 11px 10px 10px;
	font-size: 12px;
	font-weight: bold;
	color: #FF6600;
	background: #FFCC00;
}

#sidebar ul ul{
	margin: 0;
	padding: 0 0 20px;
	background: #FFCC00;
}

#sidebar ul ul li{
	padding: 6px 10px 0 10px;
	font-size: 11px;
	line-height: 18px;
}

#sidebar ul ul ul{
	padding: 0;
	background-color: transparent;
	background-image: none;
}

.obar{
	float: left;
	width: 160px;
}

.obar ul{
	margin: 97px 10px 0 0;
	padding: 0;
	list-style-type: none;
}

.obar ul li#search{
	background-image: none;
	padding-left: 0;
}

.obar ul li#search input{
	margin: 0 0 5px;
}

.obar ul li h2{
	padding-bottom: 10px;
	border-bottom: 3px solid #FFFFFF;
	font-size: 12px;
	color: #000000;
}

.obar ul ul{
	margin: 0;
	padding: 0 0 20px;
}

.obar ul ul li{
	padding: 6px 10px 0 15px;
	font-size: 11px;
	line-height: 18px;
	background: url(images/bg-bullet.gif) 0px 13px no-repeat;
}

.obar ul ul ul{
	padding: 0;
}

.obar ul ul ul li{
	padding: 6px 10px 0 10px;
	background-color: transparent;
	background-image: none;
}

.narrowcolumn{
	float: left;
	margin-top: 5px;
	width: 581px;
	background: #FFCC00;
}

.narrowcolumn-footer{
	clear: both;
	width: 581px;
	height: 18px;
	background: #FFCC00;
}

.maincol{
	float: left;
	width: 421px;
}

.maincol-padding{
	padding: 10px 10px 0;
}

.maincol .site-title{
	padding: 10px 10px 8px;
	border-bottom: 3px solid #006600;
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	color: #006600;
}

.subscribe{
	margin: 0 0 1px;
	padding: 6px 10px 7px;
	border-bottom: 3px solid #fff;
	font-size: 11px;
	background: url(images/feed-icon.png)  10px 6px no-repeat;
}

.subscribe a{
	padding-left: 22px;
	color: #000000;
}

.post{
	margin-bottom: 10px;
	padding: 10px;
	background: #FFCC00;
}

.post h2{
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
}

.post h2 a{
	color: #000000;	
}

.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
	border: 0;
	padding: 15px 0 0;
	background: none;
}

.entry h1{
	font-size: 24px;
	font-weight: normal;
	line-height: 30px;
}

.entry h2{font-size: 14px;}

.entry h3{}

.entry  h4{ font-size: 16px; }

.entry h5{ font-size: 14px; }

.entry h6{ font-size: 11px; font-weight: normal; }

.entry{
	line-height: 24px;
	color: #000000;
}

.postmetadata{
	margin: 10px 0 0;
	padding: 6px 10px;
	font-size: 11px;
	line-height: 18px;
	background: #FFCC00;
	color: #000;
}

.postmetadata a{
	color: #FF6600;
}

.browse{
	padding: 0 10px;
	font-size: 11px;
	line-height: 18px;
	background: #FFCC00;
}

/* comments template */

.comments-template{
	margin: 10px 0 0;
	border-top: 1px solid #fff;
}

.comments-template ol{
	margin: 0;
	padding: 0 0 20px;
	list-style: none;
}

.comments-template ol li{
	margin: 15px 0 0;
	padding: 5px 0 15px;
	line-height: 24px;
	line-height: 24px;
	border-bottom: 1px solid #fff;
}

.commentmetadata{
	font-size: 12px;
}

.comments-template p.nocomments{
	padding: 0;
}

.comments-template textarea{
	width: 90%;
}

/* end comments template */

#footer{
	clear: both;
	width: 760px;
	padding: 5px 0;
	background: #FFCC00;
}

#footer p{
	margin: 0 5px;
	padding: 20px 10px;
	font-size: 11px;
	line-height: 18px;
	background: #FFCC00;
}

I've tried center tags, div, etc & all work but end up changing text with it at same time.. I'd like for the entire blog to be in center with the left align text, but am only able to get center/center or left/left but never center/left

**Sultry_Selenia** · 03-21-2007, 09:04 PM

I'm not exactly a css guru, but

Code:

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
	margin: 0;
	padding: 0;
}

What you want to do is seperate your text elements out from the body element so that you can define those seperately (like break off h1, h2, p, etc into their own section)

so would end up something like

Code:

h1, h2, p, etc etc {
margin: 0;
padding: 0;
text-align: left;

and you would put whatever styles you want to the body in a seperate section in the css.
and that way you're defining the alignment of the text elements completely seperate from the body or any other div.

And hopefully this makes some sort of sense, I know enough css to be dangerous, but not always enough to be completely clear haha

**sarettah** · 03-21-2007, 09:08 PM

Originally posted by spacedog

I've tried center tags, div, etc & all work but end up changing text with it at same time.. I'd like for the entire blog to be in center with the left align text, but am only able to get center/center or left/left but never center/left

That is what the double wrapper (body with text-align center and main_page with text_align center) takes care of.

I worked on this for a bunch of hours last week with a template, finally found the fix on a css board.

I only put up the basic part of it, but the double wrapper is key to it. After that was in place everything else worked fine. I had to mess a bit with moving stuff out of display:block and make them table-cell or inline and such.

The auto magins on the main_page wrapper are a key part too.

**Sultry_Selenia** · 03-21-2007, 09:09 PM

Ran out of edit time lol - but just on a quick rescan of your css, it looks like basically the only thing with an alignment value is the second body section. Chances are, everything else is just inheriting that value because they don't have anything specfiically set, unless I'm completely wrong about how this works (which I may be, css stumps the hell outta me sometimes).

**spacedog** · 03-21-2007, 09:15 PM

Thanks Tim from Xlabor

All fixed now..

**spacedog** · 03-21-2007, 09:19 PM

just read sarettah's & Sultry_Selenia's replies. .. thanks

Above was posted before reading.. tim from xlabor hit me up & we fixed it

**sarettah** · 03-21-2007, 09:45 PM

you're welcome

Glad you got it working

Who's the WP theme.CSS guru around here?

Who's the WP theme.CSS guru around here?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment