Options
Text verschieben
- Text verschieben
-
Text verschieben
2fersen > 23.09.2018, 17:02
Hallo Leute,
Ich bekomme es nicht hin den Text an die markierten Stellen zu verschieben ohne neue "graue Boxen" zu erstellen.
Code:<!DOCTYPE HTML>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Poiret+One|Varela+Round' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<link rel="stylesheet" href="meinestyles.css">
<style>
#mywrapper main * {
margin: 0;
padding: 0;
}
#mywrapper main , header , footer { width:100%; margin:0px auto; padding:10px; font-family: 'Poiret One'; line-height:20px; letter-spacing:1px; box-sizing:border-box;}
#mywrapper main,
header,
footer {
margin: 0px auto;
padding: 10px;
font-family: 'Varela Round';
line-height: 20px;
letter-spacing: 1px;
box-sizing: border-box;
}
#mywrapper main {
background:white;
}
#mywrapper header {
background:white;
color: Black;
padding: 1em;
font-weight: bold;
text-align: center;
border:0px solid grey;
}
#mywrapper section {
padding: 10px 0;
text-align: center;
}
#mywrapper article {
text-align: center;
background: lightgrey;
padding: 2px;
margin-right: 10px;
width:50%;
font-weight: 400; }
#mywrapper article h1 {
font-size: 2vw;
border: 1px solid grey;
}
#mywrapper article a {
color: #8B4513;
font-weight: bold;
}
#mywrapper .descripe h3 {
padding: 10px;
font-weight: bold;
font-size: 1.2em;
}
#mywrapper h3 {
padding: 10px;
font-weight: bold;
font-size: 1.8em;
line-height: 2.0;
}
#mywrapper p {
padding: 10px;
}
#mywrapper footer{
padding: 10px;
background: transparent;
text-align: right;
color: black;}
#mywrapper footer a {
color: brown;
}
#mywrapper caption {
background:lightgrey;
color: #fff;
padding: 5px;
text-align: left;
}
#mywrapper h1 {
background:orange;
padding: 15px;
font-family: 'Poiret One';
}
#mywrapper .gal {
margin: 5px 0;
border-top: 2px solid #eee;
border-bottom: 2px solid lightgrey;
}
#mywrapper .gal ul {
display: flex;
}
#mywrapper .gal li {
width: 30%;
margin: 1px;
display: flex;
align-items: center;
}
#mywrapper .gal a {
display: block;
padding: 2px;
outline: none;
}
#mywrapper .flex {
display: flex;
width:100%;
}
#mywrapper .descripe {
padding: 1em;
text-align: left;
width:100%;
}
#mywrapper .info {
background:lightgrey;
font-weight: bold;
color: #fff;
display: flex;
align-items: center;
font-family: sans serif;
}
#mywrapper .col-66 {
width: 50%;
}
#mywrapper .col-34 {
width: 49%;
}
#mywrapper .col-38 {
list-style : none;
width: 49%;
font-weight: 900;
font-family: 'Poiret One';
}
#mywrapper #ausen2,
#mywrapper #ausen5{
background:orange;
}
#mywrapper .fa {
color: black;
}
#mywrapper .weiss {
color: #fff;
}
#mywrapper .none {
display: none;
}
@media (max-width: 800px) {
#mywrapper main,
#mywrapper header,
#mywrapper footer,
section {
/*width: 100px;*/
}
#mywrapper .flex,
#mywrapper .info,
#mywrapper .col-66,
#mywrapper .col-34,
.gal ul,
.gal li {
flex-direction: column;
margin: 5px 0;
border: none;
box-sizing: border-box;
}
}
.gal li {
width: 20%;
}
li img {
width: 100%;
border: 0px solid lightgrey;
}
#mywrapper .flex .col-33 {
background:lightgrey;
background:none;
}
#mywrapper .flex .col-38 {
background:lightgrey;
}
* {
margin: 0;
padding: 0;
border: none;
outline: none;
box-sizing: border-box;
}
body {
padding: 10px;
float: left;
background:white;
}
</style>
</head>
<body>
<div id="mywrapper">
<header>
<p>
</p>
<section class="gal">
<h1>Frisch eingetroffen!</h1>
<p> </p>
<ul>
<p style="width:30%; background: lightgrey"> Artikel 1</p>
<li>
<a href="https://www.ebay.de/itm/253767683811"><img alt="" src="https://kopper-24.de/Bilder/Feiern%20-%20Event%20-%20Veranstaltung/Latex%20Luftballons/Standard/Hauptbild%20-%20mit%20Rand.jpg" width="20%"></a>
</li>
<p style="width:30%; background: lightgrey"><FONT SIZE="5">Artikel 2</FONT> text text text text text text text text text text</p>
<p style="width:30%; background: lightgrey"><FONT SIZE="6">Hallo, ich bin ein Text der Grösse 5</FONT></p>
<li>
<a href="https://www.ebay.de/itm/253767683811"><img alt="" src="https://kopper-24.de/Bilder/Feiern%20-%20Event%20-%20Veranstaltung/Latex%20Luftballons/Standard/Hauptbild%20-%20mit%20Rand.jpg" width="20%"></a>
</li>
</ul>
</section>
</section>
</footer>
</main>
</div>
</body>
</html>
![[Bild: Unbenannt.JPG]](https://kopper-24.de/Bilder/Unbenannt.JPG)
Hoffe mir kann jemand weiterhelfen.
2fersen -
RE: Text verschieben
basti1012 > 25.09.2018, 13:11
Warum nutzt du den den veralteten html Mist ? und inline Styls ?
Das ist doch Scheiße so.
Ich änder das mal etwas ab -
RE: Text verschieben
basti1012 > 25.09.2018, 13:42
Ich würde es mal so machen
https://codepen.io/basti1012/pen/OoejXx?editors=1100
Ich habe alles rausgeworfen was man jetzt für das nicht brauch. Ich gehe mal davon aus das deine Seite noch größer ist und noch mehr zu sehen ist. Der Css Code kommt mir bekannt vor da haben wir schon mal was gebaut kann das sein ?
Aufjedenfall kannst du jetzt bei den Beispiel sehen wie man es machen könnte. Jetzt brauchst du das nur noch in dein Projekt einbauen. Fals du es nicht hinbekommst mußt du mal alles posten und genau beschreiben wie es aussehen soll