im working on a project for myself and im stuck at this point:
<div id="opacity">
<div id="content">
<div id="text">
<h1 id="contentH1">Officiele game-rate website.</h1>
<br>
<p id="contentP1">Op deze website kunt u alle top 10 games zien, van veel verschillende genre's. Alle lijsten zijn bedoeld voor de pc. </p>
<p id="contentP2">Hier onder worden de verschillende genre's aangegeven:</p>
<ul id="genreIndeling">
<li>Actie</li>
<li>Avontuur</li>
<li>Strategie</li>
<li>RPG</li>
<li>Sport</li>
<li>Race</li>
</ul>
</div><!--END TEXT-->
</div><!--END OPACITY-->
<div id="messi">
<img id="messi" src="messi.png" alt="Messi" style="opacity: 1;">
</div><!--END MESSI-->
</div><!--END CONTENT-->
Sorry for the Dutch words, but the problem is that my pc, the end div of "content" sees as the end div of "opacity", so my picture got still opacity.
Can anybody help me please?
Thanks,
Joost Keizer
You are missing a closing "/div" for opacity
Swap the ids of your first two divs:
<div id="content">
<div id="opacity">
This will put your divs in order and keep the image the way you want.
Related
I'm working on a webpage at the moment that needs to be responsive for mobile devices. I have linked 2 images of how it looks right now, 1 for the normal design and 1 for how it looks on mobile right now. What I want to change, but don't know-how, is the colored padding. As you can see, there's a space between the icon above and the image under it, that white space I want to get rid of, either fill it with the same color or make the padding so that covers it up. Of course, I want the pc screen version to remain how it is on the image. Does anyone know a solution for this?
Mobile image: https://imgur.com/a/lG6w3mi
Web image: https://imgur.com/a/JqPV7Lo
This is the code of the block that I am talking about, sorry for not including that earlier.
<div class="col-md-4"
style=" width: 365px; background-color: #D7E1F8; padding-bottom: 141px; padding-left: 100px;">
<h1 class="icontextlb"> <br><br><br>
<i class="icon-email iconstylelb"></i>
<br>
2014
</h1>
</div>
<div class="col-md-4" style="background-color: #D7E1F8; padding-bottom: 65px;">
<br><br><br><img src="images/verhaal/kraan.png"/>
</div>
<div class="col-md-4" style="background-color: #D7E1F8; padding-bottom: 248.8px; padding-top: 20px;">
<h1><br>
Koppeling met web en de fabriek
</h1>
<p>
In 2014 was de koppeling met de website en de
fabriek klaar. Dit betekend dat de orders
automatisch verstuurd worden naar de fabriek. De
orders worden hierdoor sneller doorgevoerd en de
klant heeft eerder zijn glas op maat.
</p>
</div>
As you can see, I have 3 different paddings right here, for the image, icon, and text. It would be easier, I think, if it was just 1 bit of padding or a background color, instead of 3 separate parts that need adjusting.
Padding actually is not the issue here. The issue with the white space is because you are using a fixed width on your first col-md-4. Bootstrap is already responsive in it self, so setting fixed widths will not help it out at all. The col-md-4 already has a width associated width it md-4. I would suggest removing the fixed width and letting it revert back to its default of width: 100%; so it can use all of its column width.
Side Note: While the br element is great, Bootstrap columns are designed to break each div into sections, so the extra br's and padding's are a bit unnecessary, especially when using the Bootstrap framework. Lastly, I added a container and a row for good measures, it appears based on your web image you were already using a row.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<div class="container">
<div class="row">
<div class="col-md-4"
style="background-color: #D7E1F8; padding-bottom: 141px; padding-left: 100px;">
<h1 class="icontextlb"> <br><br><br>
<i class="icon-email iconstylelb"></i>
<br>
2014
</h1>
</div>
<div class="col-md-4" style="background-color: #D7E1F8; padding-bottom: 65px;">
<br><br><br><img src="https://dummyimage.com/400x400/000/fff"/>
</div>
<div class="col-md-4" style="background-color: #D7E1F8; padding-bottom: 248.8px; padding-top: 20px;">
<h1><br>
Koppeling met web en de fabriek
</h1>
<p>
In 2014 was de koppeling met de website en de
fabriek klaar. Dit betekend dat de orders
automatisch verstuurd worden naar de fabriek. De
orders worden hierdoor sneller doorgevoerd en de
klant heeft eerder zijn glas op maat.
</p>
</div>
</div>
</div>
I try to change cards face up with a radio button a bit like on this link:
https://codyhouse.co/demo/pricing-tables/index.html
For the moment I am getting to something when the responsive is below 62 rem (my mobile break point) but the result is not convincing above when the card pair is no longer in column but in row: / the pivot point remains central and suddenly the rotation will not be the same ... In fact, I would like the pivot points to always be on the cards that they pass in column or in row
So here is the code (mobile first)
Another problem with this code is that with absolute positions, it breaks my code a bit and suddenly from the "flap" div the elements are no longer in the "flip" section, which generates faults in my base code, especially for my footer ... So I would like to know how I can do to keep the "absolute" positions which make the elements turn, while keeping a well-constructed page with my card part and under my footer
Thank you in advance :)
HTML
<form>
<div class="radio-group">
<input type="radio" id="option-one" name="selector" checked><label for="option-one">Mensuel</label><input type="radio" id="option-two" name="selector"><label for="option-two">Annuel</label>
</div>
</form>
<section class='flip abo'>
<div id='flap' class='flap'>
<div class="recto">
<div class="card">
<h4 class='title-free'>Freelance</h4>
<div class='prix'>
<p>€</p>
<p class='free'><span>5</span>/mois</p>
</div>
<p class='bg-card'>1 utilisateur</p>
<p>Invités illimités</p>
<p class='bg-card'>Projets illimités</p>
<p>Un tableau Kanban/projet</p>
<p class='bg-card'>Tâches illimitées</p>
<p>Paiement des factures en ligne</p>
<p class='bg-card'>Support 5j/7</p>
</div>
<div class="card">
<h4 class='title-team'>Team</h4>
<div class='prix'>
<p>€</p>
<p class='team'>à partir de <span>9</span>/mois</p>
</div>
<p class='bg-card'>2 à 150 utilisateurs</p>
<p>Invités illimités</p>
<p class='bg-card'>Projets illimités</p>
<p>Un tableau Kanban/projet</p>
<p class='bg-card'>Tâches illimitées</p>
<p>Paiement des factures en ligne</p>
<p class='bg-card'>Support 5j/7</p>
</div>
</div>
<div class="verso">
<div class="card">
<h4 class='title-free'>Freelance</h4>
<div class='prix'>
<p>€</p>
<p class='free'><span>55</span>/ans</p>
</div>
<p class='bg-card'>1 utilisateur</p>
<p>Invités illimités</p>
<p class='bg-card'>Projets illimités</p>
<p>Un tableau Kanban/projet</p>
<p class='bg-card'>Tâches illimitées</p>
<p>Paiement des factures en ligne</p>
<p class='bg-card'>Support 5j/7</p>
</div>
<div class="card">
<h4 class='title-team'>Team</h4>
<div class='prix'>
<p>€</p>
<p class='team'>à partir de <span>99</span>/ans</p>
</div>
<p class='bg-card'>2 à 150 utilisateurs</p>
<p>Invités illimités</p>
<p class='bg-card'>Projets illimités</p>
<p>Un tableau Kanban/projet</p>
<p class='bg-card'>Tâches illimitées</p>
<p>Paiement des factures en ligne</p>
<p class='bg-card'>Support 5j/7</p>
</div>
</div>
</div>
</section>
I have tried a lot, but with no success. I have a column content (longtext) stored in a database.So, I wanna find all occurrences of https://curious-api.example.pro and replace it with http://localhost. Thanks in advance. Here is the content:
<section id="jumbotron" style="background-image: url(https://curious-api.example.pro/fixture-images/images/label_appointment_scheduling.jpg);">
</section>
<section id="solutions-article">
<div id="" class="content-aside-image img-left">
<div class="row no-gutters">
<div class="col col-12 col-md-6 image">
<figure><img src="https://curious-api.example.pro/fixture-images/images/as_what_we_do.jpg" width="100%" alt="car" /></figure>
</div>
<div class="col col-12 col-md-6 content">
<p>Curious Inc helpt u en uw bedrijf om uw planning te optimaliseren. Wij bieden uw medewerkers en uw klanten de mogelijkheid om uw agenda’s in te zien en desgewenst zelf te plannen. Wij koppelen de planning aan uw dienstverlening. Communicatie met uw klanten over de agenda en uw dienstverlening verloopt eenvoudiger, u integreert moeiteloos uw planning aan uw boekhouding en met slimme rapportages optimaliseert u uw processen. </p>
</div</div>
</div>
</section>
<section id="solution-showcases">
<div class="container-fluid">
<div class="row">
<div class="card basic transparent disable-hover">
<div class="card-inner">
<div class="card-image"><img src="https://curious-api.example.pro/fixture-images/images/CUR 003 Iconen labels_Agenda Planning.svg" alt="1" /></div>
<div class="card-body">
<h4 class="card-title">Slim plannen in de agenda</h4>
<p class="card-text">Ga slimmer om met vrije momenten. Krijg inzage in de agenda op mobiele telefoon, tablet en PC, plan sneller door automatische controle op beschikbaarheid van mens en middelen.</p>
</div>
</div>
</div>
<div class="card basic transparent disable-hover">
<div class="card-inner">
<div class="card-image"><img src="https://curious-api.example.pro/fixture-images/images/CUR 003 Iconen labels_Communicatie.svg" alt="2" /></div>
<div class="card-body">
<h4 class="card-title">Klantbeheer en communicatie</h4>
<p class="card-text">Verbeter uw service en communiceer proactief over de planning en uw dienstverlening met uw klanten. Onze producten werken met app, social media, sms, e-mail en webportaal.</p>
</div>
</div>
</div>
<div class="card basic transparent disable-hover">
<div class="card-inner">
<div class="card-image"><img src="https://curious-api.example.pro/fixture-images/images/CUR 003 Iconen labels_Boekhouding.svg" alt="3" /></div>
<div class="card-body">
<h4 class="card-title">Administratie en optimalisatie</h4>
<p class="card-text">Factureer automatisch op basis van geleverde diensten, koppel met uw boekhoudpakket en verkrijg rapportages die u helpen om nog slimmer te werken.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-customer-stories">
<div class="container-fluid">
<figure class="customer-image"><img src="https://curious-api.example.pro/fixture-images/images/sander_borsten.png" alt="" /></figure>
<figure class="customer-logo"><img src="https://curious-api.example.pro/fixture-images/images/logo_anwb.jpg" height="65" alt="" /></figure>
</div>
</article>
</section>
</section>
How about MYSQL replace() ?
UPDATE your_tbl_name SET content = REPLACE(content,'https://curious-api.example.pro','http://localhost')
You can also speed up things with a (optional) WHERE clause e.g
UPDATE your_tbl_name SET content = REPLACE(content,'https://curious-api.example.pro','http://localhost') WHERE content LIKE '%https://curious-api.example.pro%'
If you want regex replace on mysql 5.7, you can try this: https://gist.github.com/crx4/a9fc379d4e833fc03918
Use replace()
UPDATE table_name SET content = REPLACE(content, 'https://curious-api.example.pro', 'http://localhost')
I have been trying to make two panels(boxes) the same size, no matter how long is the text inside them. I have realised that on my computer the two boxes are aligned, but on my laptop they aren't.
Here's how the page looks like on my laptop:
The code :
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Bine aţi venit la ATLmath!
</h1>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<h4><i class="glyphicon glyphicon-book"></i> Probleme rezolvate</h4>
</div>
<div class="panel-body">
<p>Puteţi găsi modele de probleme rezolvate, împreuna cu explicaţii si desene pentru a asigura fixarea cunoştinţelor. Problemele rezolvate sunt grupate in două categorii:</p>
<ul>
<li>Probleme de geometrie</li>
<li>Probleme de algebră</li>
</ul>
Probleme
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<h4><i class="glyphicon glyphicon-ok"></i> Probleme de testare a cunoştinţelor</h4>
</div>
<div class="panel-body">
<p>Testele de evaluare vor testa capacitatea elevilor de a rezolva probleme similare cu cele din categoria "Probleme rezolvate". Şi aici, problemele vor fi grupate in două categorii:</p>
<ul>
<li>Probleme de geometrie</li>
<li>Probleme de algebră</li>
</ul>
Teste
</div>
</div>
</div>
</div>
I was wondering how I can make them the same height. I've searched this on google and I couldn't do anything good.
EDIT: I would like it to look like this on every device
You can achieve this by using min-width: ; and min-height: ; you can specify a minimal amount of pixels needed for the box using this, this will also prevent your website from deforming when using a different laptop/pc (screen sizes differ on each) and if you don't want it to get bigger either, you can also replace the min with max as statements too
You fix your problem using class "row-eq-height" it's a bootstrap default css for using maintain equal height of multiple columns into a row. You must check the html structure on my demo becoz i changed the structure little bit.
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Bine aţi venit la ATLmath!
</h1>
</div>
</div> .........cont..
http://codepen.io/inewton/pen/rrRwAw
I have a question, I'm working on a site and I want this in my website:
Showing at my page at the moment:
De diensten die wij verlenen op het gebied van beveiligde opbergsystemen zijn:
• Openen
• Reparatie
• 24 op 24 en 7 op 7!
• Service
• Transport
I want to have the • and the text next to each other. Now they are below each other
the code :
<p class="second">De diensten die wij verlenen op het gebied van beveiligde
opbergsystemen zijn:</p>
<p class="second">•</p><p class="first"> Openen</p>
<br>
<p class="second">•</p><p class="first"> Reparatie</p>
<br>
<p class="second">•</p><p class="first"> 24 op 24 en 7 op 7!</p>
<br>
<p class="second">•</p><p class="first"> Service</p>
<br>
<p class="second">•</p><p class="first"> Transport</p>
The text is dutch so don't mind that
Use <ul> tag
<ul>
<li> Openen</li>
<li> Reparatie</li>
<li> 24 op 24 en 7 op 7!</li>
<li> Service</li>
<li> Transport</li>
</ul>
Have you tryed this?
<p class="first"><span class="second">•</span>Openen</p>
<p class="first"><span class="second">•</span>Reparatie</p>
Every time you use "[p]" that creates a new paragraph.
"[br]" makes a new break in the line and moves the next set of text to the next line.
So here
<p class="second">•</p><p class="first"> Openen</p>
you are creating a new paragraph and then • follow by a new paragraph.
That is why your • 's are above eachother.
use this
<div id="container">
<p class="second">De diensten die wij verlenen op het gebied van beveiligde
opbergsystemen zijn:</p>
<ul>
<li>
<p> Openen</p>
</li>
<li>
<p> Reparatie</p>
</li>
<li>
<p> 24 op 24 en 7 op 7!</p>
</li>
<li>
<p> Service</p>
</li>
<li>
<p> transport</p>
</li>
</ul>
</div>
and your css is:
#container li
{
float left;
}
will automatically add your bullet to text.