Avaleht
uus teema   vasta Tarkvara »  WWW »  Css-is mure banneri paigutusega märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale.  :: Teata moderaatorile teata moderaatorile
otsing:  
Markspoiss
HV veteran


liitunud: 10.12.2002



Autoriseeritud ID-kaardiga

sõnum 12.01.2010 01:19:38 Css-is mure banneri paigutusega vasta tsitaadiga

http://raadio.pri.ee banner siis siukse kohapeal... kuidas saaks selle samamoodi et jääks alati center aga oleks 43 pixlit allpool?

hetkel mingi siuke kood:

}



#banner {
text-align:center;


}

allolevat varianti ei saa kasutada siis näitab erinevalt seda bannerit kui erinevate resodega vaadata siis asukoht paneb puusse kohe:

position:absolute;
right:400px;
top:43px;

_________________
Kommentaarid: 20 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 16
tagasi üles
vaata kasutaja infot saada privaatsõnum
mikk36
HV Guru
mikk36

liitunud: 21.02.2004




sõnum 12.01.2010 01:53:06 vasta tsitaadiga

margin-top: 43px;
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
Markspoiss
HV veteran


liitunud: 10.12.2002



Autoriseeritud ID-kaardiga

sõnum 12.01.2010 02:27:36 vasta tsitaadiga

hmm miskipärast lükkab terve foorumi allapoole koos selle banneriga:S

}



#banner {
text-align:center;
margin-top: 43px;

}

EDIT: muutsin tiba seda asja praegu nagu alguses oli ehk siis

#banner {
position: absolute;
right:400px;
top:43px;

aga sedasi see paneb võssa jah:(
ja korralikult on näha resoga 1280 x 800 aga kui lehe väiksemaks teen on jama:(

_________________
Kommentaarid: 20 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 16
tagasi üles
vaata kasutaja infot saada privaatsõnum
mikk36
HV Guru
mikk36

liitunud: 21.02.2004




sõnum 12.01.2010 03:13:57 vasta tsitaadiga

position: relative;
top: 43px;
Ka kehv lahendus?
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
XD
HV kasutaja
XD

liitunud: 12.01.2006



Autoriseeritud ID-kaardiga

sõnum 12.01.2010 14:06:50 vasta tsitaadiga

Aga tõsta banner headeri sisse ja siis floadi ta paremale. Hetkel on ta paigutatud sul ekraani ülevast paremast nurgast 400px vasakule ja 43px allapoole.
_________________
"Kui inimene ei ole rahul tarkvaraga, siis on probleem tõenäoliselt inimeses" M.J.
Kommentaarid: 35 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 29
tagasi üles
vaata kasutaja infot saada privaatsõnum
Markspoiss
HV veteran


liitunud: 10.12.2002



Autoriseeritud ID-kaardiga

sõnum 12.01.2010 17:36:18 vasta tsitaadiga

XD kirjutas:
Aga tõsta banner headeri sisse ja siis floadi ta paremale. Hetkel on ta paigutatud sul ekraani ülevast paremast nurgast 400px vasakule ja 43px allapoole.



nii ja see css-is näeks sisi välja kuidas?icon_smile.gif tänud!

hetkel siis tuleb asi nii:panen siia terve css-i sisu:

body {
background-image: url(images/background.jpg); color: #ffffff; background-color: #333333; text-align: left; font: 8pt Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #555; margin: 12px 0 0 0;
}

.maintable {
width: 759px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

#logo {
background-image: url(images/header.png);
width: 759px;
height: 108px;
}

#sitename {
margin-left: 24px;
margin-top: 50px;
text-align: left;
font: 10pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #ffb432;
}

#infoleft {
width: 365px;
text-align: left;
background-color: #000;
}

#inforight {
width: 366px;
text-align: right;
background-color: #000;
}

.padder {
padding: 0 4px 0 4px;
}

.spacer{
padding: 2px 0px 2px 0px;
}

ul, ol {
margin-top: 0;
margin-bottom: 0;
}


#collefttop {
background-image: url(images/topleftcol.png);
width: 14px;
height: 40px;
}

#colrighttop {
background-image: url(images/toprightcol.png);
width: 14px;
height: 40px;
}

#colleft {
background-image: url(images/leftcol.png);
width: 14px;
height: 100%;
background-repeat: repeat-y;
}

#colright {
background-image: url(images/rightcol.png);
width: 14px;
height: 100%;
background-repeat: repeat-y;
}

