Css<_>html

Status
Niet open voor verdere reacties.

joanne

Terugkerende gebruiker
Lid geworden
31 mrt 2001
Berichten
1.300
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. :rolleyes:

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;
}

[COLOR="#FF0000"].centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}[/COLOR]
</style>
</head>
<body>

<h2>Tekst over image</h2>
<p>How to place text over an image:</p>

[COLOR="#FF0000"]<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>[/COLOR]

</body>
</html>
 
Ik zou zeggen: Probeer het eens. :)
 
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 bewerkt:
CSS-styling hoort tussen een <style>-tag.
 
Ben druit. :cool:

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%);
}
 
Top!
Het zou mooier zijn als je het in een CSS-stijlblad zou plaatsen. Maar voor nu is het al een mooi begin.
 
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. :D
 
Laatst bewerkt:
Embed je dan ook echt een andere webpagina, of gaat het puur om het scroll-effect?
 
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. :cool:
 
NIEUWE VRAAG :evil:

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 bewerkt:
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?
 
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.
:cool:
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan