Some Help With Coding?

by macostello

Posted: 13 years ago 14 replies

WEB DESIGN

Hi Guys (again! :rolleyes

I have another question regarding this website that I am working on.

I'm using PageBreeze to create my webpages and in the 'Normal' view my images (resized and loading very quickly now!) are neatly positioned to the left together with the corresponding text. However, when I upload the page, my images become misaligned.

I have deleted some code yet when I hit return to make the space and move the image down, this code is created in the space between the images

</p>
<p align="left"><span
style="FONT-SIZE: 12pt; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; mso-fareast-language: EN-GB"><font face="Calibri"></font></span>

Is there a way that I can get my images to stay aligned yet not fill it up with lines of the code above?

Cheers,

Michelle

#coding #html editor #pagebreeze

andrejvasso 13 years ago

Michelle,

Were you using some kind of rich text editor and than simply pasted the stuff from there into a html file? Thats obviously not gonna work.

I am not sure what do you mean by "misaligned"? Can you maybe show us the actual page? My initial guess would be, that you have to set "float:left" to your images, but without seeing the actual page, its very very hard to tell what the exact problem is.

What i can tell you now is that the few lines of code, that you have posted, can be deleted. They are just a huge mess and dont do anything
- Thanks
- 1 reply
{{ DiscussionBoard.errors[3919556].message }}
- macostello 13 years ago
  
  Hi again Andre,
  
  I took out all of the code that I posted earlier together with all the images. I then realiagned the text to the left and then added the images back in. The HTML looks a lot cleaner.
  
  But here's where it gets funky! I previewed the page and it looked the same. I then uploaded it and the images were all over the place. When I checked back on my page editor preview they were out of line so I adjusted them in 'normal' so that everything was straight in preview.
  
  I then uploaded the page again and my images are still squiffy.....but everything is straight in my page editor in normal and preview view:confused:
  
  I've cleared my cache, viewed the page in different browsers but still get the same result. I am stumped!!
  
  Any help would be greatly appreciated - as you can see from the page the images etc are beginning to slow me down from finishing other things on it!
  
  Thanks Andrea,
  
  Michelle
  
  Self Help & Self Improvement Book Classics
  
  Thanks
  
  {{ DiscussionBoard.errors[3919669].message }}
andrejvasso 13 years ago

Heio,

Yeah this sounds like a usual problem that can be caused when editing html in "normal mode". I would highly suggest, to try to get used to the code itself and start editing it with a text editor. This way you can make sure it will look the same for all users/browsers..

Back to topic: The site doesnt look bad at all - from what I understand you would like to have all images on the left side? I have taken a look at the code and there is still a lot of unsused stuff, which will do nothing else than cause problems. (a lot of empty, unclosed tags).

In my opinion the most simple and best thing would be to create a table. I have created a small template of what it could look like:

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

As you can see in the "css box" on the top right says the following: width for images is auto and the description should start on the top. You can of course change these values. Additionally you can set the colors, font style etc.

Let me know if the helps you of if you want a non-table solution. Either way: delete the code that has been generated by your editor. its unusable!
- [ 1 ] Thanks
- 1 reply
{{ DiscussionBoard.errors[3919861].message }}
- macostello 13 years ago
  
  Andre you are a star!!
  
  On the way home from picking my son up from school, I actually thought the best way around the problem was a table and my next question was how - and you have given me the answer!!
  
  Quick question - is it a simple case of copying your table template into my HTML code and going from there or do I also have to add this to the CSS design? If it's a case of both, how do I go about that?
  
  Thank you
  
  Michelle
  
  Thanks
  
  {{ DiscussionBoard.errors[3920084].message }}

andrejvasso

13 years ago

Hey Michelle,

Yeah, you can copy and paste my given sample and than simply multiply following part:

Code:

<tr>
        <td class="book_image"><img src="http://livingyourlifetoday.com/TheKeyofLife/thePathToProsperity_t.jpg" /></td>
        <td class="book_description">James  Allen was one of the forefathers of the power of positive thinking. In  this book you will learn how to change your life through the way you  think.</td>
    </tr>

This is simply one table row containning 2 columns (image and description).

It should generally also work without the css snippet, but if you would like to add some custom style and/or set text-aligns etc. you have to use it like this:

Code:

.book_image{   /* the image wont need much styling*/
 width:auto; /* u can remove this or leave it (makes no difference) - if every image is the same size you can also set a fixed size here*/
}
.book_description{    /* the text styling... colors etc...*/
vertical-align:top; /* this makes text to start on top of the cell instead in the middle or at the bottom*/
}

Simply add this somewhere in your .css file and it should work fine.

Eidt: i just saw you are using a internal stylesheet, so instead of adding the snippet above into your .css file, you should add it in the head section within the <style> tags.

Thanks

{{ DiscussionBoard.errors[3920164].message }}

macostello 13 years ago

Andre,

I put the HTML code in and it sent my tables al over the place. I think I see now where I need to add the CSS coding you also created but want to be sure that I am putting it in the right place first.

From the coding I have c&p'ed below, where should it go?

Thanks,

Michelle

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Self Help & Self Improvement Book Classics</title>
<style type="text/css"><!--

/* Main Body Style */

body, td {

font-family: verdana, arial, tahoma, sans-serif;
color: #0A0A0A;
font-size: 15px;
}

/* Headline Tags H1 to H4 */

h1 {
letter-spacing: -1;
font-family: Impact, Verdana, Arial, serif;
font-size:30pt;
font-weight:bold;
text-align:center;
color:#ce0000;

}
h2 {
letter-spacing: -1;
font-size: 24pt;
font-weight: bold;
color: #222222;
font-family: Tahoma, Verdana, Arial, serif;
}

h3 {
letter-spacing: -1;
font-size: 14pt;
font-weight: bold;
color: #222222;
font-family: Tahoma, Verdana, Arial, serif;
}

h4 {
letter-spacing: -1;
font-size: 18pt;
font-weight: bold;
color: #ce0000;
font-family: Tahoma, Verdana, Arial, serif;
}

h5 {
font-size: 14px;
color: #222222;
font-family: Georgia, serif;
font-style: italic;
}

/* Highlighted Text */

.highlight {
font-weight: bold;
background-color: #f7f903;
}

/* Tables */

.table1 {
border-collapse: collapse;
border: 1px dashed rgb(169, 169, 169);
padding: 10px;

}

.table2 { border-collapse: collapse; padding: 10px; border: solid 1px silver; }

.orderform {
padding: 20px;
background-color: FFFFCC;
border-collapse: collapse;
border: dashed 3px red;

}

#boxed {
border: 1px solid #d8d3a3;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
box-shadow: 1px 1px 1px #eee;
-moz-box-shadow: 1px 1px 1px #eee;
-webkit-box-shadow: 1px 1px 1px #eee;
padding: 15px 15px;
background: #fdfce5;
}
- Thanks
{{ DiscussionBoard.errors[3920183].message }}

