Skocz do zawartości

Bałagan w CSS

ruda wiewióra

Przez ruda wiewióra
w HTML i CSS

Rekomendowane odpowiedzi

ruda wiewióra Newbie

ruda wiewióra

Opublikowano
Opublikowano

Witajcie :)

Chciałabym prosić Was o poradę odnośnie uporządkowania stosunkowo rozbudowanego CSSa (a przynajmniej bardziej rozbudowanego niż moje dotychczasowe CSSy ;) ).

Mam stronę zbudowaną w ten sposób, że w zależności od podstrony wartości dla poszczególnych elementów, np. content są różne. Roboczo rozwiązałam to w ten sposób, że rozdzieliłam to na content1, content2, content3 itd... Niektóre z tych "contentów" umieszczone są później na jednej podstronie jeden pod drugim (co jak się domyślam nie jest poprawne). Potem w związku z tym doszła kolejna kwestia: jako że większość tych "contentów" podzielona jest na left i right, to validator nie przepuszczał mi dwóch "contentów" i tym samym podwójnego left i right, dlatego im też przydzieliłam nazwy left1 i right1, left2 i right2 itd... Zrobił się z tego niezły mętlik. Do tego jeszcze header1, header2, header3... który też jest inny dla poszczególnych podstron i mam w tym CSSie mały sajgon :) Chciałabym to wszystko jakoś uporządkować i nie wiem, jak to zrobić, żeby było poprawnie i korzystnie dla pozycjonowania. Porozdzielać to na osobne CSSy dla każdej podstrony? Jeśli tak, to jak rozwiązać sprawę kilku contentów na jednej podstronie, np. w sytuacji kiedy podstrona jest zbudowana w ten sposób: najpierw div dwukolumnowy, później div jednokolumnowy, a później znów dwukolumnowy. Jak sobie poradzić z taką budową?

Jak widać jestem jeszcze zielona jeśli chodzi o CSSa ;)

Z góry bardzo dziękuję za wszelką pomoc.

Odnośnik do komentarza
Udostępnij na innych stronach
motorider Newbie

motorider

Opublikowano
Opublikowano

Ja zwykle dodaję klasę do body, np <body class="front">. Wtedy nie muszę tworzyć różnych id dla divów tylko robię coś takiego w css .front #header lub .page #header.

Poczytaj trochę o divitis i classitis np tu https://webinside.pl/artykul-427-divitis-i-...webmastera.html

Jeżeli css jest na prawdę mocno rozbudowany wtedy warto podzielić go na kilka plików. Ile masz linii kodu w swoim?

Odnośnik do komentarza
Udostępnij na innych stronach
ruda wiewióra Newbie

ruda wiewióra

Opublikowano
  • Autor
Opublikowano

498

Nie mam pojęcia czy to dużo czy nie, ale w porównaniu do moich tymczasowych stron sporo ;) Zaczęłam szukać informacji na temat semantyki i widzę już, że u mnie z nią nie jest idealnie, wręcz przeciwnie ;) Muszę się trochę dokształcić w tym temacie i myślę, że wtedy będzie mi łatwiej to wszystko przebudować i doprowadzić do jakiegoś porządku ;) Wiem już, że na pewno muszę zrezygnować z takiej ilości divów i że pewne rzeczy dałoby się zastąpić klasami.

Odnośnik do komentarza
Udostępnij na innych stronach
ruda wiewióra Newbie

ruda wiewióra

Opublikowano
  • Autor
Opublikowano

Dziękuję bardzo za wszystkie porady :soczek:

Przebudowuję kod i póki co jakoś szło, ale utknęłam na tym, jak najsensowniej rozwiązać sprawę różnego wyglądu headera dla poszczególnych podstron. Jego budowa na stronie głównej jest taka:

HTML:

<div id="header">
<p>tekst</p>

