Pościskane elementy strony + problem z ułożeniem nawigacji

radziiu
(@radziiu)

7 years, 1 months temu

Hej, dziś stworzyłem mój pierwszy styl pod wordpress’a i po pewnym czasie i coraz głębszym grzebaniu w kodzie pojawił się mały problem. Właściwie to dwa problemy.
1. Wszystkie elementy na stronie są pościskane. Chodzi mi o to, że nie mam żadnych przerw między czcionkami czy też odnośnikami, co widać na screenie. Na czym polega problem? Samemu bezskutecznie z tym walczyłem.

2. Problem drugi jest taki, że starałem się ułożyć nawigacje (wp_nav_menu) na równo z tytułem strony (niedługo chce to zamienić na logo) i nie ważne co bym zrobił i tak nawigacja jest lekko pod nim. Podsunie ktoś pomysł jak zrobić żeby logo/tekstowy tytuł strony był na równo z nawigacją? Na równo w poziomie

Viewing 8 replies - 1 through 8 (of 8 total)

(@mrpauloen)

1. Wszystkim tym elementom brakuje po prostu odpowiedniego formatowania.
Przede wszystkim marginesów zewnętrznych i wewnętrznych. Każdy z bloków powinien mieć przynajmniej po 10px marginesu wew. czyli: padding: 10px;

2. Dodaj im opływanie tak jak zrobiłeś to z tymi dwoma prostokątami (szary i zielony) i wtedy ich poziomy się wyrównają.

Zobacz to:
http://www.lo4.resman.pl/arek/style.htm

Thread Starter

radziiu

(@radziiu)

7 years, 1 months temu

/*
Theme Name: Sports analitycs 
Theme URI: Your theme's URL
Description: k(NaMLhWgOr8i42#
Version: 1.0.1 
Author: Radek
Author URI: Your web address
Tags: Tags to locate your theme in the WordPress theme repository
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*Struktura*/

body {
    font-family: arial, helvetica, verdana;
    font-size: 0.8em;
    width: 100%;
    height: 100%;
}

.header {
    background-color: #1be;
    margin-left: 14%;
    top: 0;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    width: 72%;
    height: 250px;
	padding: 10px;
}

.content {
    background-color: #999;
    margin-left: 14%;
    margin-top: 5px;
    float: left;
    width: 46%;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
	padding: 10px;
}

.sidebar {
    background-color: #1d5;
    margin-right: 14%;
    margin-top: 5px;
    float: right;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    top: 180px;
    width: 23%;
	padding: 10px;
}

.footer {
    background-color: red;
    margin-left: 14%;
    float: left;
    margin-top: 5px;
    width: 72%;
    height: 50px;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
	padding: 10px;
}

nav ul li {
	float: left;
}	

nav ul li a {
	display: inline-block;
}

Tak wygląda mój cały css, dodanie marginesu wewnętrznego nic nie dało. Dla testu wrzuciłem też margines zewnętrzny dla dwóch elementów strony i dalej nic

Paweł

(@mrpauloen)

7 years, 1 months temu

Udostępnij jeszcze kod html jeśli możesz lub po prostu ten cały szablon.

Thread Starter

radziiu

(@radziiu)

7 years, 1 months temu

Nie ma problemu – https://www.dropbox.com/s/qtef1zeizu1vfpg/sports.zip?dl=0

Paweł

(@mrpauloen)

7 years, 1 months temu

Ok. Tak jak myślałem.
Po prostu brakuje Ci formatowania każdego z elementów a dokładniej rzecz ujmując, każdy z elementów ma przypisane to samo wstępne formatowanie tu:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

a nie ma indywidualnego.

To co masz teraz (arkusz stylów) to tylko podstawowy szkielet. Zauważ, że znajdują się w nim prawie wszystkie znaczniki HTML. Jak myślisz – jak będzie wyglądała strona jeżeli każdemu z jej elementów nadasz identyczne formatowanie? Musisz dla każdego z elementów strony dorobić osobne. Wystarczy, że na moment usuniesz to co wyżej i sam zobaczysz efekt, o co chodzi.

Czyli podsumowując. Każdy z elementów strony musi byś formatowany indywidualnie. Nie wystarczy nadać klasy głównym elementom.

Jeżeli wydaje Ci się to za dużo roboty, proponuje Ci skorzystać z gotowych bibliotek jak np. bootstrap.

Ta odpowiedź została zmodyfikowana 7 years, 1 months temu przez Paweł.

Thread Starter

radziiu

(@radziiu)

7 years, 1 months temu

To co pokazałeś, to część kodu z css reset. Gdzieś na angielskojęzycznej stronie wyczytałem, że warto wrzucić ten kod, dla lepszego pozycjonowania elementów. Czyli usunięcie tego powinno naprawić problem?, bo szczerze mówiąc wywaliłem tą część kodu i strona wygląda tak samo.

Thread Starter

radziiu

(@radziiu)

7 years, 1 months temu

.sidebar {
    background-color: #1d5;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
	margin: 10px;
	padding: 10px;
}

Każdemu z elementów strony czyli – header, sidebar, footer nadałem osobne marginesy i czcionka nadal jest pościskana. Dodam, że może nie do końca rozumiem o co biega, bo to moje zupełne początki z cssem.

line-height: 1.5 – pomyślałem, że może użycie interlini może pomoże, ale też bez rezultatów

Ta odpowiedź została zmodyfikowana 7 years, 1 months temu przez radziiu.

Paweł

(@mrpauloen)

7 years, 1 months temu

Każdemu z elementów strony czyli – header, sidebar, footer nadałem osobne marginesy i czcionka nadal jest pościskana

To są tylko kontenery, ale w nich znajdują też się inne elementy, które nie są sformatowane lub przejmują formatowanie zadeklarowane na początku:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

Dlatego jest wszystko pościskane.
Weź sobie znajdź dowolny motyw w repo lub np. Twentyfifteen i zobacz tam, że każdy z elementów ma formatowanie dodatkowe. Pomimo zadeklarowania globalnych wartości na początku arkusza czy tzw css reset.

Viewing 8 replies - 1 through 8 (of 8 total)

Temat ‘Pościskane elementy strony + problem z ułożeniem nawigacji’ jest zamknięty na nowe odpowiedzi.

Wyświetlenia