Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Probem z menu w html i css !
#1
Witam wszystkich !! Mam problem z menu w html i css chodzi o to że nie wiem jak zrobić w css żeby wielkość moich przycisków była taka sama zawsze są one tak szerokie jak napisze tekst dodałem np. width:80px i nic proszę o pomoc




Kod:
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
   <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
   <meta name="Description" content=" [wstaw tu opis strony] " />
   <meta name="Keywords" content=" Lech Poznań " />
   <meta name="Author" content=" Jakub Nawrocki " />
   <meta name="Generator" content="kED" />

   <title>Lech Poznań </title>

   <link rel="stylesheet" href=" style.css" type="text/css" />
</head>
<body>

<div id="strona">
    <div id="menu">
<ul>
<li><a href="http://forum.pclab.pl/topic/770595-Upgrade-starego-grata-za-max-1000zł">Strona Główna</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>

<div id="top"><a name="odsylacz"></a></div>
<div id="prawa"><p>Tekst</P></div>
<div id="stopka"><a href="file://localhost/C:/Users/Jakub/Desktop/Szkoła/www/index.html#odsylacz">odsylacz</a></div>
<div id="end"><p style="color:red">sŁONY <a href="http://www.interia.pl">Intera</a></p></div>
<div id="obrazek"><img src="k.png" width="550" height="50"></div>




</div>
</body>
</html>


Kod:
body{background-color:white;
background-attachment: fixed;
background-repeat:repeat;
}
*{
margin: 0 auto;
padding: 0;
}


#strona{
margin-top:10px;
margin-bottom:10px;
width:800px;
height:1000px;
background-color:black;
border:solid 1px white;
}

#menu{
width: 798px;
height:80px;
margin-top:10px;
border: solid 1px red;
background: white;
}

ul, ul li {
    display: block;
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0;
    
}

ul {
    
    text-align:center;
}

ul li {
    display: inline;
    white-space: nowrap;
    }
    
#menu a {
border: solid 1px black;
padding: 1px;
background: red;
width:40px;}

#top{

margin-top:400px;
margin-left:5px;
float:left;
width:600px;
height:40px;
background-color:white;
border:solid 1px red;}

#prawa{
margin-top:400px;
margin-right:5px;
float:right;
width:50px;
height:50px;
background-color:white;
border: solid 1px red;
}

#stopka{
margin-top:960px;
width:600px;
height:20px;
background-color:blue;
border: solid 1px red;
}

#end{

margin-top:-440px;
margin-left:5px;
width:788px;
height:400px;
background-color:blue;
border: solid 1px white;
}

#obrazek{
position:absolute;
background-color:white;
border:solid 1px red;
margin-top:-500px;
margin-right:5px;
margin-left:100px;
}
Odpowiedz
#2
Kod:
ul li {
    display: inline;
    white-space: nowrap;
    }
zamień to na
Kod:
ul li {
width:80px;
height....px;
float:left;
display:block;
}

dla #menu daj też overflow:hidden;
Odpowiedz
#3
Odpowiedz
#4
Ustawiasz właściwość background-color na taki kolor jaki ma byc na dole.
backgorund-image ustawiasz by było no-repeat i top.

Z tym, że obrazek musi być taki na końcu jak podany kolor w background-color.

Natomiast zauważ, że na tej stronie on nie przechodzi w żaden kolor tylko jest tak wielka grafika tła

http://lechpoznan.com/img/bg-page.jpg
Pomogłem? To daj plusa Cool
Odpowiedz
#5
(26-02-2012, 02:58)Moody napisał(a): Ustawiasz właściwość background-color na taki kolor jaki ma byc na dole.
backgorund-image ustawiasz by było no-repeat i top.

Z tym, że obrazek musi być taki na końcu jak podany kolor w background-color.

Natomiast zauważ, że na tej stronie on nie przechodzi w żaden kolor tylko jest tak wielka grafika tła

http://lechpoznan.com/img/bg-page.jpg

Aha czyli to jest jedna wielka grafika. Ok a czym sie rózni taka cała grafika od layouta ??? Rozumiem że layout to jest zapisny szablon strony tak ???
Odpowiedz
#6
Tutaj jak to nazywasz "cała grafika" to tło strony. Ogólnie layout to szata graficzna, a szablon to inaczej wygląd strony, tzn. zakodowany layout, a w nim przykładowa treść.
"Badz czlowiekiem laskawym tak,
i od czasu do czasu wcisnij prawy alt."
Odpowiedz
#7
Heh źle sforumułowałem pytanie :p chodzi mi o to czy layout musi być zawsze zakodowany i czy musi być w postaci szablonu zakodowanego ??
Odpowiedz
#8
Tak musisz go zakodować.
"Badz czlowiekiem laskawym tak,
i od czasu do czasu wcisnij prawy alt."
Odpowiedz
#9
Nie chcę tworzyć nowego tematu dlatego zapytam tutaj. Mam problem z dziedziczeniem w menu. Chodzi o to, że zrobiłem sobie dwa menu #menu oraz #menu1 I teraz mam problem zakodowałem sobie wszystko w css ale #menu1 dziedziczy wszystko po #menu jak mam zrobić żeby tak nie było ?? Dodaje kody z html i css

Kod:
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
   <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
   <meta name="Description" content=" [wstaw tu opis strony] " />
   <meta name="Keywords" content=" Lech Poznań " />
   <meta name="Author" content=" Jakub Nawrocki " />
   <meta name="Generator" content="kED" />

   <title>Lech Poznań </title>

   <link rel="stylesheet" href=" style.css" type="text/css" />
</head>
<body>

<div id="strona">
    <div id="menu">
<ul>
<li><a href="http://forum.pclab.pl/topic/770595-Upgrade-starego-grata-za-max-1000zł">STRONA GŁÓWNA</a></li>
<li><a href="#">DOWNLOAD</a></li>
<li><a href="#">KONTAKT</a></li>
<li><a href="#">FORUM</a></li>
</ul>
</div>
<div id="menu1">
<ul>
<li><a href="#">STRONA GŁÓWNA</a></li>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>

</ul>



</div>

<div id="top"><a name="odsylacz"></a></div>
<div id="prawa"><p>Tekst</P></div>
<div id="stopka"><a href="file://localhost/C:/Users/Jakub/Desktop/Szkoła/www/index.html#odsylacz">odsylacz</a></div>
<div id="end"><p style="color:red">sŁONY <a href="http://www.interia.pl">Intera</a></p></div>
<div id="obrazek"><img src="k.png" width="550" height="50"></div>




</div>
</body>
</html>

Kod:
body{background-image: url("bg-page.jpg") ;
background-size: 100%;
background-attachment: scroll;
background-repeat:repeat-y;
}


*{
margin: 0 auto;
padding: 0;
}


#strona{
margin-top:10px;
margin-bottom:10px;
width:800px;
height:1000px;
background-color:black;
border:solid 1px white;


}

#menu{
margin-top:250px;
margin-left:140px;
padding-top:1px;
padding-left:2px;
width:520px;
height:29px;
background:#E5E4E2;}

#menu ul, ul li {
    display: block;
    list-style: none;
    margin-right: 3px;
    padding: 0;
}

#menu ul {
    position: absolute;
}

#menu ul li {
    float: left;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: transparent #25b #25b #9ce;
}

#menu ul a:link, ul a:visited {
    text-decoration: none;
    
    display: block;
    width: 125px;
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
    font-size: 12px;
    color:#E5E4E2;
    background-image:url("nie15.gif");
    border-top: 2px solid #25b;
}

#menu ul a:hover {
    background:#F0F0F0;
}


#menu1{
width:800px;
height:35px;
margin-top:-250px;
background-color:white;
}


#menu1  ul, ul li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu1 ul li {
    float: left;
}

#menu1 ul a:link, ul a:visited {
text-decoration: none;
display:block;
background-image: none;}

#top{

margin-top:200px;
margin-left:5px;
position:relative;
float:left;
width:600px;
height:40px;
background-color:white;
border:solid 1px red;}

#prawa{
margin-top:200px;
margin-right:5px;
float:right;
width:50px;
height:50px;
background-color:white;
border: solid 1px red;
}

#stopka{
margin-top:860px;
width:600px;
height:20px;
background-color:blue;
border: solid 1px red;
}

#end{

margin-top:-440px;
margin-left:5px;
width:788px;
height:400px;
background-color:blue;
border: solid 1px white;
}

#obrazek{
position:absolute;
background-color:white;
border:solid 1px red;
margin-top:-450px;
margin-right:5px;
margin-left:100px;
}
Odpowiedz
#10
Powiedz mi co w tych linijkach jest błędne:

Kod:
#menu ul, ul li {
#menu ul a:link, ul a:visited {
#menu1  ul, ul li {
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Jak zrobć POP-UP w html/php i proste pytanko html? MrOMGWTF 7 5,558 01-05-2021, 10:56
Ostatni post: wozniak
  Strona HTML na zaliczenie - dodaj, usuń, edytuj Kurana 1 2,088 01-07-2019, 03:31
Ostatni post: mpire
  [HTML] Filmik zamiast obrazka wyróżniającego kuklaale 1 2,754 02-11-2016, 18:36
Ostatni post: martt4dg
  Problem zm osadzeniem skryptu lighbox w kodzie html gajowy873 2 3,703 24-09-2016, 02:22
Ostatni post: Anatol64
  [CSS][HTML] Ustawienie obrazka z boku strony Witek7777 8 8,461 22-09-2016, 01:05
Ostatni post: pocahontas

Skocz do:


Użytkownicy przeglądający ten wątek:
Sponsorzy i przyjaciele
SeoHost.pl