I think it is possible to unset this element to not block space, but i don't know which CSS code to do that. Below is my code:
.customLabel{
width: 300px;
text-align: right;
font-size: 0.9em;
font-weight: bold;
border: 1px solid black
}
.customLabel>div{
background: #f0ad4e;
margin-bottom: 5px;
padding: 1px 5px;
border-radius: 3px;
}
<div class="customLabel">
<div class=''>hello</div>
<div class=''>hi hi hi hi </div>
<div class=''>god</div>
</div>
All I want want is like this image
So if anyone can please help me. Thank you in advance.
Float the divs to the right and add clear:both. You'll need to use a clearfix so that the floats are contained...here I used overflow:hidden on the parent wrapper.
.customLabel {
width: 300px;
text-align: right;
font-size: 0.9em;
font-weight: bold;
border: 1px solid black;
overflow: hidden;
}
.customLabel>div {
background: #f0ad4e;
margin-bottom: 5px;
padding: 1px 5px;
border-radius: 3px;
float: right;
clear: both;
}
<div class="customLabel">
<div class=''>hello</div>
<div class=''>hi hi hi hi</div>
<div class=''>god</div>
</div>
You can set display:inline-block and add breaks <br> if you want to go next line:
.customLabel{
width: 300px;
text-align: right;
font-size: 0.9em;
font-weight: bold;
border: 1px solid black
}
.customLabel>div{
background: #f0ad4e;
margin-bottom: 5px;
padding: 1px 5px;
border-radius: 3px;
}
.notblock{display:inline-block}
<div class="customLabel">
<div class='notblock'>hello</div><br>
<div class='notblock'>hi hi hi hi </div><br>
<div class='notblock'>god</div><br>
</div>
Here's one way to do it. I am using the CSS Flexbox to accomplish this. It has real good browser support as of now so this shouldn't be a problem.
.customLabel{
width: 300px;
text-align: right;
font-size: 0.9em;
font-weight: bold;
border: 1px solid black;
display:flex;
flex-direction:column;
align-items: flex-end;
}
.customLabel>div{
background: #f0ad4e;
margin-bottom: 5px;
padding: 1px 5px;
border-radius: 3px;
}
<div class="customLabel">
<div class=''>hello</div>
<div class=''>hi hi hi hi </div>
<div class=''>god</div>
</div>
Read more about Flexbox here - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
In the following HTML/CSS snippet, I'm trying to align the output div below the input field in such a way that they have the same width whenever the window is resized.
Right now the elements get misaligned whenever the viewport dimensions are changed.
How do i refactor and improve my CSS to achieve the desired result?.
I am still very fairly new to web design and development in general and would appreciate it if i could get detailed answers and suggestions. Thanks.
CSS/HTML
html {
font-size: 62.5%;
}
body {
background-color: #c0c0c0;
font-size: 1.6rem;
}
.section {
position: relative;
margin-top: 2rem;
text-align: center;
}
header {
margin-bottom: -2rem;
}
.text-field {
display: inline-block;
background-color: #c0c0c2;
border-top: .4rem solid;
border-color: red;
border-radius: .3rem;
color: black;
width: 50%;
height: 4.2rem;
text-align: left;
text-decoration: none;
font-size: 1.5rem;
min-width: 17.5rem;
}
.btn {
display: inline-block;
background-color: blue;
border-color: black;
border-radius: 3px;
border-style: dotted;
color: white;
padding: 14px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
.output-div {
position: absolute;
display: block;
font-size: 1.4rem;
background-color: #fff;
border-top: .5rem solid;
border-right: .15rem solid;
border-bottom: .15rem solid;
border-left: .15rem solid;
border-color: clack;
border-radius: .3rem;
margin: .5rem auto auto 6.5rem;
min-width: 17.4rem;
padding: .1em;
width: 50%;
height: auto;
text-align: left;
overflow-wrap: break-word;
word-wrap: break-word;
}
<br>
<!-- ✓ Oguntoye -->
<section class="section">
<header>
<h1>Header</h1>
</header>
<div class="user-interaction-area">
<form id="form">
<input class="text-field" type="text" placeholder="Input">
<button class="btn" type="button">Run</button>
</form>
</div>
<!-- output block-->
<div class="output-div">
<kbd class="input-output">Oy</kbd>
<samp class="run-output">vey!</samp>
</div>
</section>
I put your example code inside a codepen. https://codepen.io/melvinhicklin/pen/qyRwXB?editors=1100
From what I could see, the text areas already do a good job of staying the same width.
To align them, I added the following to the .output-div CSS Class:
position:relative;
left:-71px;
display:inline-block;
I wanted to center both the buttons and the text vertically, but the text as seen in the photo
is lower than the rest. If I remove the buttons, the text goes to center as it should, but if I leave the buttons, the text goes back down (How i wish it was).
.song {
/*DivButtonTitle*/
margin-bottom: 3px;
color: #551A8B;
font-size: 35px;
font-family: 'flat';
height: 80px;
border-top: solid 1px #551A8B;
border-bottom: solid 1px #551A8B;
width: 100%;
line-height: 80px;
padding: 0px;
}
<div class="song">
<button class="start" id="1" name="Gentleman-GUE/01._T_Apposto.mp3" onclick="togglePlay(this.id, this.name)"></button>
<button class="restart" onclick="toggleRestart()"></button>
<a>T'Apposto</a>
</div>
flexbox to the rescue.
Just add:
display: flex;
align-items: center;
I.E:
.song {
/*DivButtonTitle*/
margin-bottom: 3px;
color: #551A8B;
font-size: 35px;
font-family: 'flat';
height: 80px;
border-top: solid 1px #551A8B;
border-bottom: solid 1px #551A8B;
width: 100%;
line-height: 80px;
padding: 0px;
display: flex;
align-items: center;
}
<div class="song">
<button class="start" id="1" name="Gentleman-GUE/01._T_Apposto.mp3" onclick="togglePlay(this.id, this.name)">start</button>
<button class="restart" onclick="toggleRestart()">restart</button>
<a>T'Apposto</a>
</div>
Try to take your text in <span id ='foo'> Your text here </span>
And then you can edit it as you want to in your CSS.
A nice guide that I can suggest for centering the items with CSS ;
https://css-tricks.com/centering-css-complete-guide/
Try this out for your CSS:
.song{/*DivButtonTitle*/
margin-bottom:3px;
color:#551A8B;
font-size:35px;
font-family:'flat';
height:80px;
border-top:solid 1px #551A8B;
border-bottom:solid 1px #551A8B;
width:100%;
line-height: 80px;
padding:0px;
}
and add the following to a class associated with your buttons:
.buttonClass{
vertical-align:middle;
}
One way that would work is to use flexbox:
.song {
display: flex;
align-items: center;
margin-bottom: 3px;
color: #551A8B;
font-size: 35px;
font-family: 'flat';
height: 80px;
border-top: solid 1px #551A8B;
border-bottom: solid 1px #551A8B;
width: 100%;
padding: 0px;
}
.song button {
margin-right: 10px
}
<div class="song">
<button class="start"></button>
<button class="restart"></button>
<a>T'Apposto</a>
</div>
I was wondering how I could round off the edges on this?
<div style="background-color: yellow; border: 2px solid red; margin: 4px; padding: 2px; font-weight: bold; text-align: center;">
<h2>This site is not yet finished!</h2>
</div>
Thanks, Jeremy.
Use border-radius Example:
border-radius:10px;
<div style="background-color: yellow; border: 2px solid red; margin: 4px; padding: 2px; font-weight: bold; text-align: center; border-radius:10px;">
<h2>This site is not yet finished!</h2>
</div>
I have this problem: http://jsfiddle.net/5bpwckot/
As you can see, if a div is larger than the other, the other gets down.
I'd like to keep the two divs in place, regardless of the top div..
I was wondering if I could do something like float:top;
Thanks :)
Here is the code:
HTML:
<div style="display:inline-block;">
<div id="halftitle" style="float:left;">Last posted threads</div>
<div id="halfbloc"> Thread
</br>by Username, 1 hour ago.</div>
</div>
<div style="display:inline-block">
<div id="halftitle" style="float:left;">Last users registered</div>
<div id="halfbloc">
<img style="float: left; height: 32px; width: 32px; margin-right:3px;" src="img/default.png">User3
</br>3 hours ago
<div class="sep"></div>
<img style="float: left; height: 32px; width: 32px; margin-right:3px;" src="img/default.png">User2
</br>3 hours ago
<div class="sep"></div>
<img style="float: left; height: 32px; width: 32px; margin-right:3px;" src="img/default.png">User1
</br>4 hours ago
</div>
CSS
#halftitle {
background-image:linear-gradient(to top, #0e75ba, #021c55);
padding: 2px 5px;
font-size: 13px;
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #000;
color: white;
margin-left: 15px;
margin-right: 15px;
width:241px;
position:relative;
}
#halfbloc {
background-color: #f7fafb;
padding: 5px;
font-size: 13px;
margin-right: 15px;
margin-left: 15px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
margin-bottom: 8px;
width:241px;
clear: both;
position:relative;
}
/*ignore this*/
.sep {
margin-top:2px;
margin-bottom:2px;
border-bottom: 1px dotted #000;
}
just include vertical-align:top; to get this fixed
HTML
<div style="display:inline-block; vertical-align: top;">
Fiddle Demo
As you can see on the example picture, there is some type of white space above the "news" header (padding? margin?) I have tried messing around with padding-top, margin-top but nothing I did would get rid of the white space. Thanks!
HTML:
<div id="news_wrapper">
<div id="newsheader">
<p>News</p>
</div>
<div class="news">
<p>"News Post 1"</p>
</div>
<div class="news">
<p>"News Post 2"</p>
</div>
<div class="news">
<p>"News Post 3"</p>
</div>
<div class="news">
<p>"News Post 4"</p>
</div>
</div>
CSS:
#news_wrapper {
border: 1px solid black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 650px;
height: auto;
margin: 6px;
}
#newsheader {
background-color: Black;
color: white;
width: auto;
margin: 0px;
height: 30px;
text-align: center;
font: 'Helvetica', sans-serif;
text-transform: bold;
}
.news {
display: block;
margin: auto;
text-align: center;
border: 1px solid black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin: 4px;
}
add this to your css
#newsheader p{
margin:0;
}
I believe the issue is with your margin: auto
I generally use margin: 0 auto for this effect.