Helpmij.nl
Helpmij.nl
Helpmij.nl
Steun Helpmij.nl! Klik hier     Computerprobleem? Klik hier!

Quote

Weergeven resultaten 1 tot 6 van 6

Onderwerp: Css<_>html

  1. #1
    Mega Senior joanne's avatar
    Geregistreerd
    31 maart 2001
    Locatie
    zuiden des lands
    Vraag is niet opgelost

    Css<_>html

    Een vraag, wil binnen de header een JPG plaatje een tekst plaatsen, is goed gelukt, maar wil het dus binnen een bestaand document
    hebben, waarin al CSS+HTML wordt gebruikt binnen header met de nodige toeters en bellen cq de codes?

    Kan ik gewoon de huidige CSS gewoon aanpassen + HTML Denk het he?
    Met rood gekleurd bedoel ik.

    Thx voor het meedenken.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .container {
      position: relative;
      text-align: center;
      color: red
      font-size: 50px
    }
    
    .bottom-left {
      position: absolute;
      bottom: 8px;
      left: 16px;
    }
    
    .top-left {
      position: absolute;
      top: 8px;
      left: 16px;
    }
    
    .top-right {
      position: absolute;
      top: 8px;
      right: 16px;
    }
    
    .bottom-right {
      position: absolute;
      bottom: 8px;
      right: 16px;
    }
    
    .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    </style>
    </head>
    <body>
    
    <h2>Tekst over image</h2>
    <p>How to place text over an image:</p>
    
    <div class="container">
      <img src="images/money.jpg" alt="money" style="width:90%;">
    
      <div class="centered">How to place text over an image</div>
    </div>
    
    </body>
    </html>
    Prejudices are what fools use for reason.

  2. #2
    Giga Senior PHP4U's avatar
    Geregistreerd
    3 augustus 2014
    Ik zou zeggen: Probeer het eens.

  3. #3
    Mega Senior joanne's avatar
    Geregistreerd
    31 maart 2001
    Locatie
    zuiden des lands
    Easier said than done. En voor je het weet ben je een uur of meer verder en nog niks opgeschoten.

    Die CSS codes dus gewoon binnen de header; iets ontgaat me. Maar wat?

    Dit is HTML5+CSS3?
    Laatst aangepast door joanne : 16 januari 2019 om 09:15
    Prejudices are what fools use for reason.

  4. #4
    Giga Senior PHP4U's avatar
    Geregistreerd
    3 augustus 2014
    CSS-styling hoort tussen een <style>-tag.

  5. #5
    Mega Senior joanne's avatar
    Geregistreerd
    31 maart 2001
    Locatie
    zuiden des lands
    Ben druit.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>PLAATJE</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    
    .container {
      position: relative; 
      text-align: center;
      }
      
    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 20;
    }
    
    /* Style the header */
    .header {
      background-color: #f1f1f1;
      padding: 20px;
      text-align: center;
    }
    
    /* Style the top navigation bar */
    .topnav {
      overflow: hidden;
      background-color: #333;
    }
    
    /* Style the topnav links */
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    /* Change color on hover */
    .topnav a:hover {
      background-color: #ffcccc;
      color: black;
    }
    
    /* Create 4 equal columns that floats next to each other */
    .column {
      float: left;
      width: 25%;
      padding: 15px;
    }
    
    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    /* Responsive layout - makes the 4 columns stack on top of each other instead of next to each other */
    @media screen and (max-width:600px) {
      .column {
        width: 100%;
      }
    }
    
    
    
      transform: translate(-50%, -50%);
    }
    
    .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      color: red;
      font-size: 50px;
      transform: translate(-50%, -50%);
    }
    
    .footer {
       
       left: 0;
       bottom: 0;
       width: 100%;
       background-color: #cc6699;
       color: white;
       text-align: ;
    }
    
    
    /* voor het plaatje header */
    .centered {
      position: absolute;
      top: 40%;
      left: 50%;
      background-color: yellow;
      color: #ffccff;
      font-size: 50px;
      transform: translate(-50%, -50%);
    }
    Prejudices are what fools use for reason.

  6. #6
    Giga Senior PHP4U's avatar
    Geregistreerd
    3 augustus 2014
    Top!
    Het zou mooier zijn als je het in een CSS-stijlblad zou plaatsen. Maar voor nu is het al een mooi begin.

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl en business

Partners
Sponsoren