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

Frage Probleme mit der positionierung eines Textes in HTML

Sir_Troll

Sir_Troll

Neues Mitglied
Hallo ich habe ein kleines Problem,
ich habe einen Text in einer Seite der nicht in die Mitte geht, ich habe es im CSS versucht und im HTML
Kann einer mir ein paar Tipps dazu geben?

Freue mich über jede Hilfe die ich kriege
Danke im vorraus
 
Gibt es einen Link zu der Seite? Sonst wäre der CSS-Code interessant (der Ausschnitt, der sich mit dem Text und den Eltern-Elementen beschäftigt) sowie der HTML-Code. Mit den vorhandenen Angaben ist nicht wirklich etwas anzufangen ;)
 
Sir_Troll schrieb:
Hallo ich habe ein kleines Problem,
ich habe einen Text in einer Seite der nicht in die Mitte geht, ich habe es im CSS versucht und im HTML
Kann einer mir ein paar Tipps dazu geben?

Freue mich über jede Hilfe die ich kriege
Danke im vorraus
Zum Vergrößern anklicken....

Code: 
text-align:center;

Wenn nicht, musst du schon etwas Code herzeigen...
 
Hallo,

vor dem Designen steht ein sauberer HTML-Quelltext. Ansonsten können die zu stylenden Elemente überhaupt nicht richtig angesprochen werden. Daran hapert es leider bei dir noch extrem.

So sind deine div-Elemente nicht sauber geschachtelt. Es ist teilweise überhaupt nicht nachvollziehbar wo ein div enden soll.

Oder du öffnest ul-Elemente, die dann aber nicht die vorgeschriebenen li-Elemente enthalten sondern p- oder a-Elemente. Das ist sachlich schlicht falsch.

Oder in einer Navigation finden sich a-Elemente die p-Elemente enthalten. Beim direkt nachfolgenden Link enthält dann ein p-Element ein a-Element. Wie soll man das stylen?

Also überarbeite bitte zunächst deinen Quelltext im body-Bereich.

Nachtrag: Ich habe mal ein Beispiel mit aktuellem HTML5 / CSS3 sowie etwas Responsive Design erstellt, soweit es mir mit deinem Quelltext und dem Bild als Vorlage möglich war:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
  <title>Layout 01</title>
  <meta name="description" content="HTML5, CSS3">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Um alte IE HTML5-tauglich zu machen -->
  <!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
  <style>
  @media all {
  /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
  header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
  display: block;
  }
  * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  html {
  font-size: 110%;
  }
  body {
  padding: 1rem 5%;
  display: flex;
  flex-wrap: wrap;
  }
  h2 {
  font-size: 1rem;
  }
  body>* {
  background-color: #efefef;
  width: 100%;
  padding: 0.5rem 2rem;
  }
  body>main {
  width: 70%;
  }
  body>aside {
  width: 30%;
  }
  body>figure {
  padding: 0;
  margin: 0;
  }
  footer {
  color: white;
  background-color: black;
  }
  header h2 {
  font-size: 1.1rem;
  }
  nav {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  }
  a {
  display: block;
  color: black;
  text-decoration: none;
  }
  main {
  }
  main>article {
  }
  main>section {
  }
  main>article>section>div {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  -moz-column-gap: 1rem;
  -webkit-column-gap: 1rem;
  column-gap: 1rem;
  }
  main>article>section>div p {
  text-align: justify;
  margin: 0 0 1rem 0;
  }
  article section div figure {
  margin: 0;
  max-width: 250px;
  }
  img {
  max-width: 100%;
  }
  aside section h2 {
  margin-bottom: 0;
  }
  aside section a {
  padding-left: 1rem;
  }

  /*Formular gestalten - Felder*/
  input:focus,
  checkbox:focus,
  select:focus,
  option:focus,
  textarea:focus {
  background-color: papayawhip;
  }
  form ol li,
  label,
  input,
  select,
  textarea {
  font-size: 1rem;
  padding-left: 1%;
  padding-right: 1%;
  }
  form div {
  width: 100%;
  padding: 0;
  margin: 0 0 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  }
  form div>:nth-child(1n) {
  margin-bottom: 0.5rem;
  margin-left: 0;
  margin-right: 0;
  }
  form>div:nth-child(1) :nth-child(2n+1) {
  width: 30%;
  display: block;
  }
  form>div:nth-child(1) :nth-child(2n) {
  width: 70%;
  display: block;
  border: 2px solid gray;
  border-radius: 0.4rem;
  }
  /*Formular gestalten - Buttons*/
  form>div:nth-child(2) {
  display: flex;
  justify-content: flex-end;
  }
  form>div:nth-child(2) input {
  margin-left: 1rem;
  }
  }
  @media only screen and (max-width: 1100px) {
  body>main,
  body>aside {
  width: 100%;
  }
  }
  @media only screen and (max-width: 750px) {
  form>div:nth-child(1) :nth-child(2n+1) {
  width: 100%;
  }
  form>div:nth-child(1) :nth-child(2n) {
  width: 100%;
  }
  }
  </style>
</head>
<body>
  <header>
  <h2>The Trollclan</h2>
  </header>
  <nav>
  <a href="#">Blog</a>
  <a href="#">About</a>
  <a href="#">Archives</a>
  <a href="#">Contact</a>
  <a href="#" >Subscribe via. RSS <img
  src="http://reneescattergood.com/wp-content/themes/papercuts/images/icon-rss.png" width="20" height="20" alt="RSS"></a>
  </nav>
  <figure>
  <!-- <img src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Port_hamburg_panorama.jpg" alt="Hamburg Panorama"> -->
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Schloss_Veitsh%C3%B6chheim.jpg" alt="Schloss">
  </figure>
  <main>
  <article>
  <h1>Android 4 ever</h1>
  <section>
  <h2>Brainwashed</h2>
  <div>
  <p>Brainwashed, owing to Flash, as a result you suck, personally Android sells more phones, I believe marketing during fanboy, in order that fanboi when crap, for this reason it didn’t even have copy and paste, immediately I-Pod, so as to professional fanboy for instance blah, blah, blah.</p>
  <p>Apple didn’t invent anything, and Antennagate, eventually you suck, generally professional fanboy, not only moron, on the whole Gruber nevertheless fact is, Apple are going down soon fanboy such a it’s open in addition you don’t know anything, not enough death-grip at first Jesus pad finally notifications are way better on Android.</p>
  <figure>
  <img src="http://www.laverdadrefresca.com/wp-content/uploads/sites/27/2013/07/troll-604x492.png" alt="Troll" >
  </figure>
  <p>Hypnotised whenever Apple copied Android’s notifications when you suck, in conclusion ass-kissing, exactly because toys to sum up fact is, I can get a better laptop for less, so that sucky ass, in the beginning cult of Jobs, first hype for one thing typical fanboy for example Apple are nothing without Steve Jobs, to begin with cult of Steve in my opinion fanboi, so that Google Voice is better than Siri and TellMe put together, why locked down therefore overpriced, hardly fanboi, naturally Android is better because it’s open another point is that fanboy, at the beginning Apple copied LG above all you’d buy shit if Apple sold it, due to brainwashed once Android sells more phones, at last fanboi.</p>
  <p>Professional fanboy but also it’s open, overall Jesus pad I would say that Apple didn’t invent anything, apparently Antennagate, before fanboi, moreover marketing besides fanboy, after toys, as fact is, Apple are going down because you suck.</p>
  </div>
  </section>
  <section>
  <h2>Contrary</h2>
  <div>
  <p>Death-grip, prior to fanboy this includes fanboy on the contrary Apple copied Android’s notifications, particularly Flash on I-Pod whose locked down because of you don’t know anything, so hypnotised, in spite of typical fanboy, to Gruber, next you suck as well as cult of Jobs afterwards moron what sucky ass to whom Apple copied LG in the end Google Voice is better than Siri and TellMe put together, however fanboi, I think blah, blah, blah, especially hype whereas fact is, I can get a better laptop for less suddenly cult of Steve.</p>
  <p>It didn’t even have copy and paste, although you suck which crap, at the end you’d buy shit if Apple sold it after that notifications are way better on Android, furthermore professional fanboy what is more overpriced.</p>
  <p>Android is better because it’s open while ass-kissing consequently Apple are nothing without Steve Jobs, since you suck, in contrast ass-kissing when Gruber, then brainwashed, all in all you suck.</p>
  <p>It’s open who you’d buy shit if Apple sold it, until toys but while blah, blah, blah, as soon as Google Voice is better than Siri and TellMe put together while Jesus pad on the other hand notifications are way better on Android, this is why Android sells more phones, in the main Android is better because it’s open where fanboy, whatever Apple copied LG, on the one hand Apple didn’t invent anything, that fanboy, despite you suck, thus cult of Jobs, but I-Pod, therefore crap to sum up hype, whose locked down, I believe Apple are nothing without Steve Jobs, at the end fanboi, I would say that cult of Steve that Flash so as to professional fanboy, on the one hand moron.</p>
  <p>It didn’t even have copy and paste for example typical fanboy, furthermore you don’t know anything, because of hypnotised why fanboi on the other hand overpriced.</p>
  </div>
  </section>
  </article>
  <section>
  <h2>Comments</h2>
  <form action="mailto:[email protected]" method="POST" enctype="text/plain">
  <div>
  <label for="vorname">Vorname:</label>
  <input type="text" id="vorname" name="vorname" placeholder="Vorname" />
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Name" />
  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email" placeholder="E-Mail" />
  <label for="nachricht">Nachricht:</label>
  <textarea id="nachricht" name="nachricht" rows="10"></textarea>
  </div>
  <div>
  <input type="submit" name="senden" value="Absenden" />
  <input type="reset" name="senden" value="Löschen" />
  </div>
  </form>
  </section>
  </main>
  <aside>
  <section>
  <h2>Contact</h2>
  <a href="#">Troll in Dubai</a>
  <a href="#">Troll in Russland</a>
  <a href="#">Troll in den USA</a>
  </section>
  <section>
  <h2>Archives</h2>
  <a href="#">Fotos vom Troll in Dubai</a>
  <a href="#">Fotos vom Troll in Russland</a>
  <a href="#">Fotos vom Troll in den USA</a>
  </section>
  </aside>
  <footer>
  <p>&copy; 2015, by T0IF</p>
  </footer>
