I have a error message to be displayed
i can center it using text-align center if there was no background. but now its clearly visible that it occupies the whole width of the container it being a <p>.
so i gave width and margin:0 auto;
but i cant give its class to every other error message because width changes.
so is there any way to center it without giving width.
here is what i currently have JSFIDDLE
HTML:
<p class="error"><b>Error:</b> Dont select corners, select edges!</p>
CSS:
.error{
padding:15px;
border:1px solid #ebccd1;
border-radius:4px;
background-color: #f2dede;
margin:0 auto;
font-family:consolas;
font-size:17px;
color:#a94442;
width:370px;
}
Change the display of the p element to inline-block and then add text-align:center to the parent element to center it.
UPDATED EXAMPLE HERE
.parent {
text-align:center;
}
.error {
padding:15px;
border:1px solid #ebccd1;
border-radius:4px;
background-color: #f2dede;
font-family:consolas;
font-size:17px;
color:#a94442;
display:inline-block;
}
Alternatively, you could change the display of the p element to table as King King points out.
It's worth noting that this approach wouldn't work in IE7 though.
You can use display:table for the p:
.error {
...
display:table;
}
Demo.
Related
Switching from tables to divs for layout purposes sounds an attractive decision, yet it's very painful. I haven't still been able to use float and oveflow properly to get divs aligned properly. Here are I have the following html and css:
HTML
<div class="div-row">
<div id="divOfficers" class="div-column">DIVOFFICERS</div>
<div id="divTasks">DIVTASKS</div>
CSS
.div-row {
width:100%;
overflow:clear;
margin-bottom:5px;
}
.div-column {
margin-right:3px;
float:left;
}
#divOfficers {
border:3px solid red;
height:80px;
width:200px;
color:red;
}
#divTasks{
width:300px;
height:80px;
border:10px solid orange;
color:orange;
}
Basically, I need the divTasks to stand right to the divOfficers, but without stretching over it. But here's what I get:
I've cleared the overflow in the parent div but as you can see that does not help. What else do I have to do?
just give a float:right to divtasks as well as you did float:left with divofficers. if it is what you want than your problem solved or let me know if you need something else to do and put your code on jsfiddle please as it will help a lot
Try use CSS3 code, If you use float maybe have problem with long content
.div-row {
width:100%;
overflow:clear;
margin-bottom:5px;
display: table;
}
.div-column {
margin-right:3px;
}
#divOfficers {
border:3px solid red;
height:80px;
width:200px;
color:red;
display: table-cell;
}
#divTasks{
width:300px;
height:80px;
border:10px solid orange;
color:orange;
display: table-cell;
}
Demo: http://jsfiddle.net/vsok/dqmdv7oa/
Yeah, my titles suck :p
So I have a container, which contains <div>s. Dotted in this container are <span>s that mark off labels. These <span>s have position:absolute to make them not interfere with the layout of the <div>s.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
In Internet Explorer, this works fine.
In Chrome, it does not. The label falls out of the box.
I understand why this happens - it's because the <span> has zero width and height within the flow of the document, allowing it to squeeze into the zero remaining space.
But I'm wondering if there's any other way to achieve the effect I want here?
EDIT: Desired effect, Chrome's bad effect
don't really quite get where you want them, something like this ? added display block to the span.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
display:block;
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><div></div><span>Marker</span><div></div><div></div></div>
strong text
Borrowing ideas from #Billy and with help from #JacobGray in the comments, the following solution applies display:block to <span>s, but only if the immediately follow an Nth <div>, N being the number of columns.
It works, but I'm not too happy with it being dependent on a constant number of columns - not great for responsive design ;) Better solutions are of course welcome.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
#container>div:nth-of-type(3n)+span {
display:block;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
Adding display:block to the span is what I'd suggest, or putting a marker span inside every div you want to label.
If I understand well, try this. Put tags <span> into each <div> that you want have a "label". Add position:relative to all <div> and set the properties top and left for the span.
Ps. I've modified your code below, but you should use classes
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
position: relative;/* added */
}
#container>div>span {/* modified */
position:absolute;
background:#ccf;
top:-5px;/* added */
left:-5px;/* added */
}
<div id="container"><div><span>Marker</span></div><div></div><div><span>Marker</span></div><div><span>Marker</span></div><div></div></div>
I am having a few problems with CSS. I have scripted a simple text box, that when it is clicked a div drops down, but it does not seem to be working. If anyone could help me, I'll be greatfull.
CSS:
input {
top:18px;
left:20px;
width:1230px;
padding:4px;
border:1px dashed #eeeeee;
font:16px arial;
font-weight:bold;
color:#d8d8d8;
}
input:focus {
height:200px;
}
div {
overflow:hidden;
padding:0;
margin:0;
height:0;
width:1230px;
border:1px dashed #eeeeee;
background-color:transparent;
transition:height.5s;
-moz-transition:height 0.5s;
-o-transition:height 0.5s;
-webkit-transition:height 0.5s;
}
body {
background-image:url('pic.bmp');
background-repeat:no-repeat;
}
I'm guessing that you need to change input:focus to input:focus div (if the div is in the input element), or something like input:focus + div (if the div is after the input), but without seeing your markup it's hard to say.
You have to use input:focus + div to select your division.
Here is the Pure CSS version of what you want : jsFiddle
The div has overflow: hidden property, which will cause any inner elements' heights to be ignored in the rendering of the div's height.
I create Any div in auto width with single image background. in act this worked but There is a small problem. end of right images not overlapped.
HTML :
<div class="home"><span><em>40</em></span></div>
CSS :
.home{
border:none;
background:none;
padding:0;
margin:0;
width:auto;
overflow:visible;
text-align:center;
white-space:nowrap;
height:40px;
line-height:34px; display:inline-block;
}
.home span, .home em{
display:inline-block;
height:40px;
line-height:34px;
margin:0;
color:#954b05;
}
.home span{
padding-left:15px;
background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 0 0;
}
.home em{
font-style:normal;
padding-right:20px;
background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 100% 0;}
See E.X In Action : HERE
My Problem : HERE
It's doing that because the corners of your PNG are transparent. Either make them white (same as background) or use another method. Most modern browsers allow you to do rounded borders via CSS now (with the exception of IE).
you can make the same curve box as per your image with css3 here is small css for you to make curve box and compatible with all browsers:-
.box {
border:1px solid #dadada;
width:50px;
height:50px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
}
check the live demo:- http://jsfiddle.net/ZysQa/3/
i have used behavior hack for ie support border radius property so for ie border details you can read this article.....cross browsers css3 border radius
http://www.pressedweb.com/beta/#portfolio
My anchor tags (highlighted in red dashed border) are being created by their own free will. I have no idea how to get rid of them and have been working at this for hours now.
Any ideas? Is this some freaky cross-browser bug? Or is it just a problem with my markup?
Thanks.
I thinkg this fix will work for you:
div .portfolio .works a img {
-moz-box-shadow:1px 2px 3px #222222;
opacity:0.8;
}
div .portfolio .works a {
border:1px solid #FF0000;
display:block;
float:left;
height:220px;
margin:0 10px 10px 0;
padding:4px;
width:280px;
}
Basically what i did was just switched some styling from img to anchor. You can see in this image that it does work ok.