Jump to content

CSS: Objekts negrib centrēties

Mezavecis

Mezavecis,
in WEB izstrādes lietas

 Share

Recommended Posts

Mezavecis

Mezavecis

Ierakstīts
Ierakstīts (labots)

Sveiki,

 

Tā kā dizains un CSS nav ikdienas pasākums un vēl jo mazāk stiprā puse, tad daudz esmu cīnījies, lai iecentrētu objektu. Man ir izveidota formiņa ar podziņām pēc parauga no šī saita (pielāgoti izmēri un css izmēri pakoriģēti).

http://www.oscaralex...s-with-css.html

 

Viss jau skaisti, bet nekādīgi neizdodas novietot tās pogas pa labi vai centrā. Varbūt idejas, kā tas darāms?

 

Mēģināju likt div blokos, visās iespējamās vietās iespraust text-align: center, kā arī mainījis margin, left, right, bet bez rezultātiem.

 

Pašreizējais objekta css ir šāds:

 

a.lbutton {
background: transparent url('../img/login_index/button_r.png') no-repeat scroll top right;
color: #333334;
display: block;
float: left;
font: normal 14px arial, sans-serif;
height: 31px;
margin-right: 6px;
padding-right: 2px;
text-decoration: none;
}

a.lbutton span {
background: transparent url('../img/login_index/button_f.png') no-repeat;
display: block;
line-height: 21px;
padding: 5px 15px 5px 18px;
}

a.lbutton:active {
background-position: bottom right;
color: #000;
outline: none;
}

a.lbutton:active span {
background-position: bottom left;
padding: 6px 15px 4px 18px;
}

Labots - Mežavecis
Link to comment
Share on other sites
binary

binary

Ja "float:left" nomainīsi uz "float:right", tad vajadzētu būt labajā sānā, tiesa - apgrieztā secībā (tb ja kodā "Cancel" ir pirms "OK", tad vizuāli "Cancel" būs vairāk pa labi nekā "OK").

Link to comment
Share on other sites
Mezavecis

Mezavecis

  • Author
(labots)

Njā, pareizi, bet pogas viens sāns aizlido prom. Vismaz uztaisīt 2 pogas, kas ir centrētas un kurām nav piedefinētas absolūtās pozīcijas, galīgi neizdodas.

 

Varbūt ir vēl kādi labi varianti, kā uztaisīt pogu, kas sastāv no 2 horizontālām daļām, lai varētu izstiepties atkarībā no teksta?

Labots - Mežavecis
Link to comment
Share on other sites
ABU

ABU

Manā skatījumā par pogu centrēšanu, tur varētu būt 2 risinājumi:

1) vieglākais - izmantot HTML tagu <center>

2) sarežģītākais - ar JavaScript palīdzību aprēķināt loga platumu un izrēķināt objekta sākuma punktu. Uzstādīt saķuma punktus objektam, kurš pats ir ar fiksētu positciju (position:fixed).

Pats izmantoju 1) variantu. Vieglākais :)

Link to comment
Share on other sites
binary

binary

<center> var (vajag) simulēt ar text-align:center. No javascript arī vajadzētu izvairīties.

 

Par citiem variantiem - tev vajag pogu vai linku? Tās ir dažādas lietas. Ja pogu, var mēģināt <button type='button'><span>teksts</span></button>. Kā type var norādīt arī submit, skaties pēc vajadzības.

Link to comment
Share on other sites
superKrona

superKrona

Vēl jāpiebilst, ka pēc ilgas čakarēšanās notestē uz vairākiem pārlūkiem, var gadīties čakarēšanās 2.kārta.

  • Patīk 1
Link to comment
Share on other sites
Mezavecis

Mezavecis

  • Author

Ja labi noformē ar CSS, tad nav starpības vai links vai poga. Cik meklēju netā, tad daudz cilvēku atduras uz šo problēmu, jo background bildi uztaisīt, lai viņa izstiepjas, vismaz pašlaik nav iespējams ar CSS (tā lai uztur FF, IE u.c.). Tāpēc tiek taisīts kombinētais variants, bet tur atkal problēma, ka šis bloks ir neelastīgs uz atrašanos vietu. JS priekš dizaina būtu sviests likt.

 

center jau mēģināts - nepalīdz.

Link to comment
Share on other sites
binary

binary

Nu tīri semantiski nav vienalga, links vai poga. Velkot analoģiju ar "real life", tas būtu tas pats, kas uz darbu katru dienu 5km braukt ar pārkrautu baļķvedēju, jo tas, redz, arī ir auto un ar viņu var tikt uz darbu :)

 

Variants ar <button type='button'><span>caption</span></button> nepalīdz? Iekš CSS tam span laikam vajadzētu uzlikt display:block.

 

<?php

   error_reporting(E_ALL | E_STRICT);
   ini_set('display_errors', $_SERVER['REMOTE_ADDR'] === '127.0.0.1');
   ini_set('html_errors', true);
   date_default_timezone_set('Europe/Riga');

?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
   <title>sandboxy</title>
   <meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
   <style type='text/css'>
       button::-moz-focus-inner {
           border-style:none;
           padding:0px;
       }
       button {
           background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_span.gif) no-repeat top left;
           border-style:none;
           padding:0px;
       }
       button span {
           background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_a.gif) no-repeat top right;
           display:block;
           height:18px;
           padding:3px 12px;
       }
   </style>
</head>
<body>

   <form method='get' action=''>
       <div>
           <button type='submit'><span>caption</span></button>
       </div>
   </form>

</body>
</html>

Tālāk jau vari parentam norādīt text-align, kādu nu tev vajag.

Bildes ņemtas no pirmajā postā esošā linka. "button::-moz-focus-inner" aprakstīts, jo citādi firefox pogai automātiski lika "padding:1px 3px", kuru citādi nez vai var noņemt. IE8 tā nedara. Citu browseru man nav.

Link to comment
Share on other sites
andrai2

andrai2

Artesteer ģenrēu labu css kodu, kurš iet uz visiem pārlūkiem, caur turienu ar vizuālo interface var uzģenerēt, pēc nokopēt savā css

Link to comment
Share on other sites
  • 5 months later...
Mezavecis

Mezavecis

  • Author

Hai vēlreiz. Iepriekšējais variants sāk palikt pa šauru, jo poga ir, bet viņa ir statiskā platumā. Vajadzīga poga, kura izstiepjas platumā atkarībā no teksta garuma.

 

Lielākā problēma, ka poga sastāv no trīs daļām - maliņām 3px platumā un centra attēla, kas izstiepjas.

y9ux69w93oepjwvxbnba.png

 

Uztaisīju šādu CSS, bet 3. attēls kaut kur pazūd. Varbūt idejas, ko daru nepareizi?

 

.custom_button{height:31px; 
        	border:0; 
        	background:url(../img/list_index/search_button_bg_l.png),url(../img/list_index/search_button_bg_v.png),url(../img/list_index/search_button_bg_r.png);
        	background-repeat: no-repeat,repeat-x,no-repeat;
        	background-origin: border-box, content-box, border-box;
        	font-size:14px; 
        	font-family:Arial, Helvetica, sans-serif; 
        	color:#085378;          	
       	margin-left: 5px;
       	margin-top: 10px;
}

Link to comment
Share on other sites
Artanis

Artanis

(labots)

Vecīt, ko Tu tur ķīmiķo?

 

HTML

<div slass="poga"><span>Tavs pogas dinamiskais saturs</span></div>

 

CSS

.poga {
    background:transparent url(images/poga_left.jpg) no-repeat left;
    display:block;
    float:left;
    height:22px;
    margin-right:15px;
    padding:5px 0 5px 10px;
}

.poga span {
    background:transparent url(images/poga_right.jpg) no-repeat right;
    cursor:pointer;
    display:inline;
    float:left;
    height:12px;
    padding:5px 10px 5px 0;
}

post-57565-0-85747900-1313693516_thumb.jpg

post-57565-0-78342300-1313693517_thumb.jpg

Labots - Artanis
Link to comment
Share on other sites
Mezavecis

Mezavecis

  • Author

Saldējums,

 

Paldies, ka padalījies viedumā un spēji dot padomu, kurš izmainīja skatu uz dzīvi. Būtu vēl labāk, ja minētais resurss nebūtu tik skops ar CSS3 piemēriem.

 

Pasēdēju un pats atrisināju problēmas ar tradicionāliem līdzekļiem. Vismaz rezultāts ir tāds, kādu vēlējos.

 

                   	.order_button_style {
                       	background: url(../img/list_index/search_button_bg_v.png) center;
                       	height: 31px;
                       	width: 150px;
                   	}
                   	.order_button_style span {
                       	background: url(../img/list_index/search_button_bg_r.png) top right no-repeat;
                       	display: block;
                   	}                    	
                   	.order_button_style span span{
                       	background: url(../img/list_index/search_button_bg_l.png) top left no-repeat;
                       	padding: 0.5em;
                       	text-align: center;
                       	font-size: 14px;
                       	font-family: Arial,Helvetica,sans-serif;
                       	color: #085378;
                   	}

 

