Frage zur Formatierung in HTML (Bild, h1, h2) nebeneinander?

Hallo Liebe Community, ich habe ein Problem mit HTML... Könnte mir bitte jemand helfen.

Und zwar übe ich gerade ein bisschen mit HTML, und mir ist gerade aufgefallen, dass wenn in im Header ein Bild, eine Überschrift

und eine Zweite Überschrift habe, diese untereinander stehen, ich meine... Das wusste ich ja... Aber nun möchte ich wissen, wie ich diese drei nebeneinander darstellen kann... Ich habe leider auch nichts im Internet gefunden...
Skript:

...
xxx yyy

...

Ich habe auch schon alles in CSS versucht, aber habe es nicht hinbekommen...

mfg Alexander

3 Antworten

SuperZockerHD

03.03.2016, 17:41

Irgendwie hat es das Format verzogen :)

Homero

05.03.2016, 14:57

Wenn Du einzelne Emelente nebeneinander sehen haben willst,

hilft Dir im CSS auch float

float:left;

float:right;

Sinvoll ist es, einen Contaienr, z.B. einen div zu nehmen,

und die elemente, die nebeneinander stehen sollen, in diesen div zu packen.

am Ende des div - containers mussst dan dann das floaten wieder aufheben.

Abhängig von den Größen (Breite und Höhe) der einzelnen Elemente, kann das eventuell etwas merkwürdig aussehen. Dann musst Du das ganze noch etwas nachformatieren, in dem Du die Überschriften z.B. in Ihrer Schrfthöhe gleich definierst, und eventuell mit margin und padding etwas positionierst.

Wenn du z-B. in CSS h2{display:inline;} einträgst, machen das alle H2-Überschriften.

Das könnte sich ungünstig auf den Rest Deiner Seite auswirken.

wenn Du Dir aber einen Conaienr nimmst, und dem z.B. die Klasse

.floattest verpasst, (kannst Du nennen wie Du willst ) und dann im CSS folgendes machst:

.floattest *{float:left;}

floatet alles in jedem Container, dem Du die Klasse floattest gibst, nach links.

Je nach Gestaltung, könnest Du ein soll-links-stehen-element links floaten und einem soll-rechts-stehen-element rechts floaten lassen.

Minilexikon

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

03.03.2016, 17:42

Die Überschriften (h1, h2) sind Blockelemente. Denen müsstest du im CSS

display: inline;

zuweisen.

Woher ich das weiß:Berufserfahrung – Seit 2014

Ähnliche Beiträge

Warum macht hier html keinen Sinn?

Es gibt in html ja h1 h2 h3 h4 h5 und zu guter letzt h6 für Überschriften

WOZU gibt es so viele?? h1, h2 und h3 verstehe ich vielleicht noch, aber wozu 6? Man kann einfach das p Tag benutzen und es selber mit css so stylen wie auch immer man will, man braucht doch keine extra 6 Tags

...zum Beitrag

Texte in JavaScript verschieben?

Moin, ich möchte folgende Textfelder so positionieren, dass sie anstatt untereinander, nebeneinander sind. Also eine Überschrift in h2 soll immer über einer Unterschrift in h1 stehen.

JS code:

