Ergebnis 1 bis 3 von 3

Thema: HTML/CSS Probleme (Kleinigkeiten)

  1. #1
    HTML Newbie
    Registriert seit
    07.03.2018
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard HTML/CSS Probleme (Kleinigkeiten)

    Hey, ich habe eine fast fertige Website gebaut. Jedoch gibt ein paar kleine Probleme:
    Die Bildbeschriftung soll links und der Mehr Button soll rechts sein und sich nicht gegenseitig beeinflussen.
    Über dem Copyright soll eine Linie gezogen werden (Abtrennnung Fußbereich).

    Hoffe mir kann da jemand helfen.

    HTML-Code:
    <!DOCTYPE html><html lang="zxx">
    <head>
    
        <meta charset="UTF-8">
        <title>Aufgabe 4</title>
        <link rel="stylesheet" type="text/css" href="standard.css">
        <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
    
    </head>
    
    
    <body>
    
    <div class="wrapper">
        <div class="header">
            <h1><a href="#top">Homepage</a></h1>
    
            <div class="logo">
                  <img src="logo.png" alt="Logo"/>
              </div>
    
            <div class="main-nav">
                <ul>
                    <li><a href="Startseite.html">Startseite</a></li>
                    <li><a class="current" href="Aufgaben.html">Aufgaben</a></li>
                </ul>
            </div>
    
        </div>
    
        <div id="content">
            <div class="side-nav">
                <aside>
                    <ul>
                        <li><a href="Aufgabe_2.html">Aufgabe 2</a></li>
                        <li><a href="Aufgabe_3.html">Aufgabe 3</a></li>
                        <li><a  href="Aufgabe_4.html" class="current">Aufgabe 4</a></li>
                        <li><a href="">Aufgabe 5</a></li>
                        <li><a href="">Aufgabe 6</a></li>
                    </ul>
                </aside>
            </div>
    
            <div class="content">
                <h2>Aufgabe 4</h2>
    
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
                    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
                    ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
                    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
              <div id="cover">
              <div class="bild-gross">
                <img src="flower.png" alt="Flower"/>
              </div>
                <div class="bild-text">
                    <h3>Lorem ipsum dolor</h3>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing
                        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
                        magna aliquyam Lorem ipsum dolor sit amet.</p>
                    <div class="mehr">
                        <p><a href="Aufgabe_2.html">Mehr>></a></p>
                    </div>
                </div>
                </div>
    
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                    sed diam voluptua.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
                    dolor sit amet.
                </p>
            </div>
        </div>
    
        <button class="button"><a href="#top">Zum Seitenanfang</a></button>
    
        <div class="footer">
           <p>Copyright YXYZ</p>
        </div>
    
    </div>
    
    </body>
    </html>
    Code:
    * {  box-sizing: border-box; }
    
    .wrapper {
      margin: auto;
    width: 960px; }
    
    .header {
      border-width: 2px;
    border-color: black;
    border-style: solid; }
      .header h1 {
        text-align: center;
    border-bottom: solid black 2px;
    font-family: 'Coiny', cursive;}
        .header h1 a{
          text-decoration: none;
    color: black;}
      .logo{
        float: left;
    position: relative;
    bottom: 80px;
    left:100px;}
    
    #content {
      float: left;
    width: 100%; }
    
    .main-nav ul {
      list-style: none;
    text-align: left; }
      .main-nav ul li {
        display: inline;
    font-family: 'Coiny', cursive;
    font-size: 15px;
    margin-left: 10px;
    border: solid 2px black; }
      .main-nav ul a {
        text-decoration: none;
    color: black; }
        .main-nav ul a:hover, .main-nav ul a.current {
          background-color: deepskyblue; }
    
    .side-nav {
      float: left;
    width: 25%;
    margin-top: 10px;
    padding: 20px;}
      .side-nav ul {
        list-style: none;
    display: inline;
    text-align: left; }
      .side-nav li {
        font-family: 'Coiny', cursive;
    font-size: 15px;
    margin-left: 10px;
    border: solid 2px black;}
      .side-nav a {
        text-decoration: none;
    color: black; }
        .side-nav a:hover, .side-nav a.current {
          background-color: deepskyblue; }
    
    .content-start {
      float: left;
    width: 100%;
    padding: 20px;
    border: 2px solid black; }
      .content-start p {
        font-family: 'Indie Flower', cursive;
    font-size: 15px;
    color: black; }
        .content-start h2{
          font-family: 'Coiny', cursive; }
    .content {
      float: left;
    width: 75%;
    padding: 20px;
    border: 2px solid black; }
        .content p {
          font-family: 'Indie Flower', cursive;
    font-size: 15px;
    color: black; }
          .content h2{
            font-family: 'Coiny', cursive;}
    
    .letzter_Absatz{
      clear: both;}
    
    .bild1{
      float: right;}
    .bild2{
      float: left;}
    
    .farbige_DIVs{
      width: 100%;
    height: auto;
    float: left;
    position: relative;}
    
    #gruen{
      width: 90px;
    height: 70px;
    background-color: green;
    position: relative;
    z-index: 3;
    left: 120px;
    top: 20px;
    border-radius: 10px;}
    #rot{
      width: 90px;
    height: 70px;
    background-color: red;
    position: absolute;
    z-index: -1;
    left: 180px;
    border-radius: 10px;}
    #schwarz{
      width: 150px;
    height: 100px;
    background-color: black;
    position: absolute;
    z-index: 3;
    left: 220px;
    top: 100px;
    border-radius: 10px;
    opacity: 0.5}
    #blau{
      width: 120px;
    height: 90px;
    background-color: blue;
    position: absolute;
    z-index: 10;
    left:320px;
    bottom: 250px;
    border-radius: 10px;
    background: linear-gradient(to bottom, blue, darkblue);
    box-shadow: 3px 3px 10px black;}
    #orange{
      width: 180px;
    height: 150px;
    background-color: orange;
    position: relative;
    z-index: -1;
    left: 300px;
    bottom: 50px;
    border-radius: 10px;}
    
    .button{
      width: 150px;
    height:20px;
    position: fixed;
    left: 300px;
    top: 10px;
    text-align: center;}
      .button a{
        text-decoration: none;
    color: black;}
    
    #cover{
      position: relative;}
      #cover:hover .bild-text{
        opacity: 1;}
    
    .bild-gross{
      text-align: center; }
      .bild-gross img{
        height: 300px;
    width: 600px;}
    .bild-text{
      width: 600px;
    height: 100px;
    position: relative;
    left: 38px;
    bottom:105px;
    background:rgba(255,255,255,0.5);
    opacity: 0;}
    
    .bild-text h3{
          color: white;}
        .bild-text p {
          color: white;}
    
    .mehr{
      height: 50px;
    width: 100px;
    background-color: white;
    border-radius: 10px;
    position: absolute;
    bottom:25px;
    right:10px;}
    .mehr p{
      text-align: center;
    font-weight:bold;}
    
    .mehr a{
      text-decoration: none;
    color: black;}
    
    .footer{
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    213
    Danke
    0
    Bekam 29 mal "Danke" in 29 Postings

    Standard AW: HTML/CSS Probleme (Kleinigkeiten)

    soll der mehr button auch im Bild sein oder unten drunter? Aber da muß man etwas mehr ändern wenn man es richtig machen will.Einige sachen sind noch nicht ganz richtig ,aber fast.

    Soll der Text im Bild sein oder unten drunter
    Geändert von basti1012 (09.03.2018 um 10:19 Uhr)

  3. #3
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    213
    Danke
    0
    Bekam 29 mal "Danke" in 29 Postings

    Standard AW: HTML/CSS Probleme (Kleinigkeiten)

    https://codepen.io/basti1012/pen/zWYbdE?editors=1100

    Ich habe mal etwas rum gespielt so wie ich mir es denke wie du es haben möchtest.Fals es so sein soll oder anders dann sag bescheid dann mache ich es richtig.Ambesten mit original bildern bzw grösse der Bilder

Ähnliche Themen

  1. Probleme mit Html
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 09.01.2012, 19:09
  2. Antworten: 10
    Letzter Beitrag: 14.03.2011, 17:00
  3. Kleinigkeiten werden vom Firefox nichtmal korrekt dagestellt
    Von reeperbahner11 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 06.06.2009, 12:38
  4. Ein paar CSS-Kleinigkeiten
    Von matthias im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 17.04.2007, 23:12
  5. Es scheitert immer an Kleinigkeiten (Seitenwechsler in PHP)
    Von Referend im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 14
    Letzter Beitrag: 08.01.2006, 14:13

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •