Jump to content


Welcome to DBSTalk


Sign In 

Create Account
Welcome to DBSTalk, like most online communities you must register to view or post in our community, but don't worry this is a simple free process that requires minimal information for you to signup. Be a part of DBSTalk by signing in or creating an account.
  • Start new topics and reply to others
  • Subscribe to topics and forums to get email updates
  • Get your own profile page and make new friends
  • Send personal messages to other members.
 
Guest Message by DevFuse

Photo

A little HTML help anyone?


  • Please log in to reply
4 replies to this topic

#1 OFFLINE   Indiana627

Indiana627

    Hall Of Fame

  • Registered
  • 3,173 posts
Joined: Nov 18, 2005

Posted 26 October 2012 - 10:31 AM

I'm trying to get 2 pictures to both be right justified and have them lined up one under the other regardless of the viewer's screen size/resolution. I can get the top picture exactly where I want it, but I can't get the bottom picture to line up underneath the top picture and be right justified. I'm by no means an HTML expert, but can anyone help me out with this? Tried various web searches to no avail. Thanks.
Mark

"We named the dog Indiana."
Family Room: HR24-100; WD10EVCS 1TB drive in Antec MX-1; connected via HDMI to Denon AVR-2313CI; 5.1 setup with Boston Acoustics A250 fronts, A225C center, A25 surrounds, ASW650 sub; video to Sony 52W4100 via HDMI; hardwired to Linksys WRT54G
Bedroom: HR21-200 with AM21 & Philips PHDTV1 Antenna, HDMI to Dynex 32" TV; hardwired to Linksys WRT54G
(1) Slimline 3 LBN dish (2 lines direct to each HR2x. No multiswitch.)
D* since January 2003

...Ads Help To Support This SIte...

#2 OFFLINE   SayWhat?

SayWhat?

    Hall Of Fame

  • Registered
  • 5,414 posts
Joined: Jun 06, 2009

Posted 26 October 2012 - 12:06 PM

Need more input.

Is there anything else on the same lines as each picture? Text or anything to the left?

If not, you might try using a <br> or two between the image tags.

Otherwise, you might end up going with a table or DIV.
Help stamp out Twits and Twitterers!

HD, SchmacHD!! Just be glad you've got a picture at all.

#3 OFFLINE   Indiana627

Indiana627

    Hall Of Fame

  • Topic Starter
  • Registered
  • 3,173 posts
Joined: Nov 18, 2005

Posted 26 October 2012 - 12:23 PM

Yes there is text to the left of both pictures.
Mark

"We named the dog Indiana."
Family Room: HR24-100; WD10EVCS 1TB drive in Antec MX-1; connected via HDMI to Denon AVR-2313CI; 5.1 setup with Boston Acoustics A250 fronts, A225C center, A25 surrounds, ASW650 sub; video to Sony 52W4100 via HDMI; hardwired to Linksys WRT54G
Bedroom: HR21-200 with AM21 & Philips PHDTV1 Antenna, HDMI to Dynex 32" TV; hardwired to Linksys WRT54G
(1) Slimline 3 LBN dish (2 lines direct to each HR2x. No multiswitch.)
D* since January 2003

#4 OFFLINE   Indiana627

Indiana627

    Hall Of Fame

  • Topic Starter
  • Registered
  • 3,173 posts
Joined: Nov 18, 2005

Posted 26 October 2012 - 12:36 PM

And I want the text to flow under the 2 pictures too as there is more text than pictures on the page.
Mark

"We named the dog Indiana."
Family Room: HR24-100; WD10EVCS 1TB drive in Antec MX-1; connected via HDMI to Denon AVR-2313CI; 5.1 setup with Boston Acoustics A250 fronts, A225C center, A25 surrounds, ASW650 sub; video to Sony 52W4100 via HDMI; hardwired to Linksys WRT54G
Bedroom: HR21-200 with AM21 & Philips PHDTV1 Antenna, HDMI to Dynex 32" TV; hardwired to Linksys WRT54G
(1) Slimline 3 LBN dish (2 lines direct to each HR2x. No multiswitch.)
D* since January 2003

#5 OFFLINE   flexoffset

flexoffset

    Godfather

  • Registered
  • 336 posts
Joined: Jul 16, 2007

Posted 01 November 2012 - 02:14 PM

You mean like this?
I put the file up on my drop box.

http://dl.dropbox.co...pics/index.html

It is basically installing a container inside the paragraph and floating it right.

the relevant html is such
<body>
<header>
	<h1>Two Pics On The Right</h1>
</header>

<article id="main">

	<aside> <!-- you want to put this inside the area containing the paragraph text and it probably needs to come first -->
		<figure><img src="pic1.jpg"></figure>
		<figure><img src="pic2.jpg"></figure>
	</aside>
	
	<p>Lorem ipsum dolor...</p>
	
	<p>Nullam ac massa orci...</p>
	
	<p>Maecenas dolor odio, tempor at varius vitae...</p>

</article>
</body>

the relevant css is such:
html, body {
	width: 100%;
	margin: 0 auto;
	font-size: 62.5%;
	color: #000000;
	font-family: Helvetica, sans-serif;
	background-color: #dddddd;
}


h1 {
	font-size: 10em;
	text-align: center;
}
p {
	font-size: 2.2em;
	text-align: left;
	line-height: 2.2em;
	margin: 0 0 2% 0;
}


header {
	position: relative;
	float: left;
	width: 100%;
	background: #ffffff;
	padding: 2%;
}

article#main {
	width: 100%; /* this makes the text take up the entire browser width, effectively forcing wrap-around of the images to come later */
	position: relative;
	float: left; 
	padding: 2%; /* just to give a little breathing room from the edges of the browser window */
}

aside {
	width: 46%; /* this will set the image container to occupy 46% of the available browswer width */
	min-width: 15%; /* this sets a lower bounds on the width of the 'aside' portion of the page */
	margin: 0 2%; /* again, this is just to neaten things up. top-bottom is zero and left-right is 2% */
	position: relative;
	float: right; /* floating this so it sticks page right */
}

figure img {
	width: 100%; /* sets the image to use 100% of its size. original image is 400x600px */
	min-width: 10%; /* sets lower bounds to the image to keep it somewhat viewable */
	padding: 2%; /* pad all four edges of the images */
}

Edited by flexoffset, 01 November 2012 - 02:32 PM.

DirecTV | HR24-500 | HR24-500




spam firewall