Centreing a graphic within a variable width div

Hi
at the link below
http://www.system2security.co.uk/template.php
the header contains three graphics that I have placed in
individual div.
The page uses a flexible width and I need the centre logo to
be centred on
the page regardless of the page width.
I seem unable to acheive this, has anyone any sugestions?
thanks
Ian
[email protected]
http://www.edwards-micros.co.uk

Keep a back-up copy of your original file then try this
combination of
css for your 3 <divs>
div.img_1
float: left;
width: 180px;
div.img_2 {
margin: 25px 134px 0 182px;
text-align: center; }
div.img_3 {
float: right;
width: 134px;
Ian Edwards wrote:
> Hi
>
> at the link below
>
>
http://www.system2security.co.uk/template.php
>
> the header contains three graphics that I have placed in
individual div.
>
> The page uses a flexible width and I need the centre
logo to be centred on
> the page regardless of the page width.
>
> I seem unable to acheive this, has anyone any
sugestions?
>
> thanks
>
> Ian

Similar Messages

  • Variable Width profile for the brush tool keeps resetting

    This problem is baffling me. I'm fairly new to Illustrator so I would appreciate some help. I’m using Adobe Illustrator CS6 with a mouse rather than a pressure graphics tablet.
    When I create a stroke using the Paint brush tool I would like the stroke to contain a variable width profile. For example narrower at the beginning and end of the stroke but thicker in the middle. Now I can do this by selecting the line after I have made the stroke and choosing the Basic Brush Definition from the drop down list.  But if i try to draw a new line the settings are reset again.  I cannot create a variable stroke while creating the stroke. The brush definition keeps resetting to 5 pt Round and stroke width 1 pt. It would be much quicker if the stroke remained as a varying width profile as I created the strokes.
    I noticed the same problem with the blob brush tool except it's even worse. With the blob brush tool the stroke weight always resets regardless of whether or not I try to set a Variable width profile.
    I tried deselecting "New Art has Basic Appearance" mentioned on another forum but that didn't work.
    I know its possible because I’ve seen it done on this youtube video. http://www.youtube.com/watch?v=R5wW_65iAiU
    Notice the variable width profile is maintained as the artists draws. It doesn’t keep resetting.
    Thanks

    Just set the Colorization method of the new Brush to Tints or Tints and Shades from the dropdown in the lower right corner of the New Brush diaglo.

  • Equal spacing between the images of uniformed height but variable widths with AS3?

    I have to figure out how to insert images with variable width with equal spacing intervals.
    Here is where I got so far:
    function buildScroller(imageList:XMLList):void{
              trace("build Scroller");
              for (var item:uint = 0; item<imageList.length();item++) {
                        var thisOne:MovieClip = new MovieClip();
      var currentX = 90;
                        var spaceBetween = 20;
      var currentImageWidth = Number(imageList[item].attribute("width"));
    thisOne.x = currentX;
    thisOne.x = (currentImageWidth+spaceBetween)*item;
    I can see that my images are being spread out on the page and if I change the number in var spaceBetween it affects the spacing. However the spacing is not uniformed. I can not figure why. Perhaps because I can not properly retrieve the image widths from the xml file. I assigned a width in xml file in the following manner:
    <images>
    <image src="appThmb_imgs/A-illuminatorUpLit_xsm.jpg" title="UpDownGlowingVase" url="http://www.888acolyte.com" width="132"/>
    <image src="appThmb_imgs/ATI-1-bgpA_xsm.jpg" title="CoolingReflections" url="http://www.888acolyte.com" width="117"/>
    <image src="appThmb_imgs/ATI-2-zenC_xsm.jpg" title="OrchidsUnderGlass" url="http://www.888acolyte.com" width="263"/>
    <image src="appThmb_imgs/SilverBloom_RGB_xsm.jpg" title="SilverBloom" url="http://www.888acolyte.com" width="148"/>
    </images>
    they correspond to actual image width. I do however want them to be scaled at 50% of their actual width.
    Any ideas if I am missing a line of code or don't call out images properly?

    Thank You for your reply.
    I tried to implement it but images are still jambled together.
    Perhaps it has something to do with the fact that I specify the actual width of the image in the XML file but then define it as a scaled value in the code later on (11th line at the bottom of the code):
        mc.height = 110;
    This height definition will just give the width proportional to the height. Does it mean that I can not specify the height as it is?
    Also can be there a mistake in the XML file? I just assigned the width number as it is in pixels for each image. Here is an example:
    <images>
    <image src="appThmb_imgs/RosesGallasGalore_RGB_xsm.jpg" title="RosesGallasGalore" url="http://www.888acolyte.com" width="131"/>
    <image src="appThmb_imgs/SangriaBling_RGB_xsm.jpg" title="SangriaBling" url="http://www.888acolyte.com" width="233"/>
    <image src="appThmb_imgs/SilverBloom_RGB_xsm.jpg" title="SilverBloom" url="http://www.888acolyte.com" width="148"/>
    </images>
    There were no errors in the output or compiler errors tabs.
    Here is my code in its entirety:
    import com.greensock.*;
    import com.greensock.easing.*;
    //load xml
    var xmlLoader:URLLoader = new URLLoader();
    /////Parse XML
    var xmlData:XML = new XML();
    var xmlPath:String = "app_thmbs_imgsModfd.xml";
    xmlLoader.load(new URLRequest(xmlPath));
    trace("loading xml from: " + xmlPath);
    xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
    function LoadXML(e:Event):void {
              trace("xml load complete");
              xmlData = new XML(e.target.data);
              buildScroller(xmlData.image);
    /////Build Scroller MovieClip to Contain Each Image
    var scroller:MovieClip = new MovieClip();
    this.addChild(scroller);
    scroller.y = 30;
    /////Parse XML
    //build scroller from xml
              var spaceBetween:int = 20;
              function buildScroller(imageList:XMLList):void{
              trace("build Scroller");
              var nextX:int=spaceBetween; //not sure where you want to start;
              for (var item:uint = 0; item<imageList.length();item++) {
                        var thisOne:MovieClip = new MovieClip();
                        thisOne.x=nextX;
                        nextX=int(imageList[item].attribute("width"))+spaceBetween;
                        //outline
                        var blackBox:Sprite = new Sprite();
                        blackBox.graphics.beginFill(0xFFFFFF);
                        blackBox.graphics.drawRect(-1, -1, 124, 107);
                        thisOne.addChild(blackBox);
                        thisOne.itemNum = item;
                        thisOne.title = imageList[item].attribute("title");
                        thisOne.link = imageList[item].attribute("url");
                        thisOne.src = imageList[item].attribute("src");
                        thisOne.alpha = 0;
                        //Loading and Adding the Images
                        //image container
                        var thisThumb:MovieClip = new MovieClip();
                        //add image
                        var ldr:Loader = new Loader();
                        var url:String = imageList[item].attribute("src");
                        var urlReq:URLRequest = new URLRequest(url);
                        trace("loading thumbnail "+item+" into Scroller: " + url);
                        //assign event listeners for Loader
                        ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
                        ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
                        ldr.load(urlReq);
                        thisThumb.addChild(ldr);
                        thisOne.addChild(thisThumb);
                        //create listeners for this thumb
                        thisOne.buttonMode = true;
                        thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);
                        thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
                        thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
                        //add item
                        scroller.addChild(thisOne);
              trace("termination of build scroller");
    function clickScrollerItem(e:MouseEvent):void{
              trace("clicked item " +e.currentTarget.itemNum + " - visit url: " +e.currentTarget.link);
    function overScrollerItem(e:MouseEvent):void{
              trace("over"+e.currentTarget.title);
    function outScrollerItem(e:MouseEvent):void{
              trace("out"+e.currentTarget.title);
    function completeHandler(e:Event):void{
              //trace("thumbnail complete "+e.target.loader.parent.parent.title)
              TweenMax.to(e.target.loader.parent.parent, .5, {alpha:1});
              //size image into scroller
              resizeMe(e.target.loader.parent, 140, 105, true, true, false);
    function errorHandler(e:IOErrorEvent):void{
              trace("thumbnail error="+e);
    function resizeMe(mc:DisplayObject, maxH:Number, maxW:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
        maxH = maxH == 0 ? maxW : maxH;
        mc.width = maxW;
        mc.height = 110;
              mc.scaleX=mc.scaleY
              if (centerHor) {
                        mc.x = (maxW - mc.width) / 2;
              if (centerVert){
                        mc.y = (maxH - mc.height) / 2;

  • How to Include More Than One Font and Font Color Within a Fluid Grid Div Tag?

    Using CSS code, I can make all the words within a fluid grid div tag the same font, font size, and font color, but how do I make a few of the words different?

    You can style the basic text and heading selectors with CSS:
    p { }
    h1 { }
    h2 { }
    h3 { }
    h4 { }
    etc...
    And you can make classes:
    .red {color:red}
    .highlight {background-color:yellow}
    Then apply classes to your text or sections of it using the HTML properties panel.
    <div>
         <p>This is a default paragraph style.</p>
         <p class="red">This is red.</p>
         <p class="highlight">This is highlighted.</p>
         <p>Default style with <span class="red highlight">red, highlighted text</span> and normal text.</p>
    </div>
    Incidentally, this will work in any layout.
    How to Develop with CSS?
    http://phrogz.net/css/HowToDevelopWithCSS.html
    Nancy O.

  • What happens when the multiply effect is applied to both the object and the graphic within?

    Hi everyone,
    I could really use some help with this...
    I'm getting a booklet ready to be printed. Originally, half of the pages were to be printed on paper with a (physical) colour. For budget reasons however, I've now decided to print the paper colour, and have the content of the pages overprinted on the tint in the background, which I've applied to the pages in the background of an additional master page.
    When I set the objects to multiply, they blend with the background colour, which is the effect I'm looking for, as there would be no 'paper white' on the pages that I want to appear as though printed on coloured paper.
    There's something confusing me though; you can also set the graphic within the object frame to multiply. This makes the graphic appear darker, which I don't really understand, since there is no extra colour within the graphic that accounts for this. I've looked at the output in the resulting pdf, and it looks like it's not just an on-screen effect, but the extra amount of (in this case) yellow would also be visible in the printed result.
    Does anyone have an explanation for this? Please see the graphic for a visual example.
    Thanks in advance, kind regards
    Robbin

    Hi.
              Yes. There is a heartbeat mechanism between all cluster members so they detect when a
              member has left the cluster. The primary server recognizes when it's secondary server
              has failed, and then proceeds to search for another member of the cluster to make as
              it's new secondary.
              Regards,
              Michael
              David Whitehouse wrote:
              > I'm trying to figure out what happens when the server holding the replicated state
              > for an object fails.
              > Does the server with the primary object (or the replica-aware stub) recognize
              > the failure and select a new
              > server to hold the replicated state?
              >
              > For instance, Assume I have a cluster defined with three servers - 1,2,3 - with
              > an instance of object A on server 1
              > and the replicated state ino on server 2. What happens if server 2 fails? Is the
              > state now replicated to server 3?
              >
              > Thanks, David
              Michael Young
              Developer Relations Engineer
              BEA Support
              

  • How to delete variable width points?

    I've read a couple of methods for deleting variable-width tool points on a path (NOT path points or paths.)
    None of them work for me; is there some trick to doing it?
    I have read: A) Hover over the unwanted point (with var. width tool) and hit Delete and B)Select unwanted point with var width tool and hit delete.
    Both moves result in the entire path being deleted.
    thank you for any insight.
    w

    Yes that is how it works. Cclick to select after your icon changes (pointere with a  tilde ~)and delete. If you have only one variable width point, than it may have the appearance of the entire line getting deleted, try aon a path with 2 variable width point until you get the hang of this.

  • How can I turn off the variable width font when writing a message?

    I have set up my email message file to use Arial 14 font. When starting a message (either original or reply) it defaults to this font. However, if at any time I move the curser with the mouse, mouse pad, the end key or an arrow key to a location to the right or below the text already typed, it automatically changes to the "variable width" font.
    This requires me to manually change the font back to Arial, or backspace back to the last text typed with Arial Very, very annoying.

    Firefox doesn't do email, it's a web browser.
    If you are using Firefox to access your mail, you are using "web-mail". You need to seek support from your service provider or a forum for that service.
    If your problem is with Mozilla Thunderbird, see this forum for support.
    [http://www.mozillamessaging.com/en-US/support/] <br />
    or this one <br />
    [http://forums.mozillazine.org/viewforum.php?f=39]

  • Variable width layer for web use?

    Hi. I'm taking my very first shot at site building using Photoshop CS3, and finding it quite easy and useful in getting the exact look I want. There's just one remaining task....getting the background layer (just a plain solid color) to have a variable width for anyone using a screen res wider than 1024. Currently, if I look at the page on a larger screen, the color stops at 1024 and the space to the right is just plain white. I want that color layer to fill the browser window, no matter how wide.
    Do I need to somehow convert that layer to "CSS" (which I know nothing about) to get that variable width? Is CS3 capable of getting this result?
    [Before you reply...I realize that Photoshop is not the best tool for web design, but please don't suggest that I purchase new software or learn html. I am just building one site for my own personal use, and that's it. I'm not yearning for a career in web design, and once this site is done, I'll likely never do it again. Besides, this site is about 95% finished, and it looks beautiful...just the way I was hoping it would turn out. Once this last little detail is solved...case closed.]
    Many thanks!
    Fred

    Buko wrote:
    >Photoshop is an image manipulation application.
    It's also quite good at making photo-based web sites.
    The one I'm working on is gorgeous, and was a hell of lot easier to make than trying to learn html.
    >If you want to build websites use Golive or Dreamweaver.
    As I stated in my original post, I don't want to build web sites. I want to finish this one and that's it.
    Fred

  • How do I apply a brush or variable width profile to various length strokes without them scrunching?

    I am trying to achieve a hand drawn line effect with an illustration I am doing. I have built my art with the pen tool and have tried to apply both a custom variable width profile and a brush that I found online. They both look fine on the longer path segments, but they scrunch up on the shorter paths. Is there a way I can apply the brush or profile to all the paths and have the brush apply itself uniformly along the path for its length and then just stop rather than trying to fit the whole profile on the path no matter what length it is? I am using Illustrator cs6 on a mac with mavericks.
    Thanks for your help!

    Apply a default stroke. Delete the wdith profile and the brush
    Apply the effect "outline stroke"
    Apply the effect "Roughen" with small values.
    In the appearance panel "Roughen" needs to be below "Outline stroke"

  • I have a variable width circle, trying to figure out how to change start / finish thickness variance

    Hi all, 
    Just wondering how I do this and still be able to edit the start point / end point thickness?
    In this screen shot I am trying to get the start point (the thinnest point) a little thicker.
    Can I edit these variable width profiles or? Any other / better ways to do it?
    Any help would be great

    You need to use the width tool:
    The profiles are all just starting points.  Depending on how precise you need to be, you might need to cut the circle at that point so you can get at the thinner end of the line.  If you try while it's a circle, you can get pretty close, but the thicker end is over the thinner end. 
    If you need to cut it, (scissor tool, "c")  use the keyboard to move the thicker point out of the way, adjust the thickness with the width tool, and then move the point back. Marquee select them both with the direct select tool (Click and drag with the white arrow, "a") and "join" (command-J) them back together to make it a circle again.

  • Feathered edges on graphics within Keynote 6.1?

    Is there a way to create feathered edges on graphics within Keynote 6.1 without bringing it in from another program? I know I can use Photoshop or some other program to create the mask but it seems there should be an easy way to do this from within Keynote. It seems the only masking available has hard edges.

    Quicker, easier and better results in Photoshop.
    You could use borders but not very convincing, select the image then:   
    Format Inspector > Style > Border > line > then select a line type from the dropdown menu and reduce opacity

  • High speed variable width pulse generation

    I searched NI's website the best I could but could not find anything relating specifically to my question.
    I want to produce a pulse of variable width every 10 ms.  It seems
    the ideal way to do this is to specify a counter to count a certain
    number of ticks and then go negative when it's reached that
    number.  It's pretty easy to get the counter to do that, however
    the speed is an issue.  Is there any way to have the counter
    generate a different width pulse specified by an input number of ticks
    that can update every 10 ms.  Any resources to help me figure this
    out that you can suggest would help greatly.
    I have PCI 6229 card and if I can figure this out, I'll submit a real nice stepper motor control VI as an example.
    Thanks,
    Phil
    Message Edited by flip518 on 07-19-2005 12:10 PM

    Phil,
    It isn't possible to do deterministic pulse width modulation with you
    board, however, I can think of a couple ways to try to get close. 
    If you set your board up to do a continous pulse train generation, you
    have the ability through a DAQmx Channel Property Node to
    programmatically set the count registers to a different value.  In
    the loop that waits for the Stop button, you can set the Wait For Next
    Millisecond Multiple to be 10, and thus approximately every 10 ms you
    would change the count register.  You can change the frequency of
    the pulse three ways, by frequency and duty cycle, actual pulse high
    time and low time, or actual clock ticks for the high and low parts of
    the cycle.  The problem with this method is that since Windows
    isn't deterministic, plus you are writing over the PCI bus to the
    hardware, you are not guaranteed the accuracy of the 10ms loop.
    Attached is a VI that shows this -- it is modified from the Gen Dig
    Pulse Train-Continuous.vi example that ships with the NI-DAQmx driver.
    Doug M
    Applications Engineer
    National Instruments
    For those unfamiliar with NBC's The Office, my icon is NOT a picture of me
    Attachments:
    Software timed Pulse Width Modulation .vi ‏65 KB

  • Fixed & variable width national character set

    In its discussion of NCHAR and NVARHCAR2 datatypes, Oracle talks about fixed width and variable width database character sets. What are they?
    I think the concept of fixed length (i.e. NCHAR) and variable length(i.e. NVARCHAR2) types is a different thing. That I understand.
    From Oracle doc:
    'If the national character set of the database is fixed width, such as JA16EUCFIXED, then you declare the NCHAR column size as the number of characters desired for the string length. If the national character set is variable width, such as JA16SJIS, you declare the column size in bytes.'
    null

    Fixed width charactersets are those in which each character is defined by a fixed number of bits, say 7 or 8 or 16
    Variable width charactersets are those for which either 7 or 8 or 16 bits are used to save space. Let us say a character needs only 7 bits, then only 7 bits will be used in this case, and if another character needs 16 bits, they will be used.
    In fixed width all characters have same number of bits, so it has higher space requirement.
    These have nothing to do with char and varchar2 data types.....

  • Graphics placed in tables or divs?

    The html code that is produced by the SaveForWeb command in Pshop does it place graphics in tables or in divs?

    I don't user save for web and devices except for creating animated gifs. However I have see some help information about save for web where slices are involved and HTML code is generated for tables or CSS.
    http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7570a.h tml

  • Variable width profile

    Hello, I have a question about Illustrator. I'd like to have the 'variable width profile' in a separate window. I was wondering if this is possible? Thanks in advance

    It's in the stroke panel.
    But apart from that: no, not possible.

Maybe you are looking for