Center the text and the image beside.

Hi, I managed to Center two pictures side by side very well with my old Web site page, but once I changed one of the images in text I can't line up side by side.

Old (image next to the image):

http://dkphotos.NET/about/about.html

New (text next to the image):

http://dkphotos.NET/AboutNew/about.html

Any help would be much appreciated.

HTML:

<! doctype html >

< html >

< head >

< link rel = "shortcut icon" href = "favicon.ico" > "

"< link rel ="icon"type =" image/gif"href ="... /... "/ animated_favicon1.gif" >

< title > on < /title >

< meta charset = "UTF-8" >

< link rel = "stylesheet" type = "text/css" href = "layout.css" >

<! - latest jQuery core library - >

" < script src =" http://code.jQuery.com/jQuery-latest.min.js ">

< /script >

"< script type =" text/javascript"src="//code.jquery.com/jquery-latest.js "> < / script >

"< script type =" text/javascript"src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js "> < / script >

"< script src="js/jquery-1.7.2.min.js "> < / script >

< style type = "text/css" >

< style >

body, td, th {}

do-family: "josefin-slab";

make-style: normal;

Police-weight: 400;

font size: 15px;

color: #444444;

}

/ * LINKS * /.

a {}

do-family: 'slab of Josefin;

font size: 15px;

Police-weight: 400;

text-decoration: none;

Color: #777777;

}

a: link {}

color: #444444;

make-style: normal;

Police-weight: 400;

Police-family: josefin-slab;

font size: 15px;

}

a: visited {color: #444444 ;}}

a: hover {color: #60baec ;}}

a: active {}

color: #444444;

make-style: normal;

Police-weight: 400;

Police-family: josefin-slab;

font size: 15px;

}

a: focus {color: #60baec ;}}

UL {}

list-style: none;

margin: 0;

padding: 0;

}

Li {float: right; padding-right: 30px}

body, td, th {}

Police-family: josefin-slab;

make-style: normal;

Police-weight: 400;

font size: 15px;

color: #444444;

}

Abu

{P1

Police-family: josefin-slab;

make-style: normal;

Police-weight: 400;

do-size: 18px;

color: #444444;

}

{P2}

Police-family: josefin-slab;

make-style: normal;

Police-weight: 400;

do-size: 18px;

color: #444444;

}

< / style >

< script type = "text/javascript" >

function MM_preloadImages() {//v3.0

var d = document; If (d.images) {if(!d.MM_p) d.MM_p = new Array();

var i, j is d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i <.) Length; i ++)

If (a [i].indexOf("#")! = 0) {d.MM_p [j] = new Image; d.MM_p [j ++] .src = a [i] ;}}

}

function MM_swapImgRestore() //v3.0 {}

var i, x = offline. MM_sr; for (i = 0; a & & I <.) Length & & (x = a [i]) & & x.oSrc; i ++) x.src = x.oSrc;

}

function MM_findObj (n, d) {//v4.01

var p, i, x;  if(!d) d = document; If ((p = n.IndexOf ("?")) > 0 & & parent.frames.length) {}

d = parent.frames [n.Substring(p+1)] .document; n = n.Substring (0, p) ;}

If (!) () x = d [n]) & & copyrights) x = d.all [n]; for (i = 0;! x & & i < d.forms.length; i ++) x = d.forms [i] [n];

for (i = 0;! x & & d.layers & & I < d.layers.length; i ++) x = MM_findObj (n, d.layers [i] .document);

If (! x & & d.getElementById) x = d.getElementById (n); Return x;

}

function MM_swapImage() {//v3.0

var i, j = 0, x, a = MM_swapImage.arguments; document. MM_sr = new Array; for (i = 0; i <(a.length-2); I += 3).

If ((x = MM_findObj (a [i]))! = null) {document. MM_sr [j ++] = x; if(!x.oSrc) x.oSrc = x.src; x.SRC = a [i + 2] ;}

}

< /script >

<!-the following script tag downloads a font of Adobe Edge Web server fonts to use in the web page. We recommend that you do not modify it.-->

< script > var __adobewebfontsappname__ = "dreamweaver" < /script >

