Udvikleren.dk - Seneste [responsive-design] forum tr�de

Respons p� design

Wed, 31 May 2017 11:23:20 GMT

Hej
Vi har for nyligt opdateret vores web shops ved et nyt visuelt design. Det er responsive, og skulle fungere p� alle normale platforme.
Hvis nogen vil give lidt konstruktiv respons, vil det v�re fedt!
Siden er: mindly.dk

Responsive template

Thu, 08 Sep 2016 21:30:43 GMT

Hejsa

Jeg skal lave en enkelt side, der skal bruges til business cards med alle mine detaljer digitalt.
S� man kan scanne en QR-kode og s� komme til en side hvor det er nemt at ringe, maile eller se link til min LinkedIn uden at skulle indtaste en masse.
Hertil mangler jeg en "skabelon" der vil tilpasse sig godt til en mobil for at finde et layout som vil passe godt til form�let.
Er der nogen der kan hj�lpe med gode r�d?

virker p� mobil, men en enkelt fejl p� tablet

Wed, 24 Dec 2014 10:03:03 GMT

Hej alle sammen,

Jeg har f�et opsat en responsive hjemmeside.
Og den virker egentlig fint nok, ihvertfald p� computer og mobiltelefoner.

Det eneste problem jeg har er, at n�r jeg ser siden p� en tablet, for eksempel Ipad, s� rykker menuen sig ned, ovenover indholdet af siden.
Det er meningen at den bare skal blive eller switche over til hvordan det ser ud p� mobil, alts� dvs. de tre linjer som indikerer det er en menu.

Jeg h�ber i kan hj�lpe mig med at finde problemet s� jeg f�r menuen til at blive der, eller hvad jeg skal �ndre i koden for at f� menuen til at switche til mobilversionen med de 3 streger n�r sk�rmst�relsen er Ipad st�relse.

I kan ogs� se fejlen hvis i g�r ind p� siden og begynder at tr�kke i browservinduet for at lave det lidt mindre.
Siden er p�: www.artcirklen.dk

Her er CSS koden som er knyttet til menuen.

P� forh�nd tak.
Jeg h�ber der nogen der kan hj�lpe.

CSS kode

 /* =Menu
 -------------------------------------------------------------- */
 
 /*** Structure ***/
 #access {
     display: block;
     margin: 1.5em 0 0 35px;
     padding: 1.625em 0;
     float: right;
     line-height: 1.725;
 
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
     user-select: none;
 }
 #access ul,
 #access ul * {
     margin: 0;
     padding: 0;
     list-style: none;
 }
 #access ul ul {
     position: absolute;
     top: -999em;
     width: 13em; /* left offset of submenus need to match (see below) */
 }
 #access ul ul li {
     width: 100%;
 }
 #access ul li:hover {
     visibility: inherit; /* fixes IE7 'sticky bug' */
 }
 #access ul li {
     display: inline-block;
     position: relative;
     margin-left: 14px;
 }
 #access ul li li {
     margin: 0;
 }
 #access ul a {
     display: block;
     position: relative;
 
     -webkit-transition: color ease .2s;
     -moz-transition: color ease .2s;
     -o-transition: color ease .2s;
     -ms-transition: color ease .2s;
 }
 #access ul li:hover ul,
 #access ul li.sfHover ul {
     left: 0;
     top: 30px; /* match top ul list item height */
     z-index: 2;
 }
 #access ul li:hover li ul,
 #access ul li.sfHover li ul {
     top: -999em;
 }
 #access ul li li:hover ul,
 #access ul li li.sfHover ul {
     left: 16.5em; /* match ul width */
     top: 0;
 }
 #access ul li li:hover li ul,
 #access ul li li.sfHover li ul {
     top: -999em;
 }
 #access ul li li li:hover ul,
 #access ul li li li.sfHover ul {
     left: 10em; /* match ul width */
     top: 0;
 }
 
 /*** Style ***/
 .menu {
     max-width: 1441px;
     margin: 0 auto;
 }
 #access ul {
     font-size: 13px;
     text-align: left;
     text-transform: uppercase;
 }
 #access ul a {
     text-decoration: none;
     padding: 0;
 }
 #access ul a  { /* visited pseudo selector so IE6 applies text colour*/
     color: #919191;
 }
 #access ul li ul {
     background: white;
     padding: 0.8em 1em 0.8em 1em;
     border: 1px solid #ababab;
 }
 #access ul li li {
     background: none;
     text-align: left;
     text-transform: uppercase;
     padding: 6px 0;
 }
 #access ul li li li {
     background: none;
 }
 #access ul li a:hover,
 #access ul li.sfHover > a,
 #access ul .current-menu-item > a,
 #access ul .current_page_item > a {
     color: #ffffff;
     outline: 0;
 }
 #access ul .menu-item-object-custom.current_page_item > a {
     color: #ffffff;
 }
 #access ul .menu-item-object-custom.current-menu-item  a:hover,
 #access ul .menu-item-object-custom.current_page_item  a:hover {
     color: #cccccc;
 }
 #access ul li li:hover,
 #access ul li li.sfHover,
 #access ul li li.current-menu-item,
 #access ul li li.current_page_item {
     background: none;
     box-shadow: none;
     border-radius: 0;
 }
 #access ul li li a:hover,
 #access ul li li.sfHover > a,
 #access ul li .current-menu-item > a,
 #access ul li .current_page_item > a {
     color: #ff7260;
 }
 #access ul li li a {
     font-size: 13px;
     font-weight: normal;
     padding: 0;
 
     -webkit-transition: all ease .2s;
     -moz-transition: all ease .2s;
     -o-transition: all ease .2s;
     -ms-transition: all ease .2s;
 }
 /*** Arrows **/
 #access ul a.sf-with-ul {
     padding-right: 0.8em;
     min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
 }
 .sf-sub-indicator {
     position: absolute;
     display: block;
     right: 0;
     top: 1.05em;
     overflow: hidden;
     text-indent: -999em;
     width: 0;
     height: 0;
     border-width: 3px;
     border-style: solid;
     border-color: transparent;
     border-top: 4px solid #111;
     font-family: Arial !important;
     font-size: 11px !important;
     font-style: normal !important;
     font-weight: bold !important;
     text-transform: uppercase !important;
     color: white !important;
 }
 li li .sf-sub-indicator {
     width: 0;
     height: 0;
     right: .75em;
     text-indent: -999em;
     border-width: 3px 0 3px 5px;
     border-color: transparent transparent transparent #111;
 }
 a > .sf-sub-indicator {  /* give all except IE6 the correct values */
     top: 0.95em;
 }
 li li a > .sf-sub-indicator {  /* give all except IE6 the correct values */
     top: 0.75em;
 }
 /* apply hovers to modern browsers */
 a:focus > .sf-sub-indicator,
 a:hover > .sf-sub-indicator,
 a:active > .sf-sub-indicator,
 li:hover > a > .sf-sub-indicator,
 li.sfHover > a > .sf-sub-indicator {
     border-top-color: #ff7260;
 }
 
 /* point right for anchors in subs */
 #access ul ul .sf-sub-indicator {
     border-top-color: #ff7260;
 }
 #access ul ul a > .sf-sub-indicator {
     background-position:  0 0;
     border-right-color: #ff7260;
     border-top-color: transparent;
     -webkit-transition: border-color ease .2s;
     -moz-transition: border-color ease .2s;
     -o-transition: border-color ease .2s;
     -ms-transition: border-color ease .2s;
 }
 /* apply hovers to modern browsers */
 #access ul ul a:focus > .sf-sub-indicator,
 #access ul ul a:hover > .sf-sub-indicator,
 #access ul ul a:active > .sf-sub-indicator,
 #access ul ul li:hover > a > .sf-sub-indicator,
 #access ul ul li.sfHover > a > .sf-sub-indicator {
     border-left-color: #ff7260;
 }
 
 
 /* =Menu for mobile devises
 -------------------------------------------------------------- */
 #access-mobile {
     display: none;
     margin: 0 auto;
     text-align: left;
 }
 #mega-menu-dropdown {
     cursor: pointer;
     display: none;
     text-decoration: none;
     line-height: 4.425;
     padding: 0;
     float: right;
     margin:0.5em 0 0 0;
 }
 #mega-menu-dropdown span {
     float: right;
     color: #fff;
     font-size: 16px;
     margin: 0;
     text-transform: uppercase;
     letter-spacing: 2px;
 }
 #mega-menu-dropdown i {
     color: #fff;
     font-size: 16px;
     margin: 9px 0 0;
     vertical-align: 5%;
 }
 #access-mobile > div {
     background: #0c2d38;
     margin: 0;
 }
 #access-mobile ul {
     margin: 0;
     list-style: none;
     background: #0c2d38;
     margin: 0 auto;
     display: none;
     padding: 0 20px;
     clear: both;
     position: relative;
     z-index: 1000;
 }
 #access-mobile ul ul {
     display: block;
     margin: 0;
     padding: 0 0 0 14px;
 }
 #access-mobile li {
     border-top: 1px solid #163a46;
     display: block;
     float: none;
     margin: 0;
     padding: 0;
 }
 #access-mobile li:first-of-type {
     border: none;
 }
 #access-mobile li a {
     border: none;
     color: #919191;
     display: block;
     line-height: 3.25em;
     text-decoration: none;
     font-weight: normal;
     padding: 4px 0;
     font-size: 14px;
 }
 #access-mobile li li {
     border: none;
 }
 #access-mobile li li a {
     font-size: 12px;
 }
 #access-mobile .current_page_item a {
     color: #ffffff;
 }
 #access-mobile li a:active,
 #access-mobile li a:hover {
     color: #ffffff;
 }
 
 /* Search Form */
 #branding #searchform {
     float: right;
     padding: 1.325em 0;
 }
 #branding #s {
     float: right;
     padding: 4px 0 4px 28px;
     border-radius: 0;
     box-shadow: none;
 
     -webkit-transition: width .2s linear;
     -moz-transition: width .2s linear;
     -ms-transition: width .2s linear;
     -o-transition: width .2s linear;
 }
 #branding #s:focus {
     width: 132px;
 }
 #branding #searchsubmit {
     display: none;
 }

Responsive Webdesign kursus for begyndere

Sat, 08 Nov 2014 16:13:09 GMT

Hej Udviklere,

P� NemProgrammering.dk har vi i dag smidt et mindre kursus om Responsive Web Design live.

Kurset henvender sig til dem som allerede har styr p� HTML og CSS, og m�ske har en hjemmeside som godt kunne bruge et nyt responsivt design.

Se kurset her: L�r responsive web-design

Kom gerne med jeres feedback!

Mvh.

Thomas

responsive menu virker ikke helt

Tue, 17 Dec 2013 01:18:29 GMT

Hej

jeg er i gang med at bygge min nye hjemmeside op til mobil ogs�, derfor vil jeg h�re jer ad hvordan det kan v�re at jeg har det her problem som bliver vist p� linket.

http://billedeupload.dk/?v=auFEW.png

Til ventre kan du se n�r jeg bruger computer og til h�jre s�dan ser det ud n�r jeg er p� f.eks mobil.

Computer style hvis jeg kan kalde det.

CSS kode

 .menu{
     height:42px;
     background:#333; 
     border-bottom:solid 3px red;
     }
 .menu ul{
     margin:0; 
     padding:0; 
     float:left; 
     list-style:none;
     }
 .menu ul li{
     position:relative;
     float:left; 
     }
 .menu ul li a{
     display:block;
     height:42px; 
     padding:0 15px; 
     font:15px/45px 'Anaheim', sans-serif; 
     color:#fff; 
     text-transform:uppercase; 
     text-decoration:none;
     -webkit-transition:background 190ms ease-in, color 190ms ease-in;
     -moz-transition:background 190ms ease-in, color 190ms ease-in;
     -ms-transition:background 190ms ease-in, color 190ms ease-in;
     -o-transition:background 190ms ease-in, color 190ms ease-in;
     transition:background 190ms ease-in, color 190ms ease-in;
     }
 .menu ul:hover li.active > a{
     background:#333; 
     color:#fff; 
     }   
 .menu ul li.active > a, .menu ul li:hover > a, .menu ul li.active:hover > a{
     background:red; 
     color:#FFF; 
     }   
 .menu ul li a:active, .menu ul li.active a:active{
     color:#CCC;
     }

Mobil style here.

CSS kode

 .menu {
     width: 95%;
 }
 .menu li {
     clear: both;
     padding: 5px 15px;
 }
 .menu li a{
     text-decoration: none;
     color: #ffffff;
 }

S�dan ser hele kode ud med mobil style

CSS kode

 @media screen and (max-width: 524px) {
     body {
         background: #000;
     }
     .menu {
            width: 95%;
     }
     .menu li {
         clear: both;
         padding: 5px 15px;
     }
     .menu li a{
         text-decoration: none;
         color: #ffffff;
     }
 }
 @media screen and (max-width: 758px) {
     body {
         background: #000;
     }
     .menu {
            width: 95%;
     }
     .menu li {
         clear: both;
         padding: 5px 15px;
     }
     .menu li a{
         text-decoration: none;
         color: #ffffff;
     }
 }
 @media screen and (max-width: 960px) {
     body {
         background: #000;
     }
     .menu {
            width: 95%;
     }
     .menu li {
         clear: both;
         padding: 5px 15px;
     }
     .menu li a{
         text-decoration: none;
         color: #ffffff;
     }
 }

H�ber du kan hj�lpe mig videre til at hjemmesiden snart kan komme online.

Seperat masterpage i responsive web design?

Sun, 14 Apr 2013 18:26:13 GMT

Hej alle. Jeg er en uvidende multimediedesign-studerende og sidder med et problem, som jeg h�ber I kan hj�lpe med.

Jeg skal lave et responsivt web-design, og jeg er bare lidt p� bar bund. Den eneste m�de jeg kan se, at dette kan lade sig g�re for mig p�, er at have 2 masterpages. Men hvordan g�r jeg det? Det skal jo gerne v�re s�dan at, n�r man g�r ind p� min side fra en iPhone, s� ved den selv hvilken masterpage og css fil den skal bruge
H��ber p� hj�lp

Responsive design

Mon, 30 Jan 2012 12:16:34 GMT

Hej alle i kloge mennesker.
Jeg vil h�re hvad i synes om responsive design i forhold til en mobil side.

Jeg er i gang med at unders�ge mulighederne til min egen hjemmeside www.lavdinapp.dk der jo gerne skulle kunne h�ndtere iPhones og iPads.

Der er eventuelt nogen der allerede besk�ftiger sig med dette der har nogle gode artikler eller b�ger?