Jump to content


Welcome to DBSTalk


Sign In 

Create Account
Welcome to DBSTalk. Our community covers all aspects of video delivery solutions including: Direct Broadcast Satellite (DBS), Cable Television, and Internet Protocol Television (IPTV). We also have forums to discuss popular television programs, home theater equipment, and internet streaming service providers. Members of our community include experts who can help you solve technical problems, industry professionals, company representatives, and novices who are here to learn.

Like most online communities you must register to view or post in our community. Sign-up is a free and simple process that requires minimal information. Be a part of our community by signing in or creating an account. The Digital Bit Stream starts here!
  • Reply to existing topics or start a discussion of your own
  • Subscribe to topics and forums and get email updates
  • Send private personal messages (PM) to other forum members
  • Customize your profile page and make new friends
 
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,177 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,610 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,177 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,177 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
  • 337 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.

D* | 2ea HR24-500





Protected By... spam firewall...And...