I want price be at same line, just above View details button. I have tried
vertical-align: bottom
but no luck.
http://enterprise-demo.user.magentotrial.com/women/tops-blouses.html
You can also move your
<div class="price-box">
in your
<div class="action">
as his first child.
Give each div some class like this
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
If you can alternate the HTML structure, then you can copy div.price-box into the .actions div, as #Roy says.
Else, you can do
.products-grid .price-box{position:absolute;width:100%;bottom:90px}
The prices are not aligned vertically with the "view detail" button because the the div.action block has position:absolute. To make the price always be just above the "view detail" button, you can make it absolutely positioned.
You have a lot of ways of align vertically a div. The best way is learn the concepts about vertical aligning and use the best approach to your case. This blog post shows 6 ways of doing that and has helped me a lot.
Related
I am building a simple web-page with a few sections in it and I've been stomped at how to solve one little styling issue.
I have several DIVs with solid border and a few other GUI items (text boxes, buttons, etc) inside each one. Each DIV kind of "boxes" related items into a nice, visually pleasing and meaningful way. However, I would like to add a title or a caption onto the DIV in the middle of the border to describe that box's function. So far I can add text below the border or above, but not in the middle. Is that even possible?
Thank you!
What I have:
What I want:
What you want looks like a fieldset element with a legend tag inside, but I wouldn't recommend using them.
Just use position: absolute like this:
<div class='section'>
<header>Header</header>
....
</div>
.section{
position: relative;
}
.section header{
position: absolute;
top: 0;
transform: translate(0, -50%);
background: white;
}
What you looking for is build in HTML nativly: The border Frame is part of the <fieldset> while the title is the <legend>
<fieldset>
<legend>Header</legend>
</fieldset>
is there any solution how to move text around in header section?
I have an <h1> tag whith email and I would like to move like 20% from left side of page and 50% form right side but all I can found is text-align:right,left, etc.
I add image so you can see on top of page there is this dark box whith email and view basket. How can I move that text the way I like?
There's a couple of ways you can position things like that...
Positioning
You are able to position elements using absolute and relative positioning, as seen in the example below, you can use position: relative for the parent container and position: absolute for the child and then use: top, right, bottom or left and define how far away you want the child element to be from its parent. As seen in my example below.
http://jsfiddle.net/8aL05tey/4/
header.header {
position: relative;
}
header.header h1 {
position: absolute;
left: 20%;
}
<header class="header">
<h1>
email#email.com
</h1>
</header>
Flexbox
You can also responsively position elements with flexbox. Flexbox can be relatively hard to understand if you've never messed around with it, there are plenty of SO questions with explanations in it. You can also read a bit about the properties here.
Floats
Alongside with positioning, you can float divs and other elements left and right using float: left and float: right. You can ready more about floats here. :)
There are plenty of options for what you want to achieve and no real "right" answer, it's about exploring what works for you!
Have a great day!
I want to center(horizontaly) three icons(inline) inside a div by using css. My div is centered inside another div but I want to center the content(the three icons) inside that div.
<div id="browsers">
<div id="browsers-wrapper">
<img src="Images/firefox.png" class="browserIcons">
<img src="Images/chrome.png" class="browserIcons">
<img src="Images/opera.png" class="browserIcons">
</div>
</div>
Also a useful article on centering content with css to understand more about the procedure?
Thank you!
I actually managed to do it myself! I still need to understand the basic around block and inline elements..
Thank you though.
#browsers-wrapper img{
display:inline;
margin:auto;
width: 8%;
height:auto;
}
try this commands , it may works :
#beowser-wrapper img {
margin : auto 0;
display : block;
width : 100%;
}
I recommend to take a look in this tutorial which describing these elements
Learn CSS Layout
And in here You can also look into Inline and block elements that described by picture examples :
What’s the Deal With Display: Inline-Block?
I hope it'l help you enough.
http://www.fccorp.us/index.php
The vertical column to the left is my site menu system. The column is a div with a height:100%, and the different details are div's laid over it.
The buttons are DIV's with blank buttons as backgrounds, with links on them. I have two different size buttons, the big one 60px tall and the small one 30px. Using CSS can I get the links to be centered vertically regardless of the height of the button's DIV?
I've looked here and used a few CSS sites & Android Apps. The site here suggests I can't, but I can't understand why the CSS group would not create a vertically centering function since it seems so needed.
Am I just missing something or am I really trying to get something that isn't available with CSS?
Based off your site, you can use line-height to adjust the vertical positioning of the text.
Try applying this to your 30px tall links:
line-height: 30px;
And this for the 60px tall:
line-height: 60px;
Additionally, you should not be nesting <div> tags within <a> tags.
Use this:
.menubuttonthick{line-height:60px;}
.menubuttonthin{line-height:30px;}
That will center all of your links.
On another note, currently you have the following structure:
<a href="#">
<div>text</div>
</a>
That is invalid HTML. I'm not a "HTML must be valid at all times" type of guy, but when you can fix it that easily, I think it wouldn't hurt making it valid. You should use the following:
<div>
text
</div>
Add this to your CSS. It will work regardless of the height of your buttons:
.menubar a div {
display: table-cell;
vertical-align: middle;
}
I have put together an example bit of code as I am trying to get 2 images of different sizes to be aligned at the top such as shown below:
HTML
<div id="test">
<div class="social-media">
<img src="http://www.ok.gov/ltgovernor/images/Facebook-icon.png" width="120"/>
<img src="http://semanticweb.com/files/2012/01/twitter_logo.jpg" width="50" />
</div>
</div>
CSS
test {
width:980px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.social-media {
position:absolute;
background-color:#000;
right:0;
top:0;
vertical-align:top !important;
}
I realise now after reading a few posts online that vertical-align will not work in divs and solutions have been to use absolute positioning instead. The only issue is that I am already using absolute postioning for the images parent div.
Would it be good practice to do absolutes inside a parent div that is also an absolute.
However if i was to put an absolute positiong on the img then all img's would stack ontop of each other unless I was to specify each and every img with a class.
So my next thought was to put a float on img within the div. I just wanted to know if this is good practice or if anyone can tell me a cleaner way of doing this?
Also, if I were to want the images to be centrally aligned, how would this be done as the float method works in the sense of getting the images to align at the top but I am not sure how I could align centrally or maybe at the bottom?
Put overflow:auto on the social-media div then add float:left to your images.
Keep in mind you can also use negative integers like vertical-align: -1px; to go up -1px
For more details see CSS vertical-align Property and try it out here.