Frage DIV in die Mitte bringen mittels CSS

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

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

css_anfänger

Neues Mitglied
6 Mai 2017
13
0
1
31
Hallo ich bräuchte mal eure Hilfe habe zwar schon geschaut aber irgendwie finde ich nichts um das <DIV> ordentlich in die Mitte zubringen.

Hier ein kleiner Screenshot:
DIV_Mittig.jpg


Hier der HTML Code:
HTML:
<!DOCTYPE html>
<HTML lang="de">   
  <HEAD>                   
    <TITLE>Seitentext   
    </TITLE>                       
    <LINK rel="stylesheet" type="text/css" href="Style.css" />             
  </HEAD>             
  <BODY>                           
    <DIV id="wrapper">                                         
      <DIV id="headerwrap">                                                   
        <DIV id="header">                                                                 
          <P>           
            <EM>bla
            </EM>         
          </P>                                                   
        </DIV>                                         
      </DIV>                                 
      <BR>                                 
      <!--Menü Anfang-->                                   
      <NAV>                                             
        <UL>                                                         
          <!--Startseite-->                                                             
          <LI>                                                       
          <A href="#" title="#">#</A>                                                     
          </LI>                                                                                                     
          <LI class="submenu">                                                               
            <A href="#" title="#">#</A>                                                                   
            <UL>                         
              <!--Kontakt Anfang-->                         
              <LI>             
              <A href="#.html" title="#">#</A>         
          </LI>                                                                                       
          <LI>         
          <A href="#" title="#">#</A>         
          </LI>                                                                                                                                   
        </UL>                                                       
        </LI>                                                                                                   
        <LI class="submenu">                                                               
          <A href="#" title="#">#</A>                                                                     
          <UL>                                                 
            <LI>           
            <A href="#" title="#">#</A>       
        </LI>                                                                                                 
        <LI>       
        <A href="#" title="#">#</A>       
        </LI>                                               
        <LI>       
        <A href="#" title="#">#</A>       
        </LI>                                                                                                                                               
        </UL>                                                       
        </LI>                                                                                                                                                           
        <LI>                                                     
        <A href="#" title="#">#</A>                                                   
        </LI>                                                                                                                                                                                                 
        <LI>                                                     
        <A href="#" title="#">#</A>                                                   
        </LI>                                                                                 
        <LI>                                                   
        <A href="http://www.disclaimer.de/disclaimer.html" target="_blank">Haftungsausschluss</A>                                                     
        </LI>                                                                                           
        </UL>                                 
      </NAV>                                 
      <BR>                         
      <BR>                                                                                   
      <DIV id="midcolumnwrap">                                                         
        <DIV id="midcolumn">                                                                       
          <BR>                <H3><U>DAS MUSS IN DIE MITTE</U></H3>         
          <BR>                                                                    <B>Telefon:</B>                                                                   
          <BR>123456789                           
          <BR>         
          <BR>                                                                   <B>Fax:</B>                                                                   
          <BR>987456321                           
          <BR>         
          <BR>                                                                   <B>Email:</B>                                                                   
          <BR>mail@online.de                                                             
          <BR>         
          <BR>                                                                   <B>Adresse:</B>                                                                   
          <BR>         
          <BR>strasse 123                                                                     
          <BR>12345 Stadt                                                   <H4>Hinweis</H4>                         
          <BR>                                                   
        </DIV>               
      </DIV>               
      <BR>                           
                                                                                                                                  
    </DIV>       
    <BR>   
    <BR>   
    <BR>   
    <BR>   
    <BR>   
    <BR>                                                             
    <!--Footer Anfang-->                                             
    <DIV id="footerwrap">                                             
      <DIV id="footer">                                                         
        <P><B>lwww.geht-doch.de</B>       
        </P>                                             
      </DIV>                                 
    </DIV>                         
    <!--Footer Ende-->         
    <P>           
      <A href="http://jigsaw.w3.org/css-validator/check/referer">               
        <IMG style="border:0;     width:71px; height:25px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS ist valide!" />      </A>       
    </P>                               
  </BODY>
  </HTM

Ich komme auch nicht weiter habe schon probiert mit :

display: flex;
align-items: center;
justify-content: center;

es mittig zu machen klappt leider auch nicht!

Vielen Dank für eure Hilfe

Hier der CSS Code:


Code:
/* CSS Document */

body
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #BBBBBA;
}

p
{
    padding: 15px;
}

#wrapper
{
    width: 100%;
    min-width: 720px;
    max-width: 1920px;
    margin: 5px auto;
}
/*Kopfzeile*/
#header
{
    background-color: #5B83F2;
  height: 70px;
    border-radius: 10px;
    border: 0px solid #5B83F2;
    margin: 0px auto;
  font-size: 30px;
  color: white;
  text-align: center;
}
/*Navi-Menü********************************************************************/

