Virusscanner tips?
Menu verplaatst niet
Quote:
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #eff5f9;
}
.headerMenu {
background-image : url(../img/menu_bg.png);
height : 56px;
border-bottom : 0;
width : 100%;
}
#wrapper {
background-image : url(../img/menu_bg.png);
margin-left : auto;
margin-right : auto;
width : 1000px;
padding-top : 0;
padding-bottom : 0;
}
.logo {
background-image : url(../img/menu_bg.png);
width : 125px;
}
.logo img {
background-image : url(../img/menu_bg.png);
width : 150px;
height : 38px;
}
.search_box {
background-image : url(../img/menu_bg.png);
position : absolute;
top : 13px;
margin-left : 135px;
}
.search_box {
background-image : url(../img/menu_bg.png);
position : absolute;
top : 13px;
margin-left : 135px;
}
.search_box #search input[type="text"] {
background : url(../img/search-white.png) 10px 6px no-repeat #267BB6;
outline : none;
border : none 0;
font : bold 12px Arial;
width : 350px;
padding : 6px 15px 6px 35px;
text-shadow : 0 2px 2px rgba(0, 0, 0, 0.3);
box-shadow : 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
transition : all 0.7s 0s ease;
}
.search_box #search input[type="text"]:focus {
background : url(../img/search-dark.png) 10px 6px no-repeat #FCFCFC;
color : #6A6F75;
width : 350px;
box-shadow : 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}
@media screen and (max-width: 1280px){
#menu {
background-image : url(../img/menu_bg.png);
position : absolute;
top : 0;
right : 0;
height : 37px;
padding-top : 19px;
margin-right : 4%;
}
}
@media screen and (min-width: 1280px){
#menu {
background-image: url(../img/menu_bg.png);
}
}
#menu a {
color : #FFFFFF;
text-decoration : none;
font-size : 14px;
background-image : url(../img/menu_bg.png);
background-repeat : no-repeat;
padding-top : 19px;
padding-bottom : 22px;
padding-left : 10px;
padding-right : 10px;
}
#menu a:hover {
background-image : url(../img/menu_bg_hover_mouse_over.png);
}
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #eff5f9;
}
.headerMenu {
background-image : url(../img/menu_bg.png);
height : 56px;
border-bottom : 0;
width : 100%;
}
#wrapper {
background-image : url(../img/menu_bg.png);
margin-left : auto;
margin-right : auto;
width : 1000px;
padding-top : 0;
padding-bottom : 0;
}
.logo {
background-image : url(../img/menu_bg.png);
width : 125px;
}
.logo img {
background-image : url(../img/menu_bg.png);
width : 150px;
height : 38px;
}
.search_box {
background-image : url(../img/menu_bg.png);
position : absolute;
top : 13px;
margin-left : 135px;
}
.search_box {
background-image : url(../img/menu_bg.png);
position : absolute;
top : 13px;
margin-left : 135px;
}
.search_box #search input[type="text"] {
background : url(../img/search-white.png) 10px 6px no-repeat #267BB6;
outline : none;
border : none 0;
font : bold 12px Arial;
width : 350px;
padding : 6px 15px 6px 35px;
text-shadow : 0 2px 2px rgba(0, 0, 0, 0.3);
box-shadow : 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
transition : all 0.7s 0s ease;
}
.search_box #search input[type="text"]:focus {
background : url(../img/search-dark.png) 10px 6px no-repeat #FCFCFC;
color : #6A6F75;
width : 350px;
box-shadow : 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}
@media screen and (max-width: 1280px){
#menu {
background-image : url(../img/menu_bg.png);
position : absolute;
top : 0;
right : 0;
height : 37px;
padding-top : 19px;
margin-right : 4%;
}
}
@media screen and (min-width: 1280px){
#menu {
background-image: url(../img/menu_bg.png);
}
}
#menu a {
color : #FFFFFF;
text-decoration : none;
font-size : 14px;
background-image : url(../img/menu_bg.png);
background-repeat : no-repeat;
padding-top : 19px;
padding-bottom : 22px;
padding-left : 10px;
padding-right : 10px;
}
#menu a:hover {
background-image : url(../img/menu_bg_hover_mouse_over.png);
}
Hij gebruikt hier heel veel media screen (volgens mij nog twee keer), maar dit heeft volgens mij niet veel nut want er gebeurde dus niks met m'n menu. Ik heb nu zelf zitten klooien en toen kreeg ik m'n menu wel naar rechtsboven, alleen als ik nu het scherm kleiner maakte bewoog het menu niet meer mee. Dit is mijn code:
Quote:
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #eFF5f9;
}
.headerMenu {
background-image: url(../img/menu_bg.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
#wrapper {
background-image: url(../img/menu_bg.png);
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
background-image: url(../img/menu_bg.png);
width: 125px;
}
.logo img {
background-image: url(../img/menu_bg.png);
width: 150px;
height: 38px';
padding-top: 5px;
}
.search_box {
background-image: url(../img/menu_bg.png);
position: absolute;
top: 13px;
margin-left: 160px;
}
#search input[type="text"] {
background: url(../img/search_white.png) no-repeat 1px 1px #267bb6;
outline: none;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
width: 350px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: url(../img/search_black.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 350px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 1280px) {
#menu {
background-image: url(../img/menu_bg.png);
background-size: 100%;
position: absolute;
top: -20px;
right: -730px;
height: 37px;
padding-top: 19px;
margin-right; 6%;
}
}
#menu a {
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
background-image: url(../img/menu_bg.png);
background-repeat: no-repeat;
padding-top: 19px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
background-image: url(../img/menu_bg_hover_mouse_over.png);
}
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #eFF5f9;
}
.headerMenu {
background-image: url(../img/menu_bg.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
#wrapper {
background-image: url(../img/menu_bg.png);
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
background-image: url(../img/menu_bg.png);
width: 125px;
}
.logo img {
background-image: url(../img/menu_bg.png);
width: 150px;
height: 38px';
padding-top: 5px;
}
.search_box {
background-image: url(../img/menu_bg.png);
position: absolute;
top: 13px;
margin-left: 160px;
}
#search input[type="text"] {
background: url(../img/search_white.png) no-repeat 1px 1px #267bb6;
outline: none;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
width: 350px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: url(../img/search_black.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 350px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 1280px) {
#menu {
background-image: url(../img/menu_bg.png);
background-size: 100%;
position: absolute;
top: -20px;
right: -730px;
height: 37px;
padding-top: 19px;
margin-right; 6%;
}
}
#menu a {
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
background-image: url(../img/menu_bg.png);
background-repeat: no-repeat;
padding-top: 19px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
background-image: url(../img/menu_bg_hover_mouse_over.png);
}
Iemand dus enig idee hoe je op een goede manier media screen gebruikt en gebruikte hij dit dus zodat het menu mee bewoog met het scherm (als je het bijvoorbeeld minimaliseert) of is dit ergens anders voor, en hoe kan ik dan op een goede manier zorgen dat mijn menu zich aanpast aan het scherm?
edit: er zat trouwens ook een zoekbar in de header, alleen eerst bleef m'n menu met zijn code dus voor die zoekbar.
Met vriendelijke groeten,
Daniël
Toevoeging op 24/02/2015 23:11:36:
Dit is hoe ik het heb als m'n scherm groot is met m'n eigen code:
http://nl.tinypic.com/r/21jd4zn/8
En dit is hoe ik het heb als ik m'n scherm kleiner maak (wat dus niet zou moeten zijn als ik zijn code zou gebruiken maar dus wel is...En ik krijg dit ook bij zijn code als m'n scherm groter is!)
http://nl.tinypic.com/r/2gx1lk6/8
Gewijzigd op 24/02/2015 23:12:50 door Daniel dd
Is het niet mogelijk om je code op jsfiddle te plaatsen en dan een linkje hier neer te zetten, dan kunnen wij makkelijker een oplossing bieden.
Corné
http://jsfiddle.net/jpa1f905/1/
Hoe kan het dat m'n menu niet naar de juiste plek ging en bij het kleiner maken van het scherm hij op dezelfde plek bleef staan en nu bij m'n eigen code (http://jsfiddle.net/eqx2zvjf/) m'n menu ook weer voor m'n zoekbalk komt als ik m'n scherm kleiner maak? M'n website hoeft nog niet responsive te zijn maar ik zou graag leren hoe ik er voor zou kunnen zorgen dat m'n menu ongeacht de grootte van m'n scherm gewoon netjes op zijn plek blijft staan. Mvg
Toevoeging op 25/02/2015 10:01:21:
Dit is alle code die ik tot nu toe heb (html en css):
http://jsfiddle.net/by0nscdj/