Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 135
  • Last Modified:

Html vs. java

I cant click on the link called "fun". Or yes i can, but i wanna be able to click the whole blue field as i can with the once at the menu....


I know it is the java below that is cauting this.... When i remove it, it works as the menu? Why?

I tried to put it in <div> etc. etc. but wont work for me.


Look homepage: MikethkHello all....
0
Mike Kristensen
Asked:
Mike Kristensen
  • 8
  • 6
  • 3
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
What happens if you change this line

<a href="index.php"><div class="left1 tile111"><p class="lefttext">fun</p></div></a>


to

<div class="left1 tile111"><p class="lefttext"><a href="index.php">fun</a></p></div>
0
 
Dave BaldwinFixer of ProblemsCommented:
Use what @padas showed you.  Your code is formatted wrong.
0
 
Mike KristensenIT administratorAuthor Commented:
Still wont work... Now it shows when i been on a site, which i dont want it to.

:S
0
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!

 
Mike KristensenIT administratorAuthor Commented:
Its wierd that the java thing does something to it... Shouldent i be able to seperate them easily? I thought <div> would do that....
0
 
Scott Fell, EE MVEDeveloperCommented:
In your css code add

.left1 a{
color:#5FB404;
text-decoration: none;

}
0
 
Mike KristensenIT administratorAuthor Commented:
No i mean even with the code changed i cant click the box.... Only the text....



<!DOCTYPE html>
<html>
	<head>
		<title>AJAX Database</title>
		<link rel="stylesheet" type="text/css" href="moselort.css">	
	</head>
	<body >  
		
<div class="indhold3">

<a href="index.php"><div class="left tile1 big"><p class="lefttext">Forside</p></div></a>
<a href="oplevelser.php"><div class="left tile2"><p class="lefttext">Om skolen</p></div></a>
<a href="restaurenter.php"><div class="left tile3"><p class="lefttext">Nyheder</p></div></a>
<a href="feriesteder.php"><div class="left tile4"><p class="lefttext">Aktiviteter </p></div></a>
<a href="natteliv.php"><div class="left tile5"><p class="lefttext">SFO</p></div></a>
<a href="indsaet.php"><div class="left tile6"><p class="lefttext">Portal</p></div></a>
<a href="kontakt.php"><div class="left tile7"><p class="lefttext">Kontakt</p></div></a>




<img src="images/logo.jpg" class="tra1"  />

<div class="indhold">
<div class="left1 tile111"><p class="lefttext"><a href="index.php">fun</a></p></div> 


<script>var slide1foldername='';</script><script charset="utf-8" src="slide.js" type="text/javascript"></script>



</div>

</div>

		
	
	</body>
</html>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
That's all coded wrong.  'Block' elements like <div> and <p> should never be inside 'inline' elements like <a href...>.  If you want it to not show that you visited that link, set the CSS for 'a' to be all the same.  However, doing that is considered 'not user friendly' simply becuase it does hide what has been done.
0
 
Mike KristensenIT administratorAuthor Commented:
:( I try and try, but cannot work it out...

Again. I cant make the link box work.... The link only works when i click "fun". . . The java picture does this, concluded by tests.

Im not sure why and how to fix it.
0
 
Scott Fell, EE MVEDeveloperCommented:
Change all the code from <bod> to </body> as below

<body>
  	<div class="indhold3">

<div class="left tile1 big"><p class="lefttext"><a href="index.php">Forside</a></p></div>
<div class="left tile2"><p class="lefttext"><a href="oplevelser.php">Om skolen</a></p></div>
<div class="left tile3"><p class="lefttext"><a href="restaurenter.php">Nyheder</a></p></div>
<div class="left tile4"><p class="lefttext"><a href="feriesteder.php">Aktiviteter</a> </p></div>
<div class="left tile5"><p class="lefttext"><a href="natteliv.php">SFO</a></p></div>
<div class="left tile6"><p class="lefttext"><a href="indsaet.php">Portal</a></p></div>
<div class="left tile7"><p class="lefttext"><a href="kontakt.php">Kontakt</a></p></div>




<img src="http://www.mikethk.dk/images/logo.jpg" class="tra1"  />

<div class="indhold">
<div class="left1 tile111"><p class="lefttext"><a href="index.php">fun</a></p></div> 


<script>var slide1foldername='';</script><script charset="utf-8" src="http://www.mikethk.dk/slide.js" type="text/javascript"></script>



</div>

</div>
</body>

Open in new window


Add this to the bottom of your css

.lefttext a{
position:absolute;
top:5px; 
left:10px;
}

.left a, .left1 a{

color:#5FB404;
text-align:center;
text-decoration:none;
}

Open in new window


Sample http://jsbin.com/ufudir/2/edit
0
 
Mike KristensenIT administratorAuthor Commented:
Im apparently not making myself clear enough...

I want to be able to click the WHOLE box, not just the text. . .



Thats all.



The links at the left, got the whole box as link...... "fun" does only have the text....
I know that the script
<script>var slide1foldername='';</script><script charset="utf-8" src="slide.js" type="text/javascript"></script>

Open in new window

are causing this, i just dont know why and how to fix it.
0
 
Dave BaldwinFixer of ProblemsCommented:
To "click the WHOLE box", you have to implement an 'onclick' routine in javascript.  You can Not use an anchor <a href...> to do that.  It will not work.
<div class="left tile7" onclick="myclick()">

Open in new window

http://www.w3schools.com/tags/ev_onclick.asp
0
 
Mike KristensenIT administratorAuthor Commented:
I tried all you say... I worked with this for 8 hours now, i must be so stupid....

My problem is now that i cant make the slideshow change position. I pretty sure that everything should be right....

<!DOCTYPE html>
<html>
	<head>
		<title>AJAX Database</title>
		<link rel="stylesheet" type="text/css" href="moselort.css">	
	</head>
	<body >  
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
	$('.fadein img:gt(0)').hide();
	setInterval(function(){$('.fadein :first-child').fadeOut(500).next('img').fadeIn().end().appendTo('.fadein');}, 1000);
});
</script>
		
<div class="indhold3">

<a href="index.php"><div class="left tile1 big"><p class="lefttext">Forside</p></div></a>
<a href="oplevelser.php"><div class="left tile2"><p class="lefttext">Om skolen</p></div></a>
<a href="restaurenter.php"><div class="left tile3"><p class="lefttext">Nyheder</p></div></a>
<a href="feriesteder.php"><div class="left tile4"><p class="lefttext">Aktiviteter </p></div></a>
<a href="natteliv.php"><div class="left tile5"><p class="lefttext">SFO</p></div></a>
<a href="indsaet.php"><div class="left tile6"><p class="lefttext">Portal</p></div></a>
<a href="kontakt.php"><div class="left tile7"><p class="lefttext">Kontakt</p></div></a>


<div class="indhold ">

<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>



<img src="images/logo.jpg" class="tra"  />

<a href="www.villeby.dk"><div class="left1 tile777"><p class="lefttext">Villeby</p></div></a>

</div>
</div>

		
	
	</body>
</html>

Open in new window


And the CSS part for the slide:
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:100; top:100; }

Open in new window



What am i doing wrong? Why cant the slideshow move around?

Addition: I like to use all your suggestions, but i cant make anything work..... :(
0
 
Scott Fell, EE MVEDeveloperCommented:
I pasted your code to jsbin http://jsbin.com/ufudir/4/edit and it seems to work although the slide moves very fast.

When you place the <a> tag outside of the <div> tag, this is actually now valid in html5 where in the past it was wrong.  The problem you may be running into is if you are using internet explorer.  Please try the jsbin link and see if that works for you in chrome or firefox.  If it works there and not IE (I can't test ie for moving images with js) then the problem is just that.  There are some ways to allow html5 to work in IE but I am not sure if it will work or not.  You could try Dave's suggestion using javascript and put the links back inside of the div.  You can also try using css to make the <a> tag a block and get rid of the div's.

<a href="index.php"><div class="left tile1 big"><p class="lefttext">Forside</p></div></a>

would turn into

<a href="index.php" class="fakediv">Forside</a>

then your css

.fakediv{
 display:block;
  background-color:red;
  color:white;
}


Working Samplehttp://jsbin.com/izacom/2/edit
0
 
Scott Fell, EE MVEDeveloperCommented:
fyi... this sample works for me on chrome and firefox http://www.mikethk.dk/
0
 
Mike KristensenIT administratorAuthor Commented:
Oki sounds good.... Will use the code then...

But even if the jsbin shows correctly then im still not able to see the slider being anything else but    top:0;   left:0;

top:0;  left:0;      jsbin shows the correct thing.

I tried copying the code from jsbin, didnt help. . .
0
 
Scott Fell, EE MVEDeveloperCommented:
I'm sorry, I thought  you meant  the slider did not work.

Play with the fadin class in your css.

.fadein {
position: relative;
height: 332px;
width: 500px;

margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
0
 
Mike KristensenIT administratorAuthor Commented:
i forgot to add "px" after the numbers... DOH.
0

Featured Post

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.

  • 8
  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now