/* Ausklappbares Menü*/
nav
{
  width: 100%;
  display:inline-block;
  text-align:center;     /*Text in der Mitte*/
  background: #5B83F2;
  font-size: 15px;
  border-radius: 10px;
    border: 0px solid #5B83F2;
}

nav ul
{
  margin: 0;
  padding: 0;
}

nav a
{
  display: block;
  color: #fff;
  text-decoration: none;
}

nav ul li
{
  position: relative;
  display:inline-block; /*text in der mitte  */
  list-style: none;
  color: #fff;
  transition: 0.2s;
}

nav ul li a
{
  padding: 15px;
}

nav ul > li.submenu > a:after
{
  position: relative;
  float: right;
  content: '';
  margin-left: 15px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}

nav ul ul li.submenu > a:after
{
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

nav ul li:hover
{
  background: #4096ee;
}

nav ul ul
{
  position: absolute;
  top: -9999px;
  left: -9999px;
  background: #333;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

nav ul ul li
{
  float: none;
  /*Breite Submenü */
  width: 210px;             
  border-bottom: 1px solid #555;
}

nav ul ul li a
{
  padding: 10px 20px;
}

nav ul ul li:last-child
{
  border-bottom: none;
}

nav ul li:hover > ul
{
  top: 100%;
  left: 0;
}

nav ul ul li:hover > ul
{
  top: 0;
  left: 200px;
}
/******************************************************************************/

#contentliquid
{
    float: left;
    width: 100%;
}

#contentwrap
{
    margin: 0px auto;
    display: flex;
    align-items: center;   
    justify-content: center;
}

#content
{
    background: #BBBBBA;
    border-radius: 10px;
    border: 0px solid #ebebeb;
    margin: 25px;
    text-align: center;
}
#contenttest
{
    background: #BBBBBA;
    text-align: left;
      
}
/*******************************************************************************/
/************Rechte Seite Öffnungszeiten****************************************/
#rightcolumnwrap
{
    width: 250px;
    margin-left: -250px;
    float: left;
}

#rightcolumn
{
    background: #5B83F2;
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    margin: 10px;
    text-align: center;
    color: white; /*Textfarbe Footer*/
      
}
/************Midcolumn****************************************/
#midcolumnwrap
{
    width: 25%;   
    float:left;
 
}

#midcolumn
{
    background: #5B83F2;
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    margin: 10px;
    text-align: center;
    color: white; /*Text Footer*/
    
}
/*******************************************************************************/
/*Fusszeile*/
#footer
  {
    height: 40px;
    width: 100%;
    background: #5B83F2;
    clear: both;
    border-radius: 10px;
    border: 0px solid #ebebeb;
    font-size: 12px;
    text-align: center;
    color: white;
  }
/*******************************************************************************/
 
Zuletzt von einem Moderator bearbeitet:

MrMurphy

Senior HTML'ler
28 Juli 2009
1.496
220
63
Hallo

Dazu musst du

Code:
#midcolumnwrap {
   width: 25%;
   float: left;
}
durch

Code:
#midcolumnwrap {
   width: 25%;
   margin: 0 auto;
}
ersetzen.

Bevor du mit Flexbox anfängst sollte der Quelltext nach den aktuellen HTML5-Vorgaben angepasst werden.

Gruss

MrMurphy
 

css_anfänger

Neues Mitglied
6 Mai 2017
13
0
1
31
Hallo

Dazu musst du

Code:
#midcolumnwrap {
   width: 25%;
   float: left;
}
durch

Code:
#midcolumnwrap {
   width: 25%;
   margin: 0 auto;
}
ersetzen.

Bevor du mit Flexbox anfängst sollte der Quelltext nach den aktuellen HTML5-Vorgaben angepasst werden.

Gruss

MrMurphy
Hallo

das mit margin:0 auto; klappt !!!! (Korrektur man sollte es auch dort ändern wo man möchte!!!)
Wo sind den die Fehler in der HTML Datei bzw gibt es schon einen HTML Checker?
 
Zuletzt bearbeitet:

MrMurphy

Senior HTML'ler
28 Juli 2009
1.496
220
63
Hallo

Es gibt zum einen feste Regeln für HTML, die beachtet werden müssen, um keine Probleme zu bekommen.

Und das gibt es Regeln, die sich bewährt haben und deshalb verwendet werden sollten.

Mit aktuellem HTML könnte dein Quellcode zum Beispiel folgendermaßen aussehen, wobei ich die Navigation weggelassen habe, weil die mit dem Problem nichts zu tun hat:

