Sharkadder
03-05-2007, 09:35 AM
Hi, for an intro page i am trying to get a <DIV> tag and an <img> tag to show on the same line and i cannot get it to work.
my code is as follows:
<p><div style="display:inline" id="matrix">Sharkadder
Software</div><br>
<a href="http://sharkadder.com/mark/menuexample.html"><center>
<img src="/mark/htmlenter.jpg"style="padding:5px;border:5px solid white;
width="250" height="200"/></a> </center></p>
gil davis
03-05-2007, 09:58 AM
I was going to suggest using "float: left" on the DIV. But you have a <br> after the DIV that would result in the IMG going to the next line, and the <CENTER> tag will also make the IMG go to the next line. You'd have to take those out too.
<div style="float: left">This is text</div><img src="whatever">
Sharkadder
03-05-2007, 12:15 PM
it doesnt work, the <br> is taken out and still it shown on line underneather.
before i used center and just closed it after the second image but since im using DIV it doesnt seem to want to stay on same line.
i have tried float:left and all it does is go to the left with the image underneath.
any other suggestions?
gil davis
03-05-2007, 01:05 PM
"Draw" a picture of what you are trying to accomplish and post it here, along with the code from your last attempt.
Sharkadder
03-05-2007, 01:40 PM
ok below is my code from the last attempt, please note what is before the body tag is irrelivant, the java script what is in the head is what the matrix id within the body does but the code i am trying to get to appear on same line is written in the body.
<html>
<head>
<TITLE>Sharkadder Software,moto gp,Fast Food Fighter and Games Creation</TITLE>
<META name="description" content="Sharkadder,motogp,Fast Food Fighter,moto gp,Games,software Creation,Game Leagues and games downloads">
<META name="keywords" content="Sharkadder,Sharkadder Software,FPS,Games,Software,game leagues,DarkBasic,Game Maker,Games Creation,Dark Basic,Game Downloads,downloads">
<style type="text/css">
.matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:10px; padding:0px; margin:0px;}
</style>
<script type="text/javascript" language="JavaScript">
<!--
var rows=11; // must be an odd number
var speed=50; // lower is faster
var reveal=2; // between 0 and 2 only. The higher, the faster the word appears
var effectalign="default" //enter "center" to center it.
var w3c=document.getElementById && !window.opera;;
var ie45=document.all && !window.opera;
var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() {
if (!w3c && !ie45) return
var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];
ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
ma_txt=" "+ma_txt+" ";
columns=ma_txt.length;
if (w3c) {
while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
ma_tab=document.createElement("table");
ma_tab.setAttribute("border", 0);
ma_tab.setAttribute("align", effectalign);
ma_tab.style.backgroundColor="#000000";
ma_bod=document.createElement("tbody");
for (x=0; x<rows; x++) {
ma_row=document.createElement("tr");
for (y=0; y<columns; y++) {
matemp=document.createElement("td");
matemp.setAttribute("id", "Mx"+x+"y"+y);
matemp.className="matrix";
matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
ma_row.appendChild(matemp);
}
ma_bod.appendChild(ma_row);
}
ma_tab.appendChild(ma_bod);
matrix.appendChild(ma_tab);
} else {
ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';
for (var x=0; x<rows; x++) {
ma_tab+='<t'+'r>';
for (var y=0; y<columns; y++) {
ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'"> </'+'td>';
}
ma_tab+='</'+'tr>';
}
ma_tab+='</'+'table>';
matrix.innerHTML=ma_tab;
}
ma_cho=ma_txt;
for (x=0; x<columns; x++) {
ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
m_copo[x]=0;
}
ma_bod=setInterval("mytricks()", speed);
}
function mytricks() {
x=0;
for (y=0; y<columns; y++) {
x=x+(m_copo[y]==100);
ma_row=m_copo[y]%100;
if (ma_row && m_copo[y]<100) {
if (ma_row<rows+1) {
if (w3c) {
matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);
matemp.firstChild.nodeValue=m_coch[y];
}
else {
matemp=document.all["Mx"+(ma_row-1)+"y"+y];
matemp.innerHTML=m_coch[y];
}
matemp.style.color="#33ff66";
matemp.style.fontWeight="bold";
}
if (ma_row>1 && ma_row<rows+2) {
matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];
matemp.style.fontWeight="normal";
matemp.style.color="#00ff00";
}
if (ma_row>2) {
matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];
matemp.style.color="#009900";
}
if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;
else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
else if (ma_row<rows+2) m_copo[y]++;
else if (m_copo[y]<100) m_copo[y]=0;
}
else if (Math.random()>0.9 && m_copo[y]<100) {
m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
m_copo[y]++;
}
}
if (x==columns) clearInterval(ma_bod);
}
function zoomer(ycol) {
var mtmp, mtem, ytmp;
if (m_copo[ycol]==Math.floor(rows/2)+1) {
for (ytmp=0; ytmp<rows; ytmp++) {
if (w3c) {
mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);
mtmp.firstChild.nodeValue=m_coch[ycol];
}
else {
mtmp=document.all["Mx"+ytmp+"y"+ycol];
mtmp.innerHTML=m_coch[ycol];
}
mtmp.style.color="#33ff66";
mtmp.style.fontWeight="bold";
}
if (Math.random()<reveal) {
mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);
}
if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);
m_copo[ycol]+=199;
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]>200) {
if (w3c) {
mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);
mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);
}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];
mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];
}
mtmp.style.fontWeight="normal";
mtem.style.fontWeight="normal";
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);
if (m_copo[ycol]>100 && m_copo[ycol]<200) {
if (w3c) {
mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);
mtmp.firstChild.nodeValue=String.fromCharCode(160);
mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);
mtem.firstChild.nodeValue=String.fromCharCode(160);
}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];
mtmp.innerHTML=String.fromCharCode(160);
mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];
mtem.innerHTML=String.fromCharCode(160);
}
setTimeout("zoomer("+ycol+")", speed);
}
}
// -->
</script>
</head>
<body bgcolor="#000000">
<p></p>
<span style="padding:5px;border:5px solid red; background: white">
<center><img src="/mark/sharkadder.png"></center>
<p><center><img src="/mark/software.png"></center></p>
</span>
</center>
<p></p>
<br></br>
<p><a href="http://sharkadder.com/mark/menuexample.html"><img src="/mark/htmlenter.jpg"style="padding:5px;border:5px solid white; width="250" height="200"/></a> <div id="matrix" "style="display:inline";"float: left"; "padding:5px;border:5px solid white; width="250" height="200">Sharkadder Software</div></p>
<br>
<center><span style="color:#FFFFFF; font-size:20px">Last Update - 20th February 2007(Server back online/updates)</center>
<center><font size="2"><a href="http://www.addme.com">Add Me! - Search Engine Optimization</a></font>
</center>
</html>
as you can see from the code all looks in order, whether i put the image and the matrix text in center ot not it still shows below one another, i have tried "floor:left" and it still appears underneath, theres also no <br> tag inbetween the 2 anymore.
i would use a table but ive eben told not to use tables as its bad practise when coding (not unless coding tabulated data obviously.
As i said the java/css script in the head is for matrix text, the meta/description tags are in there but irrelivent. and the java script/css layout for the matrix text is in there but doesnt alter the position of the matrix text.
the actual problem is with the code within the body that mentions the htmlenter.jpg/div id"matrix" coding
gil davis
03-05-2007, 02:07 PM
What about a picture?
Better yet, code it as a table and post it on the CSS forum asking someone to convert it.
Sharkadder
03-05-2007, 02:15 PM
erm a picture is as follows in attachment
gil davis
03-06-2007, 07:07 AM
as you can see from the code all looks in orderIt is not "in order" at all. You have some learning to do about specifying styles in HTML tags and the use of quotes.<img src="/mark/htmlenter.jpg"style="padding:5px;border:5px solid white; width="250" height="200"/>should be<img src="/mark/htmlenter.jpg" style="padding: 5px; border: 5px solid white; width: 250px; height: 200px"/><div id="matrix" "style="display:inline";"float: left"; "padding:5px;border:5px solid white; width="250" height="200">Sharkadder Software</div>should be<div id="matrix" "style="display:inline; float: left; padding: 5px; border:5px solid white; width: 250px; height: 200px">Sharkadder Software</div>
I have split up the picture as a suggested layout for you. You can get the center portion with the picture to the right and the text to the left using something like this:<center>
<div style="width: 600px; padding: 30px; border: 1px solid red;">
<div style="float: left; width: 50%; text-align: center; width: 250px; height: 300px; border: 1px solid black;"><img src="/mark/htmlenter.jpg"></div>
<div style="float: right; width: 50%; text-align: center; width: 250px; height: 300px; border: 1px solid black;">This is text</div>
</div>
</center>I put in borders so you can see the divisions. I find it extremely helpful while designing a page.
This is not the only way it can be done, it is just a quick job to show the technique, as this is the HTML forum, not the CSS forum.