Solved

Html vs. java

Posted on 2013-01-29
17
131 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
Technology Partners: 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!

 

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

Independent Software Vendors: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Adding a countdown to HTA 12 97
Google Tag Manager - Add Trigger Using Div class 22 56
Text too large in Chrome 17 59
Check input text, Number 6 30
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 …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

756 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