How do I remove the remaining space on the right:
HTML code:
<div class="wrapper">
<h1>Title 1</h1>
<h1>Title 1</h1>
<h1>Title 1</h1>
</div>
CSS code:
.wrapper {
height: 450px;
margin: 50px;
border-radius: 30px;
overflow: hidden;
background-color: #F00;
border: 1px solid #000;
display:block;
}
.wrapper a {
width: 33.3%;
height: 100%;
background-color: #444;
margin:0 auto;
float: left;
color: #fff;
text-decoration: none;
display:inline-block;
}
.wrapper a:nth-child(2) {
background-color: #333;
}
.wrapper a h1 {
width: 100%;
height: 70px;
text-align: center;
position: relative;
bottom: 0;
text-shadow: 1px 1px #000;
}
http://jsfiddle.net/6bXQ9/
the 3 blocks must be 33,3 % but the rest(0,1%) wont be filled, and ive i use 33,4% there will get 1 block lost when the page is smaller
what should i use? Thanks! and sorry for my bad english
width: 33.33% does the magic trick.
Is this what you want? http://jsfiddle.net/6bXQ9/5/
width: 33.33%;
Making Width: 33.33% solves your problem.
Related
I'm trying to add a text area with a white background:
I wanted the white area to be lower and further to the right.
.grey-zone {
color: white;
width: 100%;
height: 70vh;
background-color: #2f3e4d;
}
.whoami {
color: black;
width: 25%;
background-color: #ffffff;
padding: .5%;
}
.whoami p {
padding-top: 5%;
font-size: 105%;
}
<div class="grey-zone">
<div class="whoami">
<h1>Qui suis-je?</h1>
</div>
</div>
Does someone know how to do that?
Thanks
If you want to play in white space, you can flex your main container and move the contents around as you wish.
.grey-zone {
color: white;
width: 100%;
height: 70vh;
background-color: #2f3e4d;
display: flex;
align-items: end;
justify-content: end;
}
If you add the last 3 css codes I added, you will fix the white box to the bottom right.
One way is using from padding for .grey-zone:
.grey-zone {
box-sizing: border-box; /*here*/
color: white;
width: 100%;
height: 100vh;
background-color: #2f3e4d;
padding: 20px 0 0 20px; /*here*/
}
.whoami {
color: black;
width: 25%;
background-color: #ffffff;
padding: .5%;
}
<div class="grey-zone">
<div class="whoami">
<h1>Qui suis-je?</h1>
</div>
</div>
You can add this to you class .whoami
.grey-zone {
color: white;
width: 100%;
height: 100vh;
background-color: #2f3e4d;
}
.whoami {
color: black;
width: 25%;
background-color: #ffffff;
padding: .5%;
position: absolute;
top: 50px;
left: 20px;
}
<div class="grey-zone">
<div class="whoami">
<h1>Qui suis-je?</h1>
</div>
</div>
This question already has answers here:
Text in Border CSS HTML
(10 answers)
Closed 2 years ago.
See the image above. I'd like to have the text on top of the border. How can I achieve this using html/css? Are there other alternatives
.wrapper {
width: 100%;
background: black;
border: 4px solid purple;
padding: 1rem;
color: #FFF;
}
.wrapper p {
text-align: center;
}
h1 {
text-align: center;
}
a {
display: table;
margin: 0 auto;
color: #FFF;
}
<div class="wrapper">
<h1>
Lorem ipsum dolor sit amet
</h1>
<p>
Lorem ipsum
</p>
Button
</div>
You can achieve this using the pseudo elements of the h1 tag. In short, you have a wrapper div that creates the border left, right and bottom and still then use the pseudo elements of h1 to make the top border.
.wrapper {
height: 100px;
margin: 0 auto;
width: 80%;
margin-top: 30px;
box-sizing: border-box;
border: 5px solid tomato;
border-top: none;
position: relative;
}
.wrapper h1 {
position: absolute;
top: -41px;
display: block;
text-align: center;
width: 100%;
overflow: hidden;
font-size: 2em;
}
h1:before,
h1:after {
content: "";
display: inline-block;
width: 50%;
margin-right:1em;
margin-left:-50%;
vertical-align: middle;
border-bottom: 5px solid tomato;
}
h1:after {
margin-right:-50%;
margin-left:1em;
}
/*Demo Only*/
body{
background:url("https://i.imgur.com/fL3tbdj_d.webp?maxwidth=728&fidelity=grand") no-repeat;
background-size:100% 100%;
<div class="wrapper">
<h1>
TITLE HERE
</h1>
</div>
<div class="wrapper">
<h1>
LONGER TITLE HERE
</h1>
</div>
You can try to change the position of your h1 to relative, and move It
.wrapper p {
position : relative;
bottom : 30%;
}
the bottom one means that It will move 30% to the top
Here is simple example may be it can give you an idea I found hard to edit your own codes so that's why I made this simple code
body {
background-color: lightgreen;
}
.cont {
height: 120px;
width: 400px;
border: 2px solid black;
position: relative;
margin: 40px
}
.cont:before {
content: "My Header title";
width: 180px;
/* border: 1px solid; */
position: absolute;
text-align: center;
top: -10px;
background-color: lightgreen;
left: 50%;
transform: translateX(-50%);
}
<div class="cont"></div>
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 5 years ago.
Hi I have the below HTML, Inside the Container I have Header, section and div.
With my current CSS below the div with class rightSideDiv does not show to right to the section element.
.container {
height: 500px;
widht: 500px;
background-color: red;
}
.headerTitle {
display: inline-block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
The section and div should be shown side by side. I dont want to modify the current HTML structure. I have tried specifying float:left or right but both doesn't seem to work.
Apply float: left; to both containers, use width: 50%; instead of px and display: block; header
.container {
height: 500px;
width: 500px;
background-color: red;
}
.headerTitle {
display: block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:50%;
height:200px;
background-color: yellow;
float: left;
}
.rightSideDiv {
width:50%;
height:200px;
background-color: pink;
float: left;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
Change the H2 to display: block;, and then add float:left; to both boxes.
When you want divs side-by-side through floating, float them the same direction.
rightSideDiv is 8 pixels taller than the other. That is because the 4px border is added on top of the height. Consider using box-sizing: border-box;, which makes the border get absorbed into the set height, instead of being added on top of it.
.container {
height: 500px;
width: 600px;
background-color: red;
}
.headerTitle {
display: block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
display: inline-block;
float: left;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
display: inline-block;
float: left;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
Try using flexbox and display:flex instead. With very few changes to css you can get something like this: https://jsfiddle.net/vnuz47va/2/
.container {
height: 500px;
width: 520px;
background-color: red;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.headerTitle {
display: inline-block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
width:100%;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
change your css with this :
.container {
height: 500px;
width: 500px;
background-color: red;
}
.headerTitle {
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
float : left;
width: 50%;
height:200px;
background-color: yellow;
}
.rightSideDiv {
float : right;
width:50%;
height:200px;
border: 4px solid green;
}
you can use float right and left to align your div, however your container has a width to 400 and your 2 div are 249+249 = 498 so there is a problem here..
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I have three divs. I want them to be in one line so I used inline-block. When I resize the window the third element (nav) stacks and then the 2nd element (searchBar). I want the 2nd element stacks first and then the 3rd one. For undoing, the 3rd element and then the 2nd element.
body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
min-eight: 48px;
position: fixed;
background: #ffffff;
padding-bottom: 5px;
border-bottom: 2px solid #fed700;
}
nav {
width: 489.7px;
height: 18px;
background: red;
display: inline-block;
}
#searchBar {
width: 330px;
height: 16px;
background: blue;
display: inline-block;
white-space: nowrap;
}
#logo {
width: 220px;
height: 32px;
background: green;
display: inline-block;
}
<header>
<div id=logo>logo
</div>
<div id=searchBar>searchBar
</div>
<nav>nav
</nav>
</header>
You could use an inline-block wrapper with a min-width, wrapping the nav and searchBar. That would give the result you wanted in with the code sample supplied, but might cause problems in the real world, depending on your requirements.
body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
min-height: 48px;
position: fixed;
background: #ffffff;
padding-bottom: 5px;
border-bottom: 2px solid #fed700;
}
.wrapper {
min-width: 50%;
display: inline-block;
}
nav {
width: 489.7px;
height: 18px;
background: red;
display: inline-block;
}
#searchBar {
width: 330px;
height: 16px;
background: blue;
display: inline-block;
white-space: nowrap;
}
#logo {
width: 220px;
height: 32px;
background: green;
display: inline-block;
}
<header>
<div id=logo>logo
</div>
<div class="wrapper">
<div id=searchBar>searchBar
</div>
<nav>nav
</nav>
</div>
</header>