var footer = `

<h2>Service-Hotline</h2>

<h2>Quellen</h2>

<h1><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Quellenverzeichnis</a></h1>

<h2>Anfahrt</h2>

<h1><a href="">Anfahrt</a></h1>

document.getElementsByTagName("footer")[0].innerHTML = footer;

...zum Beitrag

html ausklappbare Navigation?

Hallo Leute,

kann mir jemand sagen wie man nur mithilfe von html und css in der Navigation im Header einen ausklappbare "ul" einbauen kann. Also wenn man über bspl. über Beispiel1. swipet klappt sich eine "ul" aus, die auch links besitzt.(Natürlich sollen die Links untereinander sein)

Vielen Dank vorraus!

...zum Beitrag

H1 überschriften wordpress?

Ich komme mit einer seltsamen aber berechtigten Frage zu euch ! H1 Überschriften in Wordpress !!?!?!? Wo kommt die H1 Überschrift hin ? hab gelesen das die h1 Überschrift automatisch im Titel generiert wird. stimmt das ?

Bis jetzt hab ich den Titel immer geschrieben dann generiert sich der permalink und dann unten im Text Feld starte ich dann mit der Überschrift H1 oder H2 ?

Sorry für die Frage aber den text den ich vor 10 Minuten gelesen habe hat mich nun verwirrt und dachte immer ich beginne im Textfeld mit H1

bitte um Klarstellung und danke

...zum Beitrag

html: wie div boxen neben- und untereinander?

Hallo, in meiner Website sollen dienstleistungen aufgelistet werden.
Für die PC Ansicht, sollen diese (insgesamt 6) nebeneinander stehen.
Für die Tablet und Handy Ansicht sollen diese dann so umbrechen, das genug Platz ist, um sie noch zu lesen und sie nicht ineinander verschwimmen.
Ich habe jetzt hier versucht fürs Tablet drei Boxen nebeneinander und somit dann zwei Spalten zu haben, allerdings ist in jeder Ansicht jetzt alles untereinander und man muss auch noch zur Seite scrollen um den ganzen Text zu lesen (dies soll aber nicht sein).
Im Folgenden ist der Teil meiner CSS Datei:

.leistung {

padding: 15px;

margin: 15px;

}

.leistung-container {

display: flex;

flex-direction: column;

}

/* Layout für Tablet (teilweise nebeneinander, teilweise untereinander) */

@media (min-width: 25em) and (max-width: 45em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(50% - 2em);

/* Zwei Boxen nebeneinander */

}

/* Layout für PC (nebeneinander) */

@media (min-width: 45em) and (max-width: 65em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(33.33% - 2em);

/* Drei Boxen nebeneinander */

}

@media (min-width: 65em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(33.33% - 2em);

/* Drei Boxen nebeneinander */

}

Ist da irgendwas falsch?
Könnt mir da jemand helfen?
Dankeschön

...zum Beitrag

Problem in CSS mit fixierter Position?

Hallo liebe Ratgeber!

Ich arbeite gerade an einem kleinen Projekt in HTML. Dazu habe ich unter anderem einen Header-Bereich, welcher beim herunterscrollen stets weiter angezeigt werden soll. Ich habe ihm also die CSS EIgenschaft position: fixed verpasst, welche sich eigentlich nicht wirklich von position: relative unterscheidet, außer dass das Element nun fixiert wird. Als ich jedoch nun fixed statt relative verwendet habe, hat der Header Bereich ein Abstand nach oben bekommen. Zu Testzwecken habe ich außerhalb des Header-Bereichs eine lose Überschrift angeordnet. Diese erschien allerdings nicht wie gewollt unter dem Header-Bereich, sondern verschwand in ihm, als würde es den Header-Bereich nicht geben.

Hier mein Problem

Der Header-Bereich bekommt trotz margin:0 einen Abstand nach oben hin, eine darunter gesetzte Überschrift h2 verschwindet darin.

Wer kann mir bei meinem Problem ein wenig weiterhelfen? Ich möchte, dass der Header oben bleibt und alle folgenden Elemente auch unter dem Header angezeigt werden.

Danke im Voraus!

LG Korbi

...zum Beitrag

HTML JavaScript Variable untereinander?

Ich habe eine Variable namens data wo mehrere Sachen drinnen sind. Diese will ich jetzt untereinander ausgeben siehe Quellcode:

document.getElementById('Ausgabe').innerHTML = data;

Sie werden aber nur nebeneinander ausgegeben ein Split hat auch nicht geholfen irgendwelche ideen? Ja es ist ein String nur leider hilft ein Split nicht da dieser sonst nur überschreibt

...zum Beitrag

Astra Pro Theme Menü ist bereits H1?

Hallo, meine Webseite ist bald fertig und jetzt gehts noch um die richtige Zuweisung der H1,H2, H3 Überschriften.
Ich verwende das Astra Pro Theme und möchte gerne wissen,
ist das hinterlegte Menü bereits H1? Oder muss ich dann jeweils auf jeder Webseite nochmal H1 definieren? Danke euch.

...zum Beitrag

HTML/CSS, Footer, Divs werden untereinander und nicht nebeneinander platziert?

Guten Abend. :)

Ich beschäftige mich momentan viel mit HTML und CSS und habe eine eigene kleine Website zum Spaß gemacht.

Aus Jux und Tollerei wollte ich jetzt einen Facebook-Like und einen -Teilen-Button mit einbauen, und das in einem Footer. Die Buttons habe ich beide jeweils in ein Div gepackt und diesen per "float: left;" gesagt, das sie sich nebeneinander von links anordnen sollen. Zumindest stand in sehr vielen anderen Foren in denen ich mich umgesehen habe so ziemlich überall genau das.

Bei mir funktioniert das aus unerfindlichen Gründen leider nicht, die Buttons werden untereinander angeordnet.

Zur Seite kommt ihr hier: http://nyancatmarathon.tk/

(Am Besten auf Lautlos stellen, nervige Musik im Hintergrund, außerdem hat sich der Footer von ganz unten in die Mitte der Seite verschoben, als ich die Seite am Localhost bearbeitet habe war das noch nicht so, komisch...)

Ich hoffe jemand von euch weiß woran es liegt und kann mir helfen. :)

Vielen Dank und LG, Bluedragon1

...zum Beitrag

Gibt es einen HTML-Code zum Zentrieren?

Hey.

Ich wollte gerade einen Beitrag in einem Forum (Burning Board 3 von WoltLab) schreiben und folgenden HTML-Code für die Überschrift verwenden:

<.h2>Weitere Informationen<./h2>

Ich habe die Überschrift dann mit folgendem HTML-Code zentriert (da sie sonst automatisch linksbündig erscheint, und dies will ich nicht):

<.h2 align="center">Weitere Informationen<./h2>

Funktioniert jedoch nicht. Immer noch linksbündig. Weshalb? Habe ich irgendetwas falsch gemacht?

LG.

Codes natürlich ohne Punkte.

...zum Beitrag

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zum Beitrag

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zum Beitrag

HTML Texte untereinander Schreiben!

Hallo ich will in HTML einen großen text untereinander schreiben allerdings immer wenn ich dies Versuch es soll eine art impressum werden . Allerdings immer wenn ich dies versuch sind die Texte nebeneinander geschrieben ! ??

Wie mach ich dies ?

...zum Beitrag

Überschrift in Bild HTML?

Hallo,

wie kriege ich es hin das meine Überschrift (h1) in einem Bild unten links ist?

Danke

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen