| Autor | Zpráva | ||
|---|---|---|---|
| uzivatel1111 Profil * |
#1 · Zasláno: 21. 7. 2014, 22:48:28
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 |
#2 · Zasláno: 21. 7. 2014, 23:02:06
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 |
#4 · Zasláno: 21. 7. 2014, 23:28:06
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. |
||
|
Časová prodleva: 10 let
|
|||
0