" < script src =" http://use.edgefonts.NET/Josefin-slab:N1, N4:default.js "type =" text/javascript"> < / script > "

< / head >

< body >

< div class = "wrapOverall" >

< div class = 'container' id = 'headerContainer' >

"" "< div class ="header"> < a href ="... / Home/Home.html "> < img src =" images/Home - Page_03.png"width ="448"height ="69"class ="logo"id ="Logo"onMouseOver =" MM_swapImage ("Logo","' images/home_03-roll - over.png', 1) ' Mm_swapimgrestore" alt = "Dovydas Kaltanas" / > < /a > < / div >

< div class = "navMain" >

< div class = "navMain" >

< ul class = "navBar".

style = "width: 530px;" float: right; Police-weight: 400; Police-family: josefin-slab; make-style: normal; ">

< li > < a href = "Contact.html" > CONTACT < /a > < /li > ""

< li > < a href = "" > BLOG < /a > < /li >

"< li > < a href ="... / About/About.html "> ON < /a > < /li >"

< li > < a href = "" > PRICING < /a > < /li >

"< li > < a href ="... / Portfolio/Portfolio.html "> PORTFOLIO < /a > < /li >"

"< li > < a href ="... / Home/Home.html "> HOME < /a > < /li >"

< /ul >

< / div > <! - END navMain - >

< / div > <! - logo END - >

< / div > <!--END header-->

<! - MAIN CONTENT - >

< div id = "Container" >

< div id = "leftAbout" >

< p1 > text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text < / p1 >

"< p2 > < br / > < a href ="... / CurriculumVitae.pdf "> Curriculum Vitae < /a > < / p2 >"

< / div > < /p > < / div >

< p > < / p >

< p > < div id = "rightAbout" > < img src = "images/profile.jpg" width = "450" height = "736" > "

< p > < / p >

< / div >

<! - END MAIN CONTENT - >

< div id = "containerFooter" >

< div id = "Box1" style = "font family: 'Josefin slab'" >

< p > all content < span style = "do-size: 20px" > to </span > 2013 DKphotos < /p >

< / div > <!--end Box1 - >

< div id = "Box2" >

< p > < script type = "text/javascript" >

BeginOAWidget_Instance_2149022: #OAWidget

var urlToLike = ' http://www.facebook.com/DKphotos.net';

If (urlToLike == ") {}

urlToLike = window.location.href;

}

urlToLike = encodeURIComponent (urlToLike);

var font = encodeURIComponent ('arial');

document.write (' ' < iframe src = "http://www.facebook.com/widgets/like.php?locale=en_US & href = ' + urlToLike + ' & layout = button_cou nt & show_faces = false & width = 450 & height = 150 & action = like & font =" + police + & colorscheme = light"scrolling =" "frameborder ="0"allowTransparency ="true"style =" border: none; ") border-color: #ffffff; overflow: hidden; width: 450; height: 150 "(>< / iframe >') "

EndOAWidget_Instance_2149022

< /script >

< / div > <! - END fbLike - >

< / div > <!--end Box2 - >

<! - float clearing - >

< hr class = "compensation" / >

< / div > <! - end container - >

< / div > <! - END wrapOverall - >

< / body >

< / html >

CSS:

@charset "utf-8";

/ * CSS document * /.

{body

background - image: URL(images/bg_body.jpg);

background-color: #ffffff;

background-attachment: fixed;

background-position: top;

}

{.wrapOverall}

Width: 1920px;

display: inline;

}

IMG {border: 0 ;}}

{} ul.navBar

margin: 0px 0px 18px 0px;

padding: 0;

white-space: nowrap;

Width: 950px;

Overflow-x: auto;

Display: inline-block;

}

ul.navBar li {}

Display: inline;

}

{img.logo .header

float: left;

margin: 0px 15px 0px 15px;

}

. Container {}

min-width: 1050px.

}

#Container {}

do-family: Verdana, Arial, Helvetica, without serif.

border: 0;

Width: 900px;

Auto margin: 0; / * centered * /.

overflow: hidden; / * float containment * /.

}

#Container {}

Clear: both;

Width: 100%;

min-width: 900px;

}

#left {}

Width: 300px;

