Avatar billede testpilot_dk Nybegynder
28. april 2007 - 20:37 Der er 9 kommentarer og
1 løsning

Div og CSS problem

Hej!

Jeg sidder forsøger at lærer noget om css og div på hjemmesider!
Jeg har fundet et javascript herinde som kan gører divs synlige eller ikke synlige.

Jeg prøver så at putte noget css ind på mine divs. farver og sådan vises rigtigt nok, men placeringen bliver ikke vidst.

nogen som har en idee.

html kode:
----------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <link rel=stylesheet type="text/css" href="styles/menu_text.css" />
<SCRIPT LANGUAGE="JavaScript">
show = 0
function vis(i)
{
    if (show>0) gem(show)
        show = i

    if (document.layers)
        document.layers["area"+i].visibility='show';
    else
          document.all["area"+i].style.visibility='visible';
}

function gem(i)
{
    if (document.layers)
        document.layers["area"+i].visibility='hide';
    else
        document.all["area"+i].style.visibility='hidden';
}
</SCRIPT>


</head>

<body>
    <A HREF="#" onmouseover="vis(1)">vis1</A>
    <A HREF="#" onmouseover="vis(2)">vis2</A>
   
    <div id ="area1">test </div>
    <div id ="area2">test2</div>
   
</body>
</html>

css kode
----------------------------------------------------
#area1
{
    position:relative;
    top: 100;
    left:10;
    width: 20;
    height: 50;
    background-color: Red;
    visibility:  hidden;
    border-style:solid;
    border-width: 1px;
    z-index:1;
}

#area2
{
    position:relative;
    top: 25;
    left:100;
    width: 100;
    background-color:Transparent;
    visibility:  hidden;
    border-style:solid;
    border-width: 1px;
    z-index:1;
}

Håber i har en idee
Avatar billede testpilot_dk Nybegynder
28. april 2007 - 20:43 #1
Hmm, jeg har løst den ved at fjerne

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

hvad gør denne ved css og html?
Avatar billede thesurfer Nybegynder
28. april 2007 - 20:50 #2
DOCTYPE-linien fortæller browseren hvilket regelsæt den skal følge.. det svarer f.eks. til færdselsloven..

Hvis den kun kan køre uden regelsættet, er der noget galt.. :-)

Som olebole ville have sagt: Der er ingen grund til at bruge (X)HTML regelsættet (som du bruger nu), da den bare bliver afviklet som fejlfyldt HTML 4.01!

(eller også var det roenving)
Avatar billede thesurfer Nybegynder
28. april 2007 - 20:56 #3
Det virker som om, at du har fat i noget gammelt kode..

Jeg ville nok selv bruge:

function gem(elm)
{
div = document.getElementById(elm);
// gør ting med div
}

og:

onmouseover="vis('area1')"

Man kan også kombinere "area" med "elm", hvis det skulle være..

PS: <script type="text/JavaScript" language="JavaScript">
Avatar billede testpilot_dk Nybegynder
28. april 2007 - 21:01 #4
hmm okay!

Hvad skal jeg så erstatte med document.getElementById
    Send et svar også!
Avatar billede thesurfer Nybegynder
28. april 2007 - 21:47 #5
Eksempel:

<!DOCTYPE HTML PUBLIC "-// W3C// DTD HTML 4.0 Transitional// EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>vis/skjul divs</title>
<link rel=stylesheet type="text/css" href="styles/menu_text.css">
<script type="text/JavaScript" language="JavaScript">
sidstediv = null;
function visskjul(elm)
{
if (sidstediv) sidstediv.style.visibility = 'hidden';
div = document.getElementById(elm);
div.style.visibility = 'visible';
sidstediv = div;
}
</script>

</head>

<body>

<A HREF="#" onmouseover="visskjul('area1')">vis1</A>
<A HREF="#" onmouseover="visskjul('area2')">vis2</A>

<div id ="area1">test </div>
<div id ="area2">test2</div>
   
</body>
</html>
Avatar billede testpilot_dk Nybegynder
28. april 2007 - 21:47 #6
Et tillægsspørgsmål!
  Er det muligt at have forskellige størrelser links, når man benytter CSS?

altså nogle i medium og andre i small?
Avatar billede thesurfer Nybegynder
28. april 2007 - 21:50 #7
Ja, det kan du godt:

CSS koden:

.lillelink
{
font-size:8px;
}

.stortlink
{
font-size:18px;
}

HTML koden:

<a href="#" onmouseover="visskjul('area1')" class="lillelink">vis1</A>
<a href="#" onmouseover="visskjul('area2')" class="stortlink">vis2</A>
Avatar billede roenving Novice
29. april 2007 - 01:52 #8
-- og oftest vil man have brug for links i forskellige formater efter hvor de står i siden, f.eks. anderledes i menuen og andre steder:

<style type="text/css">
.menu a, .menu a:link, .menu a:visited{font-size:12px;color:green;text-decoration:none;}
.menu a:hover, .menu:active{color:red;text-decoration:overline underline;}
a,a:link,a:visited{color:blue;text-decoration:underline;}
a:hover,a:active{color:green;font-weight:900;}
</style>

<div class="menu">
  <a href="#">Et link i menuen</a><br>
  <a href="#">Et andet link i menuen</a>
</div><br><br>

<a href="#">Et link udenfor menuen</a><br>
<a href="#">Et andet link udenfor menuen</a>
Avatar billede roenving Novice
29. april 2007 - 01:59 #9
-- og interaktionen mellem de forskellige deklarationer ses ret tydeligt, hvis du ændrer menu-tingen til:

.menu a:hover, .menu:active{color:red;text-decoration:overline underline;font-weight:400;}
!-)
Avatar billede testpilot_dk Nybegynder
03. juli 2007 - 20:16 #10
Jeg er kommet i tanke om, hvordan sikre jeg at der ikke er nogle div synlige, når musen ikke er hen over menu eller aktuel div?

hvis man har været på en menu og dens div og så forlader denne nedad, så den ikke rammer andre links, divs
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester