I do not know how to describe the problem, hence please visit the link.
In this (A), the white background is rendered nicely, but if I added
<!-- Problem here -->
<ul class="thumb2"><li>
<a href="/malaysia/ceiling-lights/8044-f610-255" title="">
<img src="https://lh5.googleusercontent.com/_8Uc0MYA0xgM/TXQ-BvHi-uI/AAAAAAAAAL4/vgYnsHjUziU/s220/8044f610255.jpg" title="" alt="" /></a>
</li></ul>
<!-- Problem here end -->
Then the page become (B), the white background disappears.
How do I solve the problem?
The problem is that all of the thumbnails are "floated." See the CSS "float" property. Floated elements do not take up page space. To fix that, you can use some sort of CSS "clearfix" after all of the thumbnails.
The quickfix for this is to add:
<br style="clear: both;" />
After all of your thumbnails.
Another option is something like:
.spacer
{
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}
And then you can add:
<div class="spacer"></div>
Nowadays, crazy hip developers are using something like:
http://www.webtoolkit.info/css-clearfix.html
just add
<div style="clear: both;"> </div>
after the </ul>
The problem you are having has to do with your floated image elements. CSS can have difficulty calculating the height of a div that contains floated elements.
JUST Replace your current code with the below codes. It will 100% work
<style type="text/css">
.clearfix {
clear:both;
}
</style>
<ul class="thumb2"><li>
<a href="/malaysia/ceiling-lights/8044-f610-255" title="">
<img src="https://lh5.googleusercontent.com/_8Uc0MYA0xgM/TXQ-BvHi-uI/AAAAAAAAAL4/vgYnsHjUziU/s220/8044f610255.jpg" title="" alt="" /></a>
</li>
</ul>
<div class="clearfix"></div>
Related
I want to have multiple images on the same line with a caption below each image.
I can put images on the same line using the display:inline tag. When I add the figure tag, they are moved to different lines.
I tried multiple variation and can't get it to work.
Am I using the wrong tags for the job? I've seen this on other sites, but don't know how they do it.
CSS
section.products{
width: 100%;
padding:5px;
line-height:100%;
margin-top: 5px;
float: left;
text-align: center;
}
img.fans {
text-align: center;
max-width: 100%;
height: 50px;
width: 50px;
}
a {
color: #000000;
text-decoration: none;
font-weight: bold;
}
p {
text-align:center;
align: center;
}
figure {
display:center;
}
ul.fans li{
display: inline;
}
HTML
<section class="products">
<h1>Fans</h1>
<p>
<ul class="fans">
<li>
<a href="#">
<figure>
<img class="fans" src="images/shrouded.JPG" alt="Shrouded" style="Float"</img>
<figcaption>Shrouded</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="Float"</img>
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</li>
</ul>
</p>
</section>
You've got a couple things wrong.
You didn't close your image tags properly
you have in inline style of "float" which is not valid
This should help get you what you're looking for.
Css
ul.fans li {
display: inline-block;
}
figcaption {
text-align: center
}
Html
<section class="products">
<h1>Fans</h1>
<p>
<ul class="fans">
<li>
<a href="#">
<figure>
<img class="fans" src="http://placehold.it/300/300" alt="Shrouded"/>
<figcaption>Shrouded</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img class="fans" src="http://placehold.it/300/300" alt="Shrouded" />
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</li>
</ul>
</p>
</section>
Codepen Example
with html 5 the proper way to put an image tag is like so
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" />
You dont need a tag because you never finished opening the tag, it seems like you are mixing the old way of doing things like this
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded"></img>
display inline will make the li act as if they are a p tag or any other inline element.
The reason they are going to new lines when you add a figcaption is because figcaptions are display: block. block display types will always push items to the next line. with css you can change the display types of items like you did with the li elements.The figure tag is also a block element.
when you write html please always indent when there is nesting (an element inside of another one)
Also the style="Float" is not valid css. anything in between the "" will be css and it is called inline css. It is best to not have css inline because it can cause problems when trying to change the css the majority of elements later on.
you can add css in the top of your document with the style tag. like so
<style type="text/css">
ul.fans li {
display: inline;
}
</style>
You will want to correct the closing tag and get the css in the right spot, and make sure you do not do inline css (style="float:left;").
Since stated from the answer before that you probably don't need a list for this because lists are for breaking into new line, you will probably want to do something like this instead
<style type="text/css">
.fans li{
display: inline;
}
.fans .captioned-image {
display:inline-block;
width:200px;
}
.fans figure {
width: 200px;
display:block;
text-align:center;
}
img {
max-width:200px;
}
</style>
<section class="products">
<h1>Fans</h1>
<p>
<div class="fans">
<div class="captioned-image">
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="" />
<figcaption>Shrouded</figcaption>
</figure>
</a>
</div>
<div class="captioned-image">
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="" />
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</div>
</div>
</p>
</section>
Is there a prettier and/or better way to align some a-elements in a nav to the right, while keeping others on the left, than using floats?
float:right moves the floated elements to the top of the nav instead of keeping them where they used to be, height-wise.
This has to be a common enough problem to have a good solution. clear:both;-divs or css to fix the damages aren't really pretty solutions.
This is basically the code I have.
<nav>
<!-- left-aligned -->
<img src="img/logo.svg" />
Foo
Bar
<!-- right-aligned -->
Potato
Tomato
</nav>
Add classes to your a's, like shown in html.
html:
<nav>
<!-- left-aligned -->
<a class="left" href="#"><img src="img/logo.svg" /></a>
<a class="left" href="#">Foo</a>
<a class="left" href="#">Bar</a>
<!-- right-aligned -->
<a class="right" href="#">Potato</a>
<a class="right" href="#">Tomato</a>
</nav>
and css:
nav .left {
float: left;
}
nav .right {
float: right;
}
Also, after you do that, and if doesn't work, you may want to make sure your nav's width is long enough, so they don't all scrunch together. Like nav { width: 100%; }
I want the second child div to stay on the same line as the first div no matter how much a browser window is resized. Both images are parts of the header (the green div). I have tried to follow other questions asked on here and tried whitespace:nowrap, float:left, changing blocks from inline to inline-block and back, and nothing has helped.
I want to learn, the simplest, cleanest way to implement this, without using hacks, because after reading a bunch of tutorials I obviously still don't understand how this works.
<div style="background:green;">
<div style="display:inline-block;">
<img src="" width=150 height=80>
<br>
Some text
</div>
<div style="display:inline;">
<img src="" width=728 height=90>
</div>
</div>
Try this:
<div style="background:green;position: relative;">
<div style="display:inline-block; position: absolute; left: 0; top:0;">
<img src="" width=150 height=80>
Some text
</div>
<div style="display:inline; position: absolute; left: 50%; top: 0;">
<img src="" width=728 height=90>
</div>
</div>
Here you can use the flex property.
<style>
body{
display:flex;
}
.container{
width:100%;
display:flex;
flex-direction:row;
}
.container > div{
width:50%;
background:#ccc;
border:thin solid #000;
}
</style>
<!doctype html>
<html>
<body>
<div class="container">
<div>
your first image here
</div>
<div>
your second image here
</div>
</div>
</body>
</html>
I have found a stupidly simple solution: it's to include two parent divs instead of one. The first one has flexible width and serves for filling the entire top of the screen with header background/color. The second one is fixed width, wide enough to contain both images. This second container "traps" both images inside the fixed width and does not allow them to carry over.
The first sub-container is inline block (so I can include "Some text" under it), and the second one is regular inline. This way I can add padding or margins to the sub-containers.
I am not a programmer and realize this solution may be frowned upon, but it's the only one that worked :) No floating left/right, absolute positions, white-space nowrap or div clear was required!
<div style="background:green";>
<div style="width:1000px;">
<div style="display:inline-block; padding-left:15px; padding-right:40px">
<img src="" width=150 height=80>
<br>
Text under the header
</div>
<div style="display:inline;">
<img src="" width=728 height=90>
</div>
</div>
</div>
I am trying to create my own website from scratch, now i ran into a problem considering the HTML/CSS bit.
I am trying to create this standard "header, navigation, content" layout where the header is at the top, the navigation is at the left and the content starts below the header and to the right of the navigation
I use the following piece of code:
<div id="head">
<img src="..." id="logo" style="float:left">
</div>
<div id="nav">
{some elements}
</div>
<div id="content">
{some elements}
</div>
But as soon as the "style='float:left'" is added to my code, the "content" and "nav" DIV automatically moves to the right of the "head" DIV, is it possible somehow to make the "head" DIV "reserve" the remaining space, so that the "content" and "nav" DIV wont move up to the right of it, but stay below?
This problem is called "Collapsed Parent". To prevent this you must clear float.
Add this CSS to your style sheet:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
And add the class "clearfix" to your header, like
<div id="head" class="clearfix">
<img src="..." id="logo" style="float:left">
</div>
For more information on clearing floats you can check out this url - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php
<div style="width:250px;">
<div id="head" style="width:100%; border:1px solid red;">
<img src="..." id="logo"> Header-Logo
</div>
<div id="nav" style="float:left;width:47%;border:1px solid blue;">
Navigation-Left
</div>
<div id="content" style="float:right; width:50%;border:1px solid blue;">
Content-Right
</div>
</div>
-I think the reason is "float:left" inside tag id="head". Because you want to put the header in the top of website so no need to use "float:left" for it.
-You can use "float:left" for tag id="nav" and "float:right" for tag id="content"
Here is the result: http://jsfiddle.net/4JgA4/119/
=> No need to notice to all my information inside some tags (Just for decorations :D)
Clearing the floats will do.
You need to add a class to your div and in your css as below:
.clear
{
clear:both;
}
Add overflow:hidden to the #head element. I don't know why it works, but it ensures that all floated elements are contained inside the parent.
Basically i am working on something and up until today everything was fine but im working with others and last night files were edited so when i updated my subversion things had gone a bit pear shaped! Basically i need to figure out whats happened to my nested divs, which are no longer nested and i've spent all day trying to fix it with no joy so hopefully someone can please tell me whats going on!
<div id="navbar">
<!--<div id="notification-icon">
</div><!--End of notification icon-->
<!--<ul id="nav-icons">
<li></li>
<li><img src="images/home-icon.png" alt="Home" /></li>
</ul><!--End of navigation icons-->
<div id=searchBar><!--start of search bar div-->
<input type="text" name="inputString" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" placeholder="Search People"/>
<div class="suggestionBox" id="suggestionBox" >
<!-- <img src="images/upArrow.png" style="position:relative; top:-12px; left:30px;" align="left"/> -->
<div align="left" class="suggestionList" id="autoSuggestionsList"></div>
</div> <!--end of suggestionBox-->
</div><!--end of search bar-->
</div><!--End of navbar-->
</div><!--end of topbar-->
<div id="prof-wrapper">
<div class="prof-content-main">
<div id="left_col">
</div><!--end of left-col-->
<div id="right_col">
</div><!--end of right-col-->
</div><!--End of content-main-->
</div><!--End of Wrapper-->
<script type="text/javascript" src="js/jquery.transit.min.js"></script>
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
rows : 2,
columns : 3,
w1024 : {
rows : 3,
columns : 3
},
w320 : {
rows : 2,
columns : 3
},
w240 : {
rows : 2,
columns : 3
}
} );
});
</script>
Im not too sure how to format my css to post it but Ive attached an extremely stripped down version of whats happening in this fiddle:
http://jsfiddle.net/DannyW86/ZMScG/
You can see that for some reason my wrapper isn't wrapping around the two columns that ive made it just kind of sits on top and overlaps a bit! Really irritating me at this point!!
It's just issue of floating, you can have 2 approaches, either add this in your HTML to clear floats
Demo
<div style="clear: both;"></div>
Or add overflow: hidden; in #prof-wrapper
Overflow Demo
The problem is that the left_col and right_col divs are floated which stops the containing div from expanding to their height.
Either use an empty div after the floated elements with clear:both
<div style="clear: both;"></div>
Or the CSS clearfix solution which does not require any empty div and so is better formed markup.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
With this solution you'd add the clearfix class to the containing/wrapping div.