https://gyazo.com/fbcfb86757bb55d32b3cd3ac1a589bf6
also im a beginner so i may not know stuff that is basic to you guys and i may missed some very basic stuff
.card {
box-shadow: 0 4px 8px 0 #212226;
transition: 0.3s;
width: 20%;
background-color: white;
margin: 7;
border: 1px solid #212226;
display:inline-block;
}
.card:hover {
box-shadow: 10px 10px 25px 0 #212226;
margin: 9;
}
.container {
padding-left: 4px;
display:inline-block;
}
<div class="card">
<div class="container">
<p><b>Number: +38526654165<br>Address: Kissakuja 123<b></p>
</div>
</div>
As I realized you want to enclose the box content with box itself. You can use CSS word-break for this.
p {
word-break:break-all
}
This will break all lines of your texts.
Related
My button margin isn't fitting into my div. Here's the relevant HTML and CSS.
.card {
justify-content: flex-start;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
margin: 8px;
}
.card {
margin-bottom: 16px;
padding: 0px 8px;
float: left;
}
.button {
border: none;
padding: 8px;
color: white;
background-color: black;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
.title {
color: grey;
}
.container {
padding: 0px 16px;
}
.card > img {
width: 100%;
}
<div class="ccard">
<div class="card">
<img src="https://pbs.twimg.com/profile_images/1115280588322295808/N1mHLfHy_400x400.png" alt="Jane">
<div class="container">
<h2>Jane Doe</h2>
<p class="title">CEO & Founder</p>
<p>Jane has had 9 years of experience in the tech industry and knows it like the back of her hand. She's very warm and welcoming towards new customers.</p>
<p>janedoe#cabbagedude.com</p>
<p>
<button class="button">Contact</button>
</p>
</div>
</div>
</div>
It has always worked for me before, but it doesn't work now. I also haven't changed anything, except by adding the class ccard around card.
Here's what it looks like for me.
You need to add box-sizing: border-box; to all relevant elements in order to include borders and paddings (I suppose you mean those, since you don't have any margin on the button) in the given width, otherwise they are added to the width, which causes overflow if the width is 100%.
So I have this code:
<h1 id="result" style="color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">
text
</h1>
How can I make a border that if I put a longer text in, my border will keep its position and change its size, to make my text still in the border? Thanks!
Just adding border: 1px solid black (for example) to what you have works perfectly fine. The h1 element will grow and shrink to fit it's content and the border will do so as well:
const result = document.getElementById('result');
const sentence = "HELLO! IT LOOKS LIKE THIS IS WORKING FINE...";
let index = 0;
setInterval(() => {
index = (index % sentence.length) + 1;
result.innerHTML = sentence.slice(0, index);
}, 250);
#result {
position:absolute;
top: 10%;
left: 10%;
padding: 0 .5rem;
font-family: Sans-Serif;
font-size: 2rem;
line-height: 3rem;
color: black;
border: 3px solid black;
border-radius: 3px;
min-height: 3rem;
}
<h1 id="result"></h1>
Anyway, I suspect you may be referring to the border changing your element's dimension:
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
}
<div id="bar1"></div>
<div id="bar2"></div>
That's because by default, your element's width and height are actually a sum of the specified width and height properties, plus padding plus border, as you can see from the example above.
If that's the case, you have two options to keep the dimensions just as specified with width and height:
Using box-sizing: border-box. That will make padding and border included in the element's total width and height.
Using box-shadow instead of border. You can use the inset property to draw the shadow to the inside of the element instead of to the outside.
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
box-sizing: border-box;
}
#bar3 {
width: 50%;
height: 1rem;
background: yellow;
margin: .25rem;
box-shadow: inset 0 0 0 3px black;
}
#bar4 {
width: 50%;
height: 1rem;
background: lime;
margin: .25rem;
box-shadow: 0 0 0 3px black;
}
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
Note the 4th bar, the one with the outer box-shadow looks bigger, but if you inspect it, its dimensions are exactly the same as those in the other 3 bars.
Can you just add border: solid 1px black; to the style attribute, like this?
<h1 id="result" style="border: solid 1px black; color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">text</h1>
Fiddle: https://jsfiddle.net/myingling/LL57yd8j/
Here's some reading on CSS borders: https://www.w3schools.com/css/css_border.asp
I'm trying center a Block grid inside of a div, but when I apply my CSS class the Block grid is not affected.
I have this visually (The outline is made with a Firefox extension):
Block grid alligment
and I wanna make look like this:
Block grid alligment
As you can see, I need align te Block grid content and the div content also, but I don't know how I can do it.
This is my current code:
<div class="sitios-amigos">
<div class="wrap row small-up-1 medium-up-4">
<div class="column column-block tarjeta-material">
<a src="http://www.conacyt.gob.mx/" target="_blank"><img alt="Página web Conacyt" src="img/conacyt.png"/></a>
</div>
<div class="column column-block tarjeta-material">
<a href="http://www.concytep.pue.gob.mx/" target="_blank">
<img alt="Página web de Concytep" src="img/concytep.png"></a>
</div>
<div class="column column-block tarjeta-material">
<a href="http://www.viep.buap.mx/" target="_blank">
<img alt="Página web VIEP BUAP" src="img/VIEP.png"></a>
</div>
</div>
</div>
CSS:
.sitios-amigos{
background: red;
max-width:11000px;
width: 100%;
margin: 0 auto;
}
.wrap{
width:90%;
max-width:11000px;
margin: 0 auto;
}
.tarjeta-material {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
margin: 15px 10px;
text-align:center;
}
.tarjeta-material:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.tarjeta-material {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
margin: 15px 10px;
text-align:center;
}
.tarjeta-material:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
If the div you want to align center is a child of another div. Here is what you can do.
.parent-div {
text-align: center;
.child-div {
display: inline-block;
}
You can also try without referencing the parent div.
.child-div {
margin-left: auto;
margin-right: auto;
}
center it in the absolute middle try:
.parent-div {
position: relative;
.child-div {
position: absolute;
top: 50%;
/* this will put the left edge at 50%. not the image */
left: 50%;
/* do a negative margin-left of half the width of your block so you have to find that.*/
margin-left: -halfthewidth;
margin-top: -halfthelength;
}
have you tried using bootstrap grid system ? they have so much sample and much easier to use ..
Any idea how to do this
in CSS?
What I want is them to be together as a whole. Like a div with a hover on it, everytime the user passes the mouse over it, both the line and the text's background will change color. I've tried different approaches but can't seem to get this as a whole. What I have right now is:
http://jsfiddle.net/RmNJL/
HTML
<div class="example">
<span>2014</span>
</div>
CSS
.example {
text-align: center;
border-bottom: 5px solid rgba(0,0,0,0.2);
}
.example span {
background: rgba(0,0,0,0.2);
margin: 10px 0 10px 0;
padding: 5px 20px 5px 20px;
}
.example:hover { border-bottom: 5px solid rgba(0,0,0,0.6); }
.example span:hover { background: rgba(0,0,0,0.6); }
I want them to be together as a single div/unit. So it only changes to the hover color if the user passes the mouse in front of the line or the text. Also, hovering the line would also hover the text background at the same time.
I know it may sound confusing but it's not easy to explain.
Thanks in advance.
I believe you're looking for something like this:
.example {
text-align: center;
border-bottom: 5px solid rgba(0,0,0,0.2);
}
.example span {
display: inline-block;
background: rgba(0,0,0,0.2);
margin: 10px 0 0 0;
padding: 5px 20px 5px 20px;
}
.example:hover { border-bottom: 5px solid rgba(0,0,0,0.6); }
.example:hover span { background: rgba(0,0,0,0.6); }
I am having some problems styling an AJAX callback message box. As you can see the styling works well in Internet Explorer but not in Chrome. I can not see the wood for the trees, so to speak. Here is my HTML:
<div id="CallbackMessage">
<p>
<label id="uiLblCallbackErrMsg" class="CallbackMsg" runat="server"> </label>
</p>
</div>
Here is my CSS:
.CallbackErrorMessage
{
margin: 0 25 4 20;
height: 10px;
font-family:Arial;
font-size:12px;
background-color: #FDC68A;
border: 1px solid #F7977A;
color: Red;
}
Using jQuery I add the class CallbackErrorMessage to the <div id="CallbackMessage"> when pushing the button!
I'm not able to see the error, any advice is appreciated.
Have a look at the two images:
Error in CSS
.CallbackErrorMessage
{
margin: 0 25 4 20;
height: 10px;
font-family:Arial;
font-size:12px;
background-color: #FDC68A;
border: 1px solid #F7977A;
color: Red;
}
You left the pixel values for the CSS.
margin: 0 25 4 20;
Replace the above with:
margin: 0 25px 4px 20px;
You need to clear the floats!
Give an overflow: hidden; to the .CallbackErrorMessage style.
Since you are referencing an ID and not a class, it should be:
#CallbackErrorMessage
Issue with
And moreover, the   should be replaced with . You missed the semicolon.
Final CSS
#CallbackErrorMessage
{
margin: 0 25px 4px 20px;
height: 10px;
font-family:Arial;
font-size:12px;
background-color: #FDC68A;
border: 1px solid #F7977A;
color: Red;
overflow: hidden;
}
Remove height from the #CallbackErrorMessage
height: 10px;
Remove it or change it to height: auto;.
Calling the class name is totally wrong. You are using id="CallbackMessage" in your html and writing style for .CallbackErrorMessage
Change the css like this,
#CallbackMessage
{
margin: 4px 25px 4px 20px;
height: auto; padding:10px;
font-family:Arial;
font-size:12px;
background-color: #FDC68A;
border: 1px solid #F7977A;
color: Red;
}
DEMO