Following HTML block:
<html>
<body>
<div style="background-color: #fecfff;">
<div style="float:left;">
<div style="height:40px; width:40px; background-color:Red"> </div>
Karl Mac
</div>
<div>
some comments details<br />
<div style="padding-top: 10px">
links
</div>
</div>
</body>
</html>
Produces following:
How can I have Karl Mac too covered with color of parent container in this 2 column layout?
If I add "overflow:auto", it gets fixed in Firefox and Chrome. But issue persists in IE.
thanks!
As you've done for Chrome & Firefox:
overflow: auto;
To make it work in old IE as well:
overflow: auto; zoom: 1;
zoom enables "hasLayout" in old IE, which resolves many CSS bugs. There are also other ways to enable hasLayout, for more info: http://www.satzansatz.de/cssd/onhavinglayout.html
You need to <div style="clear:both;"><div> in the main div.
<html>
<body>
<div style="background-color: #fecfff;">
<div style="float:left;">
<div style="height:40px; width:40px; background-color:Red"> </div>
Karl Mac
</div>
<div>
some comments details<br />
<div style="padding-top: 10px">
links
</div>
<div style="clear:both;"><div>
</div>
</body>
</html>
Code: http://jsfiddle.net/cCuab/
Related
I am having trouble to put in horizontal lines between 2 images. Not sure how to go about doing this as I have just started learning Bootstrap.
I would like to achieve like the below image:
http://i.stack.imgur.com/9vJdm.png
Just have a look at this code will be useful for you
<style>
img{
width:10%;
display:inline-block;
}
.col-lg-5, .col-lg-2{
padding-left:0px;
padding-right: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5" style="text-align:right">
<img src="path/img1.jpg">
</div>
<div class="col-lg-2">
<hr>
</div>
<div class="col-lg-5">
<img src="path/img2.jpg">
</div>
</div>
</div>
</body>
Based on the size of the image(default) you can change width and col-lg-, col-md-, col-sm-, col-xs- values and also CSS. Its working fine for me.
I need to move the red circle image to the position shown as in below photo:
My code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>領収書</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
{% if receipt %}
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<h2>領収書
</h2>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3 col-xs-offset-3">
<h5>No. {{receipt['receipt_number']}}</h5>
<h5>{{receipt['date']}}</h5>
<hr/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 text-center">
<h3>{{receipt['c_name']}} 様</h3>
<hr/>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 text-center">
<h3><b>￥ {{receipt['amount']}}</b><br/>
</h3>
<hr/>
<h3>
但 {{receipt['quantity']}} {{receipt['product']}}<br/>
</h3>
<h4>
上記正に領収いたしました
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 text-center col-xs-offset-6">
<h5>xxxxxxxxxxxxxxxxxxxxxxxxxx</h5>
<h5>xxxxxxxxxxxxxxxxxxxxxxx</h5>
<img src='inkan.PNG'/>
</div>
</div>
</div>
{% endif %}
<!-- /container -->
</body>
</html>
Could anybody tell me how to do it?
Just add these style to your img and play with "right" value;
<img src='inkan.PNG' style="position: absolute; right: 200px;"/>
Just add the image as a background, like this:
<div class="col-xs-6 text-center col-xs-offset-6" style="background:url(urlhere) no-repeat">
Refer to this link for more info.
Give the div an id and then add it ad css property background: url({url}); like so:
HTML:
<div id="myDiv"></div>
CSS:
#myDiv {
background: url({url});
}
Include that CSS code either from a separate file or in <style/> tags.
I also recommend you try the web course on CodeCademy to learn most of everything you need to know about HTML & CSS.
If you would use a Background, it wouldn't be printed by some Browsers.
Best way to solve this is that you use relative (or absolute) Positioning on the Image Element.
But you must fix a little thing on the col- divs from Bootstrap. Basically they don't have any position Attribute, so you can't really use the position Attribute on the child elements.
So first, let's fix the positioning Inheritance problem:
.row > div { position:relative; }
Go for this CSS Rule as example to have it relative, you may use also position: absolute and or additionally float:right, but I think this should be fine, depends on your content. I've used 100px for your Image as example size, change this as you need.
.inkan_image { position:relative; top:0px; right:0px; width:100px; height:100px }
In Your HTML you just need to add your class to the Image.
By the way: I would position the Image as first element in your Content, as it will float or will be positioned on the right side and the content just swaps in then.
<img src='inkan.jpg' class='inkan_image'>
I tried the following html code (an example from w3schools site):
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;margin-top:20px">
Copyright © W3Schools.com
</div>
</div>
</body>
</html>
And this is the output:
I need to add a space between the sections #footer and #content, and as you can see I tried using the margin-top attribute, but any value I use (in my example 20px) does not change the result: there is no space between the two sections.
How can I solve this problem?
Another reason why floats suck as much as they rock.
You can add an empty div in between the footer and the content like...
//content html
<div style='clear:both;'></div>
//footer html
http://jsfiddle.net/rK5zV/1/
Or you can make the footer a float also with a width of 100% like...
http://jsfiddle.net/7KZy9/
Other solutions can be found here...
Why top margin of html element is ignored after floated element?
You can add to content margin-bottom:20px;
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;margin-bottom: 20px;">
You can place all your elements apart from the footer in a wrapper that has margin-bottom: 20px:
<body>
<div id="container" style="width:500px">
<div id="wrapper" style="margin-bottom: 20px; border: 1px solid black; width: 100%; float: left;">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com
</div>
</div>
</body>
Here is a jsFiddle that demonstrates the behavior.
I gave your footer relative positioning and used the top attribute
Here is a working DEMO
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:left;text-align:center;position:relative;top:20px">
Copyright © W3Schools.com
</div>
</div>
Try making footer display: inline-block; width: 100%. It's not ideal, but it works.
After two blocks with styles float you should to use element with style cler:both;
You code view like this
<div id="content">
...
</div>
<div style="clear:both;"></div>
<div id="footer">
...
</div>
How can i fix the problem that makes IE drop last div?
<div>
<div style="float:left; width:25%;"></div>
<div style="float:left; width:50%;"></div>
<div style="float:left; width:25%;"></div>
</div>
this it should be correct, but on older IE it makes last div go on a new line
set below css in your stylesheet
div{
margin:0;
padding:0;
}
It has some padding and margin by default which need to be reset to 0.
Try this:
<div style="float:left; width: 100%;">
<div style="float:left; width:25%;"></div>
<div style="float:left; width:50%;"></div>
<div style="float:left; width:25%;"></div>
</div>
<div style="padding:0;margin:0;">
<div style="float:left;height:200px; width:25%;background:blue;">text</div>
<div style="float:left;height:200px; width:50%;background:yellow;">text</div>
<div style="float:left;height:200px; width:25%;background:green;">text</div>
</div>
Here is Demo http://jsfiddle.net/XabvC/
And are you sure your browser zoom value. It should be 100%. If you use IE 10, you should set Browser mode and Document mode on developer tools (F12)
there could be a space being displayed in a collapsed form try
<div style="font-size:0px">
<div style="float:left; width:25%;"></div>
<div style="float:left; width:50%;"></div>
<div style="float:left; width:25%;"></div>
</div>
So I have been Googling and I am quite sure my problem emerge from the hasLayout issues with IE7 and lower.
My problem:
See image here
The HTML Code under here. The problem lies between the id="header" div and the id="colortab" div.
<div id="header">
<div class="logo"><img src="images/logo.gif" border="0" alt="" /></div>
<div class="hotline"><img src="images/ds_garanti.png" border="0" alt="" /></div>
</div>
<div id="colortab" class="ddcolortabs">
<ul>
<li><span>Forside</span></li>
<li><span>Vi tilbyder</span></li>
<li><span>Faste Tilbud</span></li>
<li><span>Garanti</span></li>
<li><span>Kontakt</span></li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1_a" class="dropmenudiv_a">
Stål og smedearbejde
VVS arbejde
Udlejning
</div>
<!--2nd drop down menu -->
<div id="dropmenu2_a" class="dropmenudiv_a">
Tilbud på stål og smedearbejde
Tilbud på VVS arbejde
Tilbud på udlejning
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 3)
</script>
And the belonging CSS can be seen here http://mhlhost.com/stackstyle.css
Very much appriciated if someone can help me out here. I can't figure out which elements causes me trouble :(
Floating the header left will close the gap in ie6/7.
#header{
position:relative;
height:100px;
background-color:#fff;
width:855px;
float:left;
}