macostello

13 years ago

Hi Andre, I see that our messages crossed!

Thank you for letting me use your coding.

With the CSS coding on jsFiddle, will it work if I just use that exactly as you have it there?

Michelle

Thanks
1 reply

{{ DiscussionBoard.errors[3920194].message }}

andrejvasso

13 years ago

Originally Posted by macostello

Hi Andre, I see that our messages crossed!

Thank you for letting me use your coding.

With the CSS coding on jsFiddle, will it work if I just use that exactly as you have it there?

Michelle

Hei! Yeah i have just edited my reply as I have taken a closer look to your site.

Yes, add the snippet from jsfiddle inside the style tag and it should look the same. However, it can be that there are other css rules on your site that are causing problems, but by a quick look, i think it should work fine.

Let me know in case it doesnt look the same as on jsfiddle.

Thanks

{{ DiscussionBoard.errors[3920280].message }}

andrejvasso

13 years ago

I have to add another thing: it seems the css has been commented out...

I will try to make you a clean template, that looks like you want, but with a nice code. Give me 20 mins.

In the meantime you can try the following:

forget about the css, but change the following to my html table sample:

replace class="book_description" with style="vertical-align:top"

delete class="book_image"

Thanks
1 reply

{{ DiscussionBoard.errors[3920332].message }}