<ul>
<li><a href="link1.php">dział 1</a></li>
<li><a href="link2.php">dział 2</a></li>
<li><a href="link3.php">dział 3</a></li>
<li><a href="link4.php">dział 4</a></li>
<li><a href="link5.php">dział 5</a></li>
<li><a href="link6.php">dział 6</a></li>
</ul>

<p class="navigation">Jeste¶ w: <a href="index.php">STRONA GŁÓWNA</a></p>
</div>

CSS:

#header { height:396px; width:798px; background:url(./images/header.png) no-repeat; }
#header p { padding:52px 16px 0 0; text-align:right; }

#header ul { padding:122px 0 0 23px; }
#header ul, ul li { display:block; }
#header ul li { float:left; padding:0 0 0 13px; width:112px; }

#header p.navigation { margin:90px 0 0 36px; text-align:justify; }

Czyli jakieś tam tło, na górze linijka tekstu (mapa strony, kontakt itd.), później poziome menu i nawigacja.

Dla podstron wygląda to już trochę inaczej: header na każdej podstronie ma inne tło, zmienia się też wygląd menu - z poziomego na kilkukolumnowy:

#header ul { float: left; }
#header li { text-align: center; }
.menu1 { margin-top:121px; padding-left: 37px; width:112px; }
#header ul.menu2, #header ul.menu3, #header ul.menu4, #header ul.menu5, #header ul.menu6 { margin-top:121px; margin-left:13px; width:112px; }

Jedyne, co przychodzi mi do głowy w takiej sytuacji, to ustawianie w CSS wyglądu dla każdego headera osobno i nazywanie tego powiedzmy header-dział1, header-dział2 itd. Tyle że wtedy tych headerów musiałoby być co najmniej kilka i znów robi się bałagan. Czy można sobie z tym poradzić jakoś inaczej (ale nie tworząc osobnych plików CSS dla każdej podstrony)?

Odnośnik do komentarza
Udostępnij na innych stronach
Vampirius Newbie

Vampirius

Opublikowano
Opublikowano

najprościej będzie dodać subklase np.

klasa główna

.header { height:396px; width:798px; background:url(./images/header.png) no-repeat; }

subklasa

.headerp1 {background:url(./images/inny_obrazek.png) no-repeat; }

a potem w teksie dajesz <div class='header headerp1'></div>

nie zaoszczędzisz na tym dużo miejsca ale ja innej metody nie znam

Pozycjonowanie stron Rzeszów

Odnośnik do komentarza
Udostępnij na innych stronach
ruda wiewióra Newbie

ruda wiewióra

Opublikowano
  • Autor
Opublikowano
Ja ze swojej strony śmiałbym zaproponować umieszczanie stylów specyficznych dla danej podstrony w jej sekcji <head /> :)

Chyba rzeczywiście z tego skorzystam, bo zaoszczędzam w ten sposób dużo miejsca w zewnętrznym pliku CSS, a w HTML to tylko 1 dodatkowa linijka :)

Chciałabym jeszcze przy okazji prosić o pomoc w kwestii pozycjonowania poszczególnych divów za pomocą CSS. Czytam niby o position absolute relative itd., próbuję to zastosować u siebie, ale efektów nie widzę i nie wiem, co robię źle. Chodzi o to, żeby w dokumencie HTML div content był jako pierwszy, zaraz po body, po nim header i później footer, ale żeby na stronie header wyświetlał się pierwszy, a content pod nim. Da się to w ogóle osiągnąć?

Tak wygląda fragment kodu HTML:

<body>
<div id="header">
(menu i ścieżka okruszków)
</div>

<div id="content">
<h1>tytuł</h1>
<h2>podtytuł</h2>
<p>treść</p>
</div>

<div id="footer">
(stopka)
</div>

</body>
</html>

a chciałabym, żeby wyglądał w ten sposób:

<body>
<div id="content">
<h1>tytuł</h1>
<h2>podtytuł</h2>
<p>treść</p>
</div>

