I just have a silly issue (I think...) with a div tag in html.
I want to positionate a background relative image at top left corner, half image outside its container.
Issue is that container doesn't fill to all Its content. I try to use "overflow: auto" property but left corner image turns hidden.
My html:
<div class="content">
content of the page
</div>
<footer id="footer">
<div class="column" id="footer-izda">
<span id="logo-sup"> </span>
<span>conecta con nosotros</span>
<ul>
<li class="twitter">outside of box </li>
<li class="facebook">outside of box</li>
</ul>
</div>
<div class="column" id="footer-dcha">
<div class="module widget_nav_menu deepest">Copyright © 2013</div>
</div>
</footer>
My CSS:
.content{
margin-bottom: 2%;
}
footer{
background-color: #333333;
color: #EDEDED;
padding: 1%;
display: block;
/*overflow: auto;*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.column #logo-sup{
background: url('http://formate21.es/wp-content/themes/master/images/footer.png') left top no-repeat;
width: 26px;
height: 26px;
top: -25px;
left: 0;
float: left;
position: absolute;
}
#footer-izda {
float: left;
width: 50%;
position: relative;
text-align: left;
}
I wrote this on jsfiddle: http://jsfiddle.net/ecXba/10/
Any suggestion?
Put below code just before </footer> tag.
<div style="clear:both;"></div>
Hope this helps!
Related
I have a div with width: 180px; and height: 180px;.
How can I center a fontawesome icon horizontally and vertically inside the container?
Note: i may also add text below the icon
<div style="width:180px; height:180px; float:left;">
<i class="fa fa-search fa-4x"></i>
</div>
should look something like this:
Try this:
.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.container{
width:100px;
height:100px;
}
On mobile.
You can do it like this
#search{
background: gray;
width:180px;
height:180px;
float:left;
line-height: 180px;
text-align: center;
vertical-align: bottom;
}
#search > p {
margin-top: -155px;
}
Working example http://jsfiddle.net/kasperFranz/h91p8w4e/3/ (using icon instead of fa in the example, but shouldn't affect the result.)
I'm probably too late here, but it's a common question, so here's a simple working idea, the interesting side of it is that it adapts to the container size:
span{
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
width: 15px;
height: 15px;
display: block;
}
Asuming to my comment, here is a JSFIDDLE
Without setting relative or absolute
html
<div class="myDiv">
<div class="content_wrapper">
<!--i class="fa fa-search fa-4x">test</i-->
<i class="icon-search icon-4x"></i><br />
<span class="myText">Search</span>
</div>
</div>
css
.myDiv{
width: 180px;
height: 180px;
float: left;
background: #ccc;
text-align: center;
display: table;
}
.content_wrapper{
display: table-cell;
vertical-align: middle;
}
.myText{
font-weight: bold;
font-size: 20px;
}
CSS
/* This parent can be any width and height */
.block {
text-align: center;
background:#ccc;
margin-bottom:10px;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
HTML
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>p1</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="centered">
<h1>Some text</h1>
<p>p2</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="centered">
<h1>Some text</h1>
<p>p3</p>
</div>
</div>
DEMO
Update 1:
DEMO
I know it's a bit late and you probably already figured this out.
I was able to achieve what you were looking for by wrapping the icon and text in a div then adding padding to that.
See the attached pen.
http://codepen.io/ForTheJim/pen/YPxveR
<p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'>See the Pen <a href='http://codepen.io/ForTheJim/pen/YPxveR/'>Centering Icon Question</a> by Jim (<a href='http://codepen.io/ForTheJim'>#ForTheJim</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
Short way just add display: grid; place-items: center; to your div and your ready to go.
like this:
<div style="width:180px; height:180px; display: grid; place-items: center;">
<i class="las la-user-circle"></i>
</div>
I'm not sure where my code is messed up, but I'm trying to get my code to center. Here is what I have so far:
The problem that I am running into is that the page won't actually center. When it loads, the left margin is only a 10px. I'm sure there is a conflict somewhere, or I just borked something, and I've been searching for hours now, and have found nothing. Here is the following code:
body {
background-color: #12121D;
}
#contain {
display: block;
width: 1000px;
margin: 0 auto;
}
.version{
text-align:right;
font-family: Calibri, sans-serif, serif;
text-decoration:none;
color:#00F;
}
#header {
width: 1000px;
height: 230px;
}
#logo {
width: 600px;
margin: 50px 0px 0px 10px;
padding: 0px;
float: left;
position: absolute;
}
#banner {
text-align: right;
float: right;
z-index: -1;
}
#menu {
height: 80px;
margin: 0 auto;
}
#main {
height: 500px;
width: 850px;
margin-left: 75px;
/*position: absolute;*/
z-index: 4;
/*float: left*/;
}
#content {
width: 850px;
height: 500px;
float: left;
margin-left: 0px;
}
And the html follows as:
<body>
<div id="contain">
<div id="header">
<div id="logo"> <img src="images/logo.png" alt="logo" />
<br />
<a class="version" href="JavaScript:changeSheets(1)">View Mobile<a/>
</div>
<div id="banner"><img src="images/banner.png" alt="banner"/></div>
</div>
<div id="menu">
<div class="pages">
<ul>
<li>Front Page</li>
<li>Reviews</li>
<li>Releases</li>
<li>About Me</li>
<li>Contact Info</li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
<div class="why" id="whyBackground"> <img src="images/reviewsites.png" alt="reviewsites"/>
<h1>Why am I doing this?</h1>
<br />
Insert text here
<h1>What is my goal?</h1>
Insert text here
</div>
</div>
</div>
</div>
</body>
Hi there is Your code:
http://jsfiddle.net/w9Zgc/2/
On my screen larger 1920px page is centered. I think that you have screen resolution close to 1024px width so than left margin left equal 10px is quite reasonable. Another advice is to reset padding and margin of body
body, html {
padding:0;
margin: 0;
}
One thing that will help you center a div is to specify the width, and then set the right & left margins to auto:
#main{
width: 850px;
margin-left: auto;
margin-right: auto;
}
Judging from your link at http://jsbin.com/itiwez/2/edit
I removed #charset "utf-8" in your CSS and it instantly worked (at least in your jsbin demo). Is your CSS file actually in UTF-8 format?
FYI: Why specify #charset "UTF-8"; in your CSS file?
I have the following HTML source:
<div id="page">
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!--></div>
<div id="footer">
</div>
<!-- end page div -->
</div>
<div id="leftshadow"></div>
<div id="rightshadow"></div>
</body>
And this is the CSS source
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 1220px;
z-index: none;
top: -50px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: 345px;
z-index: none;
top: -25px;
}
/* header ---------- */
#header {
height: 110px;
top: 0px;
line-height: 30px;
background-image: url("images/header.png");
background-position-x: center;
background-repeat: repeat-x;
}
/* main -------------- */
#main {
line-height: 21px;
font-family: arial;
width: 625px;
padding: 30px;
position: relative;
right: 205px;
padding-bottom: 80px;
direction: rtl;
top: 42px;
padding-right: 60px;
min-height: 750px;
text-align: justify;
}
Normally I got this result
But in Internet-Explorer I got this result
I know that if I will insert the
<div id="leftshadow"></div>
<div id="rightshadow"></div>
******Live example here! http://lawb.co.il/******
Into the #page Div the problem could be solved, but the only problem is that the shadow than is complatly on the content, und not behund him
Can you pleas help me with this?
wish for help, thanks!
Any reason as to why you are using images to create shadows when you could use CSS3 box-shadow?
If you are going to use this approach I would change your HTML structure like so:
<div id="page">
<div id="leftshadow"></div>
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!-->
</div>
<div id="footer">
<!-- footer -->
</div>
<!-- end page div -->
<div id="rightshadow"></div>
</div>
And then float the right shadow div to the right and the left shadow div to the left. Most likely you are seeing inconsistencies because
you are not using a reset, and stuff is relatively positioned. You really don't need to position everything relative and the shadows if inside the #page container won't need to be positioned absolute.
How to display the image as vertical align in div container?
The image "setting.png" placed in last column in the code i attached. please advice solution please.
.table{
width: 100%;
margin: 20px 0px 20px 0px;
background-color: #EEEEEE;
}
.tableRow{
width: 100%;
clear: both;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #cccccc;
}
.tableCol{
float: left;
height: 40px;
line-height: 40px;
}
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
Just add (space before a link)
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
better solution:
add this to css:
img {
margin-top:10px;
}
Here, this should work:
Add this to your div which contains the image that should be centered.
display:table-cell;
vertical-align:middle;
This should center the image vertically no matter the dimensions of your div or the image that it contains.
You can do this with position: absolute; if you know the dimensions of the settings.png image (20px x 20px for this example).
Add class tableColSettings to the <a> around the settings image. Then add CSS;
.tableColSettings{
position: absolute;
display: block;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px; /* Half image dimensions */
width: 20px;
height: 20px;
line-height: 0;
}
.tableColSettings img{
width: 100%;
}
The settings image will always stay in the center of the element, no matter the height. Here's a working fiddle: http://jsfiddle.net/384pa/
Hope this helps!
Css is having a tag name
"vertical-align" may be you will get your solution
i have a page with 3 parent divs , now im having problems positioning the divs inside the header div.
my code is something like this:
divs layout:
<div id="layout">
<div id="header" class="body">
header
<div id="logo">logo</div>
<div id="menu">menu</div>
</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div id="body">body</div>
<div id="clear"></div>
</div>
<div id="footer">footer</div>
</div>
css is something like this:
.body {
background-color: #ffffff;
margin: 0px;
background-repeat: repeat-x;
background-image: url(imgs/back.png);
}
#layout {
margin:auto;
width: 1024px;
background-color: #ffffff;
}
#main {
background-color: #ffffff;
}
#header {
background-color:#0F0;
height: 300px;
}
#body {
margin-left: 180px;
margin-right: 180px;
padding: 5px;
background-color: #ffffff;
}
#footer {
margin-left: 180px;
margin-right: 180px;
padding: 0px;
background-color: #ffffff;
}
#right {
float: right;
width: 180px;
padding: 0px;
margin: 0px;
right: 0px;
background-color: #ffffff;
}
#left {
float: left;
width: 180px;
padding: 0px;
margin: 0px;
left: 0px;
background-color: #ffffff;
}
#clear {
clear:both;
}
i want to put in a position of header div (e.g. vertical: center , horizontal: 0 px (0 pixels of the header div not of the total page) on left side) and menu in other position (e.g. vertial: top , horizontal: between the center and right side (center and right side of header div only again).
i would appreciate a solution.
thanks to all.
I could be more helpful if you could clarify your question.
I am not sure of what your are asking for in terms of the location for the header.
Here is an approach to move the menu between the center and the right column. Nest the menu and the right hand column in another right aligned div. For the purposes of example I have called it right-container.
Here is the HTML
<div id="layout">
<div id="header" class="body">
header
<div id="logo">logo</div>
</div>
<div id="main">
<div id="left">left</div>
<div id="right-container">
<div id="menu">menu</div>
<div id="right">right</div>
</div>
<div id="body">body</div>
<div id="clear"></div>
</div>
<div id="footer">footer</div>
</div>
And here are the css statements I added:
#right-container {
float: right;
width: 360px;
padding: 0px;
margin: 0px;
right: 0px;
background-color: #ffffff;
}
#menu {
float: left;
width: 180px;
padding: 0px;
margin: 0px;
left: 0px;
background-color: #ffffff;
}
You can see the fiddle here:
http://jsfiddle.net/SkLvX/