Code:
<body>
   <header id="pageheader" class="pageheader">
      <h1>bla (Container zentrieren)</h1>
   </header>
   <nav id="navigation" class="navigation">
      <h2>Navigation (Hat mit dem Problem nichts zu tun)</h2>
   </nav>
   <main id="content" class="content">
      <section>
         <h2>Das muss in die Mitte</h2>
         <dl>
            <dt>Telefon:</dt>
            <dd>123456789</dd>
            <dt>Fax:</dt>
            <dd>987456321</dd>
            <dt>Email:</dt>
            <dd>mail@online.de</dd>
            <dt>Adresse</dt>
            <dd>Straße 123<br>12345 Stadt</dd>
         </dl>
         <p>Hinweis</p>
      </section>
   </main>
   <aside class="sidebar">
   </aside>
   <footer id="pagefooter" class="pagefooter">
      <p>lwww.geht-doch.de</p>
   </footer>
   <a href="http://jigsaw.w3.org/css-validator/check/referer">
      <figure>
         <img src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS ist valide!">
      </figure></a>
</body>
Das entscheidende CSS könnte so aussehen:

Code:
      h1, h2, p, a, dt, dd {
         color: white;
      }
      a {
         text-decoration: none;
         outline: none;
         margin: 0rem;
      }
      dl {
         margin: 0.5rem 0;
      }
      dt,
      dd {
         margin: 0;
      }
      dt {
         font-weight: bold;
      }
      dd {
         margin-bottom: 1rem;
      }
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0rem;
      }
      img {
         /*text-align: bottom;*/
         min-width: 0;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
      body {
         background-color: #BBBBBA;
         padding: 1rem 0.5rem 2rem;
      }
      .pageheader,
      .navigation,
      .content,
      .pagefooter {
         background-color: #5B83F2;
         text-align: center;
         padding: 0.5rem 0.5rem 0.5rem 0.5rem;
         border-radius: 0.5rem;
         margin-bottom: 1rem;
      }
      .content {
         max-width: 20rem;
         border: 1px solid white;
         margin: 0rem auto 1rem auto;
      }
      .content h2 {
         text-transform: uppercase;
         text-decoration: underline;
      }
      .content p:last-child {
         font-weight: bold;
      }
dazu noch die Angaben für das Menü.

Mit ein paar weiteren CSS-Angaben kann die Seite dann noch responsive gestaltet werden.

Gruss

MrMurphy
 
Zuletzt bearbeitet:

css_anfänger

Neues Mitglied
6 Mai 2017
13
0
1
31
Vielen Dank erstmal für deine Hilfe!

Also ich das alles was ich bis jetzt gemacht habe "Schrott"?
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.496
220
63
Hallo

Schrott? Nein.

Grundsätzlich kann jeder seine Webseiten erstellen wie er will. Wenn die dann wie gewünscht angezeigt werden ist alles in Ordnung. Wenn du die Seite nur für bestimmte Personen erstellst ist das auch kein Problem.

Mit unzureichendem HTML- und CSS-Code können halt nur nicht alle Darstellungswünsche erfüllt werden. Richtig vor die Füsse fällt einem das spätestens beim responsive Layout.

Weiterhin werden viele Besucher von den Informationen ausgeschlossen.

Pflicht es aktuelles HTML und CSS deshalb im gewerblichen und professionellen Bereich. Wenn Webseiten für Dritte im privaten Bereich erstellt werden sollte die wenigstens auf die Defizite hingewiesen werden.

Gruss

MrMurphy
 

css_anfänger

Neues Mitglied
6 Mai 2017
13
0
1
31
Ich habe auch schon überlegt ein CMS zu nutzen nur fehlt es mir da einfach am "können" für ein Theme zu erstellen!

Deswegen habe ich mich belesen und angefangen zumachen (das es ordentlich aussieht zumindest auf PC ! )

Ich bin bereit zulernen und deswegen möchte ich soviel wie möglich Wissen!
Vielen Dank für ihre Hilfe schon mal!

Wenn ich jetzt ihr CSS + HTML benutze wird es dann auch auf Mobilgeräten ordentlich angezeigt oder wie muss ich mir das vorstellen?
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.496
220
63
Hallo

Wenn ich jetzt ihr CSS + HTML benutze wird es dann auch auf Mobilgeräten ordentlich angezeigt oder wie muss ich mir das vorstellen?
Mein Beispiel ist sehr flexibel aber nicht responsive. Wenn kein responsive Design erforderlich ist macht es keinen Sinn so ein Layout zu erstellen.

Mit dem bisherigen Inhalt wird meine Beispielseite auf Mobilgeräten ordentlich angezeigt.

Wenn mehr Inhalt hinzukommt wird wahrscheinlich irgendwann ein responsive Design erforderlich werden. Die Grundlagen dafür sind bereits "eingebaut". Die Seite kann dafür also problemlos erweitert werden.

Gruss

MrMurphy
 
Werbung: