Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Css Trouble


  • Please log in to reply
4 replies to this topic

#1 spiritcloud

spiritcloud

  • Members
  • 69 posts
  • OFFLINE
  •  
  • Local time:03:40 PM

Posted 05 April 2006 - 03:40 PM

I'm having difficulties centering images or text horizontally with CSS. I don't remember it being an issue in the past, but...argh!

Any help is appreciated. I'm sure I'm just looking in the wrong place for the correct code, but I don't have time to look into it anymore.
Nobility is not a birthright--it is a way of life.

BC AdBot (Login to Remove)

 


m

#2 Andrew

Andrew

    Bleepin' Night Watchman


  • Moderator
  • 8,250 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:Right behind you
  • Local time:01:40 PM

Posted 05 April 2006 - 04:36 PM

Can you post the code you're using?

#3 nosnhoj#3

nosnhoj#3

  • Members
  • 245 posts
  • OFFLINE
  •  
  • Location:127.0.0.1
  • Local time:02:40 PM

Posted 07 April 2006 - 05:24 AM

The easiest way for images is this:

<div align="center">
<img src="image.gif" width="50" height="50" alt="description" />
</div>

It may not be feasible for many many images, but it works right in the html markup and can be styled accordingly in which ever your preffered method of coding your CSS. For other ways of positioning images, there are the "float:" tags, "background-image:" tags, "position:" tags and so on. These take a bit more knowledge for the correct usage, but offer lots of flexibility.

For centering text, try this:


<!--***********************This is the Doctype--Very important***************************-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">	  
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<link rel="stylesheet" href="3colhf.css" type="text/css" />
	<title>Untitled</title>
<style>
<!--
/**************************Here is the head style***********************/

h1 {
	color:#ffoooo;
	font: bold x-large "Times New Roman", Times, serif;
	text-align: center;
}

--></style>
</head>
<body><!--********************Here is the header placed cleanly in the body*****************-->
<h1>SOME HEADER TEXT</h1>
</body>
</html>

First off, get used to adding a doctype if you want search engine and user friendly markup. I myself prefer External Style Sheets, but adding your style in the "Head" of the page is by no means a bad thing, but there are many advantages to useing the styles externally. Text is the easiest and most flexible content type, because there are many ways to manipulate it to flow the way you want.

You could also align it like the image in the first example, but the whole point of CSS is to seperate the content from the layout. Paragraphs can also be styled in this sme fashion as I show in the 2nd example, as well as any other text that is not already in use.

Those are the basics, maybe you can post a link to the page in question or offer a bit of code as AA states above, and Im sure one of us can help you out.

Hope this helps,

nos :thumbsup:

Edited by nosnhoj#3, 07 April 2006 - 05:26 AM.

When I'm right, I'm right....
And when I'm wrong, I could have been right....
So I'm still right, cause I could have been wrong.

#4 spiritcloud

spiritcloud
  • Topic Starter

  • Members
  • 69 posts
  • OFFLINE
  •  
  • Local time:03:40 PM

Posted 10 April 2006 - 12:01 AM

I need everything to XHTML standards. I know align="center" still works with most browsers, but it is a deprecated code.

The text-align: center works great. I guess my problem is with images only, not text. Sorry for the mixup.

For anyone else watching this topic, look here for a CSS solution to center images that I came across:

http://www.maxdesign.com.au/presentation/center/

Thanks for your help and advice, nosnhoj and Andrew.
Nobility is not a birthright--it is a way of life.

#5 nosnhoj#3

nosnhoj#3

  • Members
  • 245 posts
  • OFFLINE
  •  
  • Location:127.0.0.1
  • Local time:02:40 PM

Posted 10 April 2006 - 08:11 AM

Hello,

Yes, using margin is a great way for making nice fluid resizable containers. That is all I seem to code anymore, especially 3-column, with a footer and a header. The rules of margin in CSS is much like the law of gravity, and if your base content uses margin, or not for that matter, then other elements start getting pushed around after adding new margin rules for content.

I have been using the method below for image layout, and I have grown fond of it.

<style>
<!--
#image {
   width: 200px;
   height: 100px;
   background: #fff url(image.jpg) top left no-repeat;
   }
#image span {
   display: none;
}
-->
</style>

<body>
<div>
	<h3 id="image"><span>Description Goes Here</span></h3>
</div>
</body>


This gives alot of versitility to the placement of images, using the basic CSS terms without having to commit to using margins. Also, the search engines can now read the text that is in place of what once was an image file, and to top it off, people with disabilities get the text read back to them and those who turn off images, can read the description instead of seeing a blank placeholder or whitespace.

It also validates using the XHTML Strict doctype.

Hope this helps

nos :thumbsup:
When I'm right, I'm right....
And when I'm wrong, I could have been right....
So I'm still right, cause I could have been wrong.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users