Solved

Html vs. java

Posted on 2013-01-29
17
132 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
  • 3
17 Comments
 
LVL 53

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
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!

 

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 53

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 53

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 53

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 53

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 53

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: 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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS - Centering an image 2 48
Add a little space on either side of a table. 12 32
.CSS HTML Help 3 58
CSS styling problem 3 28
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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).

751 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