<div class="order_button_style"><span><span>Big big button</span></span></div>

Link to comment
Share on other sites
Artanis

Artanis

(labots)

Mežaveci - apskati postu augstāk, tas ir vienkāršāks paņēmiens (par vienu bildi ko vaicāt serverim mazāk, un CSS īsāks). Iesaku lietot labāk to.

Labots - Artanis
Link to comment
Share on other sites
Mezavecis

Mezavecis

  • Author

Artani,

 

Bez trešā attēla nekā, jo vidum jābūt bildei, kura horizontāli izstiepjas, jo fons nav viendabīgs.

Link to comment
Share on other sites
Saldējums

Saldējums

Tad ko tev vajag - lai viss darbojas uz CSS 3? Tas nekas, ka pavecāki pārlūki, kurus lieto lielākā daļa lietotāju, ne sūda no tā neatbalsta?

Link to comment
Share on other sites
Aphopis

Aphopis

(labots)

es pogu parasti taisu ta

un izmantoju so backgraund gardient generatoru seit

 

 

<div class="poga">Poga</div>

 

.poga {
         	padding: 5px;
  background: #1e5799; /* Old browsers */	background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); 	/* Chrome,Safari4+ */	background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */	background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera11.10+ */	background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */	background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */

}

.poga:hover {
 		padding: 5px;
             background: #6db3f2; /* Old browsers */ background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); 	/* Chrome,Safari4+ */	background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */	background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Opera11.10+ */	background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* IE10+ */	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */	background: linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C */
}

Labots - Aphopis
Link to comment
Share on other sites
Mezavecis

Mezavecis

  • Author

Saldējums,

 

Kas skaitās pavecāki browseri? IE6 un IE7 nav paredzēts šai lapai, līdz ar to orientējos uz progresīvākiem līdzekļiem. Tas nav ziņu portāls, kur jāpielāgojas visiem 99% lietotāju.

Link to comment
Share on other sites
Saldējums

Saldējums

Viss ir atkarīgs no tā, kas ir lietotāji un kādi viņiem būs pārlūki. Vispār jau jābūt skaidram kā dienai - vari izmantot CSS 3 vai nē un ja vari, tad izmanto tā iespējas pilnībā, atkarībā no tā, cik attiecīgais pārlūks atbalsta. Tas tā tīri filosofiski.

CSS pats par sevi nav sarežģīts, lasi specifikāciju un paskaties, ko browseris supportē. CSS sarežģītākais ir tehnika pielietojumā.

Link to comment
Share on other sites
Mezavecis

Mezavecis

  • Author

Diemžēl prioritāri ir lapas funkcionalitāte nevis izskaistināšana, līdz ar to CSS padziļināta studēšana jāatliek uz labākiem laikiem, kad nebūs ko darīt.

 

Sarežģīts arī nav T-SQL, tikai ar 1000 niansēm.

Link to comment
Share on other sites
Saldējums

Saldējums

Ja prioritāte ir lapas funkcionalitāte, tad uz css vari neiespringt. Atstāj vietu fīčām css'am un labāk dari svarīgākas lietas - tas ir tikai ieteikums.

Vispār normālos projektos par izskatu (css) rūpējas atsevišķs cilvēks, aplikācijas izstrādātājiem, kas nodarbojas ar biznesa loģiku, nebūtu jāiespringst uz css un javascript. Bet tas tā - tas ir normālos izstrādes uzņēmumos!

Link to comment
Share on other sites
Acc3L

Acc3L

(labots)

Mežaveci: kā tās pogas izskatās? Tev vispār tur vajag bildes, ja jau IE ir pofig?

Labots - Acc3L
Link to comment
Share on other sites

Izveido kontu, vai pieraksties esošajā, lai komentētu

Jums ir jābūt šī foruma biedram, lai varētu komentēt tēmas

Izveidot jaunu kontu

Piereģistrējies un izveido jaunu kontu, tas būs viegli!

Reģistrēt jaunu kontu

Pierakstīties

Jums jau ir konts? Pierakstieties tajā šeit!

Pierakstīties tagad!
 Share
Iet uz tēmu sarakstu
×
×
  • Izveidot jaunu...