Podstawy - mała przeróbka szablonu na DIV'ach

Wszystko o HTML, XHTML, XML, CSS.
adzi0
Posty: 8
Rejestracja: 01 lut 2013, 22:05:20
Płeć: Niewybrana
User Agent: Firefox Windows

Podstawy - mała przeróbka szablonu na DIV'ach

Post autor: adzi0 »

Witam. Podstawa, a nie mogę sobie za ch*lerę poradzić. Szablon jest darmowy, na DIV'ach, pewnie większość kojarzy go.
Potrzebuję rozciągnąć środek strony, środkową część, tak aby mieścił mi się filmik o szerokości 650px, (albo ogólnie o jakiejś wartości, tak, abym sobie mógł go dopasować do swoich potrzeb) i nie wchodził na prawą stronę tego szablonu. Prawą stronę można skrócić, jednak rad bym był, gdyby środek został poszerzony, a prawa strona szablonu została pierwotnej wielkości.
O co chodzi:

Obrazek

Szablon:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="Description" content="opis strony" />
<meta name="keywords" content="słowa kluczowe" />
<meta name="Author" content="Autor" />
<meta name="Robots" content="ALL" />
<meta name="revisit-after" content="10" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div class="pds">
    <div><img src="images/t1.jpg" alt="" border="0" usemap="#top" /></div> 
    <!--logo strony-->
    <div><img src="images/t2.jpg" alt="" /></div> <!--grafika pod logo-->
    <!--menu górne-->
    <div class="m">
        <ul>
            <li><a href="#">Strona główna</a></li>
            <li><a href="#">O nas</a></li>
            <li><a href="#">Katalog stron</a></li>
            <li><a href="#">Informacje o stronie</a></li>
            <li><a href="#">Galeria zdjęć</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </div>
    <!-- środek strony podzielony na trzy kolumny -->
    <div class="s">
        <div class="left">
        
            <div class="mng1">Menu dodatkowe</div>
            <div class="m2">
                <ul>
                    <li><a href="#">Strona główna</a></li>
                    <li><a href="#">O nas</a></li>
                    <li><a href="#">Katalog stron</a></li>
                    <li><a href="#">Informacje o stronie</a></li>
                    <li><a href="#">Galeria zdjęć</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
                <div class="both"></div>
            </div>
            
            <div class="mng2">Informacje</div>
            <div class="mtxt">
                        <p> blablabla</p>
            </div>
        
        </div>
      <div class="center">
            
            <div class="ng">Witamy na naszej stronie</div>
            
        
        
              <p> blabla</p>
              
      </div>        
        
        <div class="both"></div>
    </div>
    <!-- stopka  -->
    <div class="stopka">
        <span>Copyright by www.nazwastronyy.pl - Wszystkie prawa zastrzeżone.</span>
        Grafika: <a href="http://trololo.pl" title="Szablony dla stron internetowych">bla.pl - profesjonalne szablony</a>
    </div>
    
    <!--Mapa odsyłaczy-->
    <map name="top" id="top"><area shape="rect" coords="23,20,315,77" href="index.html" alt="Strona główna" />
    <area shape="rect" coords="660,32,739,62" href="index.html" alt="Strona główna" />
    <area shape="rect" coords="759,30,866,63" href="#mapa-strony" alt="Mapa strony" />
    <area shape="rect" coords="882,30,971,62" href="#kontakt" alt="Kontakt" />
    </map>
    
</div>

</body>
</html>
Bardzo bym prosił o wytłumaczenie jak to zmieniać w zależności od potrzeb(szerokość środka strony[tam gdzie ma być tekst tudzież w tym przypadku player]). Nie potrzebuję całego kursu, wystarczy linijka w którym miejscu i jaką wartość zmieniać.

Z góry dziękuję i pozdrawiam.
Venite
Obsługa CBA
Posty: 3197
Rejestracja: 18 lut 2011, 08:01:57
Lokalizacja: Kędzierzyn-Koźle
Płeć: Mężczyzna
User Agent: Chrome Windows 1440x900

Re: Podstawy - mała przeróbka szablonu na DIV'ach

Post autor: Venite »

adzi0 , byłoby fajnie jakbyś podał adres strony. Firebugiem można by wtedy sprawdzić jaki to jest Div i poradzić Ci, w którym miejscu w CSS możesz tego szukać.

Nie wiem, z powyższego kodu nie wynika gdzie jest umieszczony odtwarzacz. W zasadzie to nic nie wynika, widać tylko schemat rozmieszczenia strony.

Strzelam, że player może być w środkowej kolumnie, wtedy w pliku style.css szukasz właściwości dla diva o klasie "center" i atrybutu "width" odpowiedzialnego za szerokość, najczęściej podawaną w pixelach.

Jednak ciężko cokolwiek powiedzieć bez podglądu :)
Czy wiesz, że:
  • W Panelu CBA w sekcji "wsparcie" jest dedykowany system ticketów (obsługi technicznej)
  • Odpowiadamy na Forum oraz na adres mailowy obsluga(malpa)cba.pl
  • Jesteśmy również na Facebooku! Znajdź nas na facebook.com/hostingcba | cba.pl