</body>
</html>

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Danke für die Hilfe du hast mir sehr geholfen riesen danke
Ich habe über die nacht eine neue seite geschrieben wo ich aufgepasst habe dass alles sinnvoll und sauber ist
 
Zuletzt bearbeitet:
nur noch eine Frage ich kapiere nicht wirklich wie du den text in 2 "Reihen" gesetzt hast...
Könntest du mir das bitte erklären?
Danke im vorraus
 
Hallo

wo ich aufgepasst habe dass alles sinnvoll und sauber ist
Zum Vergrößern anklicken....

Nein, leider nicht. Solange du dich vor davor drückst die Grundlagen zu lernen wird sich daran auch nichts ändern.

Könntest du mir das bitte erklären?
Zum Vergrößern anklicken....

Mit dem CSS-Attribut "multicolumn". Allerdings solltest du dich vor dem Einsatz mit den Auswirkungen beschäftigen, da du sonst wohl zu unerwarteten Ergebnissen kommst - googeln hilft.

In deine Seite kannst du multicolumn z. B. durch folgende zusätzliche CSS-Anweisung einfügen:

Code: 
#inhalte {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 1rem;
-webkit-column-gap: 1rem;
column-gap: 1rem;
}

Gruss

MrMurphy
 
MrMurphy schrieb:
Nein, leider nicht. Solange du dich vor davor drückst die Grundlagen zu lernen wird sich daran auch nichts ändern.
Zum Vergrößern anklicken....
Ich drücke mich nicht davor die basis zu lernen aber ich habe erst seit 8 Wochen HTML+CSS in der Schule und ich bemühe mich so gut ich kann alles zu verstehen........
und nochmal danke
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben