Previous Topic Next Topic

Centering pictures with CSS (as opposed to inline)

Solved/Closed
BrianGreen Posts 1005 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 - Oct 6, 2015 at 02:15 PM
BrianGreen Posts 1005 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 - Oct 6, 2015 at 04:59 PM
Hi guys,

I wonder if you could give ma a hand with some coding I am trying to improve on for my website?

Below is (an extract) of my CSS stylesheet. It shows a "toolbar" on the right hand side of the screen and inside the toolbar are some links to other parts of the site.

Here's the CSS code: 

/* Right sidebar (Services)*/

#rightborder {width:197px; margin:0 4px 0 0; background:#00FFFF; float:right; color:#666; border-radius:20px;}

#extras {padding:10px 10px;}
#extras h2,
#extras h3 {margin:0px 0 12px 0; color:#606060; font-size:1.6em; font-weight:400; letter-spacing:-1px; text-align:left;}
#extras p {line-height:1.4em; margin: 0 0 15px 0; color:#000000; border-bottom:2px solid #ffffAA;}
#picplace {width:177px; margin-left:auto; margin-right:auto;}


And now the associated htlm ... 


<div id="extras">

	<h2><a href="backup.php">Data Backup</a></h2>
	<div id="picplace"><a href="backup.php"><img src="img/Backup.jpg" alt="Backup" width="91" height="74" /></a></div>
	<p>Remove the worry of losing data - even if your computer fails. Data backup or even whole system backup offer a painless way to recover from data loss. <a href="backup.php">Data Backup</a></p>

	<h2><a href="dataloss.php">Data Recovery And Data Transfer</a></h2>
	<div align="center"><a href="dataloss.php"><img src="img/Data.png" alt="Data" width="91" height="74" /></a></div>
	<p>In many cases we can recover data from your drives, even if it has been deleted, or your computer will not boot. <a href="dataloss.php">Lost Data</a></p>

</div>


As you will see in the html, I have tried to make the picture and associated link for "backup.php" in the center of the toolbar. It happens for the "dataloss.php", but I understand that it is bad practice to have the [align=center] in the main html and it is better in the CSS stylesheet.

What am I doing wrong please? Any help would be very much appreciated.

2 responses

Answer 1 / 2
BrianGreen Posts 1005 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 150
Oct 6, 2015 at 03:48 PM
The solution is [edit -] NOT found in the CSS stylesheet. The #picplace line [edit -] DOES NOT need to be the following ... 

#picplace {width:50%; margin: auto;}


Apparently it works if the div within the div (as this one is) has a width less than the parent div. The margin:auto forces both left and right margins to be the same.

I forgot to mention that Im using XHTML 1.0 Transitional.

Hope it helps someone else.

I really appreciate thank you messages as a payment for solving issues :o)
0
BrianGreen Posts 1005 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 150
Oct 6, 2015 at 04:22 PM
Oh dear - not solved at all ...

When I replace all 
<div align="center">
with 
<div id="picplace">
and then checking with w3.org and I get told that ... ID "picplace" already defined

What am I doing wrong please?
0
Answer 2 / 2
BrianGreen Posts 1005 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 150
Oct 6, 2015 at 04:59 PM
At last - all sorted ...

I needed to use a "class" instead of "id". To use the class selector in CSS I replaced the "#" with "."

The final code was ... CSS: 
/* Right sidebar (Services)*/

#rightborder {width:197px; margin:0 4px 0 0; background:#00FFFF; float:right; color:#666; border-radius:20px;}

#extras {padding:10px 10px;}
#extras h2,
#extras h3 {margin:0px 0 12px 0; color:#606060; font-size:1.6em; font-weight:400; letter-spacing:-1px; text-align:left;}
#extras p {line-height:1.4em; margin: 0 0 15px 0; color:#000000; border-bottom:2px solid #ffffAA;}
.picplace {width:177px; margin-left:auto; margin-right:auto;}


And the html was 

<div id="extras">

	<h2><a href="backup.php">Data Backup</a></h2>
	<div class="picplace"><a href="backup.php"><img src="img/Backup.jpg" alt="Backup" width="91" height="74" /></a></div>
	<p>Remove the worry of losing data - even if your computer fails. Data backup or even whole system backup offer a painless way to recover from data loss. <a href="backup.php">Data Backup</a></p>

	<h2><a href="dataloss.php">Data Recovery And Data Transfer</a></h2>
	<div class="picplace"><a href="dataloss.php"><img src="img/Data.png" alt="Data" width="91" height="74" /></a></div>
	<p>In many cases we can recover data from your drives, even if it has been deleted, or your computer will not boot. <a href="dataloss.php">Lost Data</a></p>

</div>
0

Similar discussions

Retrive deleted photos and videos
subu -
traktori -

1 response