• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme beim Zentrieren - AzRaIL's Fragethread :D

A

AzRaIL

Mitglied
Nabend,

ich beschäftige mich seit einigen Tagen "intensiv" mit html und css
jedoch verstehe ich einige Sachen nicht

Ich arbeite derzeit an meinem eigenen Portfolio
mit viel Hilfe hab ich es nun geschafft das immerhin alles an der selben Stelle bleibt wenn man die Auflösung ändert

Hab das ganze mal hochgeladen: Portfolio

das einzige was mich noch stört ist das man erstens unnötig?! scrollen muss
und das wenn man die Auflösung ändert, das ganze nicht mehr zentriert ist
hier mal der Css Code:

HTML: 
* {

margin:0;
padding:0;
}


html, body {

    background: #42474c;
    height: 100%;
    width: 100%;
}

#wrap {

    margin-left: auto;
    margin-right: auto;
    width: 695px;
    position: relative;
    min-height: 37px;
}

#main-nav {

    margin: 0px 0px 0px 2px;
    text-align: left;
    min-height: 25px;
    padding-top: 10px;
    padding-left: 100px;
}
#main-handle {

    width: 695px;
    float: right;
    margin-top: -1px;
}

#main-nav li {

    display: inline;
    list-style: none;;
}
#main-nav li a {

    margin-right: 5px;
    font-size: 15px;
    text-decoration: none;
    color: #8f8f8f;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 10px;
    outline: 0;
    position: relative;
    top: -2px;
}

#main-nav li a:hover, #main-nav li a.active {

    background: #d8d8d8;
}

#sub-link-bar {

    background: #d8d8d8;
    min-height: 10px;
    border-bottom: #645546 1px solid;
    width: 60%;
    margin: auto;
}

.sub-links {

    display: none;
    width: 100%;
    top: 48px;
    text-align: left;
    left: 0px;
    padding-left: 100px;
    position: absolute;
}

#main-nav li .sub-links li a:hover{

    color: #000000;
}

#main-nav li a.close{

    display: none;    
}

#main-nav li a.close:hover{
    background: #900;
}

#content {

    margin-top: 150px;
    margin-left: 120px;
    height: 80px;
    width: 1024px;

}

#content1 {

    background-image: url(images/Content1.png);
    background-repeat: repeat-x;
    width: 240px;
    height: 80%;
    margin-left: 325px;
    float: left;
}

#content2 {

    background-image: url(images/Content1.png);
    background-repeat: repeat-x;
    width: 326px;
    height: 80%;
    margin-left: 613px;

}

Was mache ich falsch? bzw. was müsste ich ändern damit es funktioniert?
 
Gib dem div, in dem sich der Inhalt befindet, ein marign: 0 auto; dann bleibt es auch bei Ändern der Auflösung in der Mitte.
Also die 0 kannst du auch noch ändern; je nachdem, was du für einen Abstand nach oben willst. Aber das auto sollte so bleiben. ;)
 
EndOfGreen schrieb:
Gib dem div, in dem sich der Inhalt befindet, ein marign: 0 auto; dann bleibt es auch bei Ändern der Auflösung in der Mitte.
Also die 0 kannst du auch noch ändern; je nachdem, was du für einen Abstand nach oben willst. Aber das auto sollte so bleiben. ;)
Zum Vergrößern anklicken....

Danke

also es funktioniert jetzt fast
ich hab meinen Inhalt in 2 verschiedene Divs aufgeteilt (Navibar und die beiden Content Boxen)
und zu den Divs hab ich halt in Css margin: x px auto 0px; geschrieben

Die Navibar ist nun zentriert
die beiden Content Boxen sind aber etwas zu weit nach rechts verschoben
ich finde meinen Fehler nicht >_<

hier nochmal neu hochgeladen wie es zurzeit aussieht:

www.azrail-designs.de
 
Zuletzt bearbeitet:
Mach um die beiden Boxen noch ein div mit dem margin, dann sollte auch das nach deiner Vorstellung angezeigt werden.


Hier mal ein Beispiel einer meiner Seiten:


HTML: 
div#Abstand {
  margin: 0 auto 40px;
  width: 800px;
  }

