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

Quote

Weergeven resultaten 1 tot 12 van 12

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 08: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.

  7. #7
    Mega Senior joanne's avatar
    Geregistreerd
    31 maart 2001
    Locatie
    zuiden des lands
    CSS Style sheet bedoel je. Done en het werkt prima, zelfs al de lucht in.
    Volgende vraag, wil in 4de kolom een iframe plaatsen met een scroll. Handig voor mijn klein blogje en/of korte notities. Is dit ouwerwets, niet meer bij de tijd?
    Las ergens dat je via css dit voor elkaar kunt krijgen.
    Deed het eerst via marquee (wel ouwerwets), beter dit te vermijden.

    Ik zet deze link er even in, hebben anderen er ook wat aan.
    Laatst aangepast door joanne : 25 januari 2019 om 08:14
    Prejudices are what fools use for reason.

  8. #8
    Giga Senior PHP4U's avatar
    Geregistreerd
    3 augustus 2014
    Embed je dan ook echt een andere webpagina, of gaat het puur om het scroll-effect?

  9. #9
    Mega Senior joanne's avatar
    Geregistreerd
    31 maart 2001
    Locatie
    zuiden des lands
    Ben er nog niet echt uit..tekst met rechts een scrollbalkje, een wandelende tekst (marquee)hoeft voor me niet (meer). Nee geen website includen, gewoon teveel aan losse tekst in mijn pagina dmv van een scrollbalk in column 4, kan ik dan gewoon door de teksten heen bladeren Maar jaja mss ook voor anderen nuttig deze link.

    Denk dat ik het hier wel kan vinden wat ik wil.
    Prejudices are what fools use for reason.

  10. #10
    Mega Senior joanne's avatar
    Geregistreerd
    31 maart 2001
    Locatie
    zuiden des lands
    NIEUWE VRAAG

    Zou dit werken in een bestaande site, dus met de codes zoals hier vermeld? Voor de footer met 3 columns dus.


    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>


    /* Create three equal columns that floats next to each other */
    /* maak 3 gelijke columns bij footer die naast elkaar lijnen */

    * {
    box-sizing: border-box;
    }
    .footer {
    float: left;
    width: 33.33%;
    padding: 2px;
    height:125px; /* Should be removed. Only for demonstration */
    }

    /* Clear floats after the columns */
    .row:after {
    content: "";
    display: table;
    clear: both;
    }
    </style>
    </head>
    <body>

    <h2>Three Equal Columns</h2>

    <div class="row">
    <div class="footer" style="background-color:green;">
    <h2>Column 1</h2>
    <p>Binnen een dag, uur zelfs, wisselt het. Letland, een demografische </p>
    </div>
    <div class="footer" style="background-color:yellow;">
    <h2>Column 2</h2>
    <p>Binnen een dag, uur zelfs, wisselt het. Letland, een demografische </p>
    </div>
    <div class="footer" style="background-color:lightblue;">
    <h2>Column 3</h2>
    <p>Binnen een dag, uur zelfs, wisselt het. Letland, een demografische
    </div>

    </body>
    </html>
    Laatst aangepast door joanne : 19 februari 2019 om 10:57
    Prejudices are what fools use for reason.

  11. #11
    Giga Senior PHP4U's avatar
    Geregistreerd
    3 augustus 2014
    Wat houdt je tegen om het uit te testen?
    En is het niet een idee om eigen topic aan te maken voor je nieuwe probleem?

  12. #12
    Mega Senior joanne's avatar
    Geregistreerd
    31 maart 2001
    Locatie
    zuiden des lands
    Uittesten, klopt iig het werkt. Een afzonderlijk topic hiervan maken, ja en nee. Vind dit een klein akkefietje, vandaar.
    Zal er volgende keer rekening mee houden.
    Prejudices are what fools use for reason.

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