I'm trying to allign two images on each side of the text using padding.
I works on the left side but not on the right.
Why will the right one dont fall down 10px?
html:
<img class="q1" src="http://i62.tinypic.com/2dkh7p2.png"/>
This is the quoted text, but how can I get the right img to align? Right now it's too high! --->
<img class="q2" src="http://i62.tinypic.com/282f3mr.png" />
css:
.q1 {
padding-right:2px;
padding-bottom:10px;
}
.q2 {
padding-left:2px;
margin-top:10px;
}
fiddle: http://jsfiddle.net/vvDdR/1/
Instead of using vertical margin or padding you can just nudge it:
.q2 {
padding-left:2px;
position:relative;
top:10px;
}
Before:
After
Demo: http://jsfiddle.net/5g4wt/
This should be made with background images in CSS.
As an example:
Have a Fiddle!
HTML
<blockquote>This is an amazing quote - mistermansam</blockquote>
More information on semantic quotations in HTML5.
CSS
blockquote {
background: url(http://i62.tinypic.com/2dkh7p2.png) no-repeat;
padding: 0 25px;
position: relative;
text-align: center;
width: 300px;
}
blockquote:after {
content:'';
background: url(http://i62.tinypic.com/282f3mr.png) no-repeat;
position: absolute;
height: 20px;
width: 20px;
display: block;
bottom: 0;
right: 0;
}
With a different typeface, this could also be achieved without images.
I would go with vertical-align:
img {
display:inline;
}
.q1 {
vertical-align:45%;
margin-right:2px;
}
.q2 {
vertical-align:-70%;
margin-left:2px;
}
Demo
MDN Documentation
Your current code won't work due to a simple typo.
The following does, given I understood your problem correctly.
Jsfiddle sample
.q1 {
padding-right:2px;
padding-bottom:10px;
}
.q2 {
margin-top: 10px;
margin-bottom: -10px;
}
Related
I have turned to this guide to solve my problem of vertically centering my text within the div. And I believe to understand what it says, but it still doesn't work.
.number {
position: relative;
height:50px;
margin: -25px 0 0 0;
top: 50%;
background-color: #00ff00;
}
Here is the fiddle, which recreates the problem. I want the green area (.number) to be centered vertically within the button (.numberElement)
Where is my problem? I reckon jQuery Mobile is complicating things and creating structures I am not foreseeing...
Thank you!
Sandro
You need to make some changes to your css like so:
.numberElement {
position: absolute;
width:30%;
height:200px;
margin:0px;
display:table;
}
.numberElement .ui-btn-inner {
display:table-cell;
vertical-align:middle;
}
Working Demo
Your top property of .number is not working fine, as i can see in your fiddle. Try changing it from top to margin-top. It will center around margin-top:60px;
Also dont forget to remove the line in .number
margin: -25px 0 0 0;
here is the correct answer as i think
.numberElement {
position: absolute;
width:30%;
height:200px;
margin:0px;
}
.number {
position: relative;
height:50px;
margin: 50px 0;
line-height:50px;
top: 50%;
background-color: #00ff00;
}
#grid {
position:absolute;
padding:0px;
margin:0px;
border:solid 1px #ff0000;
height:400px;
width:400px;
}
I'm trying to do this:
(The search button has fixed size, the left side takes remaining width in screen).
The best I got yet: jsFiddle
HTML:
<input>
<img src="http://ii.alatest.com/css/iphone/search_icon.gif">
CSS:
input {
height: 100px;
font-size: 3em;
width: 100%;
float:left;
}
img {
float:right;
width:100px;
height:100px;
}
Edit: I forgot to mention, the search icon has to be clickable! This leads probably to a solution where it's a separate element, not a part of the background.
I'd recommend using the image as a background to the input like this jsFiddle example.
input {
height: 100px;
font-size: 3em;
width: 100%;
float:left;
padding-right:120px;
background-image: url(http://ii.alatest.com/css/iphone/search_icon.gif);
background-position: 98% 50%;
background-repeat: no-repeat;
}
Or, you can float both elements left and set a width on the input like this jsFiddle example.
input {
height: 100px;
font-size: 3em;
width: 70%;
float:left;
}
img {
float:left;
width:100px;
height:100px;
}
I'm wanting to get an image overflowing a div, whilst not distrupting flow of text.
You can see it live at http://songbundle.org*
Example image above. Currently the text and form move right and lose their centering due to the image.
My current code below:
HTML:
<div class="box">
<div id="boxarrow"></div>
<p>text goes here</p>
</div>
CSS:
.box {
margin:60px auto 0 auto;
width:240px;
border:solid 1px #7889BC;
background-color: #AEB8D7;
text-align:center;
}
#boxarrow {
background:url(image/arrow.png);
width:77px;
height:81px;
display:block;
margin-left:-60px;
float:left;
}
Your help is appreciated!
Hey there,
One solution you could try would be to apply position: relative; to your .box element and position: absolute; to your #boxarrow element. This will take the #boxarrow element out of the normal flow of the document, leaving other elements unaffected by its positioning.
Then, you can adjust it's position (relative to the .box element, since we gave it position: relative;) with top, right, left, and bottom. So, your #boxarrow element might end up looking something like this:
#boxarrow {
position: absolute;
top: 30px;
left: 20px;
}
Again, this is just one possible solution, but it seems as though it would work best considering your situation.
Hope this helps!
remove
margin-left:-60px; float:left;
from your #boxarrow and add
left:-60px; position:absolute;
Then add
position:relative;
to your .box
Final result:
.box {
background-color: #AEB8D7;
border: 1px solid #7889BC;
margin: 60px auto 0 auto;
position: relative;
text-align: center;
width: 240px;
}
#boxarrow {
background: url("image/arrow.png");
display: block;
height: 81px;
left: -60px;
position: absolute;
width: 77px;
}
Just change the positioning to absolute like this...
#boxarrow {background:url(image/arrow.png); width:77px; height:81px; display:block; margin-left:-60px; float:left;position: absolute;}
I having difficulties setting my footer properly. I have a Bottom navigation bar as part of my footer which is working fine(color:#7A7A7A). The issue is with the copy right information that follows. It has an address and phone number. I am wanting that this side of the footer to have a black bakcground(#000). This part is labeled in the css under copyRight which i am not get any results. Any Ideas of what may be wrong?
Here is my Live EXAMPLE.
Thank you
CSS
html, body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#333333;
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
font-size:small;
color:#5e5e5e;
line-height: 130%;
}
/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper in the background. ******/
#colorblock {
position: absolute;
top: 60px;
left: 0px;
background: #c69a55;
z-index: 0;
height: 65px;
width: 100%;
padding: 0px;
margin: 0px;
}
/**************************************************/
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:925px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
border-right: 15px solid #000000;
border-left: 15px solid #000000;
}
div#contentArea {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#contentArea p {
text-align:justify;
padding:0 1em;
}
#content {
margin-left: 240px;
margin-right: 0 auto;
background: #ebebeb;
padding: 5px;
width:635px;
height: 400px;
}
/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/
div#header {
/*padding:1em;*/
height: 175px;
border-top:15px solid #000000;
}
div#header p {
margin:0;
}
/****** LEFT COLUMN: This is the left gray column next to the content. Features the styling for the log-in form and the location links. ******/
#left2 {
float: left;
width: 200px;
background: #dddddd;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 15px;
padding: 5px;
height: 400px;
}
/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#7A7A7A;
border-bottom:15px solid #000000;
}
div#footer p {
padding:1em;
margin:0;
}
a.footer {
color: #c7c7c7;
font-size: 80%;
padding-right: 20px;
letter-spacing: 1px;
}
p {
margin:0 0 1em;
}
#copyRight{
background:#000;
color: #FFF;
font-size: 75%;
bottom: 0;
}
.left{float:left;}
.right{float:right;}
</style>
You're floating the contents of #copyRight so it needs to be floated in order to contain them properly. Add this to #copyRight:
float: left;
width: 100%;
Read Brilliand detailed explanation below
Add overflow:hidden in #copyRight
So your CSS should look like this:
#copyRight{
background:#000;
color: #FFF;
font-size: 75%;
bottom: 0;
overflow:hidden
}
The problem you are having is that most elements, including divs, do not by default expand to contain floating elements. Since everything within copyRight is floating, it behaves as though it were empty, and shrinks to nothing.
There are many ways to make an element expand to contain floating elements. My personal favorite is to set overflow to just about anything - hidden being the most common.
#copyRight{
overflow: hidden;
}
Another way is to make the containing element float too, though it's then liable to cause the same problem with the element trying to contain it. Also, floating causes shrinkwrapping, so you have to set an explicit width:
#copyRight{
float: left;
width: 100%;
}
A similar result can be achieved using various display declarations, such as display: inline-block. This avoids propagating the problem to the parent element:
#copyRight{
display: inline-block;
width: 100%;
}
Apparently back in 2004 it was considered a wonderful new idea to solve such a problem by inserting a clearing element with the :after pseudo-class instead of the older method of adding a <div style="clear:both;"></div>. Those tricks would also solve your problem, though clearing floats and containing them are not quite the same thing.
Is there a simple way to style element like this?
Supposed to be used on a mobile so CSS3 is fully available. Can't think of a simple way. Images are out of question.
It has to be this blocky and there supposed to be a text within (this is a blocky 8-bit button)
This jumps off of feeela's beginnings, but it's different enough to warrant its own answer.
Rather than putting a colored block overly, it only adds red-colored elements, allowing background to show through. HOWEVER, to calculate it properly (so that they're square corners!) I had to set a fixed width height. There's probably some sort of wacky way to do this with percentages, but for proof of concept it was too headachey to contemplate. Since the requirement is for fixed height variable width, this should work.
The pseudo-elements need to have content or they will "collapse". The content can be empty, but that property needs to be set.
CSS:
/* main button block */
.button {
display:inline-block;
background: #f00;
position: relative;
line-height: 60px;
text-align: center;
padding: 0 20px;
height: 60px;
margin-left: 0.5em;
}
/* common background color to all */
.button, .button::before, .button::after {
background-color: #f00;
}
/* shared styles to make left and right lines */
.button::before, .button::after {
content: "";
position: absolute;
height: 50px;
width: 5px;
top: 5px;
}
/* pull the left 'line' out to the left */
.button::before {
left: -5px;
}
/* pull the right 'line' out to the right */
.button::after {
right: -5px;
}
Fiddle: http://jsfiddle.net/3R9c5/2/
How about this?
HTML:
<div class="block">(text goes here)</div>
CSS:
body {background:#1990D7;}
.block {background:#FF1200; line-height:52px; margin:8px auto; width:359px;
position:relative; text-align:center; font-weight:bold; color:yellow}
.block::before {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; left:-4px; bottom:4px; width:4px;}
.block::after {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; right:-4px; bottom:4px; width:4px;}
Edit: updated after the latest insights into the demands of the question.
You can insert each of that four blocky-corners by appending pseudo elements via ::before or ::after.
e.g.:
.button {
background: #f00;
position: relative;
}
/* corner top left */
.button::after {
position: absolute;
top: 0; left: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner top right */
.button::after {
position: absolute;
top: 0; right: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner bottom left */
/* … */
The CSS border-radius attribute
maybe this will help you. Or you can just add new class, "cadre" for example
.cadre
{
border-radius: 10px;
}
to your css file, then affect it to the div.
I don't think border-radius can accomplish that. This is the simplest way I can think of:
http://jsfiddle.net/DpLdt/
CSS:
body {
background:blue;
}
div#clipcorners {
width:500px;
height:200px;
background:red;
position:relative;
margin:100px auto;
}
span#a,span#b {
position:absolute;
width:10px;
height:180px;
top:10px;
background:red;
}
span#a {
left:-10px;
}
span#b {
right:-10px;
}
HTML:
<div id="clipcorners">
<span id="a">
</span>
<span id="b">
</span>
</div>