Ga naar inhoud

CSS in de war bij verschillende webbrowsers


BasWeb

Aanbevolen berichten

Goedenavond allen,

Ik ben een beginnend website bouwer en loopt tegen een probleem aan. Ik heb zelf een website gebouwd d.m.v. HTML en CSS bestanden.

Maar nu ik de website online zet, gaan al mijn CSS instellingen niet meer op, omdat elke webbrowser (Chrome en IE getest) de opmaak

door elkaar gooit. Zou iemand mij willen helpen aub. hieronder mijn CSS bestand:

body {

background-color: #EBEAEA;

font-family: "Trebuchet MS", sans-serif;

font-size: 100%;

color: #5E5E32;

font-size: 15px;

}

#libo {

width: 240px;

height: 240px;

margin-left: -27.9%;

margin-top: -22.6%;

background-color: #5E5E32;

}

#wschaal {

width: 250px;

height: 250px;

margin-left: -32%;

margin-top: -40%;

background-color: black;

position: relative;

z-index : 2;

}

#kop {

width: 900px;

height: 230px;

margin-left: 25%;

margin-top: -2%;

border-left: 4px solid #5E5E32;

border-bottom: 4px solid #5E5E32;

background-color: #cdb979;

}

#linker {

width: 240px;

height: 1350px;

margin-left: 10%;

margin-top: 0.8%;

background-color: #cdb979;

border-right: 4px solid #5E5E32;

border-top: 4px solid #5E5E32;

font-size: 18px;

color: #ffffff;

z-index: 1;

}

#kop p {

font-family: Georgia, serif;

font-size: 30px;

font-weight: bold;

color: #3D090C;

font-variant: normal;

padding-left: 350px;

padding-top: 12px;

}

#kop y {

font-family: Georgia, serif;

font-size: 18px;

font-weight: bold;

color: #3D090C;

font-variant: normal;

padding-left: 0px;

padding-top: 12px;

}

#midden {

width: 700px;

margin-left: 7%;

margin-top: 14%;

}

.title1 {

font-weight: normal;

font-size: 26px;

color: #3D090C;

}

#voet {

font-family: Georgia, serif;

font-size: 18px;

font-weight: bold;

color: #3D090C;

font-variant: normal;

}

table {

margin: 5px 0 30px 0;

}

table tr th, table tr td {

background: #5E5E32;

color: #FFF;

padding: 5px 4px;

text-align: left;

}

table tr td {

background: #eee;

color: #5E5E32;

border-top: 1px solid #FFF;

}

table tr:hover td {

background: #fff;

color: #555;

border-top: 1px solid #FFF;

}

Alvast bedankt voor uw moeite!

Groetjes Bas,

- - - Updated - - -

Hij is trouwens binnen Google Chrome ook anders op mijn 21" beeldscherm, als op mijn 19" beeldscherm..

Link naar reactie
Delen op andere sites

  • 3 weken later...

Wij kunnen niet alle CSS reviewen zonder de HTML code erbij.

Maar ik zou graag als tip mee willen geven om in plaats de CSS allemaal zelf te schrijven, een soort HTML+CSS framework te gebruiken. Wat deze doen is eigenlijk voor de meest gebruikte 'dingen' een standaard HTML en CSS opmaak meegeven die naar smaak nog aan te passen zijn. De beste die ik tot nu toe heb gevonden is bootstrap (Bootstrap). Versie 2 is wat makkelijker om te leren, versie 3 is wat lastiger om mee te beginnen.

Op deze website is een aantal templates te downloaden die je volledig kunt aanpassen. Zo kun je helemaal "blanco" beginnen, maar ook al met een volwaardige homepagina (Getting started · Bootstrap).

Misschien is het verstandig om uw html en css hierop te baseren. De website is dan ook direct in alle nieuwste browsers goed te lezen omdat bootstrap geoptimaliseerd is voor verschillende browsers met de laatste CSS3 techniek.

Voor een aantal ´snippets´ verwijs ik naar de website bootsnipp (Home of free code snippets for Bootstrap | Bootsnipp.com). Deze website bied een heleboel HTML snippets aan die gemaakt zijn op het bootstrap framework. Denk aan een mooie opmaak voor: formulieren, tabellen, homepagina, etc.

MVG,

Leroy

Link naar reactie
Delen op andere sites

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.