.button {
border: 1px solid #000;
color: #000;
font: 7pt verdana, tahoma, arial, helvetica, sans-serif;
text-align:center;
background-image : url(images/button.png);
}

.cbdate {
color: #686868;
}

#colbotleft {
background-image: url(images/bottomleftcol.png);
width: 14px;
height: 14px;
}

#colbot {
background-image: url(images/bottomcol.png);
height: 14px;
width: 100%;
background-repeat: repeat-x;
}

#colbotright {
background-image: url(images/bottomrightcol.png);
width: 14px;
height: 14px;
}



#contentarea {
background-color: #000;
width: 599px;
font: 8pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #ffb432;
vertical-align:top;
}

#fullcontentarea {
background-color: #000;
width: 759px;
font: 8pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #ffb432;
vertical-align:top;
}

#menuarea {
background-color: #000;
width: 160px;
font: 8pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #ffb432;
vertical-align:top;
text-align: left;
}

.tablewrapper {
width: 100%;
}

.searchbar {
background-color: #000;
margin-left: auto;
margin-right: auto;
text-align: center;
}


/* menu definitions */

.menutable{
width: 160px;
}

.menuwrapper {
width: 160px;
margin-left: auto;
margin-right: auto;
}

.menutop {
background-image: url(images/menutop.png);
width: 100%;
background-repeat: repeat-x;
height: 5px;
}

.menubody {
background-color: #3e3e3e;
width: 100%;
font: 7pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #bbb;
vertical-align:top;
text-align: left;
}

.menubottom {
background-image: url(images/menubottom.png);
width: 100%;
background-repeat: repeat-x;
height: 12px;
}

.menutop2 {
background-image: url(images/menutop2.png);
width: 100%;
background-repeat: repeat-x;
height: 5px;
}

.menubody2 {
background-color: #3e3e3e;
width: 100%;
font: 8pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #ffb432;
padding: 4px 5px 5px 4px;
vertical-align:top;
text-align: left;
}

.menubottom2 {
background-image: url(images/menubottom2.png);
width: 100%;
background-repeat: repeat-x;
height: 12px;
}

/* end menu layout */

img {
vertical-align: middle;
}
.linkspage_button{
vertical-align: middle;
border:0px;
}

.smalltext {
font: 7pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

.pageheader {
background-image: url(images/pageheader.png);
width: 100%;
background-repeat: repeat-x;
height: 25px;
}



#banner {
position: absolute;
right:400px;
top:43px;
}


.pagebody {
background-color: #333;
width: 100%;
font: 8pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #ddd;
padding: 4px 5px 5px 4px;
vertical-align:top;
text-align: left;
}

.pagefooter {
background-image: url(images/pagefooter.png);
width: 100%;
background-repeat: repeat-x;
height: 14px;
}


a {
color: #999;
text-decoration: none;
}
a:hover {
color: #ddd;
text-decoration: underline;
}

a.link2:link {
color: #999;
text-decoration: none;
}

a.link2:hover {
color: #ffb432;
text-decoration: none;
}


/* captions */

.caption {
background-image: url(images/cap1.png);
width: 100%;
background-repeat: repeat-x;
height: 16px;
font: 7pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
}

.captionpadder {
padding: 2px 0 0 4px;
}

.captiontext {
font: 9pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #ffb432;
}


.testborder {
border: 1px solid red;
}

.link1 {
background-image: url(images/link1.png);
background-repeat: no-repeat;
width: 159%;
height: 21px;
font: 7pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #fff;
padding-left: 4px;
}

.link2 {
background-image: url(images/link2.png);
background-repeat: no-repeat;
width: 159%;
height: 21px;
font: 7pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #fff;
padding-left: 4px;
}

.linktext {
padding-top: 6px;
}


form {
margin: 2px 0px 0px 0px;
}

p {
margin: 0px;
}

.tbox {
background-color: #000;
border: 1px solid #3e3e3e;
font: 8pt Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #777;
}

.tbox.search {
background-color: #000;
border: 1px solid #3e3e3e;
font: 8pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #ccc;
}

.tbox.chatbox {
width: 80%;
margin-left: auto;
margin-right: auto;
}

.helpbox {
color:#aaa;
font: 9px tahoma, verdana, arial, helvetica, sans-serif;
border: 0px none red;
background-color: transparent;
}


/* forum */

