My current situation is like this: http://i.imgur.com/qq15FEK.png
I have a panel, where the heading and border are the same color. I've overwritten the panel-info default color to use my own.
My problem is the small white gap between the heading and the border. I've tried changing the padding and border styles, but to no avail.
How do I make the heading take up the whole space of the panel, so as to remove the gap that appears?
/* This is the CSS that overrides the default bootstrap panel. */
.panel-info>.panel-heading {
color: #000 !important;
background-color: #6fc45b !important;
}
.panel-info {
border-color: #6fc45b !important;
}
<div class="col-sm-12">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Lejeperiode</h3>
</div>
<div class="panel-body">
Højsæson er skolernes vinterferie, sommerferie samt efterårsferie. I disse uger trækkes der lod. I højsæsonen kan man ikke booke weekender, med mindre de er ledige. I lavsæsonen kan man leje hele ugen, weekender samt mandag til torsdag. Weekender samt
mandag til torsdag bekræftes først en måned inden, da de altid kan overgåes af udlejning af hele ugen.
</div>
</div>
</div>
Try
.panel-heading {
margin-right:-1px;
margin-left:-1px;
}
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>
Hey I am confused since I am trying to center a paragraph for instance it wont do anything i tried text-align, align center, inline block and so on.
HTML `
<div class="col-md-6 col-sm-12 picText1">
<p style="background-color:#77b97a;" class="picText">Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.</p>
</div>`
CSS
.picText{
color: black;
border-radius: 20px 20px 20px 20px;
width: 150%;
height: 75px;
padding-top: 2%;
position: relative;
text-align: center;
left: 26%;
}
I also tried using bootstrap command with no luck hope someone can clarify since it works sometimes with text align and so on, but i have put borders around it seems like it wont do anything
You won't need the positioning styles to get the paragraph centered. You can simply specify the width of the element, and then set its margins to 0 auto which will give it 0 margin for top and bottom, and will automatically use the correct left and right margins to make the element centered given its box model and the width of its parent container.
.container {
width: 100%;
}
.picText {
background-color: #77b97a;
border-radius: 20px 20px 20px 20px;
padding: 2%;
text-align: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<p class="picText">Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.</p>
</div>
Using bootstrap, I used a container and centered it using justify-content-center which is simpler than writing css rules in my opinion. You could add your image inside the container and they both will be centered.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container col-md-6 justify-content-center w-50">
<p class="bg-info rounded-lg p-2 mt-3">
Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.
</p>
</div>
so I'm working on a project where I'm supposed to create a website and also talk about internet history & the effect it has had on society. Anyways, my plan or idea was to make 3 individual sections to the webpage. "Home" being Home of the website, just showing image/background and "hello to my assignment", then "history" tab has some text about the history of internet etc, and then the effect on society being the third tab with a text on how it actually has affected society.
Anyways. if you take whatever background, do as I have here you can see I have three current tabs on the right side of the website. I don't know how to add text individually to each one and when you click the next, X text disappears and Y text arrives next to that ones name. How can I do this?
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
font-size: 14px;
font-weight: normal;
/* standard font "vikt" bold/italic etc eller nummer som 400*/
}
.background {
width: 100%;
height: 100%;
background-image: url(../css/qwx.jpg);
background-repeat: no-repeat;
/* spelar bara bakgrunden en gång och inte repeterad igen */
background-size: cover;
/* "cover" för att täcka hela "elementet" alltså bakgrunden */
position: relative;
/* position relativ gör så att den positioneras relativ till sin "originella" position. */
}
.rad {
width: 150px;
height: auto;
/* istället för "100% elr 80%" eller liknande så är den automatisk för att vara mer "flexibel" */
position: absolute;
/*används för att positionera "relativt" med sin närmaste positionerade "parent" */
left: 0%;
/* 0% för vill ha den i vänstra hörnet */
top: 30%;
/* vill ha i mitten ish o för mig såg det bra ut iaf (vet inte om detta ändras beroende på upplösning eller liknande, har ej provat */
}
.rad a {
text-decoration: none;
font-size: 20px;
font-family: "Tahoma", "Comic Sans MS";
/* två "fonts" ifall den första inte finns/laddas in */
font-weight: 600;
/* tjockleck */
height: 80px;
margin: 3px 0;
float: left;
display: inline-block;
background-color: black;
color: white;
line-height: 80px;
text-align: center;
/* center för att stoppa texten i mitten av rutan */
/*-- inlineblock används för att få bredden & höjden att respekteras, samt padding/margin */
transition: 400ms;
/* lite längre tid för att knapparna ska registreras som att dom är pekade på, blir en fin liten effekt */
}
a.active,
.rad a:hover {
background-color: white;
color: black;
width: 100%;
/* vill ha det så att när man häver över muspekarn så blir rad a 100% bredd, medans när rad a, b, c, är inaktiva och inte har muspekaren över är mindre */
}
.a {
width: 90%;
}
.b {
width: 80%;
}
.c {
width: 80%;
}
<div class="background">
<div class="rad">
<a class="a active" href="#">Startsida</a>
<a class="b" href="#">Historia</a>
<a class="c" href="#">Påverkan</a>
</div>
</div>
What follows utilizes Bootstrap and JQuery to create a very simple version of what you are describing, but I'm guessing probably not what you need.
It is however an excellent example of how far internet programming has come since its modest beginning.
Some html markup and some user provided content and here you have a simple "3 page" website
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-Startsida">Startsida</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-Historia">Historia</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-Påverkan">Påverkan</a>
</div>
</div>
<div class="col-6">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-Startsida">
<div class="float-left mt-1 ml-1 mr-3 mb-3">
<img src="https://picsum.photos/100" />
</div>
<span>Startsida</span>
</div>
<div class="tab-pane fade" id="v-pills-Historia">Historia</div>
<div class="tab-pane fade" id="v-pills-Påverkan">Påverkan</div>
</div>
</div>
</div>
</div>
I am trying to place this paragraph on the right side of my unordered list. The problem I am facing right now is that the text on the right is forced down below the li. I managed to get it on the right side but I can't manage to get it on the same "height".
The code if it helps.
img{
height: 200px;
width: 250px;
border: solid green 1px;
margin-top: 20px;
}
aside#Asid_vilkaviär{
width: 30%;
float: right;
margin-right: 150px;
}
<div class="container">
<div class="argumentbild_tjänst">
<img src="miljövänlig_städning_508502626.jpg">
<ul>
<li> Glöm dålig luft </li>
<li> Trevligare omgivning</li>
<li> Roligare vardag </li>
<li> Kompetenta och välutbildade medarbetare </li>
</ul>
<aside id="Asid_vilkaviär">
<h1> Vilka vi är </h1>
<p> Rena-Sopkärlet AB leds av företagets två grundare, Mille Tarp och Magnus Dahl. Företaget består att kunniga och skickliga medarbetare som genom åren har många lyckade
rengörningar av soptunnor bakom sig. Det är alltid kul att uppskattas för sitt arbete och vi har haft många tillfällen att njuta av nöjda kunder. </p>
</aside>
</div>
</div>
To keep the left part in a DIV and set its css as #leftside {float:left; width:60%}
img{
height: 200px;
width: 250px;
border: solid green 1px;
margin-top: 20px;
}
#leftside {float:left; width:60%}
aside#Asid_vilkaviär{
width: 40%;
float: right;
}
<div class="container">
<div class="argumentbild_tjänst">
<div id="leftside">
<img src="miljövänlig_städning_508502626.jpg">
<ul>
<li> Glöm dålig luft </li>
<li> Trevligare omgivning</li>
<li> Roligare vardag </li>
<li> Kompetenta och välutbildade medarbetare </li>
</ul>
</div>
<aside id="Asid_vilkaviär">
<h1> Vilka vi är </h1>
<p> Rena-Sopkärlet AB leds av företagets två grundare, Mille Tarp och Magnus Dahl. Företaget består att kunniga och skickliga medarbetare som genom åren har många lyckade
rengörningar av soptunnor bakom sig. Det är alltid kul att uppskattas för sitt arbete och vi har haft många tillfällen att njuta av nöjda kunder. </p>
</aside>
</div>
</div>
There are newer/modern/new standards methods of styling like css grid and flexbox that can sort this out with the various advantages like responsiveness(good for mobile device viewing) and height. I noticed "height" meant something else in the answer you appreciated. Here is another way of doing what you wanted using grid.
/* This here takes care of all the layout. The following child elements just fold into this. This will also give you equal height for the columns irregardless of the content either sides */
.argumentbild_tjänst {
display: grid;
grid-template-columns: 3fr 6fr;
}
img{
height: 200px;
width: 250px;
border: solid green 1px;
margin-top: 20px;
}
/* There is no need to use percentages to determine size. The fr units took care of that I am using the # to color the text and background. all the layout was already taken care off */
#leftside {
background: #de2;
color: #000;
padding: 10px;
}
aside#Asid_vilkaviär{
background: #a03;
color: #fff;
padding: 10px;
}
<!-- Your html remains instact but could also be reduced using the modern methods. Doesnt matter anyway -->
<div class="container">
<div class="argumentbild_tjänst">
<div id="leftside">
<img src="https://images.pexels.com/photos/442584/pexels-photo-442584.jpeg">
<ul>
<li> Glöm dålig luft </li>
<li> Trevligare omgivning</li>
<li> Roligare vardag </li>
<li> Kompetenta och välutbildade medarbetare </li>
</ul>
</div>
<aside id="Asid_vilkaviär">
<h1> Vilka vi är </h1>
<p> Rena-Sopkärlet AB leds av företagets två grundare, Mille Tarp och Magnus Dahl. Företaget består att kunniga och skickliga medarbetare som genom åren har många lyckade
rengörningar av soptunnor bakom sig. Det är alltid kul att uppskattas för sitt arbete och vi har haft många tillfällen att njuta av nöjda kunder. </p>
</aside>
</div>
</div>
I'm leaning bootstrap, and I made this a row with two columns to stack each other.
On the large devices i want it to be like that:
With the trophy a little to the top, as you can see.
But in mobile small and medium it's like that:
As you can see, the trophy isn't centered under the black div, it's possible to center it just when the columns stack each other?
html:
<div class='row'>
<div class='subir col-lg-6 col-lg-offset-1'>
<div>
<p class='titulo'>Liga Juizforana</p>
<hr size='1' align='left'>
<p class='subtit'>A Liga Juizforana tem o intuito de trazer campeonatos diversos para a cidade focando em League of Legends. A intenção do campeonato é a diversão de todos, tendo campeonatos sempre que possível para todos se interagirem, conhecerem e entrarem no cenário competitivo da cidade.</p>
</div>
</div>
<div class='grandelogo col-xs-3 col-md-3 col-lg-4'>
<img src='imagens/LigaJFLogo.png' border='0px' alt='LigaJFLogo' title='LigaJFLogo'>
</div>
</div>
you could try this CSS:
#media (max-width: 767px) {
.grandelogo {
text-align:center;
}
}
Change the actual width according to your needs
I can't see any centering element. To center it in a div, just put text-center class in a div.grandelogo classes, that is a supported way to do it in bootstrap.
If you want to have it 100% width in small devices, help yourself with col-sm or col-md settings:
<div class='row'>
<div class='subir col-sm-12 col-lg-6 col-lg-offset-1'>
<div>
<p class='titulo'>Liga Juizforana</p>
<hr size='1' align='left'>
<p class='subtit'>A Liga Juizforana tem o intuito de trazer campeonatos diversos para a cidade focando em League of Legends. A intenção do campeonato é a diversão de todos, tendo campeonatos sempre que possível para todos se interagirem, conhecerem e entrarem no cenário competitivo da cidade.</p>
</div>
</div>
<div class='grandelogo col-sm-12 col-lg-4 text-center'>
<img src='imagens/LigaJFLogo.png' border='0px' alt='LigaJFLogo' title='LigaJFLogo'>
</div>
</div>