Member Avatar for The Imp 96

Hi, I have an issue where I have created some ".wrapper" classes (I think they are called!) but when trying to move an image in one of these, I am unable to, and I have not a clue why! Please could you tell me or at least give me some pointers!

Any help would be really appreciated, but you'll have to forgive my lack of knowledge in code (of any description) as I only started working with it this morning! So I will apologise in advance if there is a really simple solution!

(I am building the site on Adobe Dreamweaver CS6 if that is any help!)

(Please let me know if there is any information you need that I have not given)

Many thanks!

  • 3 Contributors
  • 11 Replies
  • 258 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by The Imp 96
Member Avatar for JorgeM

.wrapper is a not a specific type of object or standard. It is a user defined name for a class which is used to apply a set of styles to an HTML element.

What do you mean by "move an image in one of these"? That doesnt make sense or sound like anything that I can interpret for you.

Member Avatar for The Imp 96

Thank you for replying! I'm trying to post an image file on here of a screenshot, but its too big of a file, (its only 111 kb or something!) any idea of the maximum file size?

Member Avatar for JorgeM

I'm not sure what the restrictions are with regard to uploading images. You could also upload to an external site and provide the link in your post.

Member Avatar for The Imp 96 
<!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=utf-8" />
<title>Buntingford Community Choir</title>
<style type="text/css">

body {
    font: 100% Corbel;
    background: #FFF
    margin: 0;
    padding: 0;
    background-image: url(Buntingford%20Community%20Choir/Website/Community%20Choir/website%20background.jpg);
}
.wrapper #container {
    width: 780px;
    background: #FFF;
    margin: 0 auto;
    border: 0 px #FFF;
    text-align: left
}
.wrapper #logo {
    background: #C3D2DB;
    position: center;
    margin: 0 auto;
    padding: 0 100;
    }
.wrapper #maincontent {
    padding: 0 20px;
}
-->
</style></head>

<body class='wrapper'>

<div id="container">
    <div id="logo">**<img src="Buntingford Community Choir/Website/Community Choir/Communtiy Choir logo.gif" width="367" height="97" />**
    <!-- end #logo --> </div>
  <div id="maincontent">
    <h2>Welcome</h2>
    <p> The Buntingford Community Choir is a project that was started by Mandy and Gareth Wilson. It is a community choir in every sense, with the majority of its members coming from Buntingford and the surrounding villages (although some travel from further afield). It is open to all (aged 16 and over), there are no auditions, and there are no requirements to read music, all we ask for is your enthusiasm! </p>
    <p> The Choir sings a large variety of songs, based on popular music; musicals, jazz and swing.  The cost is £3 per session, but it is a not for profit organisation, with all the money going towards running the choir or is donated to local causes. </p>
    <!-- end #maincontent --> </div>
<!-- end "container" --> </div>

</body>
</html>

This is the code, I shall look for an external site to upload on! (The image I am trying to move is in bold.

Member Avatar for johny_mplayer

Hello The Imp 96!
I think the link is wrong. If the photo is in your server just replace the blanks with underscores. For example like this: Buntingford_Community_Choir/Website/Community_Choir/Communtiy_Choir_logo.gif and if the problem persists put the full path:
http://www.yoursite.com/Buntingford_Community_Choir/Website/Community_Choir/Communtiy_Choir_logo.gif
If the image is in another server or google just do: right click on the image and copy image location and then paste it the src="Your_image_path_here" or in the css file and delete those ** in front of the <img ....>

Edited by johny_mplayer because: forgot an underscore
Member Avatar for JorgeM

If you have spaces between characters, you would have to substitute the spaces for '%20' in the URL. It's easier to rename the files in this case.

Member Avatar for The Imp 96

I have tried to put the underscores into the code and the %20 but both of these break the imaghe route. And even when I do this, I cannot see how this will help me move the image so that it is centred on the page, rather than on the left hand side automatically. Is it the Ap Div I should be moving rather than the actual image? In which case I would surely need to change the CSS I created for it in the <head>?

Member Avatar for JorgeM

There are several ways to center the image. Here is one approach...change line #24 from position:center; to text-align:center;. That will center the contents of the div.

.wrapper #logo {
    background: #C3D2DB;
    text-align: center;
    margin: 0 auto;
    padding: 0 100;
    }

The position property does not accept a value of "center", nor is it used for centering elements.

Edited by JorgeM
Member Avatar for The Imp 96

Thank you so much!!!!! JorgeM you are brilliant! You have made my life so much easier now!

Your help has been brilliant!

Member Avatar for JorgeM

thank you, but i cant take that much credit though. I wish all my problems were that easy to solve. lol

Member Avatar for The Imp 96

Haha, believe me, if I could help I would, but after one week of working on code, I fear I would be as useless as a fish!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.