css - padding: auto; = ikke gyldigt - hvad skal jeg bruge i stedet ? - Udvikleren.dk

Tags: css

Bruger #16670 @ 10.02.13 14:00

Hej

Jeg sidder og undre mig over at man ikke må sætte padding til auto.

Grunden til denne undren er at jeg har lært at man kan resette de forskellige browsers indstillinger for marging og padding ved at lave føgende:

CSS kode

 * {
 margin:0;
 padding:0;
 }

og herefter kan man centrere en <div id="master"></div>, i browseren, så der er lige store margener i begge sider:

CSS kode

 #master {
          position: relative;
          width: 940px;
          height: 600px;
          margin: auto;
          padding: auto;
          border-style: solid;
          border-color: #CC0000;
          border-width: 1px;
 }
 
 #header {
          position: absolute;
          top: 0px;
          left:0px;
          width: 940px;
          height: 200px;
          border-style: solid;
          border-color: #CC0000;
          border-width: 1px;
 }
 
 #nav_bar {
          position: absolute;
          top: 170px;
          left: 0px;
          width: 940px;
          height: 30px;
          border-style: solid;
          border-color: #CC0000;
          border-width: 1px;
 }

Nu er mit problem at mine efterfølgende divs ser lidt mærkelige ud - de vil ikke rigtig være inde i #masteren, men derimod hellere aligne sig med browserens vindue !

jeg har været et smut forbi w3schools og kan se at property values for padding er:

- length
- %
- inherit

men ikke auto er ikke med !

Hvad skal jeg gøre - jeg mener; hvad skal der så stå i #master'erens padding ?

Det er meget frustrende for mig, da jeg jo har lært at gøre det på denne måde og jeg kan ikke mindes at der var nogen problemer da vi skrev kode i notepad++ og heller ikke i HTML editoren fra Coffeecup, men jeg har haft rigtig mange problemer med at mine sider ser mærkelige ud, da vi, på mit webdesign kursus, begyndte at bruge Dreamweaver og nu har jeg nøjagtig de samme problemer i et nyt program WeBuilder2014, som jeg er begyndt at teste.

Indlæg senest redigeret d. 10.02.2013 14:02 af Bruger #16670

7 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 12 karma

Sorter efter stemmer Sorter efter dato

Bruger #17081 @ 10.02.13 15:19

1.258

fjern padding: auto; Det giver kun syntax fejl. Det gør intet.

Eksempel: http://jsfiddle.net/mqpQY/embedded/result/

Indlæg senest redigeret d. 10.02.2013 15:24 af Bruger #17081

Bruger #17435 @ 11.02.13 09:36

For at centrere, så går jeg ud fra at det er din "margin:0 auto;" i stedet for padding.

Bruger #17081 @ 10.02.13 14:29

1.258

Hvordan ser din html ud ? Og nej padding skal ikke sættes til auto for, at centrer et element.

Indlæg senest redigeret d. 10.02.2013 14:33 af Bruger #17081

Bruger #16670 @ 10.02.13 15:08

Hvordan ser din html ud ? Og nej padding skal ikke sættes til auto for, at centrer et element.

Hvad skal padding så sættes til ? - ja, jeg spørger, da jeg er ganske sikker på, at jeg har lært at gøre det på denne måde !

Nå, men jeg gennemgik lige nogle ældre CSS filer og her kan jeg se, at har sat padding til auto. Herefter tested jeg dem i HTML editoren fra Coffeecup og siderne så ud som jeg forventede.

Efter jeg har læst din post, så startede jeg mit nye program op (Webuilder2014) og så et preview (igen med padding sat til auto) og nu ser siderne ud til at være som jeg forventede !

Så nu er jeg lidt i tvivl om hvad der op og ned i denne sag - kunne hele problemet mon relatere sig til Internet Explorer 9 eller...?

Nå, men du bad også om noget kode:

Kode

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>

<!--  <link rel="stylesheet" href="stylesheet.css" type="text/css" /> -->
<style>

* {
  margin: 0;
  padding: 0;
}

#master {
         position: relative;
         width: 940px;
         height: 600px;
         margin: auto;
         padding: auto;
         border-style: solid;
         border-color: #CC0000;
         border-width: 1px;
}

#header {
         position: absolute;
         top: 0px;
         left:0px;
         width: 940px;
         height: 200px;
         border-style: solid;
         border-color: #CC0000;
         border-width: 1px;
         
}

#nav_bar {
         position: absolute;
         top: 170px;
         left: 0px;
         width: 940px;
         height: 30px;
         border-style: solid;
         border-color: #CC0000;
         border-width: 1px;

}

</style>
</head>

<body>

    <div id="master">master

        <div id="header">header

            <div id="nav_bar">nav_bar

            </div>

        </div>

    </div>

</body>

</html>

Jeg har for nemhedens skyld lavet stylesheetet internal, hvis der noget du vil teste.

Bruger #16670 @ 10.02.13 18:39

Hej Dan

Tak for dit råd - jeg har fjernet padding'en helt og kan at det er som du skriver; Det gør intet.

Dette emne omkring padding er helt sikkert noget jeg lige skal have en snak med mine undervisere om.

Mange tak for din hjælp - jeg poster med 100% sikkerhed snart et nyt (dumt?) spørgsmål !

Bruger #11386 @ 10.02.13 20:56

503

Må jeg spørge om hvorfor du benytter dig af position aboslute og ikke bare holder dig til at justere hvor tingene skal stå med padding og margin?

Bruger #16670 @ 10.02.13 22:46

Må jeg spørge om hvorfor du benytter dig af position aboslute og ikke bare holder dig til at justere hvor tingene skal stå med padding og margin?

Hej Casper

Det er fordi jeg er igang med at lære at bruge HTML + CSS på et kursus i webdesign - vi er mest blevet undervist i brugen af position:absolute; og har faktisk kun haft et eksempel/opgave, hvor vi har prøvet dynamisk CSS dvs. at skabe en side med "flydende" elementer ved at tilføje margen (margin) og float:left/right;

Jeg synes rigtig god om det, selvom jeg var en smule forvirret over at skulle tilføje height til alle elementerne, for til sidst at fjerne dem alle sammen igen og lade elementernes indhold bestemme deres højde.

padding: auto; = ikke gyldigt - hvad skal jeg bruge i stedet ?

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler