does somebody know why the border on the right side is a bit higher than the image? How can ensure that the border on the right side of the div has the same hight as the image?
Example:
http://codepen.io/anon/pen/bNPeLv
Code:
<div class="footer-widgets-2">
<img src="http://www.fertighaus-keitel.de/uploads/tx_7thsensegallery/Haus-Wiesenweg-Nacht_01.jpg" alt="Footer-Pic">
</div>
.footer-widgets-2 {
width: 810px;
border-right:1px solid #a3a3a3;
padding-right:20px;
margin-right: 20px;
}
Thanks!
You can add display: block to remove the small space on the image
Vertically aligning the image to the middle will solve this.
img{vertical-align:middle;}
Related
Looking to have an image (logo) on the left side of a div with text (a title) centered on the div. A basic question, but some caveats.
If I use position: absolute on the image, the text is centered, but when I resize the window the image covers the text. Want this to be a responsive page where the text is centered until it hits the image and the won't overlap. https://jsfiddle.net/mwqwmkdm/
If I use float: left on the image, then the text is not really perfectly centered. https://jsfiddle.net/mwqwmkdm/1/
I could create a margin-right of equal size on the other side of the text, but then I'm wasting those pixels on smaller displays and I don't want to do that. Eventually, it will be more than that one line I am centering. https://jsfiddle.net/mwqwmkdm/2/
Basically, I want:
the text centered as long as the screen is wide enough
the text to wrap around the image and not be in front of or behind it when the screen isn't wide enough
not to lose any screen space except for the image itself
Thanks
If you're willing to try an alternative to CSS float and positioning properties you can easily accomplish your task with CSS Flexbox. Code is clean, simple, efficient and easy to maintain. Also, flexbox is now supported by all major browsers.
DEMO
HTML
<div id="container">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<p>centered text</p>
</div>
CSS
#container {
display: flex;
border: 2px solid black;
background-color: aqua;
}
img {
margin: 10px;
}
p {
border: 1px dashed red;
padding: 5px;
flex-grow: 1;
text-align: center;
}
UPDATE
Here's one way to keep your text centered on the full width of the container, while not allowing the text and image to overlap on smaller screens. No flexbox, no deprecated tags. Just a very simple media query.
Wide screen
Narrow Screen
DEMO
Flex box has compability problems with some browser. Just Create BFC for the <center></center> using overflow:hidden;
Check this out! jsfiddle
You can use flexbox like this:
.wrapper{
display: flex;
}
.content{
flex-grow: 1;
text-align: center;
}
<div class="wrapper">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
Centered Text
</div>
</div>
Check this out for more info https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
Edit:
To center it respect to the container you can use a modification of you second example using float: left but instead to set the margin to the center you would put the text in a span and set the margin-right to it like this:
img {
float: left;
}
.content {
text-align: center;
}
.content span{
margin-right: 100px;
}
<div>
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
<span>Centered Text</span>
</div>
</div>
I have a main div, and inside it..I have 3 divs
In normal view it works perfect i need the exact samething but for some reason if i resize my browser one div at the right side will float down i figure the reason for it but i don't know how to resolve it . floating down of div is due to the border i have give to the div but i have given the borders with perfect calculations but i don't know why still it happens
HTML
<div class="box">
<div class="box_top"></div>
<div class="box_left"></div>
<div class="box_right"></div>
</div>
CSS
.box{
width:500px;
height:300px;
}
.box_top{
width:500px;
height:49px;
border-bottom:rgb(239,239,239) 1px solid;
background-color:#636;
}
.box_left{
width: 249px;
height: 250px;
float:left;
background-color: #093;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
}
.box_right{
width:250px;
height:250px;
float:left;
background-color:#006;
}
please go hear for the issue : http://jsfiddle.net/gtczu/
Add min-width: 500px; to .box, when the browser window gets smaller than 500px, the horizontal scrollbar will appear.
Check your updated Fiddle
It's because you are floating left without having a width set on the container. I would set a min-width or just a width on the containing div.
this is because the total width of all your inner divs get larger than the view port size when it is resized....thats why the last div is floating down when resized.try to express all width in percentage..i think this trick may work
I am sorry if this is a bit of a n00b question but for the life of me I cannot get this lightbox gallery lined up centrally inside my "content" div.
http://www.justthisdesign.co.uk/bathroom-gallery.html
I am ashamed to be asking such a stupid question but honestly I have tried everything. I have given the last image in each row a class of .last, then played around with padding-right and margin-right but it seems to have no effect.
Use <div id="content" class="clearfix thumbs" style="text-align: center;">
Use Margin 4 For all of your Pics in the gallery on the both sides than just Right side!!.You can Remove horizontal padding of content div and adjust the padding area in the width of the div.
text-align: center; on content div.
give your content div a text-align:center; and give your last images in each row a margin-right of 0 otherwise you will have the extra space on the right side.
#content {
padding: 15px 30px;
background-color: #F8F8F8;
}
Instead of padding try use margin:
#content {
margin: auto;
width: 900px;
background-color: #F8F8F8;
}
And mess around with the width to control its position.
hope this helps.
I have a div with a thick border of 10 px. Inside the div there is a pic and some text.
The pic is slightly moved on the border (is a must, should be above the border).
<style>
#main
{
border:10px solid red;
width:400px;
}
.img-to-border
{
margin-left:-10px;
margin-top:-10px;
position:relative;
float:left;
}
.text{
border:1px solid blue;
text-align:right;
padding-right:30px;
}
</style>
<div id="main">
<img src="https://www.google.by/logos/2012/slalom_canoe-2012-sr.png" alt="" class="img-to-border">
<p class="text">DCBA padding-right of text is always 30px </p>
</div>
Here is a working code:
jsFiddle
The problem is if text is one to four symbols longer, it falls down. But, I want it go above the image (above I mean z-indexed, not from uppper side of the screen to the lower side of the screen).
P.S. The padding-right is always 30px.
So, it goes absolutely the same way like you type numbers on the calculator - from right to the left and above the image, in one line. How to do that for my example?
Again, sorry I repeat that, The pic is slightly moved on the border (is a must, should be above the border).
you can make #main position:relative and the image position:absolute so the text goes over it. Check the updated jsfiddle here http://jsfiddle.net/85Zk5/2/ (actually you don't need the float in .img-to-border this way, you can remove it from the jsfiddle should be the same)
I can't get your problem properly. I tried with 1 to lots of letters and the text is always placed on the sameline, so it is the image. If you are having any trouble with the image by itself, you could work on
#main {position: relative;} /* Keep it just the same */
img {
position: absolute;
top: -10px; left: -10px;
}
The image would take no place at the page, but would still be visible and with no bumps with the textbox.
Here is a working fiddle: http://jsfiddle.net/BDFJM/
sorry if I get your question the wrong way.
I have a website in which the layout looks something like this: (image below)
On the left panel, I have a div which displays a logo. I have another div which I want to put beneath the logo and so divs these have to be these stacked over each other. I tried fiddling with the z-indexes, but didn't quite get the rquired thing.
How can this be done?
If z-index is not working for you try nesting the logo <div> in a wrapper <div> something like this
<div> <!--div container to hold the logo div-->
<div><!--Logo div--></div>
</div>
Reference: jsFiddle Logo Demo
Status Update: jsFiddle Logo Demo Just Border Version
The above jsFiddle has extensive notes in the CSS Section so you can understand how to setup your specific Logo.
HTML:
<div id="logoHolder">
<div id="logoContent">
<div id="logoImage"></div>
</div>
</div>
CSS:
#logoHolder {
width: 296px;
height: 296px;
background-color: white;
border: 3px solid red;
}
#logoContent {
width: 256px;
height: 256px;
padding: 20px;
position: relative;
border: 1px solid black;
}
#logoImage {
background-image:url(http://img841.imageshack.us/img841/4718/securitysealred256x256.png);
background-repeat: no-repeat;
background-position: center center;
background-color: aqua;
height: 100%;
}
Try to use also position: absolute; instead of relative for both elements when using z-index. Then it can make some distortion in your layout, so you can put the logo divs inside another relative div or use some other technique to fix it, however it must work when using position absolute and z-index. If it is still not working, check if some of your javascript is not interfering or if some other elements in your code have z-index, so it is causing the problems.
If using position absolute, do not forget to define margin-left and margin-top.
I'm not sure what you want to achieve but try this, adapting the values to your layout
Try using the margin property, as shown in your image. If you put margin-left as a negative value for the right-side div, then the right-side div will move below/above the logo div.