How do I align my 3 buttons horizontal side by side? I think it looks bad as it is now.
class= btn btn-danger
How do I write the css for that?
my code
<div class="row">
<div class="col-sm-4">
<h3>Stationær & bærbar reparationer</h3>
<p>Vi kan udskifte alle typer hardware de mest almindelige reparationer omfatter</p>
LÆS MERE
</div>
<div class="col-sm-4">
<h3>Fjernelse af virus</h3>
<p>Hvis din computer er inficeret med virus kan vi hjælpe dig med at rense ud i dit system. Vi kan herudover også hjælpe dig med at sikre dit system mod kommende virus angreb.</p>
LÆS MERE
</div>
<div class="col-sm-4">
<h3>Data recovery</h3>
<p>Hvis din harddisk er defekt skifter vi den billigt og hurtigt, vi kan genskabe dine data tilbage i de fleste tilfælde. eller hvis Windows er gået ned, kan vi også redde din data. </p>
LÆS MERE
</div>
</div>
</div>
Two options.
Add css to give h3 and p element fixed height (adjust numbers)
.col-sm-4 p {
height: 200px;
}
.col-sm-4 h3 {
height: 50px;
}
OR
Extract buttons to a new row.
<div class="row">
<div class="col-sm-4">
<h3>Stationær & bærbar reparationer</h3>
<p>Vi kan udskifte alle typer hardware de mest almindelige reparationer omfatter</p>
</div>
<div class="col-sm-4">
<h3>Fjernelse af virus</h3>
<p>Hvis din computer er inficeret med virus kan vi hjælpe dig med at rense ud i dit system. Vi kan herudover også hjælpe dig med at sikre dit system mod kommende virus angreb.</p>
</div>
<div class="col-sm-4">
<h3>Data recovery</h3>
<p>Hvis din harddisk er defekt skifter vi den billigt og hurtigt, vi kan genskabe dine data tilbage i de fleste tilfælde. eller hvis Windows er gået ned, kan vi også redde din data. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
LÆS MERE
</div>
<div class="col-sm-4">
LÆS MERE
</div>
<div class="col-sm-4">
LÆS MERE
</div>
</div>
</div>
Edit: Adding code
but i see that not the way to do it, if i should use that class again, i may have to add one more class to the parent element and retarget it as you said, just need to figure out how :) i am just a noob and pretty new at this.
but it looks good so far i think
My new PC service site
Related
I've encountered a pretty weird CSS error which stops CSS from properly being applied. Check out the screenshot I took from the Chrome inspection tool.
Weird CSS in inspector
The code is pretty straightforward:
<div class="addownsong">
<span class="hidesongadder"><i class="fa fa-times"></i></span>
<h4>Artiest</h4>
<input id="artist-name" type="text" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
<h4>Titel</h4>
<input id="track-name" type="text">
<div class="minutes">
<h4>Minuten</h4>
<input id="track-minutes" type="text" min="0" max="59">
</div>
<div class="timedivider">
<h4>:</h4>
</div>
<div class="seconds">
<h4>Seconden</h4>
<input id="track-seconds" type="text" min="0" max="59">
</div>
<p><strong>Wil je een scanbare Spotify code toevoegen aan je topplaatje? Gebruik onderstaande zoekbalk om het juiste nummer te vinden!</strong></p>
<input style="text-align: center;border-color:#df0d84" id="songsearch2" type="text" placeholder="Vind je favoriete nummer op basis van titel">
<div id="songsearch2-results"></div>
<div id="selected-spotify-code"></div>
<input hidden="" id="uploaded-image">
<div class="dropzone dropzonebox dz-clickable" id="my-awesome-dropzone"><div class="dz-message" data-dz-message=""><span>Sleep een foto hierheen of klik om te uploaden</span></div></div>
<div style="color:#ff0000;margin-top:10px;"><center><strong>Let op: voor het beste resultaat, voeg je een vierkante foto toe</strong></center></div>
<div style="background-color:#ddd;color:#545454;border-color:#ddd;" class="createButton placeholderButton">Voeg eerst alle gegevens toe</div>
<div style="display: none;" class="createButton addCreation">Voeg je creatie toe!</div>
</div>
I tried uncovering closing/opening errors for divs, but they're all properly showing. Any ideas?
I'm using materialize for my project, and I'm having a few problems with horizontal cards. The image I'm using has a height smaller than it's parent div so at the end of it, the background color is shown(problem image). I have tried to use max-width: 100% and max-height: 100% and nothing, also I tried to put the image as background-image in CSS instead of the img tag, but materialize hide the image if it doesn't detect the tag (problem with backgroung-image)
I know i should stretch an image, but its only a few px. And why i want to do this? bc it is ok if someone with a big screen sees it, but if i try to use a smaller screen, the text column on the right get taller, and the image stop covering the hole height of the row. This is what i want (image: how it should be)
Thanks for your time even if you didn't repy. Cheers from Chile.
Html code
<div class="col s12 m6 l4 offset-m3 options">
<div class="card">
<div class="topTitleCard"><h5 class="" >Opción 3 |</p></div>
<div class="card-image">
<img src="./content/araucaria_v2.jpg">
<div class="card-title">
<h4 class="white-text textShadow thicker-font">Viajando en el Bosque Milenario</h4>
</div>
<a rel="addtoCart" class="option3 btn-floating btn-large halfway-fab waves-effect waves-light mygreen" ><i class="material-icons">shopping_cart</i></a>
</div>
<div class="card-content">
<br>
<p>
Escoge el mirador que más te llene de paz, para que el día de mañana, puedán esparcir tus cenizas en el lugar que tu escogiste. Obten calma por siempre con el sonido del agua corriendo, o por el sonido de las copas de las Araucarias y Coihues moviendose por el viento.
Ver más...
</p>
</div>
<div>
<div class="card-tabs">
<h6 class="text-mygreen center-align">Ven y escoge tu vista para la eternidad:</h6>
<br>
<ul class="tabs tabs-fixed-width">
<li class="tab"><a class="whichTree active" value="1" href="#test3-1" style="color:#0F0F0F;">Mirador</a></li>
</ul>
</div>
<div class="card-content mygreen white-text myTabsCards">
<div id="test3-1">
<p>10 UF</p>
<a class="option3 waves-effect waves-light btn buyBtn" rel="addtoCart">Comprar</a>
</div>
<div class="bottomTabsPrices">
*precios validos hasta el 31/12/2019
</div>
</div>
</div>
</div>
</div>
CSS code (don't think is going to be useful, but here it's anyway):
.card-image{
margin-top:50px !important;
position: relative;
background-color: rgba(84,115,93,.5);
}
.card-image img{
max-width: 100%;
max-height:100%;
}
On your image put this css
width: 100%;
height: 100%;
object-fit:cover;
When using object-fit on image, you need to give it width and height properties. It won't work with max-width and max-height if width and height are not specified too.
It will always fill the parent of an image. It might cut it on sides but this depends of aspect ratio of image and parent.
This is my first post here and I'm French, I beg your pardon for the language ...
I created a system columns in css, combining the display rule: table-cell and percentages with .columns class.
I would like a .columns child element may be equivalent in width to two or more default items if necessary. So I created classes (.C2, .C3, .C4 ...) to be affixed to the relevant child elements (.C2 class for 2 off items, etc).
This solution works very well in a form (exactly in the form element) but I can not reproduce this behaviour within a single div. So I tried to get all the features of the form element css to affix them to the div... without result.
Here is an example :
#import url(http://scriptura.github.io/Styles/Public/Main.css);
<html>
<body itemscope="itemscope" itemtype="https://schema.org/WebPage" class="onepage-color">
<section class="section">
<div class="wrap grid12">
<h2 class="highlight">Test Columns</h2>
<div class="columns">
<div>
<h2 class="h5 highlight">Test n°1</h2>
<p><code>form .columns</code></p>
<form>
<div class="columns-smallspace">
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="columns-smallspace">
<div class="input c2">
<input type="text" value=".c2"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="columns-smallspace">
<div class="input c3">
<input type="text" value=".c3"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
</form>
<p class="message-success">Ici, on voit que la colonne comportant l'input .c2, prend bien la place de deux colonnes quand elle est placée dans un <code>form</code>. Idem pour .c3 qui prend la place de trois colonnes.</p>
</div>
<div>
<h2 class="h5 highlight">Test n°2</h2>
<p><code>div .columns</code></p>
<div style="display:table;" class="elleEstIci">
<div class="columns-smallspace">
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="columns-smallspace">
<div class="input c2">
<input type="text" value=".c2"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="columns-smallspace">
<div class="input c3">
<input type="text" value=".c3"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
</div>
<p class="message-error">La même classe .c2 placée dans le même contexte, à l'exception notable d'une <code>div</code> à la place du <code>form</code>, donne lieu à une anarchie totale sur la deuxième ligne (idem pour .c3)...</p>
</div>
</div>
<h2 class="h5 highlight">Quid ?</h2>
<p class="message">Comment configurer la div parente du deuxième test (div.elleEstIci) de manière à arriver au même résultat que le premier exemple ?<br/>J'ai l'impression d'avoir tout essayé (display:table, etc)...</p>
<p class="message-info">Vous trouverez la feuille de style complète à cette addresse (cf. lignes 437+) : Scriptura sur Github.</p>
</div>
</section>
</body>
</html>
If you have a solution, and I'm interested, in advance, thank you.
All right, I found: it was necessary to declare a width: 100% on [class ^ = "columns"]> *.
So the child elements, and not the parent element as I thought at first. Sounds simple ... but afterwards I have brainstormed.
Subject resolved.
I wrote some code for an advanced liquid slider. But as my header slider contains some major content like h-tags p-tags and some images. I asked myself "can I consider each slide as an article". Because I can't find the correct answer maybe somebody can help me. The question is, is my code correctly nested and the right use of Semantic Elements. The code is:
<header id="masthead" class="site-header" role="banner">
<div id="main-slider" class="liquid-slider">
<article id="slider-1" class="liquid-slide-wrapper" style="background: url(images/back-99.jpg) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
<section class="section-text-left">
<header>
<h1 class="title" style=" color:#f7740a; display:none;">Professionele, betaalbare website nodig?</h2>
<h2 style=" color:#fff; display:none;">Zelf uw website aanpassen?</h3>
</header>
<p style="display:none; color:#fff;">Onze unieke websites worden afgeleverd met een wordpress CMS systeem.<br>
Hiermee kan u zelf uw website aanpassen!<br> Vat de kudu bij de horens en contacteer ons voor meer info!
</p>
<p style="display:none;"><button type="button" class="btn btn-primary btn-lg">Mail Ons</button> <button type="button" class="btn btn-transparent btn-lg">0494 / 77 22 61</button></p>
</section>
<section class="section-img-right clearfix">
<img class="slider-img-right fadeInRight animated" style="display:none; width:100%; max-width:692px; height:auto;" src="images/imac.png" />
<img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/straf-webdesign.png" />
<img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/responsive-webdesign.png" />
</section>
</article>
<article id="slider-2" style="background: url(images/background-7.png) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
<section class="section-text-left">
<header>
<h1 class="title" style=" color:#f7740a; display:none;">JustOnWeb wordt Kudu Concepts!</h2>
<h2 style="display:none; color:#000;">Een nieuwe naam, met een professionelere aanpak!</h3>
<header>
<p style="display:none; color:#fff;">Een website bestaat uit meer dan een lay-out. <br>Met kudu Concepts gaan we verder daar waar anderen stoppen!<br>
We bedenken een volledige filosofie voor uw website en <br> combineren dit met onze kennis van Online Marketing!
</p>
</section>
</article>
</div>
</header>
According to W3School semantic here : http://www.w3schools.com/html/html5_semantic_elements.asp
< section > contain < article >
it is not recommanded to use < section > inside < article > and inside < header >
According W3C, a section is "a thematic grouping of content, typically with a heading."
< header > is on top of parent element, so on top of body (the header) but also on top of sections or articles or any other div
In your code :
< h1 > should be close with < / h1 > and not h2, same for < h2 >
The structure of my pages is:
Page1.aspx
Page2.aspx
Page3.aspx
With URL rewriting I have this struture:
Folder1/Page1
Folder1/Page2
Page3
If I put a modal inside Page3.aspx, the modal works perfectly.
If I instead put a modal inside Page1.aspx or Page2.aspx, the modal doesn't work.
Here is my code:
<img src="../images/RecuperoDati/Brochure1.jpg" class="img-responsive" data-toggle="modal" data-target="#Modal1"/>
....
<!-- Modal 1-->
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel1">rftyguhij</h4>
</div>
<div class="modal-body center">
<img src="../images/RecuperoDati/Brochure1.jpg"/>
</div>
<div class="modal-footer">
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
</div>
</div>
</div>
</div>
If I read the HTML with the browser, the id is Modal1. So what Is wrong?
It's difficult to say when you've only given some of the code, but my guess is you URL rewriting is changing the path you need to use for bootstrap.js.
E.g. in Page3 if your path to the JS is ./js/bootstrap.js then in Page1, which becomes Folder1/Page1, you would need ../js/bootstrap.js instead.