Hallo liebe HTML-Gemeinde,
ich habe wieder einen Stolperstein: ich möchte ein DIV in zwei Teilen jedoch nicht in der Mitte. Um es einfacher zu verstehen habe ich mal ein Bild gemacht wie es aussieht und wie es aussehen soll:
[Blockierte Grafik: http://www.bilder-upload.eu/upload/688262-1523547898.jpg]
Sinn warum ich es in zwei teilen will ist wie rechts zu sehen ich möchte ein Bild hinzufügen. Desweiteren soll der Test vertikal mittig sein aber nicht die Überschrift die soll immer fest sein.
Macht es überhaupt sinn es in zwei zu teilen oder gibt es andere schönere Lösungen.
index.html
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="../css/style_main.css">
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic|PT+Sans|Raleway" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<a href="#" id="logo"><img src="./img/fcslogo.png"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./html/kontakt.html">Kontakt</a></li>
<li><a href="./html/impressum.html">Impressum</a></li>
<li><a href="https://get.teamviewer.com/738j86c">Fernwartung</a></li>
</ul>
</nav>
</header>
<div class="line">
<a href="#">
<div class="InfoBox">
<div class="lteil"><img src=""></div>
<div class="rteil"><h2>Telefonanlagen</h2><p>Unsere Telefonanlagen sind die schnellsten überhaupt, damit telefonieren Sie so schnell das Sie auflegen müssen bevor Sie gewählt haben.</p></div>
</div>
</a>
<!--ab hier folgen dann nur die selben Boxen -->
<div class="InfoBox"></div>
</div>
<div class="line">
<div class="InfoBox"></div>
<div class="InfoBox"></div>
</div>
</div>
</body>
</html>style_main.css
Code
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}
body {
margin: 0;
padding: 0;
/**font-family: 'Nanum Gothic', sans-serif;**/
/**font-family: 'PT Sans', sans-serif;**/
font-family: 'Raleway', sans-serif;
text-decoration: none;
}
a {
color: #333;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #CCC;
}
header {
background: #f7f7f8;
width: 100%;
height: 100px;
top: 0;
left: 0;
border-bottom: 2px solid #333;
z-index: 100;
}
#logo{
margin: 25px;
float: left;
height: 50px;
display: block;
margin-left: 10%;
}
nav {
font-size: 1.25em;
float: right;
padding: 30px;
margin-right: 10%;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #fff url(../img/mobile_menue.png) center;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
section {
margin-top: 80px;
text-align: center;
}
::-moz-selection {
background: #ee9a49;
color: #fff;
}
#wrapper {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.line {
display: flex;
background-color: #f7f7f8;
justify-content: center;
}
.line a:hover {
color: #000;
}
.InfoBox {
box-shadow: 2px 2px 2px grey;
text-align: center;
margin: 20px;
width: 30vw;
height: 30vh;
padding: 20px;
background-color: #fff;
}
.InfoBox:hover {
box-shadow: 5px 10px 20px grey;
}
.lteil {
width: 30%;
}
.rteil {
width: 70%;
}
button {
background-color: #fff;
/**font-family: 'Nanum Gothic', sans-serif;**/
/**font-family: 'PT Sans', sans-serif;**/
font-family: 'Raleway', sans-serif;
font-size: 0.9em;
color: #000;
border: 1px solid #000;
border-radius: 2px;
padding: 10px;
margin: 30px;
min-width: 70%;
width: 70%;
min-height: 4vh;
height: 20px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
button:hover{
background-color: #eee;
min-width: 75%;
width: 75%;
}
p {
margin: auto;
width: 100%;
text-align: center;
}
@media only screen and (max-width : 640px) {
header {
height: 80px;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
padding: 20px;
position: absolute;
background: #fff;
border: 2px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
.line {
}
.InfoBox {
margin: 20px;
width: 80vw;
height: 30vh;
}
}