css responsive

Sat, 23 Apr 2016 08:46:48 GMT

hejsa nogen der gider hj�lpe mig med hvorfor n�r den g�r i responsive s� ligger de op af hinaden de menu css knapper der skal helst v�re luft mellem dem s� de ikke ligger p� af hinanden h�ber i kan hj�lpe og tjekke min kode ud p� forh�nd tak.Link til hjemmeside

lidt ligesom den her side der ligger de ikke op af hinanden felterne det s� radio felterne i det her tilf�lde. exaempel

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 WYSIWYG Editor

Mon, 16 Jun 2014 16:44:52 GMT

Hej
Jeg har i en l�ngere periode ledt efter en WYSIWYG-editor der kunne bruges sammen med responsive web design og er nu endelig faldet over Summernote, som viser sig at v�re meget fornuftigt. Desv�rre har det ikke n�r s� mange funktioner som "normale" WYSIWYG-editors s�som CKEditor.

Hvad mener I? Er Summernote en god responsive WYSIWYG-editor eller findes der bedre alternativer derude?

Hvad synes I om siden?

Tue, 09 Jul 2013 21:53:20 GMT

Vi har lige opdateret vores hjemmeside, PorkyGames.com, som er lavet i PHP, men har nogle vildt fede Javascript-features:

- AJAX (scroll ned for at se det)
- Responsivt design (resize vinduet - det hele er udregnet med JS)
- Dags/nat temaer (Vi synes selv dette er ret fedt - skift med knapperne i h�jre side)
... l�g m�rke til, at temaerne ser forskellige ud for hver reload af siden - igen udregnet med JS !

Hjemmesiden burde ogs� virke i IE.

Hvad synes I om det hele?

Indikerer content er scrollable

Mon, 22 Apr 2013 18:03:47 GMT

Hejsa Udviklere.
Jeg har lavet http://andershagbard.wep.dk/responsive%20test/

Jeg har et lille design problem.
Hvordan viser jeg at element er scrollable?

Har klippet dette eksempel ud:
http://awesomescreenshot.com/07f16ynxf3
I kan nok forstille jer at p� iPhone at scrollbaren er v�k.

S� mit problem er hvordan kan jeg vise at det er scrollable?

I kan selv se eksemplet ved at g� til min side under Tables made easy, og s� g�re vinduet lille.

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

css responsive

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

Responsive WYSIWYG Editor

Hvad synes I om siden?

Indikerer content er scrollable