div#Navi { 
   background-image: url(http://img2.imagebanana.com/img/h0vo7ulm/Unbenannt.png);
  background-repeat: repeat;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  width: 170px;
  padding: 2px;
  float: left;
  z-index: 2;
  position: fixed;
  }

div#Inhalt {
  background-image: url(http://img2.imagebanana.com/img/6o9aay3u/Unbenannt.png);
  background-repeat: repeat;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  width: 600px;
  margin-left: 400px;
  margin-bottom: 40px;
  padding: 20px;
  text-align: left;
  z-index: 2;
  position: relative;
  }


HTML: 
<div id="Abstand">
<div id="Navi">&nbsp;</div>
<div id="Inhalt">&nbsp;</div>
</div>
 
EndOfGreen schrieb:
Mach um die beiden Boxen noch ein div mit dem margin, dann sollte auch das nach deiner Vorstellung angezeigt werden.


Hier mal ein Beispiel einer meiner Seiten:


HTML: 
div#Abstand {
  margin: 0 auto 40px;
  width: 800px;
  }

div#Navi { 
   background-image: url(http://img2.imagebanana.com/img/h0vo7ulm/Unbenannt.png);
  background-repeat: repeat;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  width: 170px;
  padding: 2px;
  float: left;
  z-index: 2;
  position: fixed;
  }

div#Inhalt {
  background-image: url(http://img2.imagebanana.com/img/6o9aay3u/Unbenannt.png);
  background-repeat: repeat;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  width: 600px;
  margin-left: 400px;
  margin-bottom: 40px;
  padding: 20px;
  text-align: left;
  z-index: 2;
  position: relative;
  }


HTML: 
<div id="Abstand">
<div id="Navi">&nbsp;</div>
<div id="Inhalt">&nbsp;</div>
</div>
Zum Vergrößern anklicken....

Das Problem ist dann aber das wenn ich die Navi "öffne" (is ja ne Multilevel Navi) das die beiden Content Boxen mit runter gehen
wenns dafür auch noch ne lösung gibt würde ich das so machen wie du gesagt hast
 
Code: 
#center {
width: 615px;
    margin: 20px auto;
	height: 100%;

}

#content1 {

    background-image: url(images/Content1.png);
	background-repeat: repeat-x;
	width: 240px;
	height: 80%;
	float: left;
}

#content2 {

    background-image: url(images/Content1.png);
	background-repeat: repeat-x;
	width: 326px;
	height: 80%;
	float: right;
}

Besser wäre jedoch, wenn du den #center im HTML-Teil unmittelbar nach body öffnest und dan darein den kompletten Inhalt packst.
 
prm schrieb:
Code: 
#center {
width: 615px;
    margin: 20px auto;
	height: 100%;

}

#content1 {

    background-image: url(images/Content1.png);
	background-repeat: repeat-x;
	width: 240px;
	height: 80%;
	float: left;
}

#content2 {

    background-image: url(images/Content1.png);
	background-repeat: repeat-x;
	width: 326px;
	height: 80%;
	float: right;
}

Besser wäre jedoch, wenn du den #center im HTML-Teil unmittelbar nach body öffnest und dan darein den kompletten Inhalt packst.
Zum Vergrößern anklicken....

da hab ich dann aber das Problem das wenn sich die Navi öffnet, dass dann die Content Boxen mit runter wandern...
wie schon gesagt wenn jemand ne Lösung hat wie ich das hinkriege das die Content Boxen nicht mit runter wandern auch wenn alles in einem Div steht bitte sagen
 
Hallo.

Warum setzt du denn den Code von prm nicht um, dann sollte es doch stimmen.
Dir fehlt ja nur noch das zentrieren der Boxen.

Gruss
Elroy
 
Elroy schrieb:
Hallo.

Warum setzt du denn den Code von prm nicht um, dann sollte es doch stimmen.
Dir fehlt ja nur noch das zentrieren der Boxen.

Gruss
Elroy
Zum Vergrößern anklicken....

komischerweise funktioniert es auf einmal wenn ich den Div center ganz nach oben setze
aber das problem besteht weiterhin, das die beiden Content Boxen verschoben sind unter einer anderen Auflösung
könnt ihr den Fehler finden?

habs wieder neu aktualisiert:

Portfolio
 
Hallo.

Das liegt an deinen margin-left werten.
Schau dir nochmal den Code von prm an, da ist kein margin-left enthalten.

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben