I want to position a few small images beside a div and margin them correclty instead of being overlapped by the emphasized textcenter-div.
JSFiddle Demo:
`http://jsfiddle.net/k7gLfeuc/`
The Problem is: When I scale the browser-window, the images disappear behind the "center"-div instead of margin to it.
Both Navigation-Div and Center-Div are margin pretty well to each other. But the images wont.
I tried it already with "clear:left/right/both", but with no success.
What am I doing wrong? I just want the images left to the center-div to margin correctly to the center-div.
Than you.
Is this what you need? live demo http://jsfiddle.net/k7gLfeuc/2/
Add below to your existing code:
#side {
left:0;
width: 19%;
overflow: hidden;
}
Related
I'm setting a background image on a page, but for some reason, the image is ONLY showing if I had a height. I don't want to set a fixed height though.
Any thoughts?
<div class="thinkBPG content"></div>
CSS:
.thinkBPG.content {
background: url(./home-blueprint.png) no-repeat center center fixed;
}
Ignore this.
I needed to remove the center center fixed.
I told you it was something silly.
The issue is because the content within that div is floated, so you need to tell the browser you want that div to contain it's floated contents. There are a few ways to handle this...you can float that div, you can put overflow on it, or you can use a clearfix solution.
Simplest way without introducing a lot of new code is to simply take off the height, and then add
float: left;
width: 100%;
I have a couple of questions. Please see http://jsfiddle.net/POZR2/
Firstly if you scroll to the right you will see a white space, if you change the size of the screen/result box the size of the white space gets larger/smaller. The css for this is under the 'full' div and is:
#full{ background-color:#262626}
Secondly even though div id noint_box1 is centered in css it appears to be aligned left. This div is basically the 'body' of the html from the first heading to the last picture.
Thnkas
Give #full a min-width of 1061px - this for the first of the two issues.
For the other one... well, I'm not quite sure it's this that you want, but try applying the following rules to #noint_box1:
width: 958px;
margin: 18px auto;
your table is inheriting your centering, but not using it. add margins to it if you want it centered
table { margin: auto; }
I'm trying to place an image above the top bar of a div on my website on the left side of where the navigation bar is. My Attempt
It should look Like this
And I would like it to look Like this
I've tried multiple things such as placing the div for the image in different spots in the code, and changing css elements for the div, but everything seems to push the other content images out of place on the website
add this ...
.photo {
position: relative;
top: 4px;
}
and change the margin on #container to...
#container {
margin-top: -1px;
}
Your css isn't in very good shape, but, using your methods here's how to do it:
remove the margin-top from #container
add vertical-align: top to the img inside #photo
change the top in #extraDiv1 to 246px
change the top in .horizontal to 218px
I guess that should do it.
I am trying to figure out the best approach to have a link with an image floated next to it inline, that will force the link to become multi-line as needed while keeping the image inline floated next to it.
I setup an example here - http://jsfiddle.net/ubernoob/tYeGR/
If you size the result window you will see that once it hits a small enough width the image will fall below the link.
How can I code this so the link will go to multi-line and leave the image floated next to it?
Try putting <img> tag before <h3> and remove float:left from <h3>
I've edited the jsfiddle: http://jsfiddle.net/tYeGR/7/
this example works: http://jsfiddle.net/jalbertbowdenii/tYeGR/18/ but i changed your floats to absolutely positioning the img's. if that's not good enough, #mediaqueries are the way to go. i tried two in jsfiddle but to no vail. probably user error.
You can absolutely position the images in their rows and then add some padding to the <h3> elements so the links don't get covered by the images:
.list img {
position : absolute;
right : 10px;
}
.list h3 {
float : left;
font-size : 12px;
padding : 10px 60px 10px 0;/*notice the extra 50px of padding I added to padding-right*/
min-height : 50px;/*Notice this is added beacuse the image will not dictate height since it is positioned absolutely*/
}
Here is a jsfiddle to mess around with: http://jsfiddle.net/jasper/tYeGR/19/
I have an image and a border on the bottom of the div that contains it. The problem is that I want the border to be directly on the bottom edge of the image. Instead, there seems to be some natural padding on the bottom that I want to get rid of. How can I do this?
You need to set the images vertical align to top in your CSS :)
img { vertical-align: top /* can be baseline */ }
Hope that helps!
To put border on image
img{
border:1px solid #000;
}
Please share your code to solve your padding issue.
Why don't you apply the border directly to the IMG tag instead of its container DIV?