Solved

Html vs. java

Posted on 2013-01-29
17
130 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
ID: 38833063
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 83

Expert Comment

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

Author Comment

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

:S
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:Mike Kristensen
ID: 38833183
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
ID: 38833201
In your css code add

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

}
0
 

Author Comment

by:Mike Kristensen
ID: 38833269
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 83

Expert Comment

by:Dave Baldwin
ID: 38833328
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
ID: 38834097
:( 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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38834147
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
ID: 38835307
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 83

Expert Comment

by:Dave Baldwin
ID: 38836762
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
ID: 38841202
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
ID: 38841402
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
ID: 38841415
fyi... this sample works for me on chrome and firefox http://www.mikethk.dk/
0
 

Author Comment

by:Mike Kristensen
ID: 38841834
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
ID: 38841865
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
ID: 38915430
i forgot to add "px" after the numbers... DOH.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

790 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