Adaptare site la orice rezolutie !

Aici postaţi orice este legat de tehnologiile "client side". HTML, HTML5, XHTML, CSS, CSS3, XML, Standarde
Manual JS: http://www.phpromania.net/jsmanual/index.html

Moderatori: eyecon, Moderatori

MihaiM47
Average Member
Mesaje: 113
Membru din: Mar Mai 10, 2011 5:22 pm
Localitate: Moroeni
Contact:

Adaptare site la orice rezolutie !

Mesajde MihaiM47 » Mie Mai 20, 2015 1:03 am

Cod: Selectaţi tot

a:link         { color: #FFFFFF; font-family: verdana; font-size: 8pt; text-decoration: underline; }
a:visited      { color: #FFFFFF; font-family: "verdana"; font-size: 8pt; text-decoration: none; }
a:active      { color: #FFFFFF; font-family: verdana; font-size: 8pt; text-decoration: underline; }
a:hover         { color: #FFFFFF; font-family: "verdana"; font-size: 8pt; text-decoration: none; }

textarea      { border: 1px solid #000000; color: #ffffff; background: #323232; font-size: 8pt; }
input         { border: 1px solid #000000; background: url(images/menu2.gif); font-size: 8pt; color: #FFFFFF;}
input.normalRadio   { border: none; background: none; }
select         {
   border: 1px solid #000000;
   font-size: 8pt;
   background-color: #CCCCFF;
}

table         { color: #FFFFFF; font-family: "verdana"; font-size: 8pt; border: 1px; cellspacing: 0px; cellpadding: 2px; bordercolor: black; }
table.main      { background: #aa3c3c; color: #FFFFFF; font-family: "verdana"; font-size: 8pt; }
td.subTitle      { border: 2px solid #000000; background: url(images/menu2.gif) #000000 fixed center top; color: #FFFFFF; font-family: "verdana"; font-size: 8pt; text-align: center; letter-spacing: 2px; }
td.mainTxt      { border: 2px solid #000000; background-color: #1d1611; font-family: "verdana"; font-size: 8pt; padding-left: 5px; cellspacing: 0px; }
td.savedmainTxt      { border: 2px solid #000000; background-color: #505050; font-family: "verdana"; font-size: 8pt; padding-left: 5px; cellspacing: 0px; }

em          { background-color: white; border: 1px solid #323232; padding: 2px; font-style: normal;   }

table.menu      { border: 3px solid #000000; border-left: none; font-family: "verdana"; font-size: 8pt; }
td.menuTitle      { background: #9B2D2D; color: #000000; font-family: "verdana"; font-size: 8pt; letter-spacing: 5px; }
td.menuLink      { background: #8C1E1E; color: #000000; font-family: "verdana"; font-size: 8pt; }
a.menu:link      { color: #000000; font-family: "verdana"; font-size: 8pt; text-decoration: none; cursor: default; width: 120; }
a.menu:visited      { color: #000000; font-family: "verdana"; font-size: 8pt; text-decoration: none; cursor: default; width: 120; }
a.menu:active      { color: #000000; font-family: "verdana"; font-size: 8pt; text-decoration: none; cursor: default; width: 120; }
a.menu:hover      { color: #E15D5D; font-family: "verdana"; font-size: 8pt; text-decoration: underline; cursor: default; width: 120; }

.quote         { font-size: 11px; font-family: verdana; color: black; background-color: #939393; }

body         {   color: #FFFFFF;
            font-family: verdana;
            background:  #221E1C fixed repeat-x center top;
            margin: 0px;
            scrollbar-base-color: #000000;
            scrollbar-arrow-color: #ffffff;
            scrollbar-darkshadow-color: #444488;
            scrollbar-face-color: #323232;
            scrollbar-highlight-color: #ccccc;
            scrollbar-shadow-color: #000000;
            scrollbar-track-color: #eeeeee; }
            
#hintbox{ /*CSS for pop up hint box */
position:absolute;
top: 0;
background-color: 323232;
width: 100px; /*Default width of hint.*/
padding: 3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px solid black;
border-bottom: 3px solid black;
visibility: hidden;
}

.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: white;
margin: 3px 8px;
}


cum fac ca css de mai sus sa se adpteze la orice rezolutie , 320 x 480 , 540 x 960, 2048 x 1536 etc



beng
Junior Member
Mesaje: 34
Membru din: Mar Noi 12, 2013 7:15 pm
Localitate: Bucuresti
Contact:

Re: Adaptare site la orice rezolutie !

Mesajde beng » Mie Mai 20, 2015 10:13 am

Poti incerca sa folosesti media queries-urile din CSS https://css-tricks.com/logic-in-media-queries/ pentru a seta dimensiunile in functie de rezolutii.

ViezuREX
Senior Member
Mesaje: 502
Membru din: Joi Dec 13, 2012 1:35 pm

Re: Adaptare site la orice rezolutie !

Mesajde ViezuREX » Sâm Mai 23, 2015 8:56 am

Pentru un site WEB (normal) solutia lui beng este ideala. Daca insa vrei sa faci ceva absolut dinamic ar fi bine sa arunci o privire peste noile unitati din CSS3 vh si vw (viewport-height si viewport-width).

http://snook.ca/archives/html_and_css/vm-vh-units

Avatar utilizator
mihaitha
Senior Member
Mesaje: 2383
Membru din: Vin Mai 04, 2007 12:40 pm
Localitate: Sibiu
Contact:

Re: Adaptare site la orice rezolutie !

Mesajde mihaitha » Sâm Mai 23, 2015 12:14 pm

ViezuREX scrie:Pentru un site WEB (normal) solutia lui beng este ideala. Daca insa vrei sa faci ceva absolut dinamic ar fi bine sa arunci o privire peste noile unitati din CSS3 vh si vw (viewport-height si viewport-width).

http://snook.ca/archives/html_and_css/vm-vh-units

E foarte buna abordarea asta, insa trebuie urmarit suportul browserelor pentru aceste standarde.

cristirg
PHPRomania Supporter
Mesaje: 19
Membru din: Joi Ian 17, 2013 12:15 pm
Contact:

Re: Adaptare site la orice rezolutie !

Mesajde cristirg » Lun Iun 08, 2015 12:35 am

-bootstrapul e foarte folositor pt design responsiv + media queries
I Will Give You 20 Web Development Courses High Quality: https://www.fiverr.com/cristirg/give-you-20-web-development-courses-high-quality


Înapoi la “HTML/JavaScript/CSS”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 2 vizitatori