Brugervenlighed & design på nettet

Svar: Design problem

Herlevsen — Wed, 13 Mar 2013 18:56:22 GMT

Den eneste rigtige måde at lave det på IMO, ville være at lave en unordered list.

Kunne se sådan ud:

<li>Produkter</li>

<li>Menupunkt 2</li>

<li>Menupunkt 3</li>

</ul>

ul.navigation {

margin: 0;

padding: 0;

list-style-type: none;

}

ul.navigation > li {

background-color: #545454;

color: #fff;

height: 33px;

line-height: 33px;

width: 210px;

font-weight: bold;

font-size: 14px;

padding-left: 15px;

}

Svar: Design problem

DesignYOU - Allan Hansen — Wed, 13 Mar 2013 15:49:46 GMT

Mads Herlev:
Det virker desværre heller ikke, da teksten ikke er bold men det ændrer sig ikke ved mig.

Hvordan står denne her hos dig ?

Mads Herlev:
Jeg har den ikke liggende nogle steder, da det vil se dumt ud for de kunder som besøger min webshop.

Du må jo have den liggende et sted siden du kan smide koden :) send evt en PM hvis du ikke vil linke offentligt ....

Ellers kan jeg ikke se dit problem.

Svar: Design problem

Mads Herlev — Wed, 13 Mar 2013 15:45:25 GMT

DesignYOU:

Mads Herlev:
Hej! Det er en fejl at jeg ikke har givet det andet kode :) Det kommer selvfølgelig her:

Har du et link til selve siden?

Prøv i stedet at bruge

<div class="produkter">
<p>Hvorfor os ?</p>
</div>

Fjern <div class='tekst'></div>

Så skriver du:
.produkter{
    font-family: "Arial", Times, serif !important;
    background-color: #545454;
    width: 210px;
    height: 33px !important;
    min-height: 33px;
    padding-left: 15px;
    padding-top: 12px;
}
.produkter p{
    display: block;
    font-size: 14px;
    padding: 0;
    padding-top: 3px;
    margin: 0;color: #fff;
    font-weight: bold;
}

Det er den kode jeg linker til og den virker i hver fald i mine browsere :)

Hej!

Det virker desværre heller ikke, da teksten ikke er bold men det ændrer sig ikke ved mig. Jeg har den ikke liggende nogle steder, da det vil se dumt ud for de kunder som besøger min webshop. Men den skulle gerne ligne toppen af "Produkter" som du ser her: www.babytoys.dk

Mange hilsner

Mads

Svar: Design problem

DesignYOU - Allan Hansen — Wed, 13 Mar 2013 15:35:14 GMT

Mads Herlev:
Hej! Det er en fejl at jeg ikke har givet det andet kode :) Det kommer selvfølgelig her:

Har du et link til selve siden?

Prøv i stedet at bruge

<div class="produkter">
<p>Hvorfor os ?</p>
</div>

Fjern <div class='tekst'></div>

Så skriver du:
.produkter{
    font-family: "Arial", Times, serif !important;
    background-color: #545454;
    width: 210px;
    height: 33px !important;
    min-height: 33px;
    padding-left: 15px;
    padding-top: 12px;
}
.produkter p{
    display: block;
    font-size: 14px;
    padding: 0;
    padding-top: 3px;
    margin: 0;color: #fff;
    font-weight: bold;
}

Det er den kode jeg linker til og den virker i hver fald i mine browsere :)

Svar: Design problem

Mads Herlev — Wed, 13 Mar 2013 14:08:57 GMT

Hej! Det er en fejl at jeg ikke har givet det andet kode :) Det kommer selvfølgelig her:

<div class='produkter'>
<div class='tekst'>
<p>Hvorfor os?</p>
</div>
</div>
<style>

.produkter{
font-family: "Arial", Times, serif !important;
color: #FFFFFF;
background-color: #545454;
width: 210px;
height: 33px !important;
min-height: 33px;
padding-left: 15px;
padding-top: 12px;
}

.tekst{
display: block;
font-size: 14px;
padding: 0;
padding-top: 3px;
margin: 0;
font-weight: bold;
}

</style>

Svar: Design problem

DesignYOU - Allan Hansen — Wed, 13 Mar 2013 10:52:32 GMT

Herlevsen:
Det er fuldstændig underordnet, eftersom han har sat display block.

Korrekt men som i selv skriver skal der mere kode til for at finde den fejl, der er tilsyneladende intet forkert i css koden :)

Svar: Design problem

Herlevsen — Wed, 13 Mar 2013 09:56:29 GMT

Det er fuldstændig underordnet, eftersom han har sat display block. DEesuden bør tagget vælges efter semantisk mening. Det eneste rigtige tag at bruge til, hvad jeg tror er en menu, ville være en unordered list.

Svar: Design problem

DesignYOU - Allan Hansen — Wed, 13 Mar 2013 05:15:08 GMT

Hej

Hvis man genskaber koden som her ser den box fint ud i både FF, chrome og IE9 så der må være noget andet der spiller ind :) Ved ikke om i bruger <p> tag til teksten men prøv det :)

Svar: Design problem

Herlevsen — Wed, 13 Mar 2013 00:39:01 GMT

Deleuran:
Til gengæld skal du huske at deklarere ordentligt: margin:0; - bør altid være margin:0px;

Det er ihvertfald også vrøvl, 0 er 0 ligegyldigt om det er angivet i px, em's, %, eller havenisser. Og hvorfor så ikke stile efter at skrive det med mindst mulige tegn..

Deleuran:
hvis du har sat teksten på en ny linie ifht din div - kan den opfattes som et linieskift af browseren (IE) hvilket selvfølgelig er en fejl, men ikke desto mindre tilfældet i nogle tilfælde.

Det passer heller ikke. Skulle det være tilfældet, snakker vi ihvertfald helt tilbage til ie5, og den er for længst uddød.

Vi er nød til at se noget html, for at kunne give et ordentligt svar.

Svar: Design problem

Jan Deleuran — Tue, 12 Mar 2013 23:56:40 GMT

For at kunne se hvad der er galt skal jeg også se din html-kode

Svar: Design problem

Jan Deleuran — Tue, 12 Mar 2013 23:54:20 GMT

Jeppe Smith:

Glem height og min-height og brug i stedet line-height på dit tekst element. Og forsøg at styre udenom padding og brug i stedet margin. Browserne har det med at render padding på forskellige måder.

eksempel:

.produkter{
font-family: "Arial", Times, serif !important;
color: #FFFFFF;
background-color: #545454;
width: 210px;
margin-left: 15px;
margin-top: 12px;
}

.tekst{
display: block;
font-size: 14px;
margin: 0;
margin-top: 3px;
margin: 0;
font-weight: bold;

line-height: 33px;

}

Det er noget vrøvl omkring margin contra padding, da det styrer to vidt forskellige ting -

Forskellen på de 2 billeder skyldes måske din måde at opstille din html-kode,
hvis du har sat teksten på en ny linie ifht din div - kan den opfattes som et linieskift af browseren (IE) hvilket selvfølgelig er en fejl, men ikke desto mindre tilfældet i nogle tilfælde.

Til gengæld skal du huske at deklarere ordentligt: margin:0; - bør altid være margin:0px;

Svar: Design problem

Jeppe Smith — Tue, 12 Mar 2013 23:24:10 GMT

Glem height og min-height og brug i stedet line-height på dit tekst element. Og forsøg at styre udenom padding og brug i stedet margin. Browserne har det med at render padding på forskellige måder.

eksempel:

.produkter{
font-family: "Arial", Times, serif !important;
color: #FFFFFF;
background-color: #545454;
width: 210px;
margin-left: 15px;
margin-top: 12px;
}

.tekst{
display: block;
font-size: 14px;
margin: 0;
margin-top: 3px;
margin: 0;
font-weight: bold;

line-height: 33px;

}

Design problem

Mads Herlev — Tue, 12 Mar 2013 19:07:57 GMT

Hej!

Jeg sidder og designer noget til min hjemmeside hvorefter jeg får et problem. Hvis i ser dette billede: http://tinypic.com/r/30u7rdt/6 Så ser de to "hvorfor os?" ikke ens ud.
Den til venstre er goggle chrome og den til højre er IE9. Jeg skal gøre så IE9 også ligner den i google chrome.
Koden ser sådan ud:

.produkter{
font-family: "Arial", Times, serif !important;
color: #FFFFFF;
background-color: #545454;
width: 210px;
height: 33px !important;
min-height: 33px;
padding-left: 15px;
padding-top: 12px;
}

.tekst{
display: block;
font-size: 14px;
padding: 0;
padding-top: 3px;
margin: 0;
font-weight: bold;
}

Jeg håber i kan hjælpe!
DBH
Mads