i created a box, and now i want to replicate it four times, make 4 boxes horizontally aligned but don't want to paste 4 times the code, any way to do this with <li> tag?
The html:
<div id="promos">
<div class="promoinside">promo</div>
</div>
the css:
#promogrid{
width:auto;
height: auto;
background-color: #ffffff;
}
#promos{
position: relative;
margin: 10px 5px 10px 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:225px;
height:160px;
background-color: #fff;
border-style:solid;
border-width:1px;
border-color: #cacaca;
-moz-box-shadow: 0 0 4px #dadada;
-webkit-box-shadow: 0 0 4px#dadada;
box-shadow: 0 0 3px #dadada;
}
.promoinside{
position: absolute;
margin: 3px 4px 4px 3px;
width: 219px;
height: 154px;
background: #f5f5f5;
background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee)); background: -moz-linear-gradient(top, #fafafa, #eeeeee);
}
.promoinside:hover{
background: #fbfbfb;
}
You can definitely do that using li. Divs are valid inside li tags (see Is div inside list allowed?). You're much better off writing the code for each box manually, as it involves a minimal amount of code compared to creating them dynamically. (If the boxes change a lot however you would be better off making them dynamic.)
<ul id="promos">
<li><div class="promoinside">promo</div></li>
</ul>
ul#promos {
list-style: none;
padding-left: 0;
margin-left: 0;
}
ul#promos li {
display: inline;
}
Well so far I haven't heard of thing like that to do with CSS.
What about the data inside the Tags? You can replicate that if you are using some sort of CMS, or dynamically drawing the divs.
I guess that it's logical that you want to put different data inside. Even if you replicate the divs - you should put data in each of that.
I guess the best way to do it is to support your HTML dynamically.
Related
I am currently updating/working on this web page "https://www.emergencydentalservice.com/emergency-dentist-by-city" and their is an unwanted box shadow appearing in the body that I can not determine from where or why. On top of the unwanted shadow the site also seems to break after 768px and I can't figure out why. Any help would be greatly appreciated, thank you all. Image of the site breaking after 768px
You have a box shadow set to #inside-main on eds_main.css.
#inside-main {
width: 100%;
background: #fff;
margin: 0 auto;
box-shadow: 1px -2px 4px #666;
-webkit-box-shadow: 1px -2px 4px #666;
-moz-box-shadow: 1px -2px 4px #666;
-o-box-shadow: 1px -2px 4px #666;
}
becomes
#inside-main {
width: 100%;
background: #fff;
margin: 0 auto;
}
As for the layout breaking, you have #foot-de-eds, #foot-top-cites on eds_main.css set to:
#foot-de-eds, #foot-top-cites {
margin: 1.3em auto;
width: 100%;
max-width: 1028px;
padding-left: 2em;
}
Try removing the max-width: 1028px; - so:
#foot-de-eds, #foot-top-cites {
margin: 1.3em auto;
width: 100%;
padding-left: 2em;
}
For the shadow issue:
#inside-main still has a box-shadow property on it from eds_main.css.
Though you didn't really specify which shadows you do and don't want... as there are multiple on the page.
Inspect Element / Dev Tools is your friend. Makes it easy to hunt down properties you may be overlooking.
on <div class="phone-wrap">
remove
background: url(/eds_siteIMGS/phoneBG_seperated.png) repeat-x;
The image have shadow
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have already found an answer, but I am not sure this is the best approach for my problem. My page has two panels: one sidebar and one content view. I want to have a shadow over the sidebar as if the content view was producing it:
The problem is that my sidebar is a menu with buttons, icons, etc. So if I try to set the (inset) shadow there:
.sidebar {
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
I get:
So, where I have the buttons, they hide the shadow. If I do it the other way so the content view actually produces it:
.content {
box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}
I get the shadow along with the content, but if the content is "shorter" than the total height of the screen, the shadow disappears. Similar to the previous case.
My final approach was to set a manual height for the content view or with Javascript, to adapt it to the viewport height. But I am not sure this is the best way to do it. I would like to know if there is a more CSS way to do it, without having to set things manually or getting shadows cut.
EDIT
While creating a fiddle for better understanding my problem I realized that I had a background-color on the buttons. But since I have a hover and a transition on the button, it still hides the shadow. Check it out: http://jsfiddle.net/h3cp59qd/
Check this out: http://jsfiddle.net/h3cp59qd/3/
Use position:absolute for both sidebar and content:
body, html {
background: #D8D8D8;
height: 100%;
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100%;
position: relative;
}
#sidebar {
width: 20%;
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
background: #C8C8C8;
}
#sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#sidebar ul li {
padding-left: 20px;
height: 60px;
text-transform: uppercase;
color: white;
font-weight: 900;
font-size: 12pt;
line-height: 60px;
vertical-align: middle;
}
#sidebar ul li:hover {
background: #c0c0c0;
color: #EEE;
}
#content {
width: 80%;
position: absolute;
z-index: 100;
left: 20%;
top: 0;
bottom: 0;
padding: 0 50px;
box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}
just change your background color to gradient:
http://jsfiddle.net/anshalexander/h3cp59qd/2/
background:-webkit-linear-gradient(left, #c0c0c0 0%,#c0c0c0 97%,#555 100%);
You can change the last color to match your shadow color
Maybe just a shadow background image with a repeat-y could do the trick in your css stylesheet.
background-image:url('your-image.jpg');
background-repeat:repeat-y;
Your image should be the shadow 1px height and as larger as you need.
Your header/footer can easily hide the shadow with their proper backgrounds.
EDIT
I saw your edit, here is mine :)
#sidebar ul li:hover {
background-color: #C0C0C0;
color: #EEE;
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
There are a few things that need to be corrected. First, remove the padding from #content (it's messing up the width and forcing that div to the bottom).
Add the same box-shadow from #sidebar to your #sidebar ul li:hover style:
#sidebar ul li:hover {
background-color: #C0C0C0;
color: #EEE;
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
Then on #app add position: absolute and height: 100%:
#app {
width: 100%;
height: 100%;
position: absolute;
}
Finally, on #sidebar remove min-height: 800px and add height: 100%, and that should fix it right up. See updated fiddle.
You'll notice that this adds a little bit of an edge to the buttons when they're being hovered over. This is due to the blur being greater than the offset. I think it looks good, but it can be fixed by increasing the (absolute values of) x-offset and spread values (the -7s) to greater than the blur-radius (the 9), e.g.:
box-shadow: inset -11px 0 9px -11px rgba(0,0,0,0.7);
I need to give a link background styling. As the width will vary I need to use 2 images, which is why I have a span within my link.
Ive also needed to float the link left, which means I have to set paragraphs to clear both.
My solution works but it seems like a lot of css and adding extra html elements. Is there a more elegant solution?
http://jsfiddle.net/p9aXg/16/
<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
<a href="#" class="my-link"><span> This is a link sdafsdafsdaf </span>
</a>
<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>
a {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg.jpg") 100% 50%;
line-height: 50px;
float: left;
}
a span {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg-2.jpg") no-repeat;
height: 49px;
display: block;
padding-left: 20px;
padding-right: 40px;
}
p {
clear: both;
}
If you use "display;inline-block" instead of floating, you can remove a bit of the CSS.
See the updated fiddle here: http://jsfiddle.net/p9aXg/19/
a {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg.jpg") 100% 50%;
display:inline-block;
}
a span {
background: url("http://smartpeopletalkfast.co.uk/body-link-bg-2.jpg") no-repeat;
line-height: 50px;
display: block;
padding-left: 20px;
padding-right: 40px;
}
As a general styling note, you should always try to avoid floating if you can. When you float an element, it takes it out of the flow of the page. This typically forces you to float other elements to make them line up as if they were in the flow of the page. I've seen it snowball to the point where every element is floated, which is simply an unnecessary headache.
Using inline-block instead of float will work most of the time. See the following links for more information:
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
http://www.vanseodesign.com/css/inline-blocks/
http://www.ternstyle.us/blog/float-vs-inline-block
It's possible to do this with no images and no extra elements, if you embrace 'progressive enhancement' across the range of browsers which you support. Here's an example: http://jsfiddle.net/Rt2Wa/4/
This uses CSS3 techniques to achieve a result that's as nice as your example in modern browsers, and produces a flat-but-beveled link in IE 7 & 8.
There are a few techniques at play here:
display: inline-block (mentioned by Ryan Henderson - very useful!)
border-radius
background gradient
:after pseudo-element
CSS triangles (created with a border effect).
Here's the basics of the effect (see the fiddle for a version with the vendor-prefixed styles where applicable):
a:link {
background-color: #18A580;
background: linear-gradient(to bottom, rgba(29,186,144,1) 0%,rgba(24,165,128,1) 100%);
box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.35), inset 0px 0px 1em 0px rgba(255, 255, 255, 0.4);
border-radius: 0.3em;
border-top: 1px solid #67D0BF;
border-bottom: 1px solid #18805B;
color: #FFF;
display: inline-block;
padding: 0.45em 0.75em;
text-decoration: none;
margin-bottom: 0.8em;
}
a:link:after {
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0.25em 0 0.25em 0.5em;
border-color: transparent transparent transparent #FFF;
margin-left: 0.75em;
}
I would use one background image and make it adjust
DEMO jsFiddle
a {
background-image: url("image.jpg");
background-repeat:no-repeat;
background-size:90% 70%;
background-position:center;
line-height: 50px;
padding:20px;
}
I am trying to create a box that has a 'highlight' down the sides of it, and at the top.
The CSS for the box was pretty simple, however, now that I introduced this 'highlight' to the design, it has added another level of complexity to the CSS...
I have tried a lot of things, not sure if they will help but here is my most recent:
/* Define the Main Navigation Drop Downs */
#mn_navigation .dd {position:relative;width:226px;padding:29px 0 0;background:transparent url("//beta.example.co.uk/_images/_global/dd_handle.png") no-repeat;z-index:1000;}
#mn_navigation .dd nav {padding:30px 0;background:#3E5032 url("//beta.example.co.uk/_images/_global/dd_bg.png");border-radius:3px;}
#mn_navigation .dd nav a {font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff !important;height:25px;line-height:25px;}
Please note I have posted the above to show that I have actually tried to sort this myself. The above code will probably not even help as a starting point as a restructure of the HTML may be necessary!
Here is the current HTML (probably needs to be restructured):
<div id="dd_foo" class="dd">
<nav>
LINK
</nav>
</div>
Here is a possible restructure (something like):
<div id="dd_foo" class="dd">
<div class="handle"><!-- Dropdown Handle --></div>
<nav>
LINK
</nav>
</div>
This is what I need the box to look like (notice the faint white border at the top and half way down the sides):
I have also included the box split into its separate elements (handle and background)
I think I can see how this can be done with clever overlaps and nested divs, but ideally I don't really want to resort to this... Can anybody suggest an alternative solution?
Simplest approach
You can try achieving this using a simple box shadow:
.plaque {
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
/*...*/
}
An Example
Here's an example using 1 class and a div on jsbin.
Copy paste code
This code is only for modern browsers; it might cause ie < 9 and other non supporting browsers to explode.
.plaque:after {
top: -9px;
content: " ";
height: 11px;
width: 30px;
position: absolute;
pointer-events: none;
left: 50%;
margin-left: -15px;
display: block;
background-repeat: no-repeat;
}
.plaque {
width: 250px;
height: 100px;
display: block;
border: 0;
outline: 0;
padding: 12px 16px;
line-height: 1.4;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
border-radius: 5px;
border: 1px solid transparent;
font-family: sans-serif;
color: white;
font-size: 1.2em;
text-overflow: ellipsis;
position: relative;
top: 6px;
}
/* Use whatever background you want */
.plaque { background-color: green; }
.plaque:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcJJREFUeNqMUktPU0EU/mZuL6Up1RCjC4oRau4t4FJ84EKID/ZAjI9/6Mo/4MadG5dqJGjBatpyuY+2UNreeXDOBE0MNHGSSWZyzvnOd77zicdbd+EVJKyxGPSHmC4XIYSAMQYCoJhn81wJKSnHWhR8D1oZl69yhamiD8GBSefpywc2XKzjy7fP+PDuk5iUJxnksvvkxX1buxkgThOEt5exvr1qJ+XKy5CfvXpow9oSsn6GdqeF40EPK+GKY/ZfTNa3Vm1AI6TdFAeNfQgp0CKgrJehVg1AGl5gJLTWfxGfv15zI3BBnB5CehJGG5Cw8EjY6tw8KjNXsfv9K96//SguMOERgoU6+ic9NH8eQClNGzDQBMLb4FU1fzdxFB+hev0WNnbu2X802TxnkGQJoriNymwZHrFgAbhdidbOK+YTxR0ojLEc3sHmm0dOI8Gq10n9OI1xGLVcMvuGGYyHOYqlKcfK9wvOF3/i12ZvoFK+gsavPUgGSLsJkm4En4xDTqMi45iUZqZdd34zJY7L8was2enoGMHCEmS3l6LxYx9qrJ2I7FTNelBxPlKuYDgYu9nzUe6cenoygqF/J2o7AmcCDACumSjtgWp8aAAAAABJRU5ErkJggg==); }
So I was styling a contact form on my website
And I ren into an issue with "Send button", for some reason has margin/is aligned more to the right than needed. You can see that in other 2 sections brown buttons are aligned correctly, but in third contact section that brown send button is aligned more to the right than needed, I have no idea on what is causing it...
Here is css that affects that button (button has id="msgSend"):
.inner-trio a, #msgSend {
color: #fff;
padding: 3px 0;
margin: 7px;
display: block;
border-radius: 5px 5px 6px 6px;
background-color: #6a2c10;
text-shadow: 1px 1px #471d0a;
text-align: center;
border-bottom: 4px solid #381201;
}
.inner-trio a:hover, #msgSend:hover {
background-color: #853815;
border-bottom: 4px solid #5b2005;
cursor: pointer !important;
}
.inner-trio a:active, #msgSend:active {
background-color: #6a2c10;
border-bottom: none;
margin-top: 11px;
}
The problem is that you define margin:7px to your form & input. If you want desire result then write like this:
input[type="submit"]{
margin-left:0;
}
Easiest way to solve this should be, to add:
#msgSend { margin: 0px;}
to your css.
You have the width of all input elements set to 100% plus you have 7px margin on your input button. There's your problem :)