Images and Text with HTML Options

[SomeDudeOnline]

First I'm sorry the code is a mess, I haven't organized the code I got from Tockify well and the other code I got from a client so I'm not sure what in it is nessecary.

What I am trying to do with a simple webpage is have an image on the left from Tockify with a image/video on the right. And I need the image on the right to have text above and below it. I also want to be able to adjust the height on the page of the image on the right.

I have attached an example of what I kind of want it to look like (now that I've posted this I can't see where the attachment is, hopefully it's there and I'm just blind). Except I would want the image and text on the right lower and more centered

Any help will be greatly appreciated. Thanks in advance.

Here is the code for the image on the left

<iframe class="tkf-em-cal" scrolling="no" width="400px" height="800px" frameborder="0"
style="border-width:0;background-color:transparent"
class="align-left"
src="https://tockify.com/em/cards" alt="">
<a href="https://tockify.com/cards">J&R Sports Cards Upcoming Events</a></iframe>

Here is the code for the image/video on the right

<td style="text-align: center;"><iframe
class="align-right"
src="http://breakers.tv/embed/video/jrsportscards?viewers=true&autoplay=true"
framespacing="0" frameborder="0" height="300" width="480" alt=""
</iframe></td>
</tr>
</tbody>
</table

This post has been edited by SomeDudeOnline: Mar 3 2014, 04:05 PM

[pandy]

No attachment.

About the markup snippets, the second one is part of a table. You'd better post the markup for the whole page together with any CSS you may have. If the page is on the web it would of course be even better if you could link to it.

[Christian J]

After you've uploaded an attachment you must insert it into a post as well.

[SomeDudeOnline]

After you've uploaded an attachment you must insert it into a post as well.

Thanks, I'm not sure how to do that. I click add this attachment. I'll look around and try to figure out what i missed though.

[SomeDudeOnline]

No attachment.

About the markup snippets, the second one is part of a table. You'd better post the markup for the whole page together with any CSS you may have. If the page is on the web it would of course be even better if you could link to it.

I don't have the page online because I'm experimenting with the html and css to see if I can build the site on my own (or on my own with forum help lol) before anything gets implemented. As for the attachment, I'm choosing the file and clicking add this attachment. I don't see anything else I can do with the attachment. How do I add it to the post?

Here is everything I've got for the StyleSheet. Again, sorry for the mess. And below that is my html file for the page.

@charset "utf-8";
/* CSS Document*/
/*Define the body element's color*/
body{

font-family:arial;
font-size:18px;
color:#FFFFFF;

background-image: url(http://i1374.photobucket.com/albums/ag439/SomeDude0nline/LeatherDark_zps546a354f.jpg);
background-size: cover;
}

#content {width: 500px;}

.align-left { float: left; }
.align-right { float: right; }

/*This section is for links*/

ul.navbar {
overflow:hidden;
margin: 0 auto;
padding: 0;
list-style-type: none;
width: 90%
}
li {
float: left}

a:link,a:visited
{
display:inline-block;
width:200px;
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:5px;
list-style-type: circle;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#000000;
}

a {
border: 3px outset;
padding: 2px;
text-decoration: none;
}
a:active {
border: 4px inset;
}

ul.b {
display: list-item;
list-style-type:circle;
overflow:none;
margin: 0;
padding:0;
}


a:link
{font-weight:normal; color:Navy}

a:visited
{font-weight:normal; color:White;}

a:hover
{font-weight:bold; color: Orange; font-variant:small-caps;}


/*This section is for a paragraph section*/
p {font-style:italic; font-size:18px;color:#FFFFFF}
p.small {line-height:75%}

white {color:#FFFFFF;}

h1:first-line {
font-family:arial;
font-size: 45px;
}
h2:first-line {
font-family:arial;
font-size: 20px;
}

/*This section is for the image's black border.*/
img {border-color: #000000; border:thick; border-style:ridge;}






Here is the HTML file for the page

<html>
<head>

<link rel="stylesheet" type="text/css"
href="stylesheet.css">
</head>
<body>
<p class="small" align="left"><img border="0" src="jr logo.jpg" width="300" height="150"
align="left" vspace="20" hspace="63"/>
<br/>
<br/>
<br/>
<br> Store Hours: Tuesday-Saturday 12:00 P.M. - 6:00 P.M.</br>
<br> Store Location: 1465 Mangrove Avenue - Suite A - Chico, CA 95926</br>
<br> Store Number: (530) 343-9341</br>
<br> E-mail Address: jrsports@pacbell.net</br></p>
<br/>
<ul class="navbar">
<a href="home.htm">Home</a>
<a href="products.htm">Products</a>
<a href="calendar.htm">Calendar</a>
<a href="Box.htm">Box Break Spots</a>
<a href="buying.htm">What We're Buying</a>
</ul>

<p>Breakers TV Channel</p>
<p><font size="6">Next Broadcast: March 10th</font></p>
<br/>
<br/>
<font size="6">We buy and sell all things sportscards</font></center>
<br/>
<iframe class="tkf-em-cal" scrolling="no" width="400px" height="800px" frameborder="0"
style="border-width:0;background-color:transparent"
class="align-left"
src="https://tockify.com/em/cards" alt="">
<a href="https://tockify.com/cards">J&R Sports Cards Upcoming Events</a></iframe>


<td style="text-align: center;"><iframe
class="align-right"
src="http://breakers.tv/embed/video/jrsportscards?viewers=true&autoplay=true"
framespacing="0" frameborder="0" height="300" width="480" alt=""
</iframe></td>
</tr>
</tbody>
</table>
<br><Breakers TV Channel</br>
<p><font size="6">Next Broadcast: March 10th</font></p>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>


</body>
</html>

This post has been edited by SomeDudeOnline: Mar 3 2014, 08:14 PM

[pandy]

OK, let's see. Do you want Store Hours and so on at the top with the menu below and then the calendar and the image below that? Or do you want it some other way?

Regarding attachments, when you've used the browse button and clicked Add this Attachment a new field appears. You have to click Add into Post in that field. Then the image will be inserted at the cursor in your post.

[SomeDudeOnline]

OK, let's see. Do you want Store Hours and so on at the top with the menu below and then the calendar and the image below that? Or do you want it some other way?

Regarding attachments, when you've used the browse button and clicked Add this Attachment a new field appears. You have to click Add into Post in that field. Then the image will be inserted at the cursor in your post.

Yes, sort of. Store Hours on top with the logo to the left and navbar below. Below the navbar I would like the calendar on the left side of the page, and the image/video on the right side of the page with "Breakers TV Channel" above it and "Next Broadcast: March 10th" beneath it.

As far as the attachment goes... I can't figure it out lol. I click "Add This Attachment" and the page acts like it refreshes and it shows "Choose File - No File Chosen" again I don't see any new fields. I'm using chrome....I can't imagine it not working because of chrome......but I have no idea why it's not working. Hopefully my answer to your question provides a clear enough picture though.

I've sort of got an idea of how tables work now so what I tried after posting this was this in the html file but "Next Broadcast: March 10th" isn't even showing up.


<html>
<head>

<link rel="stylesheet" type="text/css"
href="stylesheet.css">
</head>
<body>
<p class="small" align="left"><img border="0" src="jr logo.jpg" width="300" height="150"
align="left" vspace="20" hspace="63"/>
<br/>
<br/>
<br/>
<br> Store Hours: Tuesday-Saturday 12:00 P.M. - 6:00 P.M.</br>
<br> Store Location: 1465 Mangrove Avenue - Suite A - Chico, CA 95926</br>
<br> Store Number: (530) 343-9341</br>
<br> E-mail Address: jrsports@pacbell.net</br></p>
<br/>
<ul class="navbar">
<a href="home.htm">Home</a>
<a href="products.htm">Products</a>
<a href="calendar.htm">Calendar</a>
<a href="Box.htm">Box Break Spots</a>
<a href="buying.htm">What We're Buying</a>
</ul>


<br/>
<br/>
<center><font size="6">We buy and sell all things sportscards</font></center>
<br/>

<table>
<tr>
<td><iframe class="tkf-em-cal" scrolling="no" width="400px" height="800px" frameborder="0"
style="border-width:0;background-color:transparent"
class="align-left"
src="https://tockify.com/em/cards" alt="">
<a href="https://tockify.com/cards">J&R Sports Cards Upcoming Events</a></iframe></td>
<td> Breakers TV Channel</td>
</tr>

<tr>
<td></td>
<td style="text-align: center;"><iframe
class="align-right" Breakers TV Channel
src="http://breakers.tv/embed/video/jrsportscards?viewers=true&autoplay=true"
framespacing="0" frameborder="0" height="300" width="480" alt=""
</iframe></td>
</tr>

<tr>
<td></td>
<td>Next Broadcast: March 10th</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>


</body>
</html>






And This in the Stylesheet


@charset "utf-8";
/* CSS Document*/
/*Define the body element's color*/
body{

font-family:arial;
font-size:18px;
color:#FFFFFF;

background-image: url(http://i1374.photobucket.com/albums/ag439/SomeDude0nline/LeatherDark_zps546a354f.jpg);
background-size: cover;
}



table,th,td
{
border:none;
}

/*This section is for links*/

ul.navbar {
overflow:hidden;
margin: 0 auto;
padding: 0;
list-style-type: none;
width: 90%
}
li {
float: left}

a:link,a:visited
{
display:inline-block;
width:200px;
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:5px;
list-style-type: circle;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#000000;
}

a {
border: 3px outset;
padding: 2px;
text-decoration: none;
}
a:active {
border: 4px inset;
}

ul.b {
display: list-item;
list-style-type:circle;
overflow:none;
margin: 0;
padding:0;
}


a:link
{font-weight:normal; color:Navy}

a:visited
{font-weight:normal; color:White;}

a:hover
{font-weight:bold; color: Orange; font-variant:small-caps;}


/*This section is for a paragraph section*/
p {font-style:italic; font-size:18px;color:#FFFFFF}
p.small {line-height:75%}

white {color:#FFFFFF;}

h1:first-line {
font-family:arial;
font-size: 45px;
}
h2:first-line {
font-family:arial;
font-size: 20px;
}

/*This section is for the image's black border.*/
img {border-color: #000000; border:thick; border-style:ridge;}

[SomeDudeOnline]

Alrighty, I discovered that you can't attach an excel document. So I redid my example in Paint, saved is as a JPEG, and uploaded it. So ignoring the top part of the page (store info, logo, and navbar) this is sort of what I want it to look like when I'm done.

[SomeDudeOnline]

Ok, so i almost solved my issue. I used two tables next to each other. for some reason <tr>text</tr> <tr>video</tr> <tr>text</tr> didn't work so I did <tr>text</tr> <br>video</br> <tr>text</tr>

That almost gives me what I want but the second set of text isn't showing up after the video. I'm using iframe and that seems to be causing an issue because if I enter text anywhere after the video it won't show up. However, anywhere before the video it works fine. So I need some way to embed the video (which is a live feed) and be able to adjust its size without using iframe.

If anyone reading this can provide me that I would greatly appreciate it. Until someone responds I'll be looking on my own and if I find the solution I will let you know.

Below is my current code

<html>
<head>

<link rel="stylesheet" type="text/css"
href="stylesheet.css">
</head>
<body>
<p class="small" align="left"><img border="0" src="jr logo.jpg" width="300" height="150"
align="left" vspace="20" hspace="63"/>
<br/>
<br/>
<br/>
<br><b>Location:</b> 1465 Mangrove Avenue - Suite A - Chico, CA 95926</br>
<br><b>Hours:</b> Tuesday-Saturday 12:00 P.M. - 6:00 P.M.</br>
<br><b>Phone Number:</b> (530) 343-9341</br>
<br><b>E-mail Address:</b> jrsports@pacbell.net</br></p>
<br/>
<ul class="navbar">
<a href="home.htm">Home</a>
<a href="products.htm">Products</a>
<a href="calendar.htm">Calendar</a>
<a href="Box.htm">Box Break Spots</a>
<a href="buying.htm">What We're Buying</a>
</ul>


<br/>
<br/>
<center><font size="6">We buy and sell all things sportscards</font></center>
<br/>

<table style="float:left; width:500px;">
<tr>
<td><iframe class="tkf-em-cal" scrolling="no" width="400px" height="800px" frameborder="0"
style="border-width:0;background-color:transparent"
class="align-left"
src="https://tockify.com/em/cards" alt="Calendar">
<a href="https://tockify.com/cards">J&R Sports Cards Upcoming Events</a></iframe></td>
</tr>
</table>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<table style="float:left; width:500px;">
<tr>Breakers TV Channel</tr>
<tr>Next Broadcast is March 10th</tr>
<br><video width="480" height="300" controls> <source src="http://breakers.tv/embed/
video/jrsportscards?viewers=true&amp;autoplay=true" framespacing="0" frameborder="0" alt="">
</video></br>
<br>Next Broadcast is March 10th</br>
</table>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>


</body>
</html>

[SomeDudeOnline]

Ok, I figured it out. The issue wasn't the iframe tag the issue was the code I copied. It was functional but apparently it wasn't the original code for the video. So I copied the code for the original video and that seemed to fix the problem.

My new code

<html>
<head>

<link rel="stylesheet" type="text/css"
href="stylesheet.css">
</head>
<body>
<p class="small" align="left"><img border="0" src="jr logo.jpg" width="300" height="150"
align="left" vspace="20" hspace="63"/>
<br/>
<br/>
<br/>
<br><b>Location:</b> 1465 Mangrove Avenue - Suite A - Chico, CA 95926</br>
<br><b>Hours:</b> Tuesday-Saturday 12:00 P.M. - 6:00 P.M.</br>
<br><b>Phone Number:</b> (530) 343-9341</br>
<br><b>E-mail Address:</b> jrsports@pacbell.net</br></p>
<br/>
<ul class="navbar">
<a href="home.htm">Home</a>
<a href="products.htm">Products</a>
<a href="calendar.htm">Calendar</a>
<a href="Box.htm">Box Break Spots</a>
<a href="buying.htm">What We're Buying</a>
</ul>


<br/>
<br/>
<center><font size="6">We buy and sell all things sportscards</font></center>
<br/>

<table style="float:left; width:500px;">
<tr>
<td><iframe class="tkf-em-cal" scrolling="no" width="400px" height="800px" frameborder="0"
style="border-width:0;background-color:transparent"
class="align-left"
src="https://tockify.com/em/cards" alt="Calendar">
<a href="https://tockify.com/cards">J&R Sports Cards Upcoming Events</a></iframe></td>
</tr>
</table>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<table style="float:left; width:500px;">
<tr>Breakers TV Channel</tr>
<br/>
<br><iframe src="http://breakers.tv/embed/video/jrsportscards?viewers=true&autoplay=true"
frameborder="0" framespacing="0" width="480" height="300" /></iframe></br>
<br>Next Broadcast is March 10th</br>
</table>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>


</body>
</html>

[Darin McGrew]

Your table markup is broken. Our online validator (see the links at the top and bottom of this page) will report errors like that.

See our HTML reference for an explanation of correct table structure:
http://htmlhelp.com/reference/html40/tables/table.html

[pandy]

Yes, you can't put text or anything else (other than TD or TH) directly inside TR. In a table everything must go in TD or TR, content or tags matters not. Nothing can go between the elements that make up the table.

Like this.

<table>
<tr>
<td>
CONTENT AND OTHER MARKUP GOES HERE
</td>
<td>
CONTENT AND OTHER MARKUP GOES HERE
</td>
</tr>
</table>

Your image doesn't show the same content as your sample. The menu isn't there for example.

[SomeDudeOnline]

Yes, you can't put text or anything else (other than TD or TH) directly inside TR. In a table everything must go in TD or TR, content or tags matters not. Nothing can go between the elements that make up the table.

Like this.

<table>
<tr>
<td>
CONTENT AND OTHER MARKUP GOES HERE
</td>
<td>
CONTENT AND OTHER MARKUP GOES HERE
</td>
</tr>
</table>

Your image doesn't show the same content as your sample. The menu isn't there for example.

Thanks for the tips. I didn't know that. However, it was working the way I had it (not sure how or why) although I had to add in a bunch of &nbsp spaces to get the text to line up. So I did add in the td tags and it works much better.

As far as the sample goes, it was showing the desired content below the nav menu.

[pandy]

It probalably didn't work in all browsers.

To align thing with %nbsp; or BR tags is very fragile. Try to avoid that. There are always better ways.