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!
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...
-
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
-
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.
-
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.
-
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:
And that's what I get:
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
-
How to start to start firefox on windows
How configure you Firfox to start upward when starting windows 10
-
How to not to let Firefox HTML5 mode full-screen with multiple monitors or a window manager tiles
Hello I'm using Firefox (v24.4.0 ESR) mode to fullscreen HTML5 with two screens or a tiling window manager. The problem is, every time the browser window loses focus, Firefox let full screen. It seems that it was possible to address this problem by s
-
Could not find a way to get rid of mysearchdial. no tab orange browser firefox so can't get to manage no Add ons and any program mysearchdial in the installed programs in Control Panel, so it is impossible to uninstall. tried to change the home page
-
Anyone know why I can't get sound, have a sound card, etc.
I need to be able to see if my system recognizes the soundcard, I get zippo and he can't understand why. Although not an expert Gerand I am very fluent unix and many years of experience with mid-range systems.
-
Computer laptop G62 won't boot disk boot
Need to recover the computer. I ordered a HP boot disk. The drive arrived and my laptop G62 reserve not boot disk. I checked the bios and it is configured to boot from the CD. I also started in safe mode and cannot locate an autorun exe when I st