Jestem początkujący i właśnie piszę swoją pierwszą stronę. W sumie już skończyłem wersję "pod swój komputer" i zacząłem próbować dostosować pewne reguły dla momentu, w którym moja strona się psuje. Jednakże nie rozumiem dlaczego-prawdopodobnie przez jakieś mechanizmy, o których jeszcze nie mam pojęcia przy zastosowaniu @media jedyne co mogę zmienić dla klasy Tv to kolor tła... nie mogę zmienić marginesu od lewej strony. Czy mógłby mi ktoś pomóc rozwiązać ten problem albo ewentualnie podpowiedzieć prostszy sposób na optymalizacje mojego mało przejrzystego CSS'a tak by działał dla różnych rozdzielczości? "Kłopotliwy moment wyróżniłem gwiazdkami ale udostępniam całego CSS'a. Dziękuję za wszystkie wskazówki (w razie potrzeb mogę wstawić również html'a.
Kod: Zaznacz cały
/* Reset default browser styles
*/
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;
}
/*****************************************************************/
body{
font-family: "Comic Sans MS","Times New Roman",sans-serif; /* Ustawienie domyślnej czcionki dla strony wraz z "zabezpieczeniem"*/
background-color: #c2d4dd;
}
p{
font-size: 12px;
}
h1{
font-weight: 600;/*pogrubienie nagłówka 1*/
font-size: 30px;
}
h2{
font-size: 20px;
}
strong{
font-weight:600;
}
br{
line-height:1.5; /*bez jednostki-wysokość wiersza relatywnie do elementu bazowego-tekstu specjalnie pod div'a z tekstem*/
}
html{
height: 100%;
}
/*************************************************************************************************************************************/
@media screen and (max-width: 1023px){
.TV img{
margin-left: 2%;
}
}
/*TV dla >1023px*/
.TV img{
margin-left: 15%;
}
/**************************************************************************8
**************************************************************************8/
.Banner{
background-image: url("banner_v7.png");
background-repeat: no-repeat; /*by obrazek domyślnie się nie powtarzał*/
background-position: center; /*Wyśrodkowanie obrazka*/
margin-bottom: 1%;
min-height: 230px;/*ustawienie minimalnej wysokosći by baner był zawsze "dobrze widoczny"*/
}
.Menu{
background-color: #667292;
float: left;
height: 30%;
width: 15%;
height: 260px;/*Da się na procenty zamienić ??? 260 px*/
margin-left: 13%;
border: 4px outset #563f46;/*Właściwości ramek dla div'ów*/
border-radius: 6px;
}
.Main-body{
border: 4px outset #563f46;/*Właściwości ramek dla div'ów*/
border-radius: 6px;
background-color: #667292;
width: 40%;
margin: 0 auto;
min-height: 660px; /*da się na procenty zamienić ??? */
}
.Main-body p{
padding: 5% 0; /* % jest obliczany względem elemtnu nadrzędnego (rodzica) */
text-align: center;
}
.Footer{
background-color: #625750;
margin-top: 1%;
min-height: 27px; /* zamienić na procenty */
}
.Menu-Main-Part{
text-align: center;/*Przeniesienie całej listy na środek kontenera Menmu*/
padding-top: 25%; /*Właściwe umieszczenie menu w kontenerze*/
}
/*formatowanie Menu w zależności od tego czy użytkownik kliknął już
na pozycje na liście czy nie - visited-jak kliknął link-jak nie*/
.Menu-Main-Part ul a:link, ul a:visited {
display: block;
width: 75%;
height: 30px;
background-color: #50394c;/*kolor tła przycisku - docelowo ma być grafika*/
color: white;/*kolor tekstu*/
margin: 0 auto; /*wysodkowanie elementu(całej listy) wzgledem kontenera*/
text-decoration:none; /*Usunięcie domyślnego podrkeślenia*/
border: 2px outset #563f46;/*właściwość outset definiuje nam "ramke"*/
border-radius: 6px;
}
/*formatowanie menu w zależności czy użytkownik na nie "najechał"-wskazał*/
/*definiujemy co się stanie po najechaniu myszką*/
ul a:hover {
border-style: inset;
padding: 7px 3px 3px 7px;
background-color: #034f84;
}
#description{
text-align:center; /* Wyśrodkowanie tekstu względem div'a main-body*/
}
/**************Media queries**************/