W czym jeszcze możemy pomóc?
adzi0
Posty: 8
Rejestracja: 01 lut 2013, 22:05:20
Płeć: Niewybrana
User Agent: Firefox Windows 1680x1050

Re: Podstawy - mała przeróbka szablonu na DIV'ach

Post autor: adzi0 »

Kod: Zaznacz cały

.left{
     float:left; 
    width:210px;
    padding-left:5px;
    }
.center{
     float:left; 
    width:546px;
    padding-left:14px;
    }
.right{
    float:left; 
    width:210px;
    padding-left:14px;
    } 
Player ma 650px i faktycznie jest w środkowej części. Zmieniam center:

Kod: Zaznacz cały

width:546px; na 650px
[/b] i niestety nic działa... A ten CSS wydawał się taki prosty :oops:
Venite
Obsługa CBA
Posty: 3197
Rejestracja: 18 lut 2011, 08:01:57
Lokalizacja: Kędzierzyn-Koźle
Płeć: Mężczyzna
User Agent: Chrome Windows 1440x900

Re: Podstawy - mała przeróbka szablonu na DIV'ach

Post autor: Venite »

hmm. masz możliwość pokazania całego pliku CSS? Może być jako kod albo jako załącznik.
Nie wiem, co robią te paddingi, ale marginesy chyba nie powinny tu przeszkadzać.
Czy wiesz, że:
  • W Panelu CBA w sekcji "wsparcie" jest dedykowany system ticketów (obsługi technicznej)
  • Odpowiadamy na Forum oraz na adres mailowy obsluga(malpa)cba.pl
  • Jesteśmy również na Facebooku! Znajdź nas na facebook.com/hostingcba | cba.pl
W czym jeszcze możemy pomóc?
adzi0
Posty: 8
Rejestracja: 01 lut 2013, 22:05:20
Płeć: Niewybrana
User Agent: Firefox Windows

Re: Podstawy - mała przeróbka szablonu na DIV'ach

Post autor: adzi0 »

Kod: Zaznacz cały

/* CSS Document */
body {
     background:#0B0B0B url(images/bg.gif) repeat-x;
     padding:15px 0px;
     margin:0px; 
     font-size:62.5%; 
     font-family:Arial, Helvetica, sans-serif;
}

.pds{
    width: 1005px;
    margin:auto;
    font-size:1.2em;
    color:#A3A8AD;
}
.both{ clear:both; } 

a{ color:#FFCC66; }
a:hover{ text-decoration:none; }

.left{
     float:left; 
    width:210px;
    padding-left:5px;
    }
.center{
     float:left; 
    width:546px;
    padding-left:14px;
    }
.right{
    float:left; 
    width:210px;
    padding-left:14px;
    }

.s{ background:url(images/s.gif); }    
.stopka{ background:url(images/stopka.jpg) no-repeat; height:60px; padding:15px 0px 0px 0px; text-align:center; color:#666666; } 
.stopka span{ font-weight:bold; display:block;}

.m{ background:url(images/t3.gif) no-repeat; height:90px;}
.m ul{ list-style:none; margin:0; padding:5px 30px; } 
.m li{ float:left;  }
.m a{ display:inline-block; padding:17px 20px 18px 20px; color:#E2E2E2; text-transform:uppercase; font-weight:bold; text-decoration:none;}
.m a:hover{ background:url(images/m.gif) repeat-x; color:#fff; text-decoration:none;}

.m2{ padding:5px 0px;}
.m2 ul{list-style:none; margin:0px; padding-left:4px;}
.m2 li{float:left; width:200px; padding:0; margin:0; }
.m2 a{ padding:6px 20px; display:block; border-bottom:1px solid #000; border-top:1px solid #333; text-decoration:none; color:#999999;  }
.m2 a:hover{ background:#302e2e; color:#fff;}

.mtxt{
    padding:8px; 
    font-size:.9em;
}

.mng1{ 
    background:url(images/mng1.jpg) no-repeat; 
    color:#fff; 
    font-weight:bold; 
    padding:11px 15px 10px 35px;
}
.mng2{ 
    background:url(images/mng2.jpg) no-repeat; 
    color:#fff; 
    font-weight:bold; 
    padding:11px 15px 10px 35px;
}
.ng{ 
    background:url(images/sng.jpg) no-repeat; 
    color:#fff; 
    font-weight:bold; 
    padding:12px 15px 15px 45px;
}
.center p{ margin:0px; padding:10px; line-height:1.4em; }

input{ border:1px solid #333; background:#000; color:#FF9900;  padding:3px 5px;} 
Awatar użytkownika
Fineas_Nigellus
Posty: 582
Rejestracja: 08 lis 2012, 17:33:45
Płeć: Niewybrana
User Agent: Opera Mobile Android 240x301

Re: Podstawy - mała przeróbka szablonu na DIV'ach

Post autor: Fineas_Nigellus »

adzi0, spróbuj zmienić width przy .pds zamiast 1004 na 1109 i wtedy przy center zamiast 546 na 650px.
Mówimy STOP Reklamie-Sygnaturce! ;)
ODPOWIEDZ