andrejvasso

13 years ago

There we go:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Self Help & Self Improvement Book Classics</title>
<style type="text/css">
body{
font-family: Verdana, Arial, Tahoma, sans-serif;
color: #0A0A0A;
font-size: 15px;
}
h1{
font-family: Impact, Verdana, Arial, serif;
font-size:40px;
font-weight:bold;
color:#ce0000;
}
h2{
font-size:25px;
font-weight:bold;
}
h3{
font-size:25px;
font-weight:bold;
color:#ce0000;
}
.wrapper{
width:960px;
margin:20px auto;
}
.left_section{
float:left;
width:600px;
}
.right_section{
float:right;
text-align:right;
width:300px;
}
.top_box{
height:40px;
line-height:40px;
margin:0;    
padding:5px;
background: #eee;
text-align:center;
font-weight: bold;
}
.book_image{
width:auto; 
}
.book_description{
vertical-align:top;
padding-left:5px;
}
.main_list{
padding:0;
margin-left:20px;
}
.main_list li{
padding:2.5px 0 2.5px 0;
}
.footer{
text-align:center;
color:#444;
}
</style>
<script type="text/javascript" src="http://forms.aweber.com/form/13/546298713.js"></script>
</head>

<body>
<!-- PAGE START --!>
<div class="wrapper">

<!-- RIGHT VIDEO AND BUY NOW SECTION START --!>
<div class="right_section">
<img src="http://livingyourlifetoday.com/TheKeyofLife/images/VideoScreen.gif" />
<br />
<br />
<img src="http://livingyourlifetoday.com/wp-content/uploads/2011/05/GetAccessNowRed.png" />
</div>
<!-- RIGHT VIDEO AND BUY NOW SECTION END --!>

<!-- LEFT MAIN SECTION START --!>
<div class="left_section">

<!-- TOP BOX START --!>
<div class="top_box">
awdwadwadwadw
</div>
<!-- TOP BOX END --!>

<h1>THIS OUR MAIN SITE HEADER AKA H1</h1>

<h2>Here we go againn with our second header aka h2</h2>

<p>Main text</p>

<br />

<!-- BOOKS TABLE START --!>
<table>
<tr>
<td class="book_image"><img src="http://livingyourlifetoday.com/TheKeyofLife/thePathToProsperity_t.jpg" /></td>
<td class="book_description">James Allen was one of the forefathers of the power of positive thinking. In this book you will learn how to change your life through the way you think.</td>
</tr>
<tr>
<td class="book_image"><img src="http://livingyourlifetoday.com/TheKeyofLife/thePathToProsperity_t.jpg" /></td>
<td class="book_description">James Allen was one of the forefathers of the power of positive thinking. In this book you will learn how to change your life through the way you think.</td>
</tr>
<tr>
<td class="book_image"><img src="http://livingyourlifetoday.com/TheKeyofLife/thePathToProsperity_t.jpg" /></td>
<td class="book_description">James Allen was one of the forefathers of the power of positive thinking. In this book you will learn how to change your life through the way you think.</td>
</tr>
<tr>
<td class="book_image"><img src="http://livingyourlifetoday.com/TheKeyofLife/thePathToProsperity_t.jpg" /></td>
<td class="book_description">James Allen was one of the forefathers of the power of positive thinking. In this book you will learn how to change your life through the way you think.</td>
</tr>
</table> 
<!-- BOOKS TABLE END --!>       

