I am making an list of products in a shop website using asp.net and html.
my Items are showing up alright, But i don't like the look of the button being misaligned depending on the prodcut name length.
i am trying to keep the details button fixed at the bottom regardless, like the box like it is on product 1,3 , and 5.
The other products' names push the text down.
these are my css in question.
#GameCatalogue
{
list-style-type:none;
}
#GameCatalogue li {
/* http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ */
width: 200px;
min-height: 320px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
border-radius: 7px;
}
.detailsButtom{
position: relative;
top: 25px;
/* i tried, vertical-height, alignment, position fixed, absolute, messed around with z-index, as well as moving the items in different locations through my li containter.
}
and this is my output html (for 1 item)
<li>
<div class="img">
<img alt="" src="../Images/mariou.jpg" id="Graphic1">
</div>
<div class="info">
<h3 id="Name" 1'="">SuperMario U</h3>
<p id="Descr1" data-description="Super Mario u is the latest installment of the classic mario franchise. up to 5 players simultaniously can traverse a vast world spanning over 90 unique levels.">
Super Mario u is the...</p>
<div class="price"><span class="st">Our Price:</span>
<strong id="price1">$45.99</strong>
</div><div class="actions">Details</div></div></li>
To start with, please notice that the CSS code you've posted doesn't fully match the DOM that you've posted (in the DOM you have no element with the detailsButtom class).
To achieve what you want, you need to set position: absolute for the element you want to "stick" to the bottom.
Then you need to set its container's position to be position: relative. Now you can set the coordinates of the inner element as you wish (with these attributes: left, top, right, bottom).
So, set the .detailsButtom (Should be written bottom) class likewise:
.detailsButtom {
position: absolute;
bottom: 10px;
left: 0; /* You can change these values */
}
and set the container's class to be (I assume it's the li in your CSS):
#GameCatalogue li {
position: relative;
}
Further Reading
CSS Tricks - Absolute Positioning Inside Relative Positioning
Learn CSS Positioning in Ten Steps
Use position:relative for parent elements and use position:absolute for children elemenst that we want change positioning manually. When we use the position attribute, we must be sure that uses one of these groups:
top, left attribute
top, right attribute
bottom, left attribute
bottom, right attribute
Please do not use (top, bottom) and (right, left) attribute simultaneously.
Related
I'm trying to achieve a look where I have all of the icons justified to the left while keeping the text centered and have the text wrap onto another line if necessary. However, I want the icon to be inline with the title. Right now it looks like this:enter image description here
I'm not sure why some of the boxes are stretching vertically and why the icons are floating on the line above the text. Also, some of the text is shifting outside of the grey boxes they are supposed to be in. How do I get every icon/title to look like the top example (ie eye glyphicon with "Look Inside This Chapter" text)?
Here is the HTML code I'm using:
<div class="text-left"><span class="glyphicon glyphicon-download">
</span> <div class="text-center">Teacher Pre-Assessment</div></div>
I also tried this code to see if that would work but I'm not having any luck:
<div style="float: left; text-align: left"><span class="glyphicon
glyphicon-download"></span> <div class="text-center"> Teacher Post-
Assessment </div></div>
In that scenario, you can set the icon position to absolute and then left:0. However, that can make the icon just go outside the .text-left div. So you need to set its position to relative, because absolute elements are positioned according to the closest ancestor that has position relative.
.text-left {
position: relative
}
.text-left .glyphicon {
position: absolute;
left: 0;
}
Then you're free to position the other elements as you want.
You could put the icons into a pseudo class, so they don't clutter up your html:
.text-center {
padding-left: 25px;
position: relative;
}
.text-center:before {
position: absolute;
content:"";
top:0;
left:0;
width: 20px;
height: 20px;
background-image: url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png) ;
background-size:100% 100% ;
}
this basically creates an absolute positioned div in .text-center , thats why .text-center needs some padding so the text doesn't run below the icon.
Example: https://jsfiddle.net/6mjscdxL/
More Details about pseudo classes: https://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/
I'm attempting to stack divs (styled to look like sticky-notes) so that part of the divs on the bottom hang out. I initially considered okay, I'll just style the top-most div as normally, and then only style the parts that you can see with the bottom divs (as opposed to making all divs the same width+height and stacking them). The issue is that I also want to style the border-radius of all divs the same, and if I do it the non-stacking way, then border-radius applied to the top div doesn't yield the same design as any border-radius applied to the bottom divs (because the width+height is different for the top div, I'm guessing).
<div class="stickynote1"> content <div>
<div class="stickynote2"> content <div>
<div class="stickynote3"> content <div>
Is there a way to fix the border-radius issue without resizing the divs to all be the same width+height?
If I were to resize the divs to all be the same width+height, how can I stack them? It seems that position:relative and z-index combination on the divs won't work because position:relative created a new container block, thus somehow making the z-index not work with the other divs' new container blocks.
If I were you, I'd:
add another class called stickynote and find all the common style (in this case border-radius) and apply the class to all of them
I'm not sure what you mean by stacking them -- when I read your initial paragraph, I thought you meant stack them vertically on the y axis, but seemingly, you're struggling with z-axis, so it seems like you want to stack them on the z axis. In which case, I'd put all three of them in a container, position that container relative, and position the three stickynote absolute, with different z-index, but identical x/y position.
Please do the following for better scalability:
Use a common class.
Close the </div> correctly.
Check the snippet.
Snippet
.stickynote {
position: absolute;
background: #0f0;
border: 1px solid #f90;
border-radius: 5px;
padding: 10px;
width: 75px;
top: 10px;
left: 10px;
}
.stickynote + .stickynote {
top: 20px;
left: 20px;
}
.stickynote + .stickynote + .stickynote {
top: 30px;
left: 30px;
}
<div class="stickynote"> content </div>
<div class="stickynote"> content </div>
<div class="stickynote"> content </div>
I've got some linked images centered in a div. After the last image, I want to add a text link. For some reason, the links don't wrap around the images, they sit below the images, meaning my text link at the end is in line with the previous links, below the images themselves. What I want is for the text link to be at least in line with the images.
Check out the JSFiddle: http://jsfiddle.net/RFzMv/
If I float the links around the images, then they are the same size as the image and everything works as expected, but then the images aren't centered in the master div. The number of images can change, as can their dimensions, so I can't set them using absolute or anything like that.
How can I get the link to be the same size and position as the image it surrounds without using float, so the following link is in line with the images?
The HTML is nearly the same as yours except for the third child div. I wrapped the text in a <span> div and then that is contained by the a.imageCount link.
<div class="centered">
<a class="image-link" href="">
<img src="http://placekitten.com/100/100" width="100" height="100" />
</a>
<a class="image-link" href="">
<img src="http://placekitten.com/110/110" width="100" height="100" />
</a>
<a href="#photos" class="imageCount">
<span>some text</span>
</a>
</div>
The CSS looks like this:
.centered {
width: 500px;
height: 300px;
background-color: #EEE;
text-align: center;
}
a {
text-decoration: none;
outline: 1px dotted blue; /* optional to show content boxes */
}
.image-link {
display: inline-block;
vertical-align: bottom; /* try out: bottom, middle, top */
}
.image-link img {
vertical-align: bottom; /* get rid of small white space below images */
}
.imageCount {
display: inline-block;
border: 1px solid blue;
padding: 5px;
border-radius: 5px;
background-color: lightgray;
margin-left: 10px;
}
.imageCount span {
/* in case you need to style the text in a special way */
}
You can see the demo fiddle at: http://jsfiddle.net/audetwebdesign/uBVHC/
How This Works
Basically you have three inline block child elements in div.centered, so text align works as you expect.
I assume that one of the images will be the tallest element in the line and that you would like to have some control over the positioning of a.imageCount.
If you apply the vertical-align property to .image-link, then that will determine how the images are aligned vertically with respect to the a.imageCount element. You can try out the three principal values (top, middle, bottom) and pick one that suits the design you want.
If you want to adjust the top (or bottom) position, simply use a top (or bottom) margin on .imageCount and display: top (or bottom) on .image-link.
You can adjust the horizontal separation you a left margin on .imageCount.
If you have a container div that is position relative then you can have a div inside it with position absolute that is positioned relative to the containing div and not the entire window.
This would let you keep your centered images while placing the link anywhere you want.
#centered { position: relative; width: 500px; height: 300px; background-color: #EEE; text-align: center; }
.link-that-you-want-to-be-inline { position:absolute;margin-top:50px; }
here is a fiddle:http://jsfiddle.net/RFzMv/39/
I have a list of names which is rendered inside <ul>. I am applied some CSS code but facing some browser specific issues.
Chrome : List element is getting displaced by 1 row.
Firefox : All list items collapsing to one item.
Code snippet (JS bin editor)
HTML
<div id='container'>
<ul class='list'>
<li> <div class='rel'>
<div class='abs'> item 1 </div>
</div> </li>
... More items similar to above one
Css
#container {
height: 100px;
overflow-y:scroll;
width: 200px
}
.list {
background-color: skyblue;
}
.rel {
position: relative;
}
div.abs {
position: absolute;
left: 20px;
}
I want to know the reason of this misbehavior in both the browsers. Have I written wrong CSS ?
Update: With in <div class='abs'> I have a lot of code which I have not added here as it is not necessary and the content of abs div is positioned with respect to its parent i.e. <div class='rel'>
The problem is indeed the
div.abs {
position: absolute;
left: 20px;
}
This positions every element with class "abs" 20px to the left (and 0px from top) of the ul element.
What would you like to achieve? Your menu horizontally or vertically?
Horizontally: Use float:left or display:inline with a margin-left:20px;
Vertically: for a 20px margin-left:
http://jsbin.com/ediloh/17/edit
I first added margin:0px to delete the top and bottom margin of the ul element. Next I added a left margin of 20px to move it to the right.
alternative: put margin-left on the li-element instead. This will not move the circles
The divs with position:absolute are taken out of the page flow, basically causing their parent divs to have no content at all (no content amounting to any width or height that is). So they will collapse.
What outcome do you actually want. You are fixing the div.abs to be indented by 20px inside its containing div.rel.
Could you give some idea of what you are trying to achieve.
Wing
I am trying to add the word "Invitations" to the top right of the page aligned with the "back to photos" link. However, when I add a new <div> then start a <p> the paragraph does not align to the page properly at all once I apply CSS.
I have uploaded the page where I am having trouble: http://ashliamabile.com/invitations.html
This worked for me:
HTML:
<div id="backtophotos">
<img src="images/backprint.png" border="0">
<p class="title">invitations</p>
</div>
CSS:
/*Drop the width property and set div to position:relative */
#backtophotos {
height: 20px; /* removed width */
background-repeat: no-repeat;
margin: 0 0 0 100px;
position: relative; /* set positon to relative */
}
/* Set title p to position absolute and remove margins: */
.title {
position: absolute;
right: 0;
top: 0;
margin: 0;
}
The above works because the div width is already "set" by the outer div, so you only need to worry about where the top right corner actually is if you change the layout. Otherwise, float-free right-aligned header.
Also, the only reason I explicitly set my margins to 0 for the .title is because p elements have their top and bottom margins set (and I think line-height). If you changed the p to a div (your choice, and a p has some value of being more explicitly meant for text), then your .title rule would just be:
.title {
position: absolute;
right: 0;
top: 0;
}
which is exactly what you are looking for without any additional tricks or tweaks (which is the name of my halloween rap album).
Personally, I would actually go with something more like:
<div id="backtophotos">
<h2>back to print<h2>
<h2 class="title">invitations</h2>
</div>
And deal with clearing all of the default browser css, as the above would be most semantic. I would also advise not using the image for your "back to print" text and explore one of the many CIR methods out there, as a screen reader won't be able to read the image aloud.
<div id="backtophotos">
<img src="images/backprint.png" border="0">
<p>invitations</p>
</div>
CSS
#backtophotos p{
float:right;
}
#backtophotos a{
float:left;
}
#backtophotos{ /*Clear float : any one of this method - micro clearfix, clearfix, overflow method, float, clear both */
overflow:hidden;
width:100%;
}