Mokinuosi CSS, pirmasis klausimas

Tai va, susikarpiau ir tipo susikodinau viska, bet del neaiskiu priezasciu vaizdelis vat toks... Gal kas turit ideju del ko taip galejo nutikti?

Galvoji, mes žinom, kaip turėjo atrodyt viskas?

O tekstas ne į tą divą įdėtas, arba nenustatytas jo plotis.

Tai va, susikarpiau ir tipo susikodinau viska, bet del neaiskiu priezasciu vaizdelis vat toks... Gal kas turit ideju del ko taip galejo nutikti?

Kaip sukarpei taip ir gavai. Tam divui kur yra backgroundas uzdek padding-left ir padding-right. Jei gerai supratau kaip sukodinai ir sukarpei tada viskas turetu pasitaisyti.

Galvoji, mes žinom, kaip turėjo atrodyt viskas?

 

O tekstas ne į tą divą įdėtas, arba nenustatytas jo plotis.

Kaip sukarpei taip ir gavai. Tam divui kur yra backgroundas uzdek padding-left ir padding-right. Jei gerai supratau kaip sukodinai ir sukarpei tada viskas turetu pasitaisyti.

Aciu abiems uz atsakymus:

To Plx: atrodyti turetu paprastai, neturetu buti tos pilkos spalvos (ten turetu but ruda bg spalva) ir tekstas turetu tilpti i dezute, bandziau naudoti Width bet nepadejo.

To Flow: idejau i content diva padding-left ir padding-right, nepadejo.. Gal ne taip irasiau... Va source'as css'o:

* { margin: 0; padding: 0; outline: 0; }

 

body {

background-image: url(images/bg.gif);

background-repeat: repeat;

color: #333333;

margin: 15px 0;

font-family: Verdana, Tahoma, arial, sans-serif;

font-size: 70%;

line-height: 1.5em;

 

}

 

#content {

width: 749px;

height: auto;

background: #CCC url(images/content.jpg) repeat-y center top;

margin: 0 auto;

text-align: left;

padding-left:inherit;

padding-right:inherit;

}

#banner{

position: relative;

height: 231px;

background: #caced1 url(images/banner.jpg) no-repeat center top;

padding: 0;

}

#menu{

position: relative;

height: 101px;

background: #caced1 url(images/menu.jpg) no-repeat center top;

padding: 0;

}

#header{

position: relative;

height: 45px;

background: #caced1 url(images/header.jpg) no-repeat center top;

padding: 0;

}

#footer{

position: relative;

height: 224px;

background: #caced1 url(images/footer.jpg) no-repeat center top;

padding: 0;

}

 

 

h1, h2, h3 { font-family: 'Trebuchet MS', Tahoma, Sans-serif; }

h1 {

font-size: 180%;

font-weight: normal;

color: #555;

width: 740px;

}

h2 {

font-size: 160%;

color: #88ac0b;

font-weight: normal;

width: 740px;

 

}

h3 {

font-size: 135%;

color: #666666;

}

Aciu abiems uz atsakymus:

 

To Plx: atrodyti turetu paprastai, neturetu buti tos pilkos spalvos (ten turetu but ruda bg spalva) ir tekstas turetu tilpti i dezute, bandziau naudoti Width bet nepadejo.

 

To Flow: idejau i content diva padding-left ir padding-right, nepadejo.. Gal ne taip irasiau... Va source'as css'o:

Pirma padding kaip ir margin nurodai px arba kitokiu dydziu pvz padding-left:10px;

Antra manau butu lengviau jei ta savo sample weba i koki hosta imestum jei yra galimybe arba bent html pridetum tada manau butu daug lengviau padeti.

Internete patalpink sita xhtml/css i nemokama hostinga, tai galesim padet, o cia su screenshotu tavo mes nieko neisbursim.

ok, dekoju uz atsakymus, kai grysiu is paskaitu paziuresiu kur cia imesti galima :)

Stai:

http://panda.comli.com/the_beatles/

Stai:

http://panda.comli.com/the_beatles/

* { margin: 0; padding: 0; outline: 0; } 

body {
background-image: url(images/bg.gif); 
background-repeat: repeat; 
color: #333333; 
margin: 15px 0; 
font-family: Verdana, Tahoma, arial, sans-serif; 
font-size: 70%; 
line-height: 1.5em; 

}

#content {
width: 749px; 
background: url(images/content.jpg) repeat-y center top; 
margin: 0 auto;
text-align: left; 
padding-left:inherit;
padding-right:inherit;
}
#banner{
position: relative; 
height: 231px; 
background: url(images/banner.jpg) no-repeat center top; 
padding: 0; 
}
#menu{
position: relative; 
height: 101px;
background: url(images/menu.jpg) no-repeat center top; 
padding: 0; 
}
#header{
position: relative;
height: 45px;
background: url(images/header.jpg) no-repeat center top; 
padding: 0; 
}
#footer{
position: relative;
height: 224px; 
background: url(images/footer.jpg) no-repeat center top; 
padding: 0; 
}


