?
Solved

Can you help debug my HTML?

Posted on 2012-08-30
11
Medium Priority
?
358 Views
Last Modified: 2012-10-22
I'm writing this in Wordpress and it's not coming out that great.  I feel like I'm using too many &nbsp and should be using something else.  You can see this page here.

<strong>We’re here to help you.  To get started, we need you to install a program on your machine that will let us access it.  Please follow these easy steps:</strong>

[dropcap]1[/dropcap]

Depending on what your computer is running, click on either the Windows or Mac logo below to download the TeamViewer QuickSupport software:
[clear][spacer]

<a href="http://www.teamviewer.com/download/TeamViewerQS_en.exe"><img class="alignleft size-full wp-image-408" title="windows" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/windows1.png" alt="" width="145" height="71" /></a>
&nbsp;

&nbsp;

&nbsp;

<a href="http://www.teamviewer.com/download/TeamViewerQS.dmg"><img class="alignleft size-full wp-image-409" title="mac" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/mac1.png" alt="" width="145" height="71" /></a>

&nbsp;

&nbsp;

&nbsp;


[dropcap]2[/dropcap]


When prompted, select “Save”. After it’s finished downloading, double-click the file to run it.

[clear][spacer]

[dropcap]3[/dropcap]

Once it’s running, you’ll see a window similar to the following.  Take note of the “Your ID” and “Password” fields (circled in red); we’ll need these pieces of information to connect to you:

<img class="alignleft size-full wp-image-410" title="TeamViewer" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/TeamViewer1.png" alt="" width="286" height="402" />

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

[dropcap]4[/dropcap]
Sit back and relax as we fix your problem.

[clear][spacer]

Open in new window

0
Comment
Question by:epichero22
  • 5
  • 2
  • 2
  • +2
11 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 38353112
What's wrong with it?
0
 
LVL 11

Author Comment

by:epichero22
ID: 38353149
Well, the thing is that I would rather start using better code.  What I wrote was what I felt is just slapping some tags together and not something strong.  Plus, you'll notice the number 4 is to the right of the graphic.  And the text for each number is aligned at the top of the respective number and not the center.
0
 
LVL 11

Author Comment

by:epichero22
ID: 38353206
Update: I turned off the alignment on the graphics and it seems to work better now.  But would there be a way to have the "Windows" and "Mac" graphics on the same line?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38353213
<style type="text/css">
.dropcap {
	float: left;
	color: #3043CA;
	padding-right: 8px;
	padding-left: 3px;
	font-family: Georgia;
	font-size: 50px;
	line-height: 100px;
	margin-top: -40px;
}
.center {
	text-align: center;
}
.center img {
	padding:15px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
p {
	min-height:55px;
	padding-bottom: 20px;
}
</style>
</head>

<body>

<p><strong>We’re here to help you.  To get started, we need you to install a program on your machine that will let us access it.  Please follow these easy steps:</strong> </p>

<p><span class="dropcap">1</span>Depending on what your computer is running, click on either the Windows or Mac logo below to download the TeamViewer QuickSupport software:</p>

<p class="center"><a href="http://www.teamviewer.com/download/TeamViewerQS_en.exe"><img class="alignleft size-full wp-image-408" title="windows" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/windows1.png" alt="" width="145" height="71" /></a> 


 <a href="http://www.teamviewer.com/download/TeamViewerQS.dmg"><img class="alignleft size-full wp-image-409" title="mac" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/mac1.png" alt="" width="145" height="71" /></a></p>


<p><span class="dropcap">2</span>When prompted, select “Save”. After it’s finished downloading, double-click the file to run it.</p>

<p><span class="dropcap">3</span> Once it’s running, you’ll see a window similar to the following.  Take note of the “Your ID” and “Password” fields (circled in red); we’ll need these pieces of information to connect to you:</p>

<p class="center"> <img class="alignleft size-full wp-image-410" title="TeamViewer" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/TeamViewer1.png" alt="" width="286" height="402" /></p>


<p><span class="dropcap">4</span>Sit back and relax as we fix your problem.</p>

</body>

Open in new window

0
 
LVL 11

Author Comment

by:epichero22
ID: 38353237
Padas,


That code made my entire page look completely funky.  There was text all over the place.  That was not helpful.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38353271
did you paste everything as is?  That was partial code. I left out the top.  Here it is live http://jsbin.com/exumip/1  I would add some more styling for the width or adding a container.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style type="text/css">
.dropcap {
	float: left;
	color: #3043CA;
	padding-right: 8px;
	padding-left: 3px;
	font-family: Georgia;
	font-size: 50px;
	line-height: 100px;
	margin-top: -40px;
}
.center {
	text-align: center;
}
.center img {
	padding:15px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
p {
	min-height:55px;
	padding-bottom: 20px;
}
</style>
</head>

<body>

<p><strong>We’re here to help you.  To get started, we need you to install a program on your machine that will let us access it.  Please follow these easy steps:</strong> </p>

<p><span class="dropcap">1</span>Depending on what your computer is running, click on either the Windows or Mac logo below to download the TeamViewer QuickSupport software:</p>

<p class="center"><a href="http://www.teamviewer.com/download/TeamViewerQS_en.exe"><img class="alignleft size-full wp-image-408" title="windows" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/windows1.png" alt="" width="145" height="71" /></a> 


 <a href="http://www.teamviewer.com/download/TeamViewerQS.dmg"><img class="alignleft size-full wp-image-409" title="mac" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/mac1.png" alt="" width="145" height="71" /></a></p>


<p><span class="dropcap">2</span>When prompted, select “Save”. After it’s finished downloading, double-click the file to run it.</p>

<p><span class="dropcap">3</span> Once it’s running, you’ll see a window similar to the following.  Take note of the “Your ID” and “Password” fields (circled in red); we’ll need these pieces of information to connect to you:</p>

<p class="center"> <img class="alignleft size-full wp-image-410" title="TeamViewer" src="http://www.redalertconsulting.com/wp-content/uploads/2012/08/TeamViewer1.png" alt="" width="286" height="402" /></p>


<p><span class="dropcap">4</span>Sit back and relax as we fix your problem.</p>

</body>
</html>

Open in new window

0
 
LVL 11

Expert Comment

by:mcnute
ID: 38353850
you can add a inline css to the paragraphs your using for the mac and windows graphics.

display:inline

Open in new window

add this to both paragraphs or just use divs instead of paragraphs and add this to the class of the divs or create a new one: .inlineimg {display:inline} and they'll be on the same line.

I would recommend you to use firebug add-on on firefox to see make live changes to your css and see the results. Speeds up developing so much!
Bildschirmfoto-2012-08-31-um-13..png
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 2000 total points
ID: 38354807
Two things:

Because you are using WordPress, you may have some issues with repeating spaces and line breaks in the visual editor.  If you want better representation of code in your posts and pages then I recommend you switch to the TinyMCE Advanced plugin and configure it to retain line breaks and spacing.  You also get a better HTML tab out of it than the default visual editor.  

On those same lines, for any solution above that uses CSS, add the CSS to style.css for your current theme to get it to work better.
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38377865
Do you still need assistance with this or did you get your question(s) resolved.  If you still need them resolved, I'll be glad to help.
0
 
LVL 11

Author Comment

by:epichero22
ID: 38415797
Actually, after some experimenting, I was able to make it look better.  It appears that what it really took was turning off the text wrapping in Wordpress.  But thanks for your help with this.


There is a question I did want to ask.  Take another look at the page:

http://www.redalertconsulting.com/get-computer-help-now/

Is there a way to vertically center the text that's to the right of the number buttons?  Right now it appears as though they're vertically aligned to the top.
0
 
LVL 11

Author Closing Comment

by:epichero22
ID: 38523669
That's correct, it was the visual editor.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

While Plesk offers many potential benefits to website administrators, including compatibility with Windows Server and other leading technologies, the company has also been working to differentiate it from other control panels for content management…
Ecommerce has truly become one of the most prosperous ways of monetizing your brand on the Internet. However, when it comes to it, auditing is undoubtedly the lifeblood of this type of business.  This article will help you to conduct your ecommerce …
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

616 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question