min-height: 550px;

margin-bottom: 200px;

border: 0;

/ * to reduce the float drop issues in IE * /.

dressing: break-Word;

left margin: auto;

margin-right: auto;

}

{#ContentBox1}

Width: 450px;

min-height: 550px;

margin-bottom: 200px;

border: 0;

/ * to reduce the float drop issues in IE * /.

dressing: break-Word;

left margin: auto;

margin-right: auto;

}

/ * Clear floats after boxes * /.

{.clearing}

Clear: both;

visibility: hidden;

line-height: 0;

font-size: 1px;

Display: block;

}

{#containerFooter}

Width: 100%;

min-width: 650px;

Max-width: 100%;

color: #444444;

make-style: normal;

Police-weight: 400;

Police-family: josefin-slab;

font-size: 15px;

text-decoration: none;

}

{#containerFooter}

Police-family: josefin-slab;

border: 0;

Auto margin: 0; / * centered * /.

overflow: hidden; / * float containment * /.

}

#Box1 {#Box2}

Width: auto;

min-height: 10px;

border: 0;

/ * to reduce the float drop issues in IE * /.

dressing: break-Word;

}

#Box1 {margin left: 8px; float: left ;}}

#Box2 {margin left: 20px; float: left ;}}

/ * Clear floats after boxes * /.

{.clearing}

Clear: both;

visibility: hidden;

line-height: 0;

font-size: 1px;

Display: block;

}

{#containerFooter}

Width: 100%;

float: left;

}

{#containerFooter}

position: fixed;

low:-145px;

z index: 500;

background-color: #FFF;

}

Across the width of the site is 1920px? It is far too broad.

anyway you can 'float' leftAbout and rightAbout containers if you want the text to the left of the image:

{#headerContainer}

overflow: hidden;

}

{#leftAbout}

float: left;

Width: 400 PX;

}

{#rightAbout}

float: left;

Width: 450px;

}

{#containerFooter}

Clear: both;

}

I leave you to ajdust the width of the text container - leftAbout

Tags: Dreamweaver

