Im trying to make a Tumblr theme, and trying to make text go away from the border 20px, but it is also pushing the photos, videos, and other elements that are not text over, which is IS supposed to do, is there a way to only align the text?
.posts {
border:solid 1px #333333;
border-radius:15px 15px 15px 15px;
color:black;
margin-bottom:20px;
min-height:120px;
padding-left:20px;
text-align:left;
}
Thats my code.
http://puu.sh/83iTL.jpg
Thats what is happening, but I want to only align the text. Is this possible?
Thanks :)
EDIT: The entire code: http://pastebin.com/6q4hFyZL and the page is em202020.tumblr.com
<edit>
From your page : http://em202020.tumblr.com/
You could do:
.posts a:first-of-type img,
.posts iframe {
margin-left:-80px;
}
Or if you like it better :
.posts a:first-of-type img {
margin-left:-80px;
}
.posts iframe {
margin-left:-20px;
}
.</edit>
first guess answer irrelevant.
you can do :
.posts img:first-child {/* it will only select the first-child if it is an img tag */
margin-left:-20px;/* swallow that padding-left:20px; */
}
could you add css rules for .post img?
.posts {
border:solid 1px #333333;
border-radius:15px 15px 15px 15px;
color:black;
margin-bottom:20px;
min-height:120px;
padding-left:20px;
text-align:left;
}
#add this?#
.posts img {
padding:0px;
Related
I have this list block (SEE DEMO) and need to vertically centre the text with the icon so whenever I have more than 1 line of text everything stays in the middle of the LI. I know that other people asked similar questions here but none worked for me :(
DEMO
you can make use of the display:table properties by changing the following styles:
ul.quote-list li {
font-size: 14px;
color: #2a80b9;
border-top: 1px dashed #dbdbdb;
line-height: 1.2;
display:table;
width:100%;
}
ul.quote-list li > a { /*please note the extra > here */
color: #2a80b9;
text-decoration:none;
display:table-cell;
vertical-align:middle;
padding:18px 0 18px 20px;
}
.right {
display:table-cell;
vertical-align:middle;
width:30px;
text-align:center;
}
Example
You can postion the text and the icon using display: inline-block; with a vertical-align: middle;. You also need to remove the float: right; from the icon.
Here is a quick example. I've added a width and padding-right to the text just to make it look better.
Or use the solution from #ilmk in the comments :)
I am trying to make a large button with 2 lines of text that looks something like:
What I want
This is my current JSFiddle showing what I've "accomplished"
I am fairly new to asp.net and programming in general so excuse my poor CSS.
Thanks for any help that anyone can offer.
The HTML:
<div class="bigGreenButton"> <a href="/Liquor/specialorder/supplier-info">Submit a special order request <br />
for information ➧
</a> </div>
The CSS:
.bigGreenButton a{
font-family:'TradeGothic LT CondEighteen';
font-size:18px;
background-color:#60a74a;
color:white;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
padding-left:25px;
padding-right:25px;
text-transform:uppercase;
text-decoration:none;
height:auto;
width:auto;
text-align:center;
}
.bigGreenButton a:hover {
background-color:#cccccc;
}
button {
text-align: center;
padding: 0px 0px 0px 0px;
border: none;
}
Add this to your css:
.bigGreenButton a{
display: inline-block;
...
}
You can see it here.
Change display since there's not a block inside your link and set the width how you want it.
.bigGreenButton a{
...
display: block;
width: 400px;
}
Shown here
I have a photo gallery and my photos are diplayed as thumbnails.
When I resize the browser they move as I want them to but instead of getting evenly pushed down on to the next line they instead go down but overlap oeach other.
When the browser is full, the images display fine. Here is a screenshot showing the images moved and overlapping when the browser is smaller:
I currently use this code if it helps.
div.photoimg
{
margin:2px;
padding: 5px;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img photoimg
{
display:inline;
margin:3px;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:200px;
margin:2px;
}
Many thanks for any help.
I am not sure, but try instead of
div.img photoimg { display:inline; }
use
div.img photoimg { display:block; }
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.
i can't figure out what makes an html button element appear to be pushed (right click an html button and then hover on and off to see what i mean).
the following two examples i've taken from other websites. the first has the typical button push effect. the second does not.
.button {
border:none 0;
background-color:Transparent; }
.button .l { background:url('img.gif') no-repeat 0 0;
padding-left:7px;
display:block;
height:32px; }
.button .c { background:url('img.gif') repeat-x 0 0;
display:block;
height:32px;
padding-top:7px; }
.button .r {
background:url('img.gif') no-repeat right top;
padding-right:7px;
display:block;
height:32px; }
and
.button {
background:#F0F0F0 url(img.gif) repeat-x scroll 0 0;
border:1px solid Black;
color:#333333;
font-size:12px;
height:20px;
padding-left:8px;
padding-right:8px; }
EDIT: # mr skeet, i want a button that will look the same in all browsers (ie. background image) but still behave like a real html button with the push effect. am i correct in assuming that i'll need javascript for this? and different css for the push state? an example/tutorial would be awesome
Either use
<input type="button" value="Click Me"/>
which will automatically act like a button, or use the :hover and :active CSS pseudo classes to get what you want...
a.likeAButton {
background-color:#67a0cf;
border:1px outset #2683cf;
color:#fff;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:hover {
background-color:#5788af;
border:1px outset #2683cf;
color:#fcffdf;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:active {
background-color:#67b4cf;
border:1px inset #1d659f;
color:#e0ffaf;
padding:4px 2px 2px 4px;
margin:1px;
text-decoration:none;
}
Fake Button
you can also add border radius to every element such as a.likeabutton, a.likeabutton:hover and all. this wil give it a good look. If we can make it like a list of Button then it will have a better Navbar feature, I tried this though, it position of these buttons does no remain same in Maximized and restored borwser.