I have a bunch of vertically aligned tab items in which and I can't seem to get the parent container (the <a href...> in my HTML) to expand to cover the child elements. I've tried using a <br style="clear: both"> and overflow: hidden;but the first didn't do anything and the second just cut it off (using auto just added a scroll bar, which doesn't help) any thoughts on how to fix it?
HTML sample:
<li class="active">
<a href="#pane1a" data-toggle="tab">
<div class="preview-box">
<img class="preview-image" src="img/monestary_floorplan.png">
<p id="previewcarousel1a"></p>
</div>
</a>
</li>
<li>
<a href="#pane1b" data-toggle="tab">
<div class="preview-box">
<img class="preview-image" src="img/bkg-img-home2.jpg">
<p id="previewcarousel1b"></p>
</div>
</a>
</li>
CSS:
.preview-box {
width: 90px;
height: 80px;
/*border: 2px solid red;*/
margin-left:auto;
margin-right:auto;
}
.preview-image {
display: block;
width: 75px;
height: 60px;
border: 4px solid #84be46;
margin-left:auto;
margin-right:auto;
}
.preview-items p{
color: #84be46;
text-align: center;
margin-top: 5px;
}
The whole site can be seen here
Adding display: inline-block; to your a element seems to solve your problem. You may have adjust padding/margin, though.
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I'm working on a photo page for a site I'm creating, however it seems that the link is extending into the whitespace beneath the image. The problem disappears when I remove the surrounding <section> but I'm not sure why.
Here's a Jsfiddle better showcasing my code and the problem
.photo {
text-align: center;
float: left;
width: 70%;
margin-left: 8%;
margin-top: 5%;
margin-bottom: 5%;
}
.photo a {
border: 1px solid red;
}
.photo img {
margin: 1%;
}
<section class="photo">
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
</section>
I added a border to the problem area. Any help is much appreciated!
because a and img are inline elements, so
make a a block level element by display:block, to the border appear around the image
set display:block to img to remove underneath whitespace caused by being an inline element. (other solution would be setting vertical-align-bottom, given img by default is vertical-align:baseline)
Note: I gave the img a max-width:100% to be responsive, and if you give the border to img instead of a, the a being display:block isn't necessary anymore, although is good to have it.
See more about inline elements here on w3
.photo {
text-align: center;
float: left;
width: 70%;
margin-left: 8%;
margin-top: 5%;
margin-bottom: 5%;
}
.photo a {
display: block;
}
.photo img {
display: block;
border: 1px solid red;
max-width: 100%;
margin: 1%
}
<section class="photo">
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
</section>
I have a div called Buttons with 100% width inside a floating sidebar. The sidebar has 30% width.
Inside the div Buttons I have four links with background-images. I want to center the four links inside the div, but they must spread (all have the same margin, but the left one should be completely left and the right one completely right). But: it should also work inside my Responsive website. So if I resize my window, they must also be centered. That is why I can't set margins in pixels.
Please help me!
Sorry for my English.
[EDIT: My code]:
HTML:
<div id="sidebar">
<div id="buttons">
<a id="twitter" href="http://www.twitter.com" title="Twitter" target="_blank"></a>
<a id="facebook" href="http://www.facebook.com" title="Facebook" target="_blank"></a>
<a id="rss" href="rss.php" title="RSS" target="_blank"></a>
<a id="youtube" href="http://www.youtube.come" title="YouTube" target="_blank"></a>
</div>
</div>
CSS:
#sidebar{
float:right;
width:30%;
text-align:center;
}
#buttons{
width:100%;
}
#twitter,#facebook,#rss,#youtube{
height:40px;
display: inline-block;
margin-top:20px;
}
#twitter{width:40px;}
#twitter{background:url('/images/icons.png') 0 0;}
#facebook{width:40px;}
#facebook{background:url('/images/icons.png') -40px 0;}
#rss{width:40px;}
#rss{background:url('/images/icons.png') -80px 0;}
#youtube{width:40px;}
#youtube{background:url('/images/icons.png') -120px 0;}
Seeing your code would definitely help, but I'm guessing you're looking for something like this:
--edit--
Okay so it looks like we need to position these buttons absolutely, so try:
#buttons {
position: relative;
min-height: 40px;
}
#buttons > a {
position: absolute;
width: 40px;
height: 40px;
}
a#twitter { background: red; left: 0px; }
a#facebook { background: orange; left: 36%; margin-left: -20px; }
a#rss { background: yellow; left: 64%; margin-left: -20px; }
a#youtube { background: green; right: 0px;}
Aaand fiddle: http://jsfiddle.net/ttjAW/9/
You might need to adjust the left percentages because the buttons have fixed widths (its hard to do this using fixed and variable width elements...) I then applied a negative margin of half of the buttons width to centre them.
Does this do what you needed?
Use text-align: justify on your #buttons element to center the button elements perfectly and allow them to expand responsively within the space.
Add text-align: justify on your #buttons element
Add a #buttons:after pseudo element with 100% width to force the buttons to fill the entire sidebar
Here's a working example on JSbin.
And here's the code for your situation:
HTML:
<div id="sidebar">
<div id="buttons">
<a id="twitter" href="#">1</a>
<a id="facebook" href="#">2</a>
<a id="rss" href="#">3</a>
<a id="youtube" href="#">4</a>
</div>
</div>
CSS:
#buttons {
text-align: justify;
width: 100%;
}
#buttons:after {
content: '';
display: inline-block;
width: 100%;
}
#buttons a {
display: inline-block;
height: 40px;
width: 40px;
}
This method is more fully documented here: http://www.barrelny.com/blog/text-align-justify-and-rwd/
In shopping cart details page product image is defined using code below. Its proportions should preserved.
For bigger zoom levels image hides start of text after it.
How to render this page properly in all zoom levels?
For unknow reason div #productinfo starts at left side but it shoult start after image.
I tried to add display:inline-block to every div but this does not have any effect.
jquery, jquery ui, fancybox and pikachoose are used.
html:
<div style="float: left; width: 30%; margin-right: 1%">
<a href="#" class="details-picture">
<img src="/Thumb?product=1308318&size=198" alt="">
</a>
</div>
<div id="productinfo">
<div>
Price <span id="Price">
1.73
</span>
</div>
css:
.details-picture {
background: none repeat scroll 0 0 #FFFFFF;
border: thin ridge #BBBBBB;
display: block;
float: left;
height: 200px;
line-height: 200px;
margin: 0 20px 15px 0;
overflow: hidden;
position: relative;
text-align: center;
width: 198px;
}
.details-picture img {
border-width: 0;
height: auto;
max-height: 198px;
max-width: 198px;
vertical-align: middle;
width: auto;
}
This seems to be due to those inline attributes on the top-level div. The combination of float: left and width: 30% causes the issue you were experiencing.
<div class="productimage">
<a href="#" class="details-picture">
<img src="/Thumb?product=1308318&size=198" alt="" />
</a>
</div>
<div class="productinfo">
<div>
Price <span id="Price">1.73</span>
</div>
</div>
jsfiddle
The contents below the search bar are meant to be shown after the users enter some text. Currently the style is down to what I'm aiming for.
However when I display the search results, it pushes the container following the search bar, as illustrated by my picture:
What can I do that the search results display and just overlap everything below it without pushing other elements downwards?
Here is my HTML:
<div id="search-bar" class="box">
<h1 class="horizontal-header">SEARCH THE DATABASE</h1>
<div id="search-wrapper">
<input name="query" id="name" class="big-search" placeholder="champion, item, spells..." />
<div id="search-results">
<a href="#">
<div class="item">
<img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" />
<div class="info">
<p class="name">Jax</p>
<p class="description">Champion</p>
</div>
</div>
</a>
<a href="#">
<div class="item">
<img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" />
<div class="info">
<p class="name">Jax</p>
<p class="description">Champion</p>
</div>
</div>
</a>
<a href="#">
<div class="item">
<img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" />
<div class="info">
<p class="name">Jax</p>
<p class="description">Champion</p>
</div>
</div>
</a>
</div>
</div>
</div>
And my CSS (written with LESS):
#search-bar {
width: 636px;
height: 35px;
#search-wrapper {
float:left;
margin-left: 13px;
#search-results {
z-index:999;
position:relative;
a {
display:block;
.item:hover {
background-color:#282828;
}
.item {
overflow: hidden;
background-color: #171717;
padding: 2px;
cursor:pointer;
margin-bottom:1px;
img {
float: left;
width: 35px;
}
.info {
float: left;
margin-left: 8px;
.name {
color: white;
margin: 0;
}
.description {
color: white;
margin: 0;
}
}
}
}
}
}
}
Use CSS's Absolute Positioning. Unlike Relative Positioning, Absolute Positioning removes the item from the flow of the document (ie keeping it from pushing other things down.)
Just remember, something that's absolutely positioned is positioned relative to it's nearest positioned parent - so whatever container the absolute positioned items are in (in your case) should be set to position:relative;
Info on all kinds of positioning: http://www.w3schools.com/css/css_positioning.asp
Give position:absolute to your .item DIV. Write like this:
.item {
position:absolute;
}
---HTML
<div id="story">
<div id="individual">
<img src='uploads/1231924837Picture.png'/>
<h2>2009-01-14</h2>
<h1>Headline</h1>
<p>stroy story etc stroy story etc stroy story etc</p>
</div>
<br />
<div id="storynav">
<a href='home.php?start=0'>1</a>
<a href='home.php?start=1'>2</a>
<a href='home.php?start=2'>3</a>
<a href='home.php?start=3'>4</a>
<a href='home.php?start=4'>5</a>
<a href='home.php?start=5'>6</a>
<a href='home.php?start=6'>7</a>
<a href='home.php?start=7'>8</a>
<a href='home.php?start=8'>9</a>
</div>
</div>
---CSS
#story img{
border: none;
float: right;
display: inline;
padding: 10px;
margin-top: 30px;
}
#story{
width: 600px;
height: inherit;
background-color:black;
margin-left: 34px;
margin-bottom: 3px;
}
#individual{
background-color: #000000;
clear:both;
}
#storynav{
font-size: 10px;
text-align: center;
}
(source: bionic-comms.co.uk)
The above code and css is giving me a headache because, as the picture shows, the div background color gets confused when i add images in. This is dynamic content but i thought it would be easier to show the static html. Can any one tell me what i am doing wrong? The background color should cover the picture as well. Thanks!
EDIT
Thanks for that. It is something i had previously tried but it doesn't do anything. I have also tried a spacer in there as well and that doesn't do anything. Flummoxed!
You are setting the image to float right which means that the container div cannot work out it's actual height. You need to clear the floated element which essentially lets the container know how large the image actualy is.
You will need to add an element with the style clear: both; underneath the img tag in your HTML, preferably at the end of the div like so:
<div id="story">
<div id="individual">
<img src='uploads/1231924837Picture.png'/>
<h2>2009-01-14</h2>
<h1>Headline</h1>
<p>stroy story etc stroy story etc stroy story etc</p>
</div>
<br />
<div id="storynav">
<a href='home.php?start=0'>1</a>
<a href='home.php?start=1'>2</a>
<a href='home.php?start=2'>3</a>
<a href='home.php?start=3'>4</a>
<a href='home.php?start=4'>5</a>
<a href='home.php?start=5'>6</a>
<a href='home.php?start=6'>7</a>
<a href='home.php?start=7'>8</a>
<a href='home.php?start=8'>9</a>
</div>
<div class="clear"></div> <-- add this here
</div>
And add the class:
.clear
{
clear: both;
}
Read that: http://www.quirksmode.org/css/clearing.html
In short, try this:
---HTML
<div id="story">
<div id="individual">
<img src='uploads/1231924837Picture.png'/>
<h2>2009-01-14</h2>
<h1>Headline</h1>
<p>stroy story etc stroy story etc stroy story etc</p>
</div>
<br />
<div id="storynav">
<a href='home.php?start=0'>1</a>
<a href='home.php?start=1'>2</a>
<a href='home.php?start=2'>3</a>
<a href='home.php?start=3'>4</a>
<a href='home.php?start=4'>5</a>
<a href='home.php?start=5'>6</a>
<a href='home.php?start=6'>7</a>
<a href='home.php?start=7'>8</a>
<a href='home.php?start=8'>9</a>
<div class="clear"></div>
</div>
</div>
---CSS
#story img{
border: none;
float: right;
display: inline;
padding: 10px;
margin-top: 30px;
}
#story{
width: 600px;
height: inherit;
background-color:black;
margin-left: 34px;
margin-bottom: 3px;
}
#individual{
background-color: #000000;
clear:both;
}
#storynav{
font-size: 10px;
text-align: center;
}
.clear {
clear: both;
}