2 html dingen naast elkaar plaatsen.

Status
Niet open voor verdere reacties.
Kun je ons de code van de pagina laten zien? Dat maakt het wat makkelijker... Plaats 't even tussen de bijbehorende tags, in de editor.
 
naast elkaar zetten is al gelukt nu alleen nog die zwart doorzichtige achtergrond erbij zien te krijgen.

Dit is de code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="wo, 10 aug 2016 21:54:03 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Livestream</title>

<style type="text/css">
<!--
body {
color:#000000;
background-color:#000000;
background-image:url('http://livestream.dja-style.nl/bgorange.jpg');
background-repeat:no-repeat;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }

div.content
{
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}

div.widget-content
{
position: relative;
width: 640px;
height: 475px;
float: left;
margin: 20px;
}
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body itemscope itemtype="http://schema.org/MusicEvent">
<div class="content">
<div class="widget-content">
<iframe width="640" height="360" src="https://www.youtube.com/embed/eJRpNQx0hrM?rel=0&amp;autoplay=1" frameborder="1" allowfullscreen></iframe>
</div>

<div class="widget-content">
<iframe src="http://dja-style.nl/blab/blab.php" width="640" height="700" frameborder="2" scrolling="no"></iframe>
</div>
</div>
</body>
 
Oke, ik heb je code bekeken en er mankeerde wel het een en ander aan. Dit is wat ik heb veranderd / verbeterd:

  1. De <html> tag werd niet afgesloten, nu wel.
  2. Bij mij stonden de twee frames niet naast elkaar, dat komt door de width en height. Je hebt de div een andere height gegeven dan het iframe zelf. Ik heb code zodanig aangepast dat dat nu wel zo is. (Beide div's en frames hebben nu ook een eigen class)
  3. Als ik het goed begrijp, wil je over de groenige achtergrond, een zwarte overlay, die de frames meer naar voren laat komen? Staat erin.
  4. Algemene verbeteringen (zoals bijv. de structuur), onnodige elementen verwijderd.

HTML bestand: klik
Wachtwoord: helpmij2016

Resultaat:
Naamloos.jpg

Succes met je livestreams ;) Vette muziek :thumb:
 
Laatst bewerkt:
Voor degene die hier later op stuiten en ook graag een oplossing willen.

Er bestaat tegenwoordig (en dit is nog redelijk jong maar werkt op ALLE browsers en is SUPER makkelijk) flexboxen!

HTML:
Code:
<div id="wrapper">
    <div id="links" class="box"> Links </div>
    <div id="rechts" class="box"> Rechts </div>
</div>
De css:
Code:
#wrapper {
    display: flex; /* Vroeger had je irritante floats nu is er TY LORD dit. */
    width: 500px; /* Breedte van de 2 boxen samen */
}

.box {
    flex: 1; /* Zorg dat de boxes 1 op 1 gescaled zijn, dus exact even groot */
    min-height: 250px; /* minimale hoogte, zodat je bij het testen iets ziet */
    background-color: #1a1a1a; /* Achtergrond kleur zodat je de boxen daadwerkelijk ziet */
}

ook kun je er zo 3 of 4 naast elkaar zetten door gewoon extra <div class="box"> Nog een box </div> toe te blijven voegen.
Als je een keer een grotere wilt, dan geef je degene die je groter wilt hebben een ID="iets" mee, en in je CSS "#iets {flex: nummerHoeVeelHijMoetSchalen}" als je daar bijv 2 neerzet, is hij 1x zo groot als de normale box die flex 1 heeft, zet je er 3 neer en een van 1 dan is eentje 75% groot en de andere 25%
 
Ik heb sinds kort een wordpress site.
Nu wou ik weer 2 dingen naar elkaar zetten maar ik stuit op een hoogte verschil.
Dit is opzich niet erg want de chat hoor langer te zijn, maar ik wil de video bovenaan hebben.
Zodat de chat er onderuit steekt ipv boven.

dit is zoals het er nu voor staat:
https://fsradio.eu/?page_id=754

en dit is zoals het eruit moet komen te zien:
NIEUW.jpg

als iemand mij hiermee zou kunnen helpen ben ik heel blij.
Gr Angelo
 
@kobar. Eindelijk gevonden waar ik al dagen naar aan het zoeken ben.
Wat nu als ik de boxen ongelijk van breedte wil hebben?
Links 20% (of in px) en recht 80%?
 
@kobar.
Eindelijk gevonden waar ik al dagen naar aan het zoeken ben.
Wat nu als ik de boxen ongelijk van breedte wil hebben?
Links 20% (of in px) en recht 80%?
 
boxen naast elkaar

@kobar

Hoi, ik ben al een eind gekomen met de flex techniek.
Wie kan mij nog helpen om het volgende klaar te maken?
er is nu een:
header met 3 boxen
slogan 1 rij (box)
nu nog
Navigatie en een content naast elkaar 2 boxen
en een
footer met 4 boxen

alvast bedank
hr.gr.
Baukjen


Bekijk bijlage flex boxen.rar
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan