HTML / CSS Div-Container bzw. ganze Seite horizontal zentrieren

So sollte das am Ende aussehen. Horizontal in der Mitte des Browserfensters. - (Website, html, CSS)

4 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

bei drumrum (erster Eintrag) das Float entfernen. Das beißt sich mit der Zentrierung ;)

Fürs Zentrieren reicht es, dem Container eine Größe zuzuweisen und margin:0 auto zu setzen.

danke! Da wär ich im Leben nicht drauf gekommen. Das funktioniert ja! Danke danke danke ich hab schon gedacht ich verzweifel hier noch.

Hätte nicht gedacht, dass beide Angaben sich nicht miteinander verstehen. Ist aber eigentlich logisch, so wie du das erklärt hast.

Aber gut, bin ja auch erst ein Anfänger im Bereich Webdesign! Sobald ich den Stern vergeben kann, kriegst du ihn :D

Noch mal danke ;)

0
@HugaTV

Kein Ding. Es sind meist recht offensichtliche Banalitäten an denen man auch mit Jahren Erfahrung noch scheitert, schon weil man die Fehler in wesentlich komplezierteren Strukturen vermutet.

0
@Limearts

So kommt mir das auch vor :D

Aber gut, immer schön zu erfahren, dass auch die Profis manchmal an Kleinigkeiten zu knabbern haben, wenn ich das mal so ausdrücken darf ;)

Das ist das blöde an meinem "neuen" Hobby: man sucht und sucht und übersieht alles, was einem "nicht sofort ins Auge springt".

Trotzdem macht das die Sache irgendwie aber auch interessanter :)

0

So sieht momentan meine HTML-Datei aus:

         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
         <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8"/>
    <title>Startseite</title>
    <link rel="stylesheet" type="text/css" href="formate.css">
</head>
<body>
    <div id="drumrum">
        <div id="kopf">
        </div>
        <div id="navi">blubb
        </div>
        <div id="inhalt">Hallo
        </div>
        <div id="footer">dingsda
        </div>
    </div>
</body>

So sieht meine Website bis jetzt aus. - (Website, html, CSS)

Nimm mal das float:left aus drumrum raus.

Auch dir danke. Sei mir nicht böse, aber Limearts war schneller und kriegt den Stern. Ihr hattet ja dieselbe Idee. Trotzdem auch dir ein dickes DANKE für deine Antwort ;)

Ihr habt mir echt geholfen, dass man das ohne viel Aufwand hinkriegt.

Einfach genial, wenn man so was kann!

0
@HugaTV

kein Problem. Ich bin nicht böse, weil jemand anderes den Stern bekommt.

0

Content läuft über den Rahmen hinaus! Was tun?

Also, hier ist das Problem: http://thedailyfall.org/wordpress_EN/ Der Content läuft total über das eigentliche Textfeld raus! Wie kann ich das beheben? Hier ist der Code:

content {

float: right;

width: 380px;

margin-bottom: 10px;

margin-right: 265px;

background-color: transparent;}

contentbottom {

position: fixed;

width: 644px; height:61px;

background-image: url(images/content/content_02.png);

background-color: transparent; }

/* Content Text */

.content{

color: #8f8f8f;

font-size:11px;

font-family: Tahoma;

line-height:12px;

background-color: transparent;

background-image: url(images/content/content_02.png);

letter-spacing:0;

text-align: justify;

padding: 16px;

width: 612px; font-weight:normal;

max-width: 612px;
}

...zur Frage

Wie mache ich das nebeneinander?

Hi, möchte eine Spoilerbox machen und daneben ein Bild, aber wenn ich diese Spoilerbox aufmache, verschiebt sich das Bild automatisch nach unten, wie verhindere ich das ?

HTML:

<input type="checkbox" id="spoiler7" />
	<label for="spoiler7" >Über uns!</label>
	<div class="spoiler6"></div>

CSS:

input[id^="spoiler7"]{
 display: none;
}
input[id^="spoiler7"] + label {
	height: 60px;
	position: relative;
	right: 27.5%;
	padding-top: 10px;
	font-family: Arial;
 width: 15%;
	top: 4%;
 margin: 0 auto;
 padding: 5px 20px;
 background: #5e5e5e;
 color: #fff;
 font-size: 24px;
 border-radius: 8px;
 cursor: pointer;
 transition: all .6s;
}
input[id^="spoiler7"]:checked + label {
 color: #333;
 background: #ccc;
}
input[id^="spoiler7"] ~ .spoiler6 {
 width: 27%;
	font-family: Arial;
	color: #484848;
	position: relative;
	right: 27.5%;
	top: 4%;
	text-align: center;
 height: 0;
 opacity: 0;
 margin: 10px auto 0;
 padding: 10px;
 background: #eee;
 border: 1px solid #ccc;
 border-radius: 8px;
 transition: all .6s;
}
input[id^="spoiler7"]:checked + label + .spoiler6{
 height: auto;
 opacity: 1;
 padding: 10px;
}

Jetzt das Bild was da rechts nebendran soll:

HTML:

	<div id="Picture">
		<img src="bilder/10.png" width="400px"height="400px" alt="" />
	</div>

Und CSS:

#Picture {
	margin-left: 70%;
	display: inline;
	position: relative;
}

Ich hoffe ihr könnt mir helfen!

Ich bedanke mich im Voraus!

...zur Frage

CSS: Negativer Margin und positiver Padding kombinieren?

Hallo,

welchen Grund hat es, dass man negativen Margin und positiven Padding kombiniet?

Hier ein Beispielcode:

<div class="content">
    <div class="header"></div>
</div>
.content {
    padding: 20px;
    margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
}

.header {
    padding: 20px 20px 10px;
    margin: -20px -20px 20px;
}

...zur Frage

Wie kann ich meine Subnavigation in CSS zentrieren?

Moin! :)

Ich würde gerne meine Subnavigation, die sich am linken Bildrand befindet, zentrieren. Leider klappt das bei mir nicht so wirklich und hoffe, dass mir jemand helfen kann.

Vielen Dank im Vorraus! :)

Mein HTML-Code: https://pastebin.com/e2zyBvyy

body, html {
    background: #F4A460;
    margin: 0;
    padding: 0;
    font-size: 62.5%;
}

div#subnavigation {
    background: #8A4B08;
    position: fixed;
    top: 0;
    width: 166px;
    text-align: center;
    transition: 200ms all;
    height: 100%;
}

div#subnavigation nav#sub {
    display: inline-block;
}

div#subnavigation nav#sub ul {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    position: relative;
    vertical-align: middle;
    transition: all 300ms;
}

div#subnavigation nav#sub ul li {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    position: relative;
    transition: all 300ms;
}

div#subnavigation nav#sub ul li a {
    display: inline-block;
    padding: 2.17rem;
    float: left;
    min-width: 12rem;
    text-align: center;
    font-size: 2rem;
    color: #000000;
    margin: 0 1px 0 0;
    text-decoration: none;
    background: #deb887;
    font-weight: 300;
    transition: all 300ms;
    font-family: 'Source Sans Pro', sans-serif;
    border-bottom: 1px solid #8A4B08;
}

div#subnavigation nav#sub ul li:hover > a {
    background: #FFD39B;
}
...zur Frage

HTML Hintergrund zu klein?

Hallo zusammen, ich habe mir jetzt eine HTML Seite gemacht, aber irgendwie klappt das mit dem hintergrund nicht ganz. Der Hintergrund ist irgendwie zu klein. Also ich habe eine Farbe, kein Bild als background angegeben. Im Bield sieht man, was ich meine. Bitte helft mir. Ich bin verzweifelt. Bei dem transparenten steht ein Text. Auch in der schwarzen Box. Mein Body Code sieht wie folgt aus.

    html {
    background-color: beige
}

body {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1000;
    padding: 2em 2em 4em;
    margin-bottom: auto
}

body {
    background-color: aliceblue
}

LG Michael

...zur Frage

Wie bekomme ich die rechte Box in den gelben Bereich?

<style>
.spiel {
    width: 100%;
    background-color: yellow;
    min-height: 300px;
    border: 4px solid black;
}
.spiel_links {
    width: 40px;
    background-color: grey;
    height: 100%;
    border: 0px;
}
.spiel_balken {
    width: 40px;
    background-color: green;
    height: 25%;
    position: absolute;
    bottom: 6px;
    border-bottom: 1px solid red;
}
.spiel_rechts {
    float: left;
    border: 2px solid blue;
}
.spiel_kopf {
    min-height: 30px;
    border-bottom: 1px solid red;
    float: none;
    position: relative;
    top: 0px;
}
.spiel_inhalt {
    clear: none;
    height: 100%;
    float: none;
}
.spiel_boden {
    position
    min-height: 30px;
    border-top: 1px solid red;
    float: none;
    position: relative;
    bottom: 0px;
}
</style>
<div class="spiel">   
  <div class="spiel_links">      
    <div class="spiel_balken">25%</div>   
  </div>   
  <div class="spiel_rechts">      
    <div class="spiel_kopf">         
      Heimmannschaft vs. Gastmannschaft am 01.01.1970 um 19 Uhr in Musterstadt.      
    </div>      
    <div class="spiel_inhalt"> Text</div>      
    <div class="spiel_boden">zugesagt: 2</div>   
  </div> 
</div>
...zur Frage

Was möchtest Du wissen?