Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Menu a wstawienie linku
Forum PHP.pl > Forum > Przedszkole
kmaksiu
30.03.2013, 10:25:36
Witam mam problem z wstawieniem linku przez utworzone menu.

problem wygląda następująco.



Uploaded with ImageShack.us

Jak widać po wstawieniu linku, tworzy się blok z menu.

kod.

Kod
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
  <meta name="Description" content=" Strona poświęcona promocji młodych raperów. " />
  <meta name="Keywords" content=" fejm muzyka rap hip hop podziemie underground " />
  <meta name="Author" content=" Maksymilian Kieroński " />
  <meta name="Generator" content="kED" />
  <meta http-equiv="Content-Type" CONTENT="text/html; charset=iso-8859-2">
  <title> [tytuł strony] </title>
    

    

  <style type="text/css">
    body { margin: 0;
    background-color: #ebebeb
    
    }
    
    div.baner {
    background-color: #5a5a5a;
    width: 100%;
    height: 250px
    }
    
    p.zdj {
    height: 300px;
    background-image: url(zacieki.jpg);
    background-repart: repart-x;
    margin: 0;
    
    }
    
    
    div.tresc {
    
    width: 600px;
    height: 500px;
    background-color: #CCCCCC;
    margin-left: 20px;
    margin-top: 2cm;
    position: absolute; top: 250px;
    border-style: dotted;
    overflow: hidden;
    border-width: 1px;
    }
    
    div.link {
    width: 300px;
    background-color: #cccccc;
    margin-left: 720px;
    margin-top: 2cm;
    border-style: double;
    position: absolute; top: 250px;
    
    
    }
    
    div.menu {
    width: 100%;
    height: 65px;
    background-color: black;
  position: absolute;
    top: 165px;
    
    }
    
    ul li {
    list-style: none;
    }
    
    a:link,a:visited,a:hover,a:active {
    text-decoration: none;
    display: block;
    float: left;
    line-height: 65px;
    width: 200px;
    color: white;
    text-align: center;
    font-size: 50px;
    
    }
    
    a:hover {
    color: silver;
    background-color: black;
    }
    
    a:active {
    color: silver;
    background-color: black:
    }
    
    @font-face {
    font-family: MagikMarker;
    src: url(MagikMarker.otf) format("opentype");
}

.menu ul {
   margin-top: 0px;
}


div.ramka_menu {
background-image: url(menu1.jpg);
repart: repart-x;
height: 20px;
position: absolute;
    top: 150px;
    width: 100%;
}

div.ramka_menu2 {
background-image: url(menu2.jpg);
repart: repart-x;
height: 20px;
width: 100%;
position: absolute;
top: 228px;

}
    </style>

</head>
<body>

<div class="baner">
<center><img src="baner.jpg" alt="" width="900" height="150" /></center>
</div>


<div  class="ramka_menu">
</div>
<div class="menu" align="left">

<ul style="font-family: MagikMarker">
<li><a href="index.html"><b>Home</b></a></li>
<li><a href="wideo.html"><b>Wideo</b></a></li>
<li><a href="muzyka.html"><b>Muzyka</b></a></li>
<li><a href="kontakt.html"><b>Kontakt</b></a></li>
<li><a href="http://www.youtube.com/subscription_center?add_user=fejmpodziemia"><b>Subskrybuj</b></a></li>
</ul>

</div>

<div class="ramka_menu2">
</div>



<p class="zdj">


<div class="tresc">
gffsdfnsdjknfkjdsnfkjsdnfjksdnkjfns

</div>

<div class="link"><br /><br />
&nbsp;<img src="Facebook_icon.jpg" alt="" width="43" height="43" />
<a target="_blank" href="http://www.facebook.com/pages/Fejm/280577751970681">Fejm </a>
</div>
</body>
</html>
Posio
30.03.2013, 23:48:56
odpowiada za to ten fragment kodu:
[HTML] pobierz, plaintext 
  1. a:link,a:visited,a:hover,a:active {
  2.     text-decoration: none;
  3.     display: block;
  4.     float: left;
  5.     line-height: 65px;
  6.     width: 200px;
  7.     color: white;
  8.     text-align: center;
  9.     font-size: 50px;
  10.  
  11.     }
  12.  
[HTML] pobierz, plaintext


Chyba nie muszę nic wiecej dodawać ?
kmaksiu1
31.03.2013, 20:07:45
tak wiem, ze odpowiada ten fragment, lecz nie wiem co mam teraz zrobic :-(
kmaksiu1
2.04.2013, 10:44:53
Czy na prawdę nikt nie umie mi pomóc? próbowałem już robić a.link:link itp i nic nie pomaga. Jak mogę się tego pozbyć proszę bardzo o pomoc, bo głowie się tylko nad tym i moja nauka zatrzymała się w tym miejscu. :/
!*!
2.04.2013, 10:47:59
Skoro w css, masz display:block, to logiczne że tak się zachowuje. Zmień to na inline.
kmaksiu1
2.04.2013, 11:02:05
Nie pomaga nadal link zachowuje się jak menu a chciałbym, żeby był nie zależny i wygladał jak klasyczny link w tekscie.
!*!
2.04.2013, 11:04:21
W CSS nie ma opcji reset. Musisz to zrobić ręcznie. Sprawdź jakie wartości domyślne maja atrybuty http://www.signs.pl/html/
kmaksiu1
2.04.2013, 11:26:57
Tylko jak mam to zrobić ręcznie. Próbowałem już chyba wszystkich znanych mi sposobów. Dopiero się uczę pisać CSS, i taki problem jak tu jest dla mnie sporym problemem.
lobopol
2.04.2013, 11:27:46 
[CSS] pobierz, plaintext 
  1. a:link,a:visited,a:hover,a:active 
  2. na
  3. .menu a:link,.menu  a:visited,.menu  a:hover, .menu a:active 
[CSS] pobierz, plaintext
!*!
2.04.2013, 11:55:51
Cytat(kmaksiu1 @ 2.04.2013, 12:26:57 ) *
Tylko jak mam to zrobić ręcznie. Próbowałem już chyba wszystkich znanych mi sposobów. Dopiero się uczę pisać CSS, i taki problem jak tu jest dla mnie sporym problemem.


Dla każdego atrybutu css jaki masz, sprawdzasz na tejs tronie jaką ma wartość domyślną i taką zapisujesz.
krzysiekk
2.04.2013, 21:01:45
witam
na początku proponuje zaprzyjażnić sie z W3C Validatorem
http://jigsaw.w3.org/css-validator/validator

masz błedy w css -sie , złe nazwy i brak średników ...


nie wiem czy Cie dobrze rozumie jesli to o to chodzi to ja bym to tak zrobił 

[CSS] pobierz, plaintext 
  1.  
  2. ...
  3. ul.menu a:link,ul.menu a:visited,ul.menu a:hover,ul.menu a:active {
  4. text-decoration : none;
  5. display : block;
  6. float : left;
  7. line-height : 65px;
  8. width : 200px;
  9. color : white;
  10. text-align : center;
  11. font-size : 50px;
  12. }
  13. ..
[CSS] pobierz, plaintext


i menu 
[HTML] pobierz, plaintext 
  1. <ul class="menu">
  2. <li><a href="index.html"><b>Home</b></a></li>
  3. <li><a href="wideo.html"><b>Wideo</b></a></li>
  4. <li><a href="muzyka.html"><b>Muzyka</b></a></li>
  5. <li><a href="kontakt.html"><b>Kontakt</b></a></li>
  6. <li><a href="#"><b>Subskrybuj</b></a></li>
  7. </ul>
[HTML] pobierz, plaintext



ltutaj przesyłam adres do pliku RESETU css
http://meyerweb.com/eric/tools/css/reset/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.