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>
Related
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 have my timer that has date/hour/minute/seconds and the only one that doesn't align is the seconds. I tried many things such as different ways to align. So how can I align all the timer's items.
Can someone help me?
HTML
<div class="jumbotron timer">
<h2>Time until the tracker is activated</h2>
<div class="timertxtc">
<div class="timertxt" id="daysBox"></div>
<h4>Days</h4>
</div>
<h3 class="space">1</h3>
<div class="timertxtc">
<div class="timertxt" id="hoursBox"></div>
<h4>Hours</h4>
</div>
<h3 class="space">1</h3>
<div class="timertxtc">
<div class="timertxt" id="minsBox"></div>
<h4>Minutes</h4>
</div>
<h3 class="space">1</h3>
<div class="timertxtc">
<div class="timertxt" id="secsBox"></div>
<h4>Seconds</h4>
</div>
<script>cdtd();</script>
</div>
CSS
body {
margin: 0;
padding: 0;
background-image: repeating-linear-gradient(
90deg,
#FFFFFF,
#FFFFFF 18px,
#CA1D20 0px,
#CA1D20 28px
);
}
h1{
font-size: 64px;
text-align: center;
color: #3498db;
text-shadow: 3px 3px 0px #000;
}
h2{
font-size: 32px;
text-align: center;
color: #3498db;
text-shadow: 3px 3px 0px #000;
margin: auto;
}
.jumbotron.timer{
width: 48%;
height: 360px;
margin: auto;
background-color: #669900;
}
.timertxt{
color: #3498db;
text-shadow: 3px 3px 0px #000;
font-size: 64px;
padding-left: 12px;
padding-right: 12px;
border: 2px solid #2980b9 ;
border-radius: 5px;
background-color: #2980b9;
text-align: center;
}
.space{
font-size: 12px;
display: inline-block;
float: left;
visibility: hidden;
}
.timertxtc{
width: 25%;
height: 120px;
float: left;
display: inline-block;
margin: auto;
}
h4{
font-size: 32px;
color: #3498db;
text-shadow: 3px 3px 0px #000;
display: inline-block;
text-align: center;
}
The character in your <h3 class="space">1</h3> elements was causing the content of the container div to exceed 100% pushing 'seconds' on to the next line.
See fixes in the following fiddle:
https://jsfiddle.net/oLncm9d2/4/
Instead of using an element for 'spacing' padding-right / padding-left in combination with box-sizing: border-box; can achieve the spacing you want, without disrupting width calculations. (The solution demonstrates this and has removed the <h3 class="space">1</h3> elements.)
Note: I increased the container width to prevent excessive overlap for demonstration.
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/
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.