Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So, I found a new theme for my tumblr blog, and it had a few issues, which I mostly managed to sort out, but now I'm facing a big one.
The captions, i.e. the comments and images below the content itself, are overflowing over the container that is set.
Here's the code I'm using http://freetexthost.com/abfqho3n5h
I've done some small changes to it, but nothing major or irreversible, that aren't shown here because this is the original code, so if you see some other major issue, feel free to tell me.
Here's an example of what happens http://two-dames.tumblr.com/post/121988188767/randomguy2015-because-tina-madqueenieb.
Add word-wrap: break-word to your posts class
.posts {
width: 500px;
background: #fff;
color: #aaa;
font-family: 'Gibson', sans-serif;
font-size: 12px;
margin-bottom: 20px;
padding: 10px 10px 10px 10px;
text-align: left;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
word-wrap: break-word;
}
Edit
For your image you could define an img tag with a max-width: 100%; This makes sure the aspect ratio is preserved and scales the image down accordingly.
img {
max-width: 100%;
}
Related
This question already has answers here:
Is there a way to use two CSS3 box shadows on one element?
(2 answers)
Closed 4 years ago.
I have code like this
body {
/*some styling for make div on center*/
}
div {
width: 50px;
height: 50px;
background-color: white;
border-radius:50%;
box-shadow: 0 0 5px 7px rgba(230, 230, 230, 0.4);
}
http://jsfiddle.net/zu9rd1jq/68/
I wanna make multiple box-shadow after box-shadow. It can be when we using photoshop, but how we do using css? Any idea, please :)
I Hope you are looking for this
div {
width: 50px;
height: 50px;
background-color: white;
border-radius:50%;
box-shadow: 0 5px 0 rgba(255, 0, 0, 1), 0 10px 0 rgba(0, 255, 0, 1);
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
How to style Google custom search engine using css
Help me,
Thanks in advance.
<div class="messagepop pop">
<script> //Google Custom Search Engine Code
</script>
<gcse:search> </gcse:search>
</div>
.messagepop input{
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
outline:0;
height:55px;
padding: 5px;
}
.messagepop input{box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.34),
-15px -14px 0px rgba(255, 255, 255, 1),
18px -55px 0px rgba(255, 255, 255,1),
33px -6px 0px rgba(255, 255, 255, 1); }
.messagepop input:last-child{ background: #32c77f;
line-height: 50px; height: 35px; width: 80px; margin-top: 28px; }
I keep noticing class="well" in a web app using Twitter's Bootstrap, but I can't find any documentation about it, unless I just overlooked it.
Thanks.
"well" is a CSS selector simply create prominent wrapper around element
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
The well is used as a simple effect on an element to give it an inset effect.
<div class="well">...</div>**
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
Anyone know of a way to create one of these lines (refer to image) in CSS?
Here's a rough approximation to start with. You'll need to adjust the specifics. Basically what I've done is create an overhang div, and beneath that is a div that will create a shadow with a falloff on the ends. The overhang div sits on a higher layer so you only see the edge of the shadow.
Demo:
http://jsfiddle.net/X5muV/
Another one, slightly darker: http://jsfiddle.net/X5muV/1/
HTML:
<div id="container">
<div id="overhang"></div>
<div id="falloff-shadow"></div>
</div>
CSS:
#container {
background: #5A5A5A;
width: 700px;
padding: 200px 0 80px 0px;
}
#overhang {
background: #5A5A5A;
border-top: 1px solid #666;
height: 80px;
width: 600px;
margin: 0 auto;
position: relative;
z-index: 5;
}
#falloff-shadow {
width: 500px;
margin: 0 auto;
-webkit-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
position: relative;
z-index: 1;
height: 1px;
top: -65px;
}
Yes, you can create that in css3. You will have to combine some effects, but I think a grey line (you will have to add some extra space below, explained later) with a shadow will do.
To write a shadow that appears only in one side (top), check this question/answer: How can I add a box-shadow on one side of an element?
Based on that example, you can try something like:
.myDiv
{
width: 700px;
height: 50px;
border-top: 2px solid #333;
-webkit-box-shadow: 10px 0px 0px -2px #888 ;
}
The shadow is still there on the left, but hidden (-2px). That gives you the illusion of a single shadow. This is just a start-up, try different options and come back if you have any particular questions. But do it yourself first.
I am new to the designing/programming world so I am sure the issue is easy to solve. I am trying to add the moz-box-shadow effect to my header. But as soon as I add that component, the header which is taking up space horizontally shortens up. I want the header to be like Twitter's, where they use a shadow effect.
#header {
background-color: #990000;
width:101.3%;
margin-left:-8px;
margin-top:-8px;
height:40px;
-moz-box-shadow: 1px 1px 10px #D7D7D7;
}
Also, the way i have set the width is it likely going to create cross browser issues?
Here's a version similar to what Twitter has:
This is Twitter's version, more or less:
Live Demo (edit)
HTML:
<div id="top-fixed">
<div id="top-bar"></div>
</div>
CSS:
html, body {
margin: 0; padding: 0
}
body {
padding-top: 50px;
background: #c0deed
}
#top-fixed {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
#top-bar {
height: 40px;
width: 100%;
background-color:#00a0d1;
background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8));
background-image:-moz-linear-gradient(#00a0d1,#008db8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')";
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
The trick that Twitter is using, is putting in an absolutely positioned box and giving that box a width of 100% and the shadow. Using overflow-x: hidden on it´s parent, you get the effect that you are looking for.
I've been doing shadows with .png's. I see no benefit of using this (esp. since I would assume browsers started supporting .png prior to supporting box shadowssee, for example, Mozila's statement that FF started supporting box shadows in FF3.5,) but of course, if this is better than doing shadows via .png, feel free to leave a comment proving me wrong!