Autor Zpráva
uzivatel1111
Profil *
zdravím, mám v plánu udělat kolem položek v menu takové jednduché ohraničení:
http://imgup.cz/image/GQg
ale nějak mi to nejde:
http://imgup.cz/image/GQh

myslel jsem si. že stačí dát k nav ul atribut border a ohraničí se vše , co v nav ul je. Ale tak to asi nejde

přidávám kód HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>nadpis</title>
  <link rel="stylesheet" href="styl.css" type="text/css">
  </head>
  <body>
      <header>
          <div id="logo""><h1>Header</h1></div>  <br />
          <nav>
              <ul>
                   <li><a href="#">ODKAZ</a></li>
                   <li><a href="#">ODKAZ</a></li>
                   <li><a href="#">ODKAZ</a></li>
                   <li><a href="#">ODKAZ</a></li>
                   <li><a href="#">ODKAZ</a></li>
                   <li><a href="#">ODKAZ</a></li>
              </ul>
          </nav>
          <div class="cleaner"></div>
      </header>
  </body>
</html>

a CSS
nav ul {
    background: green;
    margin: 0px 0px 0px 10px;
    list-style-type: none;
    border: 2px solid black;
}

nav ul li {
    float: left;
    padding: 10px 25px;
    margin-right: 20px;
}

nav ul li a {
    text-decoration: none;
    color: green;
}
martinK
Profil
uzivatel1111:

Stačí přidat rozměry width a height do nav ul a odstranit zelenou barvu pozadí, ideálně pozadí nedefinovat ;)
Marschmallow
Profil
uzivatel1111:
Třeba takhle?

HTML:
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>nadpis</title>
  <link rel="stylesheet" href="styl.css" type="text/css">
  </head>
  <body>
      <header>
          <div id="logo""><h1>Header</h1></div>  <br />
          <nav>
              <ul>
                   <li><a href="#">ODKAZ</a></li>
                   <li><a href="#">ODKAZ</a></li>
                   <li><a href="#">ODKAZ</a></li>
                   <li><a href="#">ODKAZ</a></li>
                   <li><a href="#">ODKAZ</a></li>
                   <li><a href="#">ODKAZ</a></li>
              </ul>
          </nav>
          <div class="cleaner"></div>
      </header>
  </body>
</html>

CSS:
nav {
    border: 5px solid navy;
    border-color: green;
}
 
nav ul li {
  display: inline;
  list-style-type: none;
    padding: 10px 25px;
    margin-right: 20px;
}



Jestli chceš více informací, na JPW máš článek o border-color.
Bubák
Profil
Nemáš ukončené obtékání položek, obtékaní ukončuješ až za <nav> a proto se orámování <ul> neprojeví.
Doporučuji http://jecas.cz/float#overflow
Deklarovat stejnou barvu pro pozadí a pro text je pro kočku (řádky 2 a 16 tvého CSS)
Odkazy máš klikatelné jen v místě, kde je text.

Co třebas takto?
http://kod.djpw.cz/jneb-
http://kod.djpw.cz/jneb

Marschmallow:
Třeba takhle?
Raději ne. Neprojeví se horní/dolní padding položek, položky jsou klikatelné jen v místě, kde je text.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: