Neue Antwort schreiben 
 
Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
HTML/CSS Problemchen
Retro92 Offline
Windows Profi

Beiträge: 3.668
Registriert seit: Feb 2013
Beitrag #11
RE: HTML/CSS Problemchen
Vielen Dank für deine Mühe :) Einiges verstehe ich auf Anhieb, bei
Code:
section {
margin-bottom: 2em;
}
verstehe ich es aber nicht. Denn Sections haben wir doch zwei, aber nur die untere (mit der id "News", welche die News enthält, wandert runter. Wie das?
09.08.2015 15:40
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
mrshadowtux
Unregistered

 
Beitrag #12
RE: HTML/CSS Problemchen
Weil der Margin ja bottom ist, sprich untendrunter. Mach nen margin-top draus, wenn du ihn lieber drüber haben willst.
09.08.2015 15:43
Diese Nachricht in einer Antwort zitieren
Retro92 Offline
Windows Profi

Beiträge: 3.668
Registriert seit: Feb 2013
Beitrag #13
RE: HTML/CSS Problemchen
Auch mit margin-top, wandert der untere section Teil runter, je größer em wird. Wieso wandert überhaupt der zweite und nicht auch der erste? Heißen doch beide section.
09.08.2015 15:50
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
mrshadowtux
Unregistered

 
Beitrag #14
RE: HTML/CSS Problemchen
Ja, das sollte sich definitiv auf beide auswirken. Mach mal in Chrome einen Rechtsklick und sag "Element untersuchen". Dann kannst du im neuen Bereich über die section-Einträge wandern und Chrome zeigt dir live, wie die Margins verlaufen.
09.08.2015 15:51
Diese Nachricht in einer Antwort zitieren
Retro92 Offline
Windows Profi

Beiträge: 3.668
Registriert seit: Feb 2013
Beitrag #15
RE: HTML/CSS Problemchen
Prima! Jetzt verstehe ich das viel besser :) Ich habe auch gleich verstanden, was los ist. Ich habe mir selbst das Leben schwer gemacht und die erste section, die ja die id "welcome" hat, bereits mit einer margin versehen. :rolleyes:
09.08.2015 16:00
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
mrshadowtux
Unregistered

 
Beitrag #16
RE: HTML/CSS Problemchen
Dieses Menü von Chrome ist eh super. Du kannst oben rechts einfahc mal live mit Werten rumspielen, bevor du sie in der CSS-Datei implementierst.
09.08.2015 16:02
Diese Nachricht in einer Antwort zitieren
Retro92 Offline
Windows Profi

Beiträge: 3.668
Registriert seit: Feb 2013
Beitrag #17
RE: HTML/CSS Problemchen
Habe noch ein paar Sachen ausprobiert, die soweit auch ganz gut funktioniert haben. Beim Thema Bilder und "float" komme ich jedoch nicht weiter.

Code:
<article>
          <header>
            <h3>Bilder einfügen</h3>
              <p>Veröffentlicht am <time datetime="2015-08-09">09.08.2015</time></p>
          </header>
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Urall375_gelaende.jpg" alt="Dingens" width="240" height="200" />
            <p>Eigentlich könnten hier auch ein paar Bilder auf die Startseite, allerdings weiß ich noch nicht, wie das mit dem Verdrängen funktioniert. Denn einfach so geht das auch nicht.
              In den 1950er-Jahren beschloss die Sowjetarmee, neue mobile Raketensysteme in die Armee einzuführen. Dieses Vorhaben erforderte die Entwicklung eines neuen mobilen Raketenstartfahrzeugs,
              das diesen Anforderungen gerecht werden konnte.</p>
            <!--<p>Noch was Inhalt</p>-->
        </article>
      </section>
    </main>
    <hr>
    <footer>
        <!--<p class="Ende">Letzte Änderung: 09/08/2015</p>-->
        <p class="Ende">Copyright 2015 Retros-Retroecke.de</p>
    </footer>

