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
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows

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

Postautor: adzi0 » 02 lut 2013, 01:43:32

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:

Image

Szablon:

CodeColon Select All Code

<!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
Reputacja: 43
Lokalizacja: Kędzierzyn-Koźle
Płeć: Mężczyzna
User Agent: Chrome Windows 1440x900

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

Postautor: Venite » 02 lut 2013, 12:01:46

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
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows 1680x1050

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

Postautor: adzi0 » 02 lut 2013, 12:50:55

CodeColon Select All Code

.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:

CodeColon Select All Code

width:546pxna 650px
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
Reputacja: 43
Lokalizacja: Kędzierzyn-Koźle
Płeć: Mężczyzna
User Agent: Chrome Windows 1440x900

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

Postautor: Venite » 02 lut 2013, 15:44:42

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
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows

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

Postautor: adzi0 » 03 lut 2013, 01:07:48

CodeColon Select All Code

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

.
pds{
    
width1005px;
    
margin:auto;
    
font-size:1.2em;
    
color:#A3A8AD;
}
.
bothclear:both; } 

acolor:#FFCC66; }
a:hovertext-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;
    }

.
sbackground:url(images/s.gif); }    
.
stopkabackground:url(images/stopka.jpgno-repeatheight:60pxpadding:15px 0px 0px 0pxtext-align:centercolor:#666666; } 
.stopka spanfont-weight:bolddisplay:block;}

.
mbackground:url(images/t3.gifno-repeatheight:90px;}
.
m ul{ list-style:nonemargin:0padding:5px 30px; } 
.
m lifloat:left;  }
.
m adisplay:inline-blockpadding:17px 20px 18px 20pxcolor:#E2E2E2; text-transform:uppercase; font-weight:bold; text-decoration:none;}
.m a:hoverbackground:url(images/m.gifrepeat-xcolor:#fff; text-decoration:none;}

.m2padding:5px 0px;}
.
m2 ul{list-style:nonemargin:0pxpadding-left:4px;}
.
m2 li{float:leftwidth:200pxpadding:0margin:0; }
.
m2 apadding:6px 20pxdisplay:blockborder-bottom:1px solid #000; border-top:1px solid #333; text-decoration:none; color:#999999;  }
.m2 a:hoverbackground:#302e2e; color:#fff;}

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

.
mng1
    
background:url(images/mng1.jpgno-repeat
    
color:#fff; 
    
font-weight:bold
    
padding:11px 15px 10px 35px;
}
.
mng2
    
background:url(images/mng2.jpgno-repeat
    
color:#fff; 
    
font-weight:bold
    
padding:11px 15px 10px 35px;
}
.
ng
    
background:url(images/sng.jpgno-repeat
    
color:#fff; 
    
font-weight:bold
    
padding:12px 15px 15px 45px;
}
.
center pmargin:0pxpadding:10pxline-height:1.4em; }

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

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

Postautor: Fineas_Nigellus » 03 lut 2013, 11:53:50

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

Wróć do „HTML, CSS”

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 1 gość