css_anfänger
Neues Mitglied
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:
Hier der HTML Code:
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:
Hier ein kleiner Screenshot:
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>[email protected]
<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>
</HTMIch 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 bearbeitet von einem Moderator:
