Please see this:
My code looks like this now:
http://jsfiddle.net/Bd9Ut/
As you can see I only managed the get text above.. ("asd"), and i want it under, above the border image..
How can I do this?
Change this line:
.header-inner-lhs { width: 360px; height: 22px; margin-top: 73px; float: left; }
You can see it here: http://jsfiddle.net/Bd9Ut/4/
I simply adjusted the height down and added a top margin to keep the overall height the same, maintaining the overall element height at 95px;
Is that what you had in mind?
Related
So I want to write some css so I can make a preset div size that I can put the pictures in. Even if the picture is bigger than the div i would like to make it show only what the div can show you. So kinda like cropping it or something. I want to make a little thumbnail that you can click on and see the whole picture. I have no idea where to start. Please help. Thanks!
you can do something like:
div {
width: 300px;
height: 300px;
overflow: hidden;
}
the width and height will prevent the div from automatically re sizing, and overflow: hidden will hide (or crop) everything that excedes the div's boundries
this JSFiddle will show you how the JS, and CSS are really simple...
http://jsfiddle.net/ProgrammerKid/bh2dz8Lq/
(make sure that you look at the css... it is awfully simple)
#divId{
width: xpx;
height: xpx;
}
#imgId{
margin-right: auto;
margin-left: auto;
}
#imgId:hover{
width: 100%;
}
The image will shrink to the size of the div when you hover over it.
.yourDivClass {
height: #px;
width: #px;
}
.yourDivClass img {
margin-left: auto;
margin-right: auto;
}
This will create your fixed size div, and then center your image inside the div, with only the size of your div being visible of the image.
I've been trying to develop a simple page in order to try HTML/CSS and I'm trying to draw a colored column on the left side of the page using CSS. This is how I'm attempting to make it work:
#leftcolumn {
margin-top: 0px;
margin-bottom: 0px;
top: 0px;
left: 0px;
width: 60px;
height: 100%;
background-color: #276E55;
float: left;
}
And this is what I write on the HTML file:
<body>
<div class="leftcolumn"></div>
<!--rest of the code here-->
</body>
I'm assuming that since I set the column to float left, anything after it will automatically go to the space at the right of it. Also I'm setting the top and bottom margin because the document have a margin to keep the text from reaching the extremities of the page.
I'm assuming I'm doing something wrong regarding it, but I really don't know what am I missing here.
height is always based on the parents height, which is unspecified in this case. You have to use a fixed height to make the content visible. Furtermore you are using class but referencing the id (with #). Use .leftcolum instead.
Your left and top is not needed since you are not using position.
Update
To actually scale the div to 100% height you need as I specified a parent with a certain height.
You can achieve that by scaling the html and body to 100%.
html, body{
height:100%;
}
Here is the fiddle: http://jsfiddle.net/56b77g7t/1/
CSS notation is wrong... use . instead of #... and change height into pixels.. see demo below.
.leftcolumn {
margin-top: 0px;
margin-bottom: 0px;
top: 0px;
left: 0px;
width: 60px;
height: 900px;
background-color: #276E55;
float: left;
}
Click here to see the demo:
http://jsfiddle.net/fyee5nm8/1/
You are using class but your CSS is using an id (#) try changing the # for a dot (.)
Good afternoon stackoverflow community,
I have a file with some images inside it, and I want to use each part of this image separately without creating different files. So I started to look for ways to give position through CSS to "chop" the piece that I want to show.
I tried using properties like clipwithout success. The closest I got was giving a height and background-position when inserting some random text inside the DIV.
Here's a fiddle I did to demonstrate it, but since I couldn't update a image to it I just made with background-color.
.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
}
http://jsfiddle.net/PatrickBDC/HaGNa/
Is there a way to show that background, the same exact size but without the text?
Thank you very much!
You need to have a width for your div as well if the div is empty. try something like this
.icon {
float: left;
background: url () no-repeat 0 0;
height: 29.2px;
width:60px;
}
If you would like your div to display without content, you need to specify width in your CSS:
.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
width: 50px;
}
Here is a working fiddle.
Just add width: 100px; and height: 50px;property in your code. You can add width and height as per the part of the image which you want to show.
http://revive-blue-introblogger.blogspot.com/2010/07/demonstrating-all-theme-styles.html#comment-form
I was trying to install this theme on my blog and I noticed a little problem - the avatars in the comment section are not displaying in full, they're cut off as well as the container. I've edited the codes a hundred times but I just can't figure out what the problem is. Help would be much appreciated!
Use your developer toolbar (Chrome) and inspect the image. If you don't see anything wrong with the image, work up the DOM until you see the problem. Check their widths, heights, paddings, margins, and "top" and "left" CSS attributes.
This element <div class="avatar-image-container vcard"> has max-height: 36px which is too small.
The image element itself has width and height attributes of 35x35 even though the image is 45x45.
You're restricting the height, that's why it's cutoff.
Comment out the height rules like this:
#comments-block .avatar-image-container {
left: -41px;
width: 48px;
/* height: 48px; */
margin-top: 25px;
}
.comments .avatar-image-container {
float: left;
/* max-height: 36px; */
overflow: hidden;
width: 36px;
}
#comments-block .avatar-image-container {
/* height: 37px; */
left: -45px;
position: absolute;
width: 37px;
}
Turning off those 3 rules shows the image with dimensions that you've defined in the rule #comments-block .avatar-image-container img.
Remove these three and it should do the trick. I think padding is the main culprit here along with other things.
#comments-block .avatar-image-container img {
border-width: 3px 0 3px 3px;
height: 48px;
padding: 5px;
}
1) Remove padding from
2) Remove max-height from .avatar-image-container
3) You're done. Play with settings to get desired results.
.comments .avatar-image-container has max-height:36px. Remove it or your avatars will be chop off since this element has overflow:hidden.
The image also has height="35" inline, which is not affecting on chrome, but can be removed.
I'd like to have a div that is centered on the document. The div should take all the space it can to display the content and the content itself should be aligned to the left.
What I want to create is image gallery with rows and columns that are center and when you add a new thumb it will be aligned to the left.
Code:
<div id="out">
<div id="inside">
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
</div>
</div>
and the CSS:
img {
height: 110px;
width: 110px;
margin: 5px;
}
#out {
width: 100%;
}
#inside {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #e2e2f2;
}
Live version here: http://jsfiddle.net/anPF2/10/
As you will notice, on right side of "#inside" there is space that I want to remove, so this block will be displayed until the last square and all of it will be centered aligned.
EDIT:
Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg
It explains better what I'm trying to get.
EDIT 2:
I've uloaded another photo to show how it should adjust on lower resolution screens. notice the margins on the left and right. This is what I'm trying to get (unsuccessfully so far :\ )
https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg
EDIT 3 / ANSWER
well, thank you everybody for trying solve my problem. I solved this problem using JS, with a function that listens to a screen resize event. The functions checks the size of the right margin and add padding to the left so all the content is centered. I didn't find a solution using CSS. If you have one, I'd very much like to know it.
Thanks eveyone!
Specify a width for #inside to center it. I used width: 120px. Fiddle: http://jsfiddle.net/anPF2/7/
Additionally, CSS should be used for the height and width of images, not attributes such as height="300". The fiddle reflects this change.
use of display:inline-block takes extra margins. To remove those set font-size:0px to the #out container. See the demo
This is what you want to achieve? demo
img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}
#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}
#inside {
position: relative;
background: #e2e2f2;
}
You shouldn't use Pixels when laying out your css, it makes it very rigid and causes possible problems for people with high resolution screens and low resolution screens. Its best to declare it as a % or em (% is still probably slightly better when working with widths, but em for height is perfect)
First, the "outer" div must be declared to be smaller than what it is inside. For instance if "outer" is inside body:
#outer{
width: 100%;
}
#inside{
width: 80%;
margin-left: auto;
margin-right: auto;
}
#inside img{
height: 110px;
width: 110px;
margin-left: 1%;
margin-right: 1%;
margin-top: 0.5em;
float: left;
}
Okay so, since "inside" is 80% of "outer"'s width, the margin-left:auto, margin-right: auto together make the "inside" div center within the "outer".
Setting the float property to left moves all the imgs of inside to always try to move left while it can.
EDIT: I fixed this after looking at your picture you provided.
I haven't tested this but I believe it should work, let me know if you are having more problems.
To make the boxes not go the entire width of the page, try setting the width less than 100% on #out and add margin:auto; to center it.
#out {
width: 90%;
margin:auto;
}
http://jsfiddle.net/anPF2/36/