| Autor | Zpráva | ||
|---|---|---|---|
| AS115 Profil |
#1 · Zasláno: 1. 5. 2020, 08:15:45
Dobrý den,
jsem velký amatér samouk a potřeboval bych trochu poradit - mám nastavené CSS a HMTL stránku (viz níže). Nic složitého - nadpis stránky, menu a samotný obsah. Obsah je orámovaný. Když však chci do ,,obsahu“, tedy do prostoru mezi <p> a </p> něco dalšího mimo prostý text, tak se mi to rozhodí tak, že se pod rámečkem s obsahem vytvoří další rámeček (jakoby druhý obsah). Chtěl bych do ,,obsahu“ vložit například odrážky, číslovaný seznam nebo třeba další orámovaný "vložený obsah", který by měl jiné vlastnosti (třeba jiná barva písma) než nadřazený obsah. Sem úplný tupal na pozicování, už sem viděl spoustu videí a článků, vždy si to pěkně spočítám, ale stejně to mám pak ustřelené někam jinam a výsledek je spíše dílem náhody. Děkuji za každou radu. CSS: body{ font-size: 12px;
font-family:Arial Black, Tahoma;
background-color:black;
background-image:url('obrazek1.jpg');
background-position:25px 105px;
width: 1000px;
height: 1400px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.nadpis{
width: 650px;
}
.menu{
width:300px;
height:650px;
padding-left:40px;
}
.menu ul{
list-style: none;
}
.menu li{
width:155px;
margin:5px;
float:left;
}
.menu li a{
display:block;
background-color:Black;
padding: 4px 11px;
border: 5px ridge Maroon;
border-radius: 5px;
color:red;
font-size: 14px;
text-decoration: none;
}
.menu li a:hover{
background-color:#d16901;
color:black;
}
.obsah p{
background-color:black;
border: 15px ridge Maroon;
border-radius: 5px;
color:red;
font-size: 18px;
width:860px;
height:650px;
padding: 30px 30px 30px 200px;
text-align:justify;
}
}________________________________________________________________ HTML: <body>
<div class="nadpis" style="position:relative; margin:auto; left:9%; top:0,5%"><img src="logo1.bmp" id="Logo1" title="Logo1" style="width: 775px; height: 180px; border: Maroon ridge 10px; border-radius: 5px" /></img></div>
<div class="menu" style="position:relative; left:70px; top:280px; z-index:2">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Další stránka</a></li>
<li><a href="#">Další stránka...</a></li>
</ul>
</div>
<div class="obsah" style="position:absolute; left:130px; top:450px;">
<p>
Nějakýýý text ..............
<br></br><br></br>
A sem bych chtěl něco vložit - odrážky, číslovaný seznam apod.
</p>
</div>
</body> |
||
| Tomášeek Profil |
#2 · Zasláno: 1. 5. 2020, 09:03:38
AS115:
Odstavec se vložením dalšího blokoveho elementu ukončí. Do odstavce další odstavec nebo seznam technicky vložit nelze. |
||
| Tomáš123 Profil |
#3 · Zasláno: 1. 5. 2020, 11:36:30
AS115:
„Nic složitého - nadpis stránky“ To, čo tam máš, nie je nadpis. Prečítaj si niečo o sémantike – http://semantika.name. Do budúcna príde vhod aj: Relativní pozicování trápí začátečníky. |
||
| Bubák Profil |
#4 · Zasláno: 1. 5. 2020, 13:07:15
On celkově je ten kód hrůza a děs
• zbytečné pozicování (absolutní i relativní) a pevné rozměry bloků • online CSS • obrázek ve formátu BMP • rozměry obrázku v CSS, namísto standardních atributů width a height • obrázek nemá povinný atribut alt • značka </img> neexistuje |
||
| AS115 Profil |
#5 · Zasláno: 1. 5. 2020, 14:11:03
Díky všem za reakce.
Tomášeek: Budu si to pamatovat. Nakonec jsem to vyřešil (když tak níže). Tomáš123: Odkaz k sémantice si hážu do povinné četby, díky. Ale přesto - "nadpisem" je obrázek (logo), jehož text vyhledávač přes <h1>asi stejně nepřečte.... Co se týče druhého odkazu, takových diskuzí je bohužel plný celý web a jsou asi příčinou, proč je vám můj výtvor k smíchu. ,,Relative je špatně, absolute je špoatně...“ Co je teda správně? Někdy mi přijde, že řada zkušených borců (napříč internetem) jen tlachá o něčem, co jen předstírají, že tomu rozumí. Omlouvám se, jen mi to tak přijde, vím že můj výtvor jim nesahá ani po kotníky. A tím navazuju také na Bubáka - vím, že to mám špatně, ale v mém případě je fušerské řešení lepší, než žádné. A kupodivu mi to funguje. A nyní sem jen pro zajímavost dávám "řešení" mého problému, pokud si chcete ušetřit nervy, nemusíte číst dál: Prostě jsem v CSS u ,,.obsah p“ umazal to "p". Výsledkem je, že si můžu do jednoho rámečku dát tag <p>, do něj nějaký text, a pak za něj lze vložit odrážky, číslovaný seznam nebo další věci. Tedy v CSS to vypadá takhle: .obsah {
background-color:black;
border: 15px ridge Maroon;
border-radius: 5px;
color:red;
font-size: 18px;
width:860px;
height:650px;
padding: 30px 30px 30px 200px;
text-align:justify;
} |
||
| Bubák Profil |
AS115:
„,,Relative je špatně, absolute je špoatně...‘ Co je teda správně?“ Obtékání a flexboxy. Koukni třeba na qu.wz.cz/webtest/jednoduche-schema-stranky.htm „A kupodivu mi to funguje.“ Tobě ano, a pravděpodobně to bude fungovat u 99 % návštěvníků. Ale stačí, abys pak někde přidal jednu větu a celé se ti to rozpadne. Anebo návštěvník stránky nebuide mít tebou předpokládané písmo, tak se použije jiné písmo s jinou metrikou. |
||
| Tomáš123 Profil |
#7 · Zasláno: 1. 5. 2020, 16:16:26
AS115:
„"nadpisem" je obrázek (logo), jehož text vyhledávač přes <h1>asi stejně nepřečte“ Myslím si, že, hoci sa text bežne nezobrazí, logo v ozajstnom nadpise má trochu iný sémantický význam ako logo v neutrálnom <div>e. Každopádne, rada bola mienená všeobecne.
„,,Relative je špatně, absolute je špoatně...‘ Co je teda správně?“ Ono je to v tom vlákne napísané. Vlastne sa tam do určitej miery rozoberajú aj ďalšie alternatívy a sú tam odkazy na súvisiace články. Pri troche čítania s porozumením pochopíš, prečo je konštrukcia s relatívnym poziciovaním krehká, prečo absolútne poziciovanie samo o sebe často nestačí, ako sa absolútne a relatívne poziciovanie správne kombinuje pre dosiahnutie stabilného výsledku a ako sa tvorí základny layout pomocou obtekania, float.
„Prostě jsem v CSS u ,,.obsah p‘ umazal to "p".“ To je vlastne správne riešenie. Prvok .obsah je div. Ten môže obsahovať blokové prvky a narozdiel od paragrafu sa automaticky neukončí pri otvorení napríklad značky <ul>.
|
||
|
Časová prodleva: 4 roky
|
|||
0