i have very simple scenario but i am really stuck with it and need your help please .
this is what i have to do .
This is a div with righ and bottom border and and image in its top . I have to display text same as this one . For this i am using bootstrap like this
<div class="span4" >
<h1 class="BoldText">
GET A QUOTE
</h1>
<span class="SimpleText">
INSERT TEXT HEREINSERT TEXT HEREIN-SERT TEXT HEREINSERT TEXT HEREINSER
</span>
</div>
now problem is that i have to show it in middle of box , if i set margin-left to h1 and <span> tag this is how it looks like this padding also does not work here . will someone guide me how do i adjust it . it seems simple but i am really unable to get it .
I would set widths:
http://jsfiddle.net/4YUtW/
.span4 {
width:300px;
border:1px solid #666;
}
h1 {
width:226px;
display:block;
margin:0 auto;
}
.SimpleText {
width:226px;
display:block;
text-align:justify;
margin:0 auto;
}
but, there are probably better solutions... Of course, you will have to change values to fit your needs.
You will need to set up your CSS as such:
#img {
background:transparent url('http://thebuzzdoha.com/wp-content/uploads/2014/06/fifa-world-cup-wallpaper-hd.jpg') top center no-repeat;
height:200px;
width:100%;
margin:0 0 20px 0;
}
.span4 {
border:1px dotted Black;
margin:0 auto;
width:400px;
text-align:center;
}
.span4 a {
color:Black;
text-decoration: none;
font-family: sans-serif;
}
.SimpleText {
display:inline-block;
margin:0 auto;
width:70%;
text-align:justify;
}
You can see this here->http://jsfiddle.net/5KjXq/
Hope this helps!!!
So, if you're not particularly attached to using bootstrap, doing this in pure html and css is relatively simple and usually a whole lot easier to read than the bootstrap spit-out code. I have made a fiddle with an example: http://jsfiddle.net/6aJJ5/1/. Hope that helps!
Related
I am trying to create a mock up of a PSD file and i'm having trouble getting some tags at the bottom of a blog post to behave.
Here is a link to the image;
http://imageshack.com/a/img923/5718/rfVFqe.png
(I'm not allowed to post real images yet)
Here is my css code so far for it;
.comment { content:url(comment.png) ; height:auto; width:auto; }
and then in the html;
<div class="comment"><p>comments</p></div>
the text does not appear at all however. I'm not sure if I can make it work this way?
Thanks all.
I did a similar thing for a footer of a page recently, but I had to use img and p tags.
<div class="comment">
<img src="svg/phone.svg" alt="Phone">
<p>800-888-0123</p>
<img src="svg/email.svg" alt="Email">
<p>billy#billsplumbing.ca</p>
</div>
That was my markup, and my CSS looked something like:
div.comment *{
display:inline-block;
margin:0 .2rem;
}
div.comment p{
margin-right:1rem;
}
div.comment img{
height:25px;
width: 25px;
}
I don't know if this is quite what you're looking for, but this is how I did basically what you are showing.
Why not use background: url(comment.png) instead? And then add some padding-left to the div.
Code:
.comment{
background: url('https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/bubble-24-24.png') no-repeat;
padding-left: 30px;
height: 24px;
float: left;
margin-right: 10px;
}
.comment p{
margin: 0
}
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>
In my footer I want to make 3 different sections of paragraphs-at left, middle and right. The 3 paragraphs should sit next to each other, not below each other.
This is how I was trying to do, but I failed to figure it out.
<footer>
<div id="footer_box">
<p id="footer_text_left">
should sit at the left.
</p>
<p id="footer_text_middle">
should sit in the middle.
</p>
<p id="footer_text_right">
should sit at the right.
</p>
</div>
</footer>
.CSS:
#footer_box{
border-top:2px solid #009933;
padding-bottom:75px;
background-color:#3366CC;
}
#footer_text_left{
font-size:15px;
color:black;
font-family:Euphemia;
}
#footer_text_middle{
font-size:15px;
color:black;
font-family:Euphemia;
}
#footer_text_right{
font-size:15px;
font-family:Euphemia;
color:black;
}
First option:
p {
float: left;
}
Second option:
p {
float: left;
width: 30%;
margin: 0 1%;
}
Third option (best):
p {
display: inline-block;
}
Another thing I saw was that every paragraph had the same rules, you could set the font properties on the body or global paragraph so you won't need to set it on everything.
That would look like this:
body {
font-size:15px;
font-family:Euphemia;
color:black;
}
Or if you want it just on the footer paragraphs:
footer p {
font-size:15px;
font-family:Euphemia;
color:black;
}
This is Extremely easy to do, either by making the <p>'s inline-block, or float:left them:
#footer_box p{
display:inline-block;
}
inline-block, (or inline) is the best way to do it, as float:left, has some unwanted effects, such as the <p>'s no longer effect the height of their parent, as can be seen in this JSFiddle, compare it with the one below.
JSFiddle
See this SO question about it: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
Just capture the paragraph into a div and add style. For example
<div style="float: left; margin-right: 20px">
Here's how I did for a paragraph containing picture: https://jsfiddle.net/xomkq7dv/7/
I'm trying to align a button and some text at the bottom of a div much like the example below with the Price and the Check it out button. What's the best way to do this. I've made a div, styled it to get the text, and picture right. I just need to attach the button to the right-hand side and the price to the left, inline with each other.
Similar to the product displays in the website thisiswhyimbroke.com
http://www.thisiswhyimbroke.com/
^^ Price and the Check It Out button. How do I achieve this?
Try like this: DEMO
Try to use reset you CSS first.
CSS:
*{
padding:0;
margin:0;
}
#priceAndButton {
width:100%;
display:block;
height:30px;
line-height:30px;
}
#priceAndButton h4 {
float:left;
vertical-align:middle;
}
#priceAndButton img {
float:right;
}
Hope this helps you
I have created a working fiddle with your requirements:
http://jsfiddle.net/8993H/
HTML:
<div id="main-container">
<div class="img-div"><img src="http://tiwibzone.tiwib.netdna-cdn.com/images/beer-chug-flowmeter1-300x250.jpg"/></div>
<div class="rhs">
<div class="button-nav">
<span class="price">$35.00</span>
<span class="check-btn"><button>Check It Out</button></span>
</div>
</div>
</div>
CSS:
#main-container{
width:100%;
border: 1px solid #aaa;
}
.img-div{
width:50%
}
.img-div img{
width:100%;
}
.rhs{
width:48%;
float:right;
position:relative;
}
.button-nav{
position:absolute;
bottom:10px;
width:100%;
}
.price{
float:left;
}
.check-btn{
float:right;
}
Try this:
button{
float:right
}
#price{
float:left
}
Here i created one working fiddle for your requirement.. You can re use this CSS. Hope This will help you.
HTML
<div class="desc">
<img height="200px" width="200px" src="http://www.clker.com/cliparts/8/2/2/6/11971154711712468971BigRedSmile_A_screwdriver_1.svg.med.png"/>
<p>Move over sliced bread, the water jet pack is officially the greatest thing ever. For only sixty eight grand you can own your very own water thrusting jetpack. It can lift you up to 30 feet high and thrust forward at 30 miles per hour – practically guaranteeing certain death.</p>
<div class="button">
Check it out
</div>
<div class="price">$500.00</div>
</div>
CSS
.desc{
text-align:jstify;
width:50%;
}
.button a{
background-color: #faab37;
color: white;
display: block;
float: right;
padding: 7px 8px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.button a:hover{
background-color:#f9bd66;
}
Hope This is What your expected output
I'm writing a CSS for a store. I need a div that sets the buy button to the left, and a Prev and View Next images to the right, which is working.
My real problem is that sometimes the "buy" button will be not present, because of the PHP.
When the buy button is not present images must be centered, because if they are not, it will be empty space to the left side (where the buy button was)
At first i think on margin:0px auto, but this will need a constant width set, right?
I really thought at the beginning this will be very simple. But i got stuck/
fiddle
Simplified to get the idea
I think im just missing something basic that i cant see know.
HTML:
<div id="comprarbtn">
<div id="wrappcomprarbtn">
<input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
<div id="naviminicc"> <img src="images/navmini_01.png" class="navmini1">
<img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <img src="images/navmini_03.png" class="navmini3">
</div>
</div>
</div>
CSS:
.comprarbtn { width:175px;
line-height:51px;
background-image:url(image.jpg);
border:0px;
font-size:12px;
padding-left:10px;
cursor:pointer;
overflow:hidden;
text-indent:0px;
z-index:10;
}
#comprarbtn {
float:left;
position:absolute;
width:321px;
text-align:center;
height:51px;
z-index:1000;
display:table-cell;
background-color:#f4f4f4;
}
#wrappcomprarbtn { margin:0px auto;}
#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 { cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }
#navmini { width:135px; max-width:135px;}
I'm not sure what's going on with the CSS and HTML you posted, but to achieve what you want to do in theory:
Give the wrapping div a fixed width large enough to contain both the button and the images
Give it margin: 0 auto to center it and text-align: center.
Make the inner contents display: inline
css:
.wrapper {
width: 200px; /* Large enough to contain everything */
text-align: center;
margin: 0 auto;
}
.wrapper .buttons {
display: inline;
}
I am having problems with my sidebar_box, as it is displaying a unwanted white space at the bottom of my images.
The thing is that this seems to happen only when I place an image inside (this doesn't happen with text or ul lists)
You can see this jsFiddle
My HTML structure:
<div id="sidebar">
<div class="sidebar_box">
<div class="sidebar_header">Advertisement</div>
<img src="./images/square_add.png" width="180" height="150" />
</div>
</div>
The relevant CSS to reproduce:
*{
padding:0;
margin:0;
}
img{
border:0;
}
#sidebar .sidebar_box{
width:180px;
background:#fff;
border:1px solid #000;
}
#sidebar .sidebar_header{
width:180px;
background:#ddd;
border-bottom:1px solid #000;
}
I am clueless and I have already tried everything of my knowledge.
Add vertical-align: bottom to your image. This happens because images are displayed inline, meaning they have to leave space below in case of q, p or other letters that drop below the baseline.
write this:
img{
border:0;
vertical-align:top;
}
Check this http://jsfiddle.net/sKE6y/1/