h1, h2, h3 { font-family: 'Trebuchet MS', Tahoma, Sans-serif; }
h1 {
font-size: 180%;
font-weight: normal;
color: #555;
width: 740px;
}
h2 {
padding-left: 80px;
font-size: 160%;
color: #88ac0b;
font-weight: normal;
width: 740px;
padding-right:50px;
}
h3 {
font-size: 135%;
color: #666666;
}
p {
padding-left:75px;
padding-right: 75px;
}
hr {
padding-left: 100px;
padding-right: 75px;
}

* { margin: 0; padding: 0; outline: 0; } 

body {
background-image: url(images/bg.gif); 
background-repeat: repeat; 
color: #333333; 
margin: 15px 0; 
font-family: Verdana, Tahoma, arial, sans-serif; 
font-size: 70%; 
line-height: 1.5em; 

}

#content {
width: 749px; 
background: url(images/content.jpg) repeat-y center top; 
margin: 0 auto;
text-align: left; 
padding-left:inherit;
padding-right:inherit;
}
#banner{
position: relative; 
height: 231px; 
background: url(images/banner.jpg) no-repeat center top; 
padding: 0; 
}
#menu{
position: relative; 
height: 101px;
background: url(images/menu.jpg) no-repeat center top; 
padding: 0; 
}
#header{
position: relative;
height: 45px;
background: url(images/header.jpg) no-repeat center top; 
padding: 0; 
}
#footer{
position: relative;
height: 224px; 
background: url(images/footer.jpg) no-repeat center top; 
padding: 0; 
}


h1, h2, h3 { font-family: 'Trebuchet MS', Tahoma, Sans-serif; }
h1 {
font-size: 180%;
font-weight: normal;
color: #555;
width: 740px;
}
h2 {
padding-left: 80px;
font-size: 160%;
color: #88ac0b;
font-weight: normal;
width: 740px;
padding-right:50px;
}
h3 {
font-size: 135%;
color: #666666;
}
p {
padding-left:75px;
padding-right: 75px;
}
hr {
padding-left: 100px;
padding-right: 75px;
}

Aciu labai! ;) Gal gali pakomentuoti ka pakeitei? Ka buvau blogai padares?

Aciu labai! ;) Gal gali pakomentuoti ka pakeitei? Ka buvau blogai padares?

Tiesiog visur dėjai fono spalvą :D spalvą ištrynus viskas susitaisė.

Štai ir antras klausimas, pabandžiau sukarpyti šiek tiek įdomesnį dizainą, tačiau šnipštas gavosi... Štai rezultatas:

http://panda.comli.com/lineage2/

Patarkite, kaip padaryti kad pavyzdžiui kairysis meniu ir dešinysis meniu būtų kažkaip atskirai o ne vienoje linijoje kad galėčiau įdėti script'us/meniu punktus į juos.

Prašau užveskite ant kelio, šiek tiek pasukęs savo makaulę sugalvojau, kad tai galbūt įgyvendinama su stulpeliais (column)? Ar toks būdas įmanomas ir ar jis praktiškas?

Štai ir antras klausimas, pabandžiau sukarpyti šiek tiek įdomesnį dizainą, tačiau šnipštas gavosi... Štai rezultatas:

 

http://panda.comli.com/lineage2/

 

Patarkite, kaip padaryti kad pavyzdžiui kairysis meniu ir dešinysis meniu būtų kažkaip atskirai o ne vienoje linijoje kad galėčiau įdėti script'us/meniu punktus į juos.

 

Prašau užveskite ant kelio, šiek tiek pasukęs savo makaulę sugalvojau, kad tai galbūt įgyvendinama su stulpeliais (column)? Ar toks būdas įmanomas ir ar jis praktiškas?

http://w3schools.com

esmė ta, kad turi koloną daryti atskirą div elementą ir jie pas tave bus 3. vienas bus kairė kolona, kitas centrinis contentas ir trečias div bus dešinė kolona.

ir jiems priskirk elementą float.

kur reikia left, kur reikia right ;)

čia rasi daugiau: http://w3schools.com/css/css_classification.asp

jei turi klausimų gali kreiptis į skype :D (rudminas)

nu tai žiūrėk:

<div class="header"></div>

<div class="content">

<div class="leftsidebar">kairys sidebar</div>

<div class="maincontent">pagrindinis contentas</div>

<div class="leftsidebar">desinys sidebar</div>

</div>

<div class="footer"></div>

viskas, beliko tik teisingai apsirašyti elementų stilius ;)

Ačiū už patarimus, tai va, pavyko man su tais stulpeliais :) Ir va, dabar iškilo kvailas klausimas, kaip tekstą į lentelės viršų priversti patekt? :)

http://panda.comli.com/pandadesigns/

Ir va dar kas mane neramina su šiuo sukarpymu, kur raudonai apibrėžiau tai kažko linijos nesueina į vieną, o kur geltonai tai kažkodėl visą liniją naudoja kaip viena hyperlinką, nors source kode galima matyti jog skirtingi png skirtingiems hyperlinkams...: