please visit link1 , here everything is fine.
please visit link2
here, 1)i want to move "Add to cart" and " buy now" buttton bit below.
also I want to display the text "Selling Price (Free Delivery )" below "RS 50".
I want to display link2 as like link1.
we are using following code :
.product-ship .sell_price {
color: #848484;
font-size: 12px;
position: relative;
top: -130px;
}
product-view .add-to-cart button.button span {
float: left;
font-size: 16px;
font-weight: normal !important;
text-align: center;
text-transform: uppercase;
your define height: 75px; in your .price-box please it's change into this
.product-view .product-essential .product-shop .price-box{height:auto;}
Add top margin to .product-options-bottom
.product-options-bottom {
padding: 0;
margin-top: 45px;
}
display table and height auto solution of you problem
.product-view .product-essential .product-shop .price-box
{
display:table;
height:auto;
}
Never use the auto value until and unless it is mandatory, otherwise it will take the default height corresponding to the the height value that has been set to that particular division.
Better to give height in pixel(px) as this is dynamic value and can be fitted to any of the screen size.
In order to move you can use tag 2 times.
I think this issue is due to missing of tag. Just try to place tag at after these two button to bring "Buy now" button at the end of the both button.
Same thing is applicable to your test "Selling Price."
Just try and let me know, if the issue persist.
Overall your code is correct.
Related
I developed a text area that allows me to associate people. My problem is placing the responsive button (always in the bottom right) and making the text not "pass" over it.
Can anyone help me?
DEMO
css
.Sendbtn {
width: 30px;
height: 30px;
height: auto;
float: right;
margin-right: 21px;
margin-top: -76px;
position: relative;
cursor: pointer;
}
HTML
<dx-html-editor>
<dxi-mention
valueExpr="text"
displayExpr="text"
[dataSource]="employees"
></dxi-mention>
</dx-html-editor>
<img
class="img-responsive Sendbtn"
src="https://www.freepnglogos.com/uploads/search-png/search-icon-clip-art-clkerm-vector-clip-art-online-0.png" alt=""/>
Problem
The text passes over the button :(
If you dig down into the dx-html-editor element you can find the <p> element that contains the text. If you give this a margin-right the text will stop running over the button.
.dx-htmleditor .ql-container .ql-editor p {
margin-right: 30px;
}
You might need to play around with the exact selectors to get it perfectly right but that should be step in the right direction.
At the bottom of my page there are 3 buttons. "Send, Save and Cancel" buttons. The Save and Cancel buttons are the same height but the "Send" button is different from the other two. Why is this happening?
I read on another post that said elements render buttons different from normal buttons so I tried to fix it with the solution given but it didn't work. I also tried removing element but it still didn't work. Thanks for your help!
Buttons Styles
background-color: #8f81e8;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
font-weight: 300;
font-size: 16px;
cursor: pointer;
padding: 1rem;
CodePen
It's because your send is input while other elements are button.
Add border: none; to your css
you can give static height to all three buttons.
You have two different divs: .user-messages (the left one) and .settings the right one.
The left one contains an input, while the right one contains two buttons. So you can either add border:none to the left one to make the border disappear and then re-arrange your layout to use a button instead of an input.
Update
Wrap the buttons into a seperate div below the div of the two pages and do the following:
div {
display:flex;
justify-content:space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you want to have */
}
<div style="width: 100%; background-color: green;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
</div>
Is the result of my snippet the desired outcome?
Seems to be the display: flex on the settings-btn-box that is causing it. One solution could look something like this:
.settings-btn-box {
/* display: flex; */
}
.settings-btn-box button {
width: 49%;
}
.btn-save {
/* margin-right: 10px; */
}
.btn-cancel {
/* margin-left: 10px; */
float: right;
}
Personally, I'm not a big fan of float, but since it's the last element in the div it should be fine.
Actually I'm new to web designing and I'm going to make my own social network and I'm using the amazing layout of Angelsmood.com music social network.
Everything is OK with designing except that I can't place the "Sign Up" button on the right place; it has a lot of margin on its right side. The problem is that there's no margin in my CSS code. Here's my code:
<div id="header_register">
Sign Up
<div>
Artists and their true fans are human angels.
Find them, connect with them and become one of them.
</div>
</div>
And Here's the CSS:
#header_register {
position: relative;
font-size: 12px;
}
#header_register a {
display: block;
height: 30px;
line-height: 30px;
background: ##810101;
color: #fff;
font-weight: bold;
font-size: 14px;
float: left;
text-decoration: none;
border: 1px #508F54 solid;
}
Please help me to fix this.
I made a fiddle and tried to fix your problem the best I could based on the information you gave us.
jsfiddle
Things I did... took your line-height out and moved the link after the div so you didn't have to use it... then I margin: 0 auto to center the <a> tag.
Instead of float: left;
I took it out added a width of the <a> tag so it did not span the width of the screen.
If you need this to function in a different way that I have illustrated ask and I will show you on the fiddle I posted.
I am designing a website, with a quote on every page. I am applying CSS to this quote to make it look the best it can and stand out. However I am having a couple of issues.
.quote {
font-size: 18pt;
padding-top: 50px;
padding-bottom: 15px;
text-align: center;
line-height: 0.25;
}
.speech_mark_large {
color: #203D69;
font-size: 120px;
vertical-align: top;
}
<div class="quote">
<span class="speech_mark_large">“</span> Leading the way with innovative design of corrugated Point of Sale displays and packaging offering bespoke design to fulfill your brief.
<span class="speech_mark_large">”</span>
</div>
Also on JSFiddle.
I want the two lines of the quote to be closer together, but when I apply a line height, to solve this, it pushes the speech marks up into the previous line. How do I solve this?
You should set the line-height on the complete .quote element. Next you set vertical-align to top for the inner .speech_mark_large element. By changing the line-height of the .quote element you can tune the line spacing to what you think looks the best.
EDIT: I have added top and position to .speech_mark_large so you can change the vertical position of the quotes.
CSS
.quote {
font-size:18pt;
padding-top:15px;
padding-bottom:15px;
text-align: center;
line-height: 30px;
}
.speech_mark_large {
color:#203D69;
font-size:50pt;
vertical-align: top;
top: 5px;
position: relative;
}
See this updated JSFiddle
try this:
.speech_mark_large {
color:#203D69;
font-size:50pt;
line-height: 35px;
vertical-align:text-top;
}
line height will make them take up less space from the inline text height (which in-turn makes them float over your other text).
The vertical-align will fix this by telling the quotes to align themselves to the text's bottom, rather than normally.
input field are not getting aligned and they flow out of the container. What causes that? Here is the code and page. I need the labels aligned left and input field all aligned too. Is it ok to give -ve margins??
the .para#info div is flowing out of the page. It is supposed to sit parallel with .para#news
You have overdone your CSS and have many unneeded properties.
Start by giving your label the following CSS properties, then style the inputs as you wish.
label {
width: 100px;
display: inline-block;
margin: 2px 6px 6px 4px;
text-align: right;
font-weight: bold;
color: #555;
}
Check working example at http://jsfiddle.net/6Eyef/1/
Its ok if you use..
margin-left: -220px;
margin-top: -150px;
for info Div.
thank you.
I'm not sure if I understand your question correctly. But to align <input> elements with their labels, the <label> tags need to have to following CSS:
display: block;
float: left;
width: (a value)px;
And you need to add clear: left to the <input> elements
Edit: Hussein's answer is better