<div id="header">
(menu i ścieżka okruszków)
</div>

<div id="footer">
(stopka)
</div>

</body>
</html>

(ze względu na h1 i h2, które z tego co zrozumiałam powinny być jak najbliżej <body>?)

CSS wygląda tak:

/*-------	ZERUJE DOMYSLNE USTAWIENIA PRZEGLADAREK ----------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td { margin:0 auto; padding:0; line-height:12.5pt; font-size:10px; color:#000000; font-family:verdana; }
img { margin:0; padding:0; border:0; }
ol,ul { list-style:none; }
a, a:link, a:hover, a:active { font-weight:bold; color:#C96B28; text-decoration:none; margin:0; padding:0; }
a:hover { text-decoration:underline; }
a.menu, a.menu:link, a.menu:hover, a.menu:active { font-weight:bold; color:#000000; text-decoration:none; margin:0; padding:0; }
a.menu:hover { text-decoration:underline; }
h1 { padding:0 0 0 36px; font-size:13px; }
h2 { padding:0 0 15px 36px; }

body { text-align:center; margin:13px 0 0 0; padding:0; background:url(./images/background.jpg) repeat; }

#header { height:396px; width:798px; }
#header p { padding:52px 16px 0 0; text-align:right; }

ul#menu { padding:122px 0 0 23px; }
ul#menu, ul#menu li { display:block; }
ul#menu li { float:left; padding:0 0 0 13px; width:112px; }

#content { width:798px; height:100%; background: url(./images/content.png) repeat-y; text-align:justify; }
#content p { padding:0 26px 0 36px; }
#content p.space { padding:0 26px 15px 36px; }

#footer { height:206px; width:798px; background:url(./images/footer.png) no-repeat; text-align:justify; }
#footer p { padding:215px 0 20px 24px; }

Próbowałam do #header dopisać np. position:relative; top:0; czy position:absolute; top:0; itp. ale nic to nie dało i nie mogę dojść do tego co robię nie tak :)

Odnośnik do komentarza
Udostępnij na innych stronach
ruda wiewióra Newbie

ruda wiewióra

Opublikowano
  • Autor
Opublikowano

Mam jeszcze jedno pytanie, tak przy okazji, żeby nie zakładać nowego wątku :) Strona którą tworzę to portfolio i większość podstron na niej nie zawiera tekstu tylko miniaturki zdjęć. Czy jeśli każda taka miniaturka będzie miała alt i może title to google to zaakceptuje? Czytałam, że na każdej podstronie ma być tekst, powiedzmy minimum 250 słów. Czy można się bez tego obejść?

I druga sprawa - strona zawiera podstrony, które nie zawierają jeszcze prac, tylko stanowią jakby zapowiedź tego co z czasem pojawi się w portfolio. Nie chcę oczywiście umieszczać tam komunikatu, że strona jest w budowie, tylko na każdej z tych podstron napisać, czego dotyczy i co wkrótce będzie można tam znaleźć. Tyle, że taki tekst nie będzie zbyt długi, góra 3-4 linijki. Czy to będzie akceptowalne dla google, czy osłabi pozycję strony? Wolałabym, żeby teksty były krótsze, ale sensowne i spójne, a nie pisane na siłę, żeby tylko miały wymaganą długość. A jak zapatruje się na to google?

Dziękuję z góry za odpowiedzi, może nie trzeba będzie zaśmiecać forum kolejnym tematem ;)

Odnośnik do komentarza
Udostępnij na innych stronach
treker Newbie

treker

Opublikowano
Opublikowano

Jak strona będzie pusta to tak czy inaczej nie będzie w TOP'ie chyba, że planujesz jakąś super akcje marketingową. Oczywiście, że jak potrzebujesz zrobić podstronę na same screeny Twoich prac, to przecież nie będziesz na siłę wymyślał długich tekstów, warto jednak umieścić informację typu np.: czas pracy, strona klienta, zakres prac etc.

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności