• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Projekt www czy możecie mi wskazać błędy, jakie mogłem popełnić i zasugerować jakieś pomysły, jak zapełnić stronkę?

VPS Starter Arubacloud
+1 głos
376 wizyt
pytanie zadane 22 kwietnia 2021 w HTML i CSS przez Orion90 Nowicjusz (130 p.)

Otóż tworzę pewien projekt, którego już jakaś część zawartości znajduje się na mojej stronce. Mój projekt opiera się na bodajże html4 jaki był używany pod koniec roku 2000. Stworzyłem już odnośniki, podlinkowałem (nie poprawię  jeszcze podstron, dopóki nie poprawię index.html). Posiadam książkę HTML i CSS Jona Ducketta choć łatwiej mi szła nauka na kanale youtube i zacząłem rozumieć nawet css. Mam jednak kilka problemów z moją stroną. Po pierwsze nie mogę poprawnie pokolorować linków i usunąć podkreśleń. W oparciu o a.tilelink zastosowałem frazę a:link (inaczej w ogóle nie działa). Rozwiązując w ten sposób część problemu, zmiany w linkach działają tylko na stronie głównej. Nie działały w nagłówku strony. Drugim problemem jest to, że między footerem a nav/content a także między nimi a logo są dziury. Nie rozlewa się kolor ale nie jest przyjemnie w kwestii estetyki.

 

Może macie jakieś sugestie, co mogę dodać (w starym stylu) a co usunąć/zmienić żeby strona nie wyglądała tak pusto? Opieram się odrobinę na stronce Windows Update (wersję białą z lat 90). Nie mam na razie pomysłu i umiejętności w kwestii bannera, być może po prostu zrobię po prostu w formie nagłówka jak na kanale.

 

Dodam, że jestem zielony w matematyce i mogłem źle wyrównać Divy szablonu CSS. Ta strona będzie na początku jako zwykły spis aktualizacji, a w przyszłości planuję przerobić ją i zaimplementować w menu CD wraz z aktualizacjami i stworzonym skryptem .bat i tylko tyle.

Jedno małe pytanie. W jaki sposób tworzy się akapity (nie pamiętam jak to się nazywa fachowo)? Tabulatorem czy spacją? u mnie, używając klawisza Tab są zbyt duże akapity. Przykład:

html

         body

head

Poniżej kody źródłowe oraz screen:

body
{
	background-color: white;
	Color: black;
/* unvisited link */
a:link {
  color: #2A487F;
  text-decoration: none;
}
/*visited link */
a:visited{
  color: #2A487F;
  text-decoration: none;


#container
{
	width: 1000px;
	margin-left: auto;
	margin-right:auto;
}
#logo
{
background-color: #C0C0C0;
color: black;
text-align: left;
padding: 15px;
}
#nav
{
background-color: #C0C0C0;
color: white;
text-align: right;
float: left;
width: 200px;
min-height: 620px;
padding: 15px;
}
#content
{
background-color: white;
color: black;
text-align: left;
float: left;
width: 600px;
min-height:
padding: 20px;
}
#footer
{
background-color: #C0C0C0;
color: #2A487F;
text-align: center;
clear: both;
padding: 20px;
}
<!DOCTYPE HTML>
<html lang="pl"
<head>
	<meta charset="utf-8" />
	<meta http-eqiv="X-UA-Compatible" content="IE=edge,crome=1"/>
	
	<title>Spis aktualizacji</title>
	
	<meta name="descriptioin" content="Zbiory aktualizacji dla systemów rodziny 9x 
	oraz pakietĂłw w Microsoft Office" />
	<meta name="keywords" content="Aktualizacje, Windows, Office, 9x" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	
	</head>
	
	<body>
	
		<div id="container">
		<div id="logo">
		<h1><div><img src="ms.jpg" alt="" style="float: center;" />Spis aktualizacji</div></h1>
		</div>
		
		<div id="nav">
		<h4><span style="background: #002987;">Kategorie</span></h4>
		<a href="Windows.html">Microsoft Windows</a><br/><hr/>
		<a href="Office.html">Microsoft Office</a><br/><hr/>
		</div>

		<div id="content">
		<h3>Zapraszamy</h3><hr/>
		Znajdziesz tutaj spis aktualizacji Microsoft z rodziny 9x<br/>
		ObejmujÄ… one:<br/>
		<li>Aktualizaje Microsoft Office 95-2000</li><br/>
		<li>Aktualizacje Microsoft Windows 95B-Millenium</li><br/>
		</div>

		<div id="footer">
		Orion Projects, 2021
		</div>
		
		</div>
	
	</body>
	</html>

2 odpowiedzi

0 głosów
odpowiedź 22 kwietnia 2021 przez mb-dir Mądrala (6,710 p.)

Witaj

Po pierwsze nie mogę poprawnie pokolorować linków i usunąć podkreśleń. W oparciu o a.tilelink zastosowałem frazę a:link (inaczej w ogóle nie działa).

Poprawny zapis z użyciem klasy powinien wyglądać tak - używasz samej nazwy klasy, bez tagu <a>, z tego co widze, to w kodzie css który tu zamieściłeś brakuje w paru miejscach zamykających klamer np:

body
{
    background-color: white;
    Color: black;
/* unvisited link */

Po wklejeniu kodu na codepane i dodaniu klamer nie widzać żadnych przerw pomiędzy elementami jak na screenie - zobacz tu

 

W jaki sposób tworzy się akapity (nie pamiętam jak to się nazywa fachowo)? Tabulatorem czy spacją? u mnie, używając klawisza Tab są zbyt duże akapity

Chodzi ci o rozmiar wcięcięć? Z tego co wiem to każdy porządny edytor tekstu powinien mieć możliwość zmiany wielkości wcięcia tworzonego przy pomocy TAB

komentarz 22 kwietnia 2021 przez Orion90 Nowicjusz (130 p.)

A jak potem wywalić z linku podkreślenie? Widziałem screen. Czyli chyba dobrze jest. Właśnie o takie coś mi chodzi. A jak ze skryptem? Czy coś jeszcze jest do poprawy?

Co do wcięć to chodzi mi właśnie o takie coś:

<html>
	<head>
		<meta...>
		<title>
	</head>
</html>

Utworzone za pomocą Notepad++ 3.7

1
komentarz 22 kwietnia 2021 przez mb-dir Mądrala (6,710 p.)

No żeby usunąć podkreślenie trzeba użyć text-decoration: none; w przykładzie chodziło mi o pokazanie jak należy zapisać style dle kasly w css - nie tak jak ty to zrobiłeś czyli a.tilelink{} tylko .tilelink{}. Co do rozmiaru wcięcia to musisz poszperać w ustawieniach edytora, szczerze nie wiem czy w notepadzie moża coś takiego ustawiać, dlatego sugerował bym przeniesienie się na jakiś nowszy, bardziej przystępny do pisania edytor. Oczywiście jeżeli obecnie nie czujesz sie na siłach w samym kodzie, to nie mieszaj sobie jeszcze bardziej nowym edytorem, ale gdy będziesz już w miare ogarniał to przeniesienie się na nowszy edytor to moim zdaniem must have

komentarz 22 kwietnia 2021 przez Orion90 Nowicjusz (130 p.)
A no tak, ciekawe czy tym razem zadziała decoration. Nie użyłem a.tilelink{} tylko a.link{}. Na mojej stronie nie ma i nie będzie kafelków. W ustawieniach edytora, no rozumiem. Jak wspominałem na kanale pasjainformatyki oraz u mojego znajomego na notepad++ były wcięcia mniejsze, więc powinno się dać coś z tym zrobić. Chodziło mi o to, że się gubiłem czy Tab naciskać czy spację. Notepad++ mi się podoba i nie czuję potrzeby używania nowszego oprogramowania. Nie kojarzę nawet niczego prócz FrontPage czy SharePoint Designer 2007, które już dawno nie są aktualne. Wolę też pisać od podstaw ręcznie, nie wstawiając grafik i "przycisków" za pomocą przycisków :) A i posiadam Windows 7 jako główny system. Wystarcza mi a raczej nie mam jak wykorzystać pełnego potencjału tego systemu i komputera, nawet mi się nie chce.
0 głosów
odpowiedź 22 kwietnia 2021 przez VBService Ekspert (251,210 p.)
edycja 23 kwietnia 2021 przez VBService

Masz:

  • <html lang="pl"> - nie domknięty tag
  • tag <li> - powinien się "znajdować" w

    Element <li>

  • Masz w css niedomknięty blok kodu body
  • Masz w css niedomknięty blok kodu a:visited
  • Masz w css blok kodu #content brak wartości dla min-height: przez co jest brak średnika ;
  • <img src="ms.jpg" alt="" style="float: center;" /> - float nie zawiera właściwości center

Możesz ustawić domyślne "ostylowanie" dla wszystkich elementów <a> 

a
{
  text-decoration: none;
}

/* unvisited link */
a:link
{
  color: #2A487F;  
}

/* visited link */
a:visited
{
  color: #2A487F;
}
margin-left: auto;
margin-right:auto;

można zapisać

margin: 0 auto;

Do elementu <img> w tym kontekście, możesz się odwołać, aby "ostylować", np. w ten sposób

<div id="logo">
    <h1><div><img src="ms.jpg" alt="">Spis aktualizacji</div></h1>
</div>
#logo img
{
    /* Twoje style */
}

 

komentarz 23 kwietnia 2021 przez Orion90 Nowicjusz (130 p.)

Okej. W wolnej chwili i z jaśniejszym umysłem zająłem się poprawkami. Trochę się powiodło a trochę nie. Może nadal mam jakieś błędy:

- Linki wyświetlają się już wreszcie tak jak powinny i również na podstronach. 

- Zmniejszyłem odległość akapitów ale jeszcze nie poprawiałem skryptu pod tym względem.

- Pozamykałem tagi i zastosowałem element listy nieuporządkowanej.

- Podomykałem bloki kodu w css. Nie wiem czy dobrze, bo jeszcze go nie do końca rozumiem, szczególnie tej sekcji z wyświetlaniem linków - to mój drugi raz z css.

- Poprawiłem problem ze średnikiem w #content. Trochę się zawiesiłem bo widziałem tylko min-height w bloku #nav ale wreszcie zobaczyłem lukę.

Domyślne "ostylowanie" <a> - tego jeszcze nie rozumiem o co w tym chodzi i czy w HTML go użyć i w CSS i gdzie ale nadal będę oglądał filmy na ten temat.

Część z logo to ja chyba przerobię na tekst. Nie podoba mi się aktualny banner. W ogóle nie podoba mi się wielkość każdego z bloków? Chyba dobrze to nazywam (#nav, #logo, #footer). Nie podoba mi się jeszcze cały wygląd strony głównej. Jakby jednocześnie było zbyt dużo naniesione na nią a jednocześnie zbyt mało.

Nie rozumiem ostatniej linijki w ostatniej odpowiedzi CSS (Twoje style), co ona właściwie daje.

Aktualnie kod i strona wyglądają jak poniżej. Stronka wygląda inaczej, niż na codepen:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-eqiv="X-UA-Compatible" content="IE=edge,crome=1"/>
	
	<title>Spis aktualizacji</title>
	
	<meta name="descriptioin" content="Zbiory aktualizacji dla systemów rodziny 9x 
	oraz pakietĂłw w Microsoft Office" />
	<meta name="keywords" content="Aktualizacje, Windows, Office, 9x" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	
	</head>
	
	<body>
	
		<div id="container">
		<div id="logo">
			<h1><div><img src="ms.jpg" alt="">Spis aktualizacji</div></h1>
		</div>
		
		<div id="nav">
		<h4><span style="background: #002987;">Kategorie</span></h4>
		<a class="link" href="Windows.html">Microsoft Windows</a><br/><hr/>
		<a href="Office.html">Microsoft Office</a><br/><hr/>
		</div>

		<div id="content">
		<h3>Zapraszamy</h3><hr/>
		Znajdziesz tutaj spis aktualizacji Microsoft z rodziny 9x<br/>
		ObejmujÄ… one:<br/>
<ul>
	<li>Aktualizaje Microsoft Office 95-2000</li>
	<li>Aktualizacje Microsoft Windows 95B-Millenium</li>
</ul>
		</div>

		<div id="footer">
		Orion Projects, 2021
		</div>
		
		</div>
	
	</body>
	</html>
body
a
{
  text-decoration: none;
}
 
/* unvisited link */
a:link
{
  color: #2A487F;  
}
 
/* visited link */
a:visited
{
  color: #2A487F;
}

#container
{
	width: 1000px;
	margin: 0 auto;
}
#logo img
{
	/* twoje syle */
}
{
background-color: #C0C0C0;
color: black;
text-align: left;
padding: 15px;
}
#nav
{
background-color: white;
color: white;
text-align: right;
float: left;
width: 200px;
min-height: 620px;
padding: 15px;
}
#content
{
background-color: white;
color: black;
text-align: left;
float: left;
width: 600px;
min-height: 620px;
padding: 20px;
}
#footer
{
background-color: #C0C0C0;
color: #2A487F;
text-align: center;
clear: both;
padding: 20px;
}

 

komentarz 23 kwietnia 2021 przez VBService Ekspert (251,210 p.)
edycja 23 kwietnia 2021 przez VBService

Generalnie powinno się unikać mieszania styli z kodem html, jak tu

<div id="nav">
    <h4><span style="background: #002987;">Kategorie</span></h4>
    <a href="Windows.html">Microsoft Windows</a><br/><hr/>
    <a href="Office.html">Microsoft Office</a><br/><hr/>
</div>
<div id="nav">
    <h4><span>Kategorie</span></h4>
    <a href="Windows.html">Microsoft Windows</a><br/><hr/>
    <a href="Office.html">Microsoft Office</a><br/><hr/>
</div>

a w css-ie możesz napisać np. tak

#nav h4 span 
{
    background-color: #002987;
}

 

online - przykład

<div id="logo">
  <h1>
    <div>
      <img src="https://source.unsplash.com/260x211" alt="">
      Spis aktualizacji
    </div>
  </h1>
</div>

przykładowe ostylowanie <img>

#logo img
{
  display: block;
  border: 2px solid rgba(0,0,0,0.2);  
  padding: 0.25em;
  margin-bottom: 1em;
  width: 210px;
  height: 210px;  
  padding: 0.25em;
  border-radius: 0.5em;
  box-shadow: 0 0 2px 4px gray;
}

 

Podobne pytania

0 głosów
1 odpowiedź 286 wizyt
pytanie zadane 27 marca 2016 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 12,672 wizyt
pytanie zadane 29 grudnia 2015 w C i C++ przez pomuz_mi_prosze_:D Nowicjusz (120 p.)
–3 głosów
1 odpowiedź 241 wizyt
pytanie zadane 14 maja 2020 w C i C++ przez Ania Kowalczuk Nowicjusz (120 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...