<br />

<h3>Download in an instant just about the best life changing literature that is available today!</h3>
<img src="http://livingyourlifetoday.com/TheKeyofLife/GuaranteeBox.png" />

<br />
<br />

<ul class="main_list">
<li>list point 1</li>
<li>list point 1</li>
<li>list point 1</li>
<li>list point 1</li>
<li>list point 1</li>
<li>list point 1</li>
<li>list point 1</li>
</ul>

<p>30 Days FREE access to the Key of Life Membership area saving you $30. From personal experience, changing and improving your life isn't just about reading a book and thinking that's it, I'm done. Development means constantly evolving with the Key of Life Membership Area developed to ensure that you do exactly that.</p>

<p><strong>Key of Life Membership area</strong></p>

<ul class="main_list">
<li>list point 1</li>
<li>list point 1</li>
<li>list point 1</li>
</ul>

<br />

<center>
<img src="http://livingyourlifetoday.com/wp-content/uploads/2011/05/GetAccessNowRed.png" />
</center>


</div>
<!-- LEFT MAIN SECTION END --!>

<br style="clear: both;" />
<br />
<br />
<br />

<!-- SITE FOOTER START --!>
<div class="footer">
footerfooterfooter
</div>
<!-- SITE FOOTER END --!>


</div>
<!-- PAGE END --!>
</body>
</html>

I didnt have much time to actually test it, but if i didnt do many mistakes this should be a template from which you can start from. I have tried to include your images and also +/- your page style.

Try to upload it and let me know what you want to change. When i got off work, i will be able to further assist you.

p.s. try not to edit too much using your editor, but rather try to edit the code directly - anyways I will be able to continue on this in a few hours!

Thanks

{{ DiscussionBoard.errors[3920572].message }}

macostello 13 years ago

Andre, I bow down before you!

And here's me thinking this was your job!

Anyway, I 'saved as' my page as a test and used your code. The video box/top table is slightly to the left meaning that H1 table is 3 or so inches down the page. I've looked to see if there is somewhere where I can change the table size but I can't see it. The stuff I've fiddled with only seems to change H1 table nothing else.

I'll continue to fiddle about in the meantime and will drop you a message if I have any success.

Thanks a bunch again - don't work too hard:p

Michelle
- Thanks
{{ DiscussionBoard.errors[3920818].message }}
macostello 13 years ago

Hi Andre,

Have got it sorted.

I used the table option within the page editor and everything is aligned straight and stays straight!

Thanks again for helping me out on that, but please don't waste any more of your time looking at this for me.

I'm sure I will speak to you tomorrow about something else!

Take care,

Michelle
- Thanks
{{ DiscussionBoard.errors[3921172].message }}
newbie365 13 years ago

To me it looks like just poor coding practice. You should avoid using your editor in design view as much as possible. Hand coding is much better as you wont be bombarded with EXTRA unneeded code. Also, align virtical top? Default IS top unless your working with tables and then its middle valine="top" and no need to align left either, default IS left. unless you have some broken tags somewhere.. which may be the cause of your frustration.
- Thanks
- 1 reply
{{ DiscussionBoard.errors[3921411].message }}
- andrejvasso 13 years ago
  
  @Michelle: Great to hear!! I am looking forward to hear from you tomorrow
  
  @newbie365: the valign top is there, because she is now using a table. The align left was neccessary before, because the whole code was a mess, but its getting better and I am sure Michelle is going to sort it all out now!
  
  Thanks
  
  {{ DiscussionBoard.errors[3921691].message }}

Some Help With Coding?

Trending Topics

Clickbank low cost recurring

Been a while! Any of you Old Timers here?

Boat and Jet Ski Rentals...... Door Hangers Effective?

How much does the rebranding affect CR ?

Are billboards still effective in driving customers?