Similar Questions

  • To center the images...?

    Here's my problem.  I can't use the superior rule because I can't do the math.

    I want to center the image and text here.

    Here is a screenshot.  ignore the line down the "Center." It is not the Center.  I put it there usiing a rule of the hand directly on the screen.  Be nice. I'm a fool. Help out me?

    Don't forget: I can't do math!

    Screen Shot 2014-04-10 at 8.33.44 AM.png

    I am a little confused about what you're trying to Center, and what you're trying to Center on. If you are centering over the full page, there is a button for this in the dialog box align. If this isn't the case, draw a rectangle equal to the space that you want to Center in, then click on it once extra so it highlights as a key object. Centering then leave this object where it is, moving other itmes selected to align with him.

  • Center the image a click when the movieclip

    Need a big help guys...


    I'm new with flash, and I got a swf that contains the big picture it will resize better.


    When I double click on the image clicked position come to the center of the stage.

    I realized little by little, it zoom but image does not come to the central position.


    I have attached the FLA in it please give me a solution for it


    I used this script to zoom on double click and in bold letters 2 lines are on the position of the image.


    ////////////////////////////////////////////////////////////////////////////////////////// /

    imagePanel.onRelease = function()
    {


    If (lastclick - (lastclick = getTimer () + 500 > 0) {}
    var SF = Math.abs (imagePanel.loadTemp._xscale);
    If {(sf < 100)
    trace ("zoomIn");
    XSS var = imagePanel.loadTemp._xscale > 0? (1) : (-1);
    YSS var = imagePanel.loadTemp._yscale > 0? (1) : (-1);
    var SF = Math.abs (imagePanel.loadTemp._xscale);
    SF = 100;
    imagePanel.loadTemp._xscale = FS * xss;
    imagePanel.loadTemp._yscale = FS * YSS;
    imagePanel.refreshPane ();
    imagePanel.loadTemp._x = - (_xmouse) - 35;
    imagePanel.loadTemp._y = - (_ymouse) - 150;


    }
    else {}
    trace ("zoomOut");
    XSS var = imagePanel.loadTemp._xscale > 0? (1) : (-1);
    YSS var = imagePanel.loadTemp._yscale > 0? (1) : (-1);
    var SF = Math.abs (imagePanel.loadTemp._xscale);
    SF = best_fit;
    imagePanel.loadTemp._xscale = FS * xss;
    imagePanel.loadTemp._yscale = FS * YSS;
    imagePanel.refreshPane ();
    }
    }
    }

    ////////////////////////////////////////////////////////////////////////////////////////// ///////////

    Hi friend, just change with the following code in the zoom part

    //////////////Zoom In/////////////////////////////////////
    trace ("zoomIn");
                   
    perX var = (_xmouse - 10)/imagePanel.loadTemp._width * 100;)
    perY = var (_ymouse - 43)/imagePanel.loadTemp._height * 100;)
       
    XSS var = imagePanel.loadTemp._xscale > 0? (1) : (-1);
    YSS var = imagePanel.loadTemp._yscale > 0? (1) : (-1);
    var SF = Math.abs (content._xscale);
    SF = 100;
    Content._xscale = FS * xss;
    Content._yscale = FS * YSS;
    imagePanel.refreshPane ();
    ///////////////Zoom In ends////////////////////////////////////
    Position to center the image.
    It's part that I needed, when I click on the image, it cannot move the postion of the Center, please solve my problem.
    / * If (_xmouse<>
    imagePanel.loadTemp._x = - (_xmouse) - 35;
    imagePanel.loadTemp._y = - (_ymouse) - 150;
    }*/
       
    Agree var = imagePanel.loadTemp._width * (perX/100);
    var imagePanel.loadTemp._height = y * (perY/100);
       
       
       
    imagePanel.loadTemp._x = imagePanel.loadTemp._x - agree;
    imagePanel.loadTemp._y = imagePanel.loadTemp._y - y;
       
    imagePanel.loadTemp._x = - (_xmouse) - 35;
    imagePanel.loadTemp._y = - (_ymouse) - 150;

    The code that I had recently included is marked by red color.

    Please answer...

  • Center the image

    Hello, my question is: I need an image in the center of the screen, I have two monitors is 1024/768 and other 1280/1024 when I focus the image on a monitor that the other is off how do you center image so on each monitor the image remains in the center of the screen, thoes that have to do with the Relative and absolute thanks

    Thank you Murray ACE it works :)

  • Text and an image to enter a repeating text field?

    A user wants to add equations and text in a repeating text field in a table in a dynamic pdf document that was created with Adobe LiveCycle Designer 8.2.

    He would also be able to insert screen shot images in the same field.

    We don't think that this is possible, since different areas allow different input types. But we are in a hurry to do so. I am looking for a way to do it, or a definitive answer that it can be done with Adobe LiveCycle Designer.

    And of course, if this is the case, nobody knows how to create a pdf form that allows for the insertion of text and image in a field?

    Thank you and happy new year!

    Hello

    If you drag a subform on the page (not in the table) and then in this subform place an ImageField and a TextField. Configure these as you want them to appear in the table and the value of the subform a Flowed layout.

    Then copy the subform and paste it into the cell in the Table.

    To the user, it will appear as a textfield and a field of the image in the same cell.

    It should work, as we have done similar in the past.

    In regards to the screenshots, the ImageField object will only allow the user to click on it and go to the place where on their computer image file exists. Can't drag an image file and drop it on the ImageField in the PDF. Nor can paste you from the Clipboard into an ImageField.

    Hope that helps,

    Niall

  • Text and blurry images on new T410s

    I recently bought a T410s (2904-UGT) and converted the WinXP preinstalled Windows 7 according to the instructions.

    Text and graphics appear a little blurry compared to the other portable Win7 I have, which are crystal clear.

    I tried to use the ClearType tuner, which helps somewhat, but not satisfactory.

    I'm using 1280 x 800.

    Appreciate any help

    Thank you.

    I found the solution.

    I downloaded and installed the update for Intel HD Graphics driver for Windows 7 from Lenovo download site. Of course, this was not included in the CD of Win7.

    It's working perfect now

  • Center the image on stage

    Hello

    I created a rotating banner with images and wanted to increase the size of the stage, so I can put an image larger and opaque in the background and I turn the other images above it. When I did the biggest step and I have difficulties selecting other photos so I can Center on the scene. I was able to get the first image centered, but I only see the outline of the other images. I'm obvously as a novice at this so pointers would help. Owen

    Can you show a screenshot of what you see?  If you try manually at the center of things, the best way to do that is to use the selection tool and drag to surround/select all items you want cenetered.  Once they are selected, you can use the Panel line up to have all of the selected items of cenetered compared to the scene.

  • How to center the image using loadMovie?

    I am trying to load an image and Center it in a clip already on the scene.

    function loadImage() {}
    image_mc.loadMovie("fullImage/"+imageNum+".jpg");
    image_mc._x = Stage.width/2 - image_mc._width;
    image_mc._y = Stage.height/2 - image_mc._width;
    }

    I know it is something simple and there are forums dedicated to this topic, but I can't seem to view examples of code that use the helpers.

    Thanks in advance for your suggestions.

    You can't manipulate a dynamically loaded object until it has loaded, and the way to know that an object is loaded is to use the MovieClipLoader class with an event listener to detect when loading is finished.  The loadMovie function does not work with event listeners.

  • What software on your part that I have to buy, it will be content editing, add text and add images

    On my laptop I have Version Adobe Acrobat XI 11.0.09, and in it I make good use of two functions on PDF files open in the upper right tools, then add images and add text.

    Please tell me one of your software, I need to buy to replicate these two functions on a second laptop?

    Thank you

    Mike Addario

    512.919.0100

    I think Acrobat Standard XI should do. You can get it on the Page of Adobe products.

  • How to clear the text on the image

    Hello

    I have a screen with the background image (bitmap). I draw the text and other images on this background to aid graphics object and all looks ok when I show the screen - but only the first time because the next time background image is one containing all these designs on it.

    I would like to know if it is possible to erase these drawings, so next time I can use background image to draw top again?

    I use something like this:

    String fText = "Text";
    
    fBackground = Bitmap.getBitmapResource("background.png")
    
    fGraphics = new Graphics (fBackground );
    
    fvm1 = new VerticalFieldManager()
    {     
    
    public void paint(Graphics graphics)
    {
       fGraphics.drawText(fText, 0, 0);
    
       graphics.drawBitmap(0, 0, fBackground.getWidth(),  fBackground.getHeight(), fBackground, 0, 0);
    
       super.paint(graphics);
    }
    }
    

    Next time I want to draw text 'Text2' so I change variable fText to "Text2". How can I remove the 'Text' text before doing this?

    Thanks in advance.

    You really want to paint on the bitmap background to show change data.

    One of the most obvious solutions is to have fields for that--both the LabelField and RichTextField are good for displaying text, BitmapField is good to display bitmaps (use setBitmap to change the image), GaugeField is ideal for the indication of the percentage, etc..  Add the fields to your VerticalFieldManager, use the margins and the bits of style such as FIELD_HCENTER to space and position them the way you want and enjoy. When comes a new value to display, change the field matching and nullity. This is the right way to do these things.

    Of course-, since you seem to be attached to the use of the graphics directly - the quick and dirty approach is just to paint directly on the screen using the Graphics object passed in object.  Something like this:

    fBackground = Bitmap.getBitmapResource("background.png")
    
    // fGraphics = new Graphics (fBackground );
    
    fvm1 = new VerticalFieldManager()
    {     
    
    public void paint(Graphics graphics)
    {
       // fGraphics.drawText(fText, 0, 0);
    
       graphics.drawBitmap(0, 0, fBackground.getWidth(),  fBackground.getHeight(), fBackground, 0, 0);
       graphics.drawText(fText, 0, 0); // plus any other draws...
       super.paint(graphics);
    }
    }
    

    Of course, you must also override sublayout() to this VerticalFieldManager to properly define its dimensions.

    However, doing it this way is really strange. You must be something much simpler than a VerticalFieldManager to paint in it (expand, replace its layout() setExtent() correctly and his object to do any painting you need - do not call the super.paint (), it is abstract) or you add fields to it as usual and let the super.paint () do its job.

  • Try to line up and the image of the product turn to all air essentially uniform - what is the best way to do this in a jackpot?

    Hi all


    I recently did a photo shoot with about 150 different, but very similar products on a white background totally blown away. Each is turned a little differently and positioned slightly differently than others. I want all upward line them in the same place on the chassis so that when you view a catalog online page they appear uniform.


    What I come up with so far is to bring them into a photoshop file stacked in the layer, then slide guides where each corner should be (they are roughly square, but turned to a sort of diamond) and adjust each layer and turn to adjust. Subsequently I toggle visibility on each layer and save it in JPG format.


    Any thoughts on a better process? I have the creative suite together to work with.


    Thank you!

    Without some of the images to test, the following is offered as a possible solution that spin, align and Center the image. It's the strategy:

    Write an Action that will be:

    1. open the file and garbage of the lock.

    2 Cmd + click click the new layer in the layers panel to place a layer underneath the product.

    3. return to the upper layer and double-click it in the layers panel to bring up the layer Style.

    4. in the section mixture if at the bottom of layer Style, move left until that disappears white blown in the illustration the high gray-scale slider to the right page. (It will be the same for all).

    5 layer > merge down (image precision silhouette is now a single layer and has a transparent border)

    6 file > Automate > Crop and straighten photos (since the skin is transparent, it will turn the picture. Selection not required).

    7. save the file

    Then:

    Load files into a pile

    Choose all layers

    Select the Options toolbar move and align on the center vertical and horizontal (or low) of each image

    Save layers as files

  • Text and graphics within the anchored object

    Is it possible to combine text and an image into something anchored? I want to use subheadings (static) text with a graphic chip within a text column and then reflow in place when the text is changed.

    Cut the group to the Clipboard. Select the image to be anchored. Choose Edition > paste.

    Bob

  • How to reach the description of the image in a photo in e-mail

    When I attach a picture from a file of mine in an email (hotmail), how can I enter a description of the image beside or below the photo?  You can either

    attach photos and they line up at the top of the email, or you can get them as a sort of "scrapbook" now.  But I want to show the picture and then describe what

    PIC is from, etc.  Thank you.

    View all Windows Live and Hotmail questions in the appropriate forum found here:
    http://windowslivehelp.com/

  • Position of the image in the Bootstrap model "carousel."

    I thought I would take a shot to boot. There is a starter template in Dreamweaver that does more or less what I want. But I have a problem of tiny design that I can not really the solution. Maybe can someone help?

    I use the included slide show 'Carousel', but I don't think that the proportions of the image should be the same regardless of the size of the viewport. With a large window, I don't want the image in full height, I want not cropped. That's why I added a 'max-height' to the box containing the image. It works very well and the height of the image does never exceed my max value.

    But: the position of the image in the box limited height is not centered vertically. The image is cropped just at the bottom of the box, while I love to crop the top and bottom. I tried many ways to center the image but failed. Normally this wouldn't be a problem for me, but since I am changing the design to someone else, there seems to be something that I don't get.

    This is a simple example of site showing my problem: http://www.linnsideout.se/imgtest/

    That's what I want to with large windows:

    header-1a.jpg

    And that's what I get:

    header-1b.jpg

    Everybody out there is able to tell me the css tricks necessary to center the image vertically at the start of the crop box?

    The way you have the sample is the way it should work. It's because you used the fluid container. If you use just the containing class, you would have cut offs for each device. In this case, you can use the image just for this device.

    Take a look at the use of srcset to load the images. Take a look at the sensitive Images: If you are simply changing resolution, use srcset. | CSS-Tricks

  • How to set the text to the center of the image and keep it responsive

    Hi, I'm new in Muse so Hello everyone

    I created a large image and add the text object that I placed in the Center. I have setup the image and width sensitive.

    Keep what reduction in size of the sensitive image browser, but the text is now high position relative to the browser.

    My question is how do you tell the text object to hold the center of the image? (As rather pin to pin object browser)

    Thank you

    I found this one:

    Text the PIN in the center of the image when using fluid width

    He answered my question but not yet a reasonable solution. Muse should allow us to group objects even with width and high sensitive. Another way is to allow pin object to.

Maybe you are looking for