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
Related
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
Any idea why there's a thin grey line above my green and how to get rid of it?
Thanks
https://jsfiddle.net/Lc7gym88/
hr {
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
It's because <hr/> has border (at least in FireFox since <hr/> has browser dependent style).
Remove border first.
hr {
border: none;
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
body {
background-color: black;
}
<br/>
<hr/>
Replace this:
border-bottom: 4px solid #469551;
by this:
border: 4px solid #469551;
Here is the JSFiddle demo
Removed default <hr> border and uses height and background
hr {
background: #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 4px;
border:none;
}
Example : https://jsfiddle.net/Lc7gym88/1/
by default tag <hr> taking border so you need first border zero. then add height check my demo
When I hover over an area on my testing website, I made it so a border is added. But because that happens, other elements move. I've looked up other posts, and they recommended adding padding, but that doesn't seem to work because it goes over other stuff.
This is where I add the border:
#logo:hover {
border: 2px solid cyan;
}
This is what it was added to:
#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
}
Does anyone know how to help me? Also about the way I asked my question.
#logo {
background-color: black;
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
}
#logo:hover {
border: 2px solid cyan;
}
<div id=logo></div>
Greetings,
TheWombatGuru
You also can use box shadow:
#logo{
box-shadow: inset 0 0 0 1px cyan;
}
#logo:hover {
box-shadow: inset 0 0 0 2px cyan;
}
You may add:
* { box-sizing: border-box;}
to your css sheet or maybe just to your #logo id.
you may find more info about this (for me at least amazing propertie ) here
(and just in case... the code marked applied the property to every html element in your web, which is exactly what I have been doing in my last many projects with absolutely no regret)
You should try adding this to your #logo :
border: 2px solid transparent;
which would make :
#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
border : 2px solid transparent;
}
Or using box-sizing: border-box
Hopes it helps !
Cheers !
box-sizing: border-box doesn't really make the 'circle' render correctly with the border in this case - although it is an amazing property. If it were me, I'd change your css to the following:
#logo:hover {
border-left: 3px solid cyan;
border-right: 3px solid cyan;
padding: 0;
margin: 0 6px 0 6px;
}
and adjust your #logo class margins to
{margin: 0 9px 0 9px;}
a little 'hackier', but I prefer the behaviour
You should add box-sizing: border-box to the pertinent element in your CSS. This will put the padding inside the width of the container.
Here is a codepen to demonstrate: http://codepen.io/himmel/pen/LVPPvg
Alternatively to box-sizing: border-box; you could also use the calc function to subtract a value.
#logo:hover {
width: calc(200px - 4px);
height: calc(200px - 4px);
border: 2px solid cyan;
}
This method might be helpful when you are dealing with percentages, anyway it's a cool trick i situations like this.
Try adding border:1px solid transparent; to non hover element.
Try using position: absolute; because elements with position absolute have no effect on other elements. Make sure that the parent element has a position relative. For example
`
#parent-element {
position:relative;
}
#logo {
position:absolute;
}`
I am developing a website.
The site is in a very early state, and my problem is the header on the top of the page. I would like to have the Mainline "PersIntra" stand beside the little box with the "log out button" and not over it. I have tried to make this work with my css. I have tried nesting divs.
The header is getting too wide vertical. I want to make the headline text size bigger without the header itself needing to grow wider because of the text is not beside the logout box but over it.
Here is some links to tell you what I mean. (It is complicated to describe in text.)
Screenshot of header
The website is in Danish, but that shouldn't stop you from seeing my problem (screenshot..).
Here is the html:
<div id="header">
<h2> PersIntra </h2>
<div id="border">
Velkommen <?php echo $_SESSION['enummer']; ?> <br>
Du har 1 ny besked <br>
Log Ud <br>
</div>
</div>
</div>
Here is the css:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
#border {
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}
Try edit your css.
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
#header h2 {
margin-top:50px;
float:right;
margin-right:300px;
}
#border {
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}
There are lots of ways to do that kind of thing. One is to float the header to the left and display the header and login box inline, like so:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
h2 {
float: left;
display: inline;
width: 80%;
font-size: 2em;
}
#border {
display: inline;
width: 20%;
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}
If you're trying to get something up and running quickly, you might consider using a css framework like bootstrap (http://getbootstrap.com/). If you're trying to learn css, I'd recommend pulling down the code for a framework like that and/or looking at the site for it with dev tools open, and explore what they're doing.
Hope that helps.
If you want to have text bigger or move around without affecting other content you could similar to this:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
position: relative;
}
#header h2 {
position: absolute;
top: 0;
left: 25px;
}
I would just add this to #border:
#border {
position: absolute;
bottom: 20px
left: 20px;
}
and add position: relative to the surrounding element:
#header {
position: relative;
}
Tha way #border will not take any space in the surrounding element and you can center-align you header without problems.
I'm trying to get some elements to move slightly when the user mouses over them (they form buttons on a navbar). However, my code doesn't seem to work. The text in the boxes should also be clickable but that doesn't seem to work either. Here's the code:
#navbar {
position: relative;
width: max-width;
height: auto;
margin-left: 2%;
}
.nav_tab{
background-image: url('dark_exa.png');
border: 2px dashed grey;
/* rounded borders of 5px in firefox */
-moz-border-radius:10px;
/* rounded borders of 5px in chrome and other browsers */
-webkit-border-radius:10px;
/* rounded borders of 5px in browsers that support css3 */
border-radius:10px;
/* shadows for different browsers */
-moz-box-shadow: 0 0 0 3px black, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 3px black 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px black, 2px 1px 6px 4px rgba(10,10,0,.5);
position: relative;
height: auto;
width:20%;
z-index: -1;
margin-left: 2%;
margin-right: 2%;
top: -30px;
display: inline-block;
}
.nav_tab:hover{
position: relative;
top: +5px;
}
h1 {
font-size:40px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 20px;
margin-top: 130px;
}
h2 {
font-size:30px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 10px;
margin-top: 40px;
}
And the HTML:
<div id="navbar">
<div class="nav_tab"><h2>Zues</h2></div>
<div class="nav_tab"><h2>Jack</h2></div>
<div class="nav_tab"><h2>Denise</h2></div>
<div class="nav_tab"><h2>Joel</h2></div></div>
I'm not entirely sure what's going on here, though I presume it's some kind of parent-child issue.
Thanks.
The link is not clickable because you gave the .nav_tab class a negative z-index value just adjust it to a value => 0 and it'll work.
The z-index: -1; of the .nav_tab css it's your problem, it makes the container behind the page so any mouse event won't work (hover, pointer, etc) remove it and your ready to go:
see the jsfiddle demo:
http://jsfiddle.net/QmVFR/64/