.fborder {
border: #1d1d1d 1px solid;
}
.forumheader{
background-color: #333;
font: 11px verdana, tahoma, arial, helvetica, sans-serif;
color:#ffa939;
padding: 4px;

border: 1px solid #1d1d1d;
text-align: left;
}

.forumheader2{
background-color: #333;
font: 11px verdana, tahoma, arial, helvetica, sans-serif;
color:#9f9f9f;
padding: 4px;
border: #2a2a2a 1px solid;
text-align: left;
}

.forumheader3{
background-color: #333;
font: 9px verdana, tahoma, arial, helvetica, sans-serif;
color:#9f9f9f;
padding: 4px;
border: #2a2a2a 1px solid;
text-align: left;
}

.forumborder{
border: #000080 1px solid;
}

.fcaption {
background-image : url(images/fcap.png);
border: 1px solid #1d1d1d;
padding: 2px 0 2px 0;
background-color: #f9fafb;
font: 11px verdana, tahoma, arial, helvetica, sans-serif;
color:#ffa939;
text-align: left;
}

.finfobar{
background-color: #393939;
color:#000;
padding: 4px;
border: 1px solid #2a2a2a;
font-size: 7pt; font-family:verdana, tahoma, arial, helvetica, sans-serif;
text-align: left;
}

.smallblacktext {
font: 10px tahoma, verdana, arial, helvetica, sans-serif;
color:#b47716;
}

td {
text-align: left;
}

.nextprev {
font: 7pt tahoma, verdana, arial, helvetica, sans-serif;
color:#b47716;
}

#Clock {
color: #ffb432;
}

_________________
Kommentaarid: 20 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 16
tagasi üles
vaata kasutaja infot saada privaatsõnum
inzinz
HV kasutaja

liitunud: 26.01.2005




sõnum 12.01.2010 18:38:14 vasta tsitaadiga

Esmalt aitaks ikka korrektne html kasutus icon_razz.gif
Hetkel on sul nii:
<tr>
<td id='logo'><div id='sitename'>[ <a href='/index.php'>raadio.pri.ee</a> ] </div></td>
<div id='banner'>
..
</div>
</div>
</tr>

Ehk nagu näha <div id='banner'> ei ole mitte ühegi <td> elemendi sees ja peale seda on veel mingi üleliigne </div>, ja seega browserid viskavad selle bänneri suht lampi kohta (defaultina lehe ülesse nagu oli näha).

Esmalt paranda html ära, nii et see sitename ja banneri div oleks sama <td> sees, ei ole mingit css'si vaja selle jaoks.
Eemalda banneri css alguses ära, pane sitename divile stiili juurde:
float:left;
width:100px;

Ja siis sellele banneri divile pane näiteks css's
float:left;
width:500px;
margin-top:17px;

Oleks muidu veel mõni mahlakas kommentaar html kohta, nimelt id='midagi' asemel on korrektne attribuutide jaoks kasutada " märke, ehk id="midagi" ning w3c validatior annab suht palju erroreid mismatching tagide kohta... Soovitaks pisut rohkem süveneda kuidas korrektset html koodi kirjutada mitte suvalt asju kokku visata, suvalt kokku visates suure tõenäosusega asjad keelduvadki tavaliselt töötamast icon_razz.gif

_________________
Upload.ee - eestimaine failiupload
Kommentaarid: 4 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 4
tagasi üles
vaata kasutaja infot saada privaatsõnum
mikk36
HV Guru
mikk36

liitunud: 21.02.2004




sõnum 12.01.2010 19:15:51 vasta tsitaadiga

Sisuliselt siis, tee esmalt HTML kood korda: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.raadio.pri.ee%2F
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
Markspoiss
HV veteran


liitunud: 10.12.2002



Autoriseeritud ID-kaardiga

sõnum 14.01.2010 03:19:00 vasta tsitaadiga

ei tea... ma siin pole kahjuks eriline koodimurdja ka:( pusind mis ma pusind olen ei õnnestu seda asja sinna saada nii nagu sooviks... saaks selle sinna oleks asi jonksus:) tglt on seal natuke muud ka veel paigast... foorumit vaadates on see leht ilusti korras aga esilehel on tiba paigast asjad....:S
_________________
Kommentaarid: 20 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 16
tagasi üles
vaata kasutaja infot saada privaatsõnum
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  WWW »  Css-is mure banneri paigutusega
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.