WordPress.org

1. bage1
   Member
   Posted 2 years ago #

   I have a problem aligning images, they are forced centered. example: http://scoute.org/blog/?p=285

   if I set the alignment in the image properties to left, the text goes next to the image to the right even though I want it under the image.

   here is my css:

   /*
   1. Universal Declarations
   2. Structure
   2.1. Header
   2.2. Content
   2.3. Comments
   2.4  Sidebar
   2.5  Footer
   3. Lists
   4. Headings
   5. Images
   6. Forms
   7. Page Specific
   8. Extras
   */
   
   /* Universal Selectors
   ----------------------------------------------------------------------------- */
   
   	*  {
   		margin: 0;
   		padding: 0;
   		/* Resets all margins and paddings on the page */
   		}
   
   	ul {
   		list-style-type: none;
   		}
   
   	* a:link, * a:visited, * a:hover, * a:active {
   		text-decoration: none;
   		color: #404040;
   		}
   
   	* a:hover {
   		cursor: pointer;
   		/* works well for onclick anchors */
   		}
   
   	:link img {
   		border: none;
   		}
   
   	* img {
   		border: none;
   		}
   
   	a img {
   		border: none;
   		}
   
   	:link img, :active img {
   		border: none;
   		}
   
   	.buttonAsLink{
   		font-family:       Verdana, Arial, Helvetica, sans-serif;
   		font-size:         10px;
   		color:             #404040;
   		background-color:  #FFFFFF;
   		font-weight:       bold;
   		padding:           3px 0;
   		border-width:      0;
   		cursor:            pointer;
   		width:             40px;
   		}
   
   /* Structure
   ----------------------------------------------------------------------------- */
   
   	html {
   		margin-bottom: 0.1em;
   		background: #fff;
   		}
   
   	body {
   		font-size: 62.5%; /* Sets the page font to 10px */
   		font-family: 'Verdana', Verdana, Arial, Sans-Serif;
   		text-align: left;
   		color: #000000;
   		}
   
   	.top {
   		background: #eee;
   		width: 100%;
   		padding: 10px 0;
   		border-bottom: 1px solid #000000;
   		font-size: 1.1em;
   		}
   
   	#wrapper {
   		width: 755px;
   		margin: 0 auto;
   		padding: 10px 0;
   		text-align: left;
   		font-size: 1.1em;
   		}
   
   	#header {
   		padding: 1px;
   		}
   
   	#main {
   		padding: 10px 0 0;
   		}
   
   	#content {
   		float:left;
   		width: 550px;
   		padding: 1px 0 15px;
   		border: 1px solid #fff;
   		}
   
   	#content.wide { width: 800px; }
   
   	#sidebar {
   		float: right;
   		width: 180px;
   		padding: 1px 0 5px;
   		border: 1px solid #fff;
   		}
   
   	#footer {
   		padding: 5px 0;
   		*padding: 5px 0;
   		/* IE6 and IE7 hack */
   		clear: both;
   		border-top: 1px solid #000000;
   		border-bottom: 0;
   		font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
   		}
   
   	/* Header
   	----------------------------------------------------------------------------- */
   
   		#header h1 a {
   			}
   
   		#header p.description {
   			font-size: 1em;
   			}
   
   		ul.mainmenu {
   			display: block;
   			overflow: auto;
   			height: 1%;
   			padding: 0 0 0 0;
   			border-bottom: 1px solid #ccc;
   			}
   
   		.mainmenu li {
   			float: left;
   			position: relative;
   			}
   
   		.mainmenu li a {
   			_width: 1%;
   			/* Or else IE6 does a crappy of job of displaying the menu */
   			height: 15px;
   			display: block;
   			padding: 5px 5px 0 10px;
   			}
   
   		.mainmenu li.home a {
   			padding-left: 0;
   			}
   
   		.mainmenu li a:hover {
   			text-decoration: underline;
   			}
   
   	/* Content
   	----------------------------------------------------------------------------- */
   
   		#content h2 a {
   			color: #000000;
   			font: 1.4em "Times New Roman", serif;
   			}
   
   		#content p a, #content .metadata a {
   			color: #8d857d;
   			padding-bottom: 2px;
   			border-bottom: 1px solid #ddd;
   			}
   
   		#content p a:hover, #content .metadata a:hover {
   			border-bottom: 1px solid #666;
   			}
   
   		#content p a:visited, #content .metadata a:visited {
   			color: #8d857d;
   			}
   
   		#content .date {
   			font: 1em/1em 'Verdana', Verdana, Arial, Sans-Serif;
   			color: #8d857d;
   			}
   
   		#content p {
   			font: 1em/1.2em 'Verdana', Verdana, Arial, Sans-Serif;
   			padding: 5px 0;
   			color: #000000;
   			text-align: left;
   			}
   
   		#content .post h3 {
   			border-bottom: 1px solid #ccc;
   			font: 1.2em "Lucida Grande", sans-serif;
   			padding-top: 15px;
   			text-transform: uppercase;
   			}
   
   		#content .entry {
   			padding-top: 10px;
   			width: 100%;
   			overflow: auto;
   			height: 1%;
   			}
   
   		#content .metadata {
   			font: 0.9em "Lucida Grande", sans-serif;
   			color: #8d857d;
   			display: block;
   			padding: 10px 0 40px;
   			}
   
   	/* Comments
   	----------------------------------------------------------------------------- */
   
   		.commentlist {
   			padding: 10px 0 30px 0;
   			}
   
   		.commentlist li {
   			background: url(images/dot.gif) bottom left repeat-x;
   			/* This fixes a Firefox / Safari bug where the bottom border sometimes shwoed up and sometimes didn't */
   			margin: 10px 0;
   			padding: 25px 0 10px 0;
   			list-style-type: none;
   			width: 100%;
   			overflow: auto;
   			height: 1%;
   			}
   
   		.comment_number a {
   			font: 3.2em Georgia, serif;
   			float: right;
   			padding-right: 10px;
   			color: #d6d6d6;
   			}
   
   		.comment_author {
   			font-size: 1.4em;
   			}
   
   		h3#respond {
   			display: block;
   			padding-top: 15px;
   			}
   
   	/* Sidebar
   	----------------------------------------------------------------------------- */
   
   		#sidebar ul li.side {
   			padding-bottom: 25px;
   			}
   
   		#sidebar div {
   			line-height: 1.4em;
   			}
   
   		#sidebar h2 {
   			display: block;
   			padding: 0 0 10px;
   			}
   
   		#sidebar ul li a {
   			line-height: 1.4em;
   			}
   
   		#sidebar ul li ul li ul {
   			padding-left: 15px;
   			}
   
   		#sidebar ul li ul li ul li ul {
   			padding-left: 30px;
   			}
   
   	/* Footer
   	----------------------------------------------------------------------------- */
   
   		#footer p {
   			line-height: 1.4em;
   			}	
   
   /* Lists
   ----------------------------------------------------------------------------- */
   
   	#content ul, #content ol {
   		line-height: 1.4em;
   		padding: 10px 0 10px;
   		}
   
   	#content ul li a, #content ol li a {
   		line-height: 1.4em;
   		}
   
   	#content .post ol {
   		padding-left: 25px;
   		*padding-left: 30px;
   		}
   
   	#content .post ul li {
   		padding-left: 20px;
   		background: url(images/bullet.gif) left left no-repeat;
   		}
   
   /* Headings
   ----------------------------------------------------------------------------- */
   
   	h1, h1 a, h1 a:hover, h1 a:visited, h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, h4, h4 a, h4 a:hover, h4 a:visited {
   		color: #000000;
   		font-weight: normal;
   		font-family: 'Trebuchet MS', Verdana, Sans-Serif;
   		}
   
   	h1 {
   		font-size: 1em;
   		}
   
   	h2 {
   		font-size: 1.6em;
   		}
   
   	h3 {
   		font-size: 1.4em;
   		}
   
   	h4 {
   		font-size: 1.2em;
   		}
   
   /* Images
   ----------------------------------------------------------------------------- */
   
   	#content img {
   		padding: 0;
   		border: 0;
   		max-width: 100%;
   		display: block;
   		margin: 0 auto;
   		}
   
   	#content img.none {
   		border: 0;
   		max-width: 90%;
   		margin: 0 auto;
   		}
   
   	#content img.wp-smiley {
   		border: 0;
   		padding: 0;
   		margin: 0;
   		display: inline;
   		/* For whenever one uses smileys in posts */
   		}
   
   /* Forms
   ----------------------------------------------------------------------------- */
   
   	.searchform {
   		width: 250px;
   		float: right;
   		text-align: right;
   		}
   
   /* Page Specific
   ----------------------------------------------------------------------------- */
   
   	.last_20 li {
   		line-height: 1.4em;
   		}
   
   	.archive_date {
   		width: 100px;
   		float: left;
   		}
   
   	/* This is if you use the current page-archives.php for your archives */
   
   	.pagetitle {
   		display: block;
   		padding: 0 0 60px;
   		}
   
   /* Extras
   ----------------------------------------------------------------------------- */
   
   	blockquote {
   		margin: 0;
   		padding: 0 0 0 25px;
   		background: url(images/quote.gif) top left no-repeat;
   		}
   
   	html>body blockquote {
   		background-position: 0 0;
   		}
   
   	.center {
   		text-align: left;
   		}
   
   	hr {
   		display: none;
   		}
   
   	.aligncenter {
   		display: block;
   		margin-left: auto;
   		margin-right: auto;
   		}
   
   	.alignleft {
   		float: left;
   		}
   
   	.alignright {
   		float: right;
   		}

2. viceng
   Member
   Posted 2 years ago #

   #content img {style.css (line 398)
   border:0 none;
   display:block;<<<<<--------should be display:inline;
   margin:0 auto;
   max-width:100%;
   padding:0;
   }

   hope this helps

3. bage1
   Member
   Posted 2 years ago #

   that did the trick, thanks!

Topic Closed

This topic has been closed to new replies.