</body>

</html>

Ich habe da nun ein Bild gefügt (irgendeines) Das Bild ist nun prima an der rechten Seite und zoomt auch prima mit, wenn ich die Seite vergrößere. Aber was ist das in der normalen Ansicht? Gefühlt hängt es mittendrin und verdrängt alles Andere..

[Bild: 1.JPG]

Kann das Bild noch verschoben werden? Oder habe ich das einfach nur doof gemacht mit der nicht-anpassbaren <hr> darunter?

Was ich auch noch fragen wollte: Wie kann ich im css eigentlich eine ganz bestimmte HTML-Sache erreichen? Ich habe nun zwei <sections>, beide mit Headern etc. Jetzt möchte ich in der zweiten Section im ersten Paragraphen das zweite Bild formatieren. Kann ich dem Bild eine Klasse geben? Oder ist das per ">" erreichbar?

Danke :)
10.08.2015 00:21
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
mrshadowtux
Unregistered

 
Beitrag #18
RE: HTML/CSS Problemchen
Generell empfehle ich immer, Bilder in das Tag <figure> mit reinzupacken. Dann kann man bei Bedarf auch mit <figcaption> Untertitel machen und so.

Zitat:Jetzt möchte ich in der zweiten Section im ersten Paragraphen das zweite Bild formatieren. Kann ich dem Bild eine Klasse geben? Oder ist das per ">" erreichbar?
Dafür gibts die Pseudoklasse nth-of-type:
section:nth-of-type(2) > p:nt-of-type(1) > figure:nth-of-type(2)
Du kannst auch etwa mit odd und even statt ner Zahl gerade und ungerade Vorkommen ansprechen.

Für die Bildfrage brauche ich mal dein aktuelles CSS, damit ich sehe was genau drinsteht. Was ich jedoch sehe: Bitte kein width= und height= mehr verwenden, das ist inzwischen veraltet, da das designbezogene Sachen sind. Dafür gibts CSS. Spätestens wenn du später mal dynamische Größen in CSS machst, machst du dir mit so festen Werten sonst alles kaputt.
10.08.2015 06:57
Diese Nachricht in einer Antwort zitieren
Retro92 Offline
Windows Profi

Beiträge: 3.668
Registriert seit: Feb 2013
Beitrag #19
RE: HTML/CSS Problemchen
Danke dir! Mit figure setze ich mich nachher auseinander, bin gleich erstmal weg. Hier auf die schnelle das CSS:

Code:
body {
    background-image: url("light-tile.gif");
    line-height: 150%;
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 100px;
    margin-bottom: 100px;
    text-align: justify;
    font-size: 1em;
    font-family: serif;
}
body > header > h1 {
    text-align: center;
    font-size: 2.50em;
    font-family: fantasy;
    font-weight: bold;
}
nav {
    text-align: center;
}
nav a {
    font-family: monospace;
    font-weight: bold;
    text-decoration: none;
    color: #DC143C;
}
nav a:hover {
    color: #008000;
}
section {
    margin-top: 4em;
  }

.Ende {
    text-align: center;
    margin-top: 1em;
}
/*#Rechte {
    text-align: center;
}*/
section > h2 {
  font-family: fantasy;
}
img {
  float: right;
  margin-left: 15px;
}
Das img-Zeug habe ich erstmal ganz pauschal gemacht, daher auch meine Frage dem Erreichen von verschachtelten Elementen.
10.08.2015 07:45
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Alpha Offline
Oskar

Beiträge: 16.344
Registriert seit: Jan 2009
Beitrag #20
RE: HTML/CSS Problemchen
Ich hab den Sinn von <figure> nicht verstanden. Was genau wird dann besser, wenn ich da die Bilder reinwerfe?

Mark IV Style Motherfucker!
10.08.2015 07:46
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Neue Antwort schreiben 


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 2 Gast/Gäste