Solved

Html vs. java

Posted on 2013-01-29
17
127 Views
Last Modified: 2013-02-21
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
Comment
Question by:Mike Kristensen
  • 8
  • 6
  • 3
17 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Use what @padas showed you.  Your code is formatted wrong.
0
 

Author Comment

by:Mike Kristensen
Comment Utility
Still wont work... Now it shows when i been on a site, which i dont want it to.

:S
0
 

Author Comment

by:Mike Kristensen
Comment Utility
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
In your css code add

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

}
0
 

Author Comment

by:Mike Kristensen
Comment Utility
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
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
 

Author Comment

by:Mike Kristensen
Comment Utility
:( 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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
 

Author Comment

by:Mike Kristensen
Comment Utility
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
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
 

Author Comment

by:Mike Kristensen
Comment Utility
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
fyi... this sample works for me on chrome and firefox http://www.mikethk.dk/
0
 

Author Comment

by:Mike Kristensen
Comment Utility
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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:Mike Kristensen
Comment Utility
i forgot to add "px" after the numbers... DOH.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

744 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now