By dizzyone on

Hi there,

I am very much a newbie in css, but, having a go at it, so, here goes. Anyway, my problem is that I am trying to center my header image. I am trying to edit the css in Firebug - here's what happens :

I click on the arrow on the toolbar which says 'click on the element to inspect the image'
I hover and select the image and this is the css that appears highlighted :

<p class="rteleft">
<img style="width: 647px; height: 164px; " src="/sites/mysite/files/images/myimage.jpg" alt="">
</p>

Now I am stumped. I tried to change <p class="rteleft"> to <p class="rtecenter"> but no changes happen even though I clicked on 'changes' on the toolbar.

I know this is probably a small thing to all you experts out there, but, I am getting nowhere.

Please could you help me. As always, your help is much, much, appreciated. :)

Thanks a million.

Pam

⋅ Categories: Drupal 7.x

Comments

kostask’s picture

kostask commented

Try inserting code in code tags < code > so your code gets displayed properly.

If you want to center something with css, text-align:center; will do the job

Patroclas’s picture

Patroclas commented

1. we can't see the code in your original post so it's difficult to help with that.
2. You say you are editing in Firebug - that will only apply edits temporarily (it's to help you see how changes will appear) - you need to edit the actual css file that Firebug is showing you.
3. The correct way to centre an image in a div is something like...

.center-image{
width: 300px;
height: 200px;
margin-left: auto;
margin-right: auto;
}

The width and height should be the dimensions of the actual image.
The style '.center-image' should be applied to the image.

dizzyone’s picture

dizzyone commented

Thankyou Patroclas for your help.

I can see now that Firebug only lets you see the edit temporarily. I will try and look for the correct file to edit in Dreamweaver.

I have placed two items in my header (header image/superfish menu) which are all left aligned by default.

Only local images are allowed.

I think (please tell me if I am wrong!) that I have to either, find the correct default css file and change the header div to rtecenter, or, like you say, create a new div in the css file and do exactly what you say. Will keep on :)

Once again, many thanks for your help.

Pam

dizzyone’s picture

dizzyone commented

So Sorry Patroclas, but can I trouble you again. I have been trying to find out where to put your code. I realise that I have to change the width and height of my image but, I really do not know which css file to edit. I know it sounds dumb but I am at a loss where to put it. When I brought up firebug and clicked on inspect element, it highlighted this code on the right hand side, when i hovered over it, it shows the path to http://mysite:8082/sites/all/themes/bartikpam/css/bartikpam.css?lshnd4

and it says line 47

img {
outline: 0 none;
}

Do I need to put your code in my bartikpam.css somewhere? I am scared to touch it unless you walk me through it!

My bartik.css file (upto line 50) is as follows :

/* ---------- Overall Specifications ---------- */

body {
line-height: 1.5;
font-size: 87.5%;
word-wrap: break-word;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
a:link,
a:visited {
text-decoration: none;
}
a:hover,
a:active,
a:focus {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 1.0em 0 0.5em;
font-weight: inherit;
}
h1 {
font-size: 1.357em;
color: #000;
}
h2 {
font-size: 1.143em;
}
p {
margin: 0 0 1.2em;
}
del {
text-decoration: line-through;
}
tr.odd {
background-color: #dddddd;
}
img {
outline: 0;
}
code,

Fingers crossed that you can help me.

Thank you for your time.

Kind regards

Pam

dizzyone’s picture

dizzyone commented

Thank you so much for replying Kostask. I have been given two methods to center the image, so willl give both options a go. Off to get my head around css. Wish I had not bothered learning html!

Thanks, once again.

Pam

bofrost’s picture

bofrost commented

Please mark your topic as solved see: http://drupal.org/forum-posting#solved

dizzyone’s picture

dizzyone commented

Hello drupaldise

I logged back on to my dashboard to copy and paste a solution when I saw your post! Wow, I only left it for the weekend ;) Good to see that you are 'on the ball'!

I have not yet implemented the css to centre the image. I think I might be best trying panels as I have not got my head around css yet.

Pam

dizzyone’s picture

dizzyone commented

I have solved this by using panels. The way I did this was to add custom content using panels. I first had to download the wysiwyg and Tinymce module. After I configured wysiwyg in the configuration panel, I enabled the buttons so that I could add an image and centre the image. Works great.