I'm trying to centre an image using css and html, however I seem to be missing something. I'm wondering if someone can help me. The image I'm trying to centre falls into #home_top_logos a:
/* Uncomment the following to hide the site title */
/*
#site_title {
display: none;
}
*/
}
#home_top_logos {
width:950px;
padding-bottom:20px;
padding-top:77px;
}
#home_top_logos a {
display:block;
margin:auto;
margin-bottom:54px;
padding: 25px 0px 20px 0;
}
#home_top_logos p {
width:811px;
padding-bottom: 50px;
margin:auto;
height:75px;
background:url(../images/old_style_bg1.png) no-repeat;
}
#home_top_logos p a {
width:366px;
display:block;
height:50px;
line-height:50px;
color:#616161;
text-align:center;
}
Here is the HTML as well:
> <div class="wrapper section" id="home_top" data-key="H"> <div
> id="home"> <div id="home_top_botm_bg"> <div id="home_top_inn">
> <div id="home_top_logos">
> <div id="site_title"><img src="images/retro_img1.png" alt="#" /></div>
> <p> </p>
> <div class="clr"></div>
> </div>
you must use dispaly:block and margin:0px auto
Demo
CSS:
#home_top_logos img {
display:block;
margin:0 auto;
}
another way:
set width for img and use left or right for that
Demo
CSS:
#home_top_logos img {
position:absolute;
width:40%;
left:30%;
}
add this:
#home_top_logos a {
text-align:center;
}
#home_top_logos a img {
display:inline-block;
}
example
You need to add width:100%; and text-align:center; to make this work.
#home_top_logos a {
width:100%;
text-align:center;
display:block;
margin:auto auto 54px auto;
padding: 25px 0px 20px 0;
}
Add the display:block; and margin: auto; to your image too:
http://jsfiddle.net/F5av6/5/
#home_top_logos img {
display:block;
margin:auto;
}
Related
I'm trying to figure out why this footer is acting unusual. If you notice in the demo the HR tag in the location section is being pushed to the bottom of the page. Which is changing the layout. Also i'm trying to get the Facebook Icon to float:left so that it will be to the left of the HR tag within the "Network With Us section." My CSS looks fine to me, but this is the first time i've used the section tags for html5.
Also i'm having troubles applying a background-color or a margin-top:50px to my #footer.It's as if the #footer is ignoring me.
Here is my Demo
#footer {
background-color:#95643d;
width:100%;
margin:30px 0px 0px 0px;
clear:both;
}
#footer h3 {
font-family: 'Dancing Script', cursive;
font-weight:700;
color:#FFF;
font-size:2em;
}
#footer hr {
width:60%;
float:left;
height:4px;
background-color:#FFF;
}
#footer p {
margin:0px;
padding: 0px;
color:#FFF;
font-family: 'Arimo', sans-serif;
}
#footer_logo {
width:25%;
float:left;
background-color:#95643d;
}
#footer_logo img {
margin:20px 0px 0px 20px;
}
#footer_network {
width:25%;
float:left;
background-color:#95643d;
}
#footer_contact {
width:25%;
float:left;
background-color:#95643d;
}
#footer_network img {
float:left;
}
}
#footer_location {
width:25%;
float:left;
background-color:#95643d;
}
You can use this CSS:
/* Footer */
#footer {
background-color:#95643d;
width:100%;
}
#footer h3 {
font-family: 'Dancing Script', cursive;
font-weight:700;
color:#FFF;
font-size:2em;
text-align: center;
}
#footer hr {
width:100%;
float:left;
height:4px;
background-color:#FFF;
}
#footer p {
margin:0px;
padding: 0px;
color:#FFF;
font-family: 'Arimo', sans-serif;
text-align: center;
margin-bottom: 10px;
}
#footer_logo {
width:100%;
float:left;
background-color:#95643d;
}
#footer_logo img {
margin: 10px auto;
display: block;
}
#footer_network {
float:left;
background-color:#95643d;
width: 33%;
}
#footer_contact {
width: 33%;
float:left;
background-color:#95643d;
}
#footer_network img {
margin: 0 auto;
display: block;
}
#footer_location {
display: inline-block;
background-color:#95643d;
width: 34%;
}
Also i'm having troubles applying a background-color or a margin-top:50px to my #footer.It's as if the #footer is ignoring me.
When you have floats, the parent element collapses, so you have to clear the floats. One often-used technique is the clearfix class. Applied to your element it would look like this:
#footer:after {
content: "";
display: table;
clear: both;
}
I have a fiddle with cleaner code that you can use parts of it, or the whole thing, at your convenience. https://jsfiddle.net/r3ruzLL2/2
https://jsfiddle.net/r3ruzLL2/2/embedded/result/
EDIT: For the Facebook logo, an easy solution is to use a negative margin-top.
Add this rule:
section{
overflow:hidden;
}
Here you go, this seems to be fixing your problem: http://jsfiddle.net/weissman258/kpo4y108/10/.
Here are the things I added.
#footer {
display:inline-block;
}
#footer_network {
position:relative;
}
#footer_network a {
position:absolute;
left:0;
}
#footer_location {
display:inline-block;
}
As well as removing:
#footer_network img {
float:left;
}
Edit: Your first line on location seemed to be aligned right, so made another change to fix it:
#footer p {
clear:left;
}
Here is a fiddle for you https://jsfiddle.net/kpo4y108/6/ . You have break's in your html that you don't need. You have background's in different div's, which you don't need if you are only going to have one color. Let me know if you have any questions.
<div id="footer">
<section id="footer_logo">
<img src="http://nuskinprinting.com/atticstash/images/as_logo.png" />
</section>
<section id="footer_network">
<a><img src="http://nuskinprinting.com/atticstash/images/facebook_icon.png" /></a>
<h3>Network With Us</h3>
<hr />
</section>
<section id="footer_contact">
<h3>Contact Us</h3>
<hr />
<p> Vivian#advancedlitho.com<br />(972)999-9999 </p>
</section>
<section id="footer_location">
<h3>Location</h3>
<hr />
<p> Orange Circle Antique Mall<br />118 South Glassell Street<br />Orange, CA 92866<br />(714)538-8160<br />Mon. 10 a.m. - 4:45 p.m.<br />Tues - Sat 10 a.m. - 5:45 p.m.<br />Sun. 11 a.m. - 5:45 p.m. </p>
</section>
</div>
css:
/* Footer */
#footer {
background-color:black;
width:100%;
margin:30px 0px 0px 0px;
clear:both;
float:left;
}
#footer h3 {
font-family: 'Dancing Script', cursive;
font-weight:700;
color:#FFF;
font-size:1.5em;
margin:0px;
padding:0px;
}
#footer hr {
width:60%;
float:left;
height:4px;
}
#footer p {
margin:0px;
padding: 0px;
color:#FFF;
font-family: 'Arimo', sans-serif;
float:left;
word-wrap:break-word;
}
#footer_logo {
width:25%;
float:left;
}
#footer_logo img {
margin:20px 0px 0px 20px;
max-width:80%;
}
#footer_network {
width:25%;
float:left;
}
#footer_contact {
width:25%;
float:left;
}
#footer_network img {
float:left;
width:25px;
height:25px;
margin: 5px 5px 0 0;
}
#footer_location {
width:25%;
float:left;
}
I am having a logo and search bar on header. Logo is on the left corner. I want the search bar at the center of the header. What ever i try its half hidden in the navigation menu. Here is a rough jsfiddle
#header {
position:relative;
float:left;
clear:both;
width:100%;
height:110px;
background:url("resources/images/logo.jpg") repeat-y;
font-size:30px;
background:#ccc;
}
#header img {
position:relative;
left:20px;
top:13px;
border:0;
}
#header-search {
position:relative;
left:220px;
}
Try this
Using float to both #header img & #header-search with additional margin to customise the spacings.
#header {
position:relative;
float:left;
clear:both;
width:100%;
height:110px;
background:url("resources/images/logo.jpg") repeat-y;
font-size:30px;
background:#ccc;
}
#header img {
position:relative;
left:20px;
top:13px;
border:0;
float: left;
}
#header-search {
position:relative;
float: left;
margin-left: 40px;
margin-top: 30px;
}
JSFiddle
I recommend you to follow the css float concept for this. I have updated your fiddle based on my understanding. Have a look at it.
FIDDLE: http://jsfiddle.net/kiranvarthi/yaqxpm8e/4/
#header .logo {
float: left;
}
#header-search {
float: left;
margin: 30px;
}
Managing this without magic numbers can be achieved using a combination of floats and inline block
#header {
position:relative;
float:left;
width: 100%;
height:110px;
background:url("resources/images/logo.jpg") repeat-y;
font-size:30px;
background:#ccc;
text-align: center;
}
#header a {
float: left;
margin: 13px;
/* doesn't quite calculate (110-85)/2 = 12.5 */
}
#header-search {
display: inline-block;
margin-top: 35px; /* (110-40)/2 = 35px */
height: 30px;
}
<div id="header"> <a href="login.html"><img src="http://lorempixel.com/output/abstract-q-c-200-85-4.jpg"
width="200" height="85" /></a>
<div id="header-search">
<form id="searchForm" action="searchproduct.json">Product Name:
<input type="text" name="productName" value="${product.productName}" id="productName" />
<input type="submit" value="Search" />
</form>
</div>
</div>
Note - this method maintains the centered div responsively until the header is too narrow to support it. then you would need media queries.
JSFiddle Demo
I'm trying to fit a sidebar to the end of the #SUBCONTAINER div. this is the HTML code:
<body>
<div id="container">
<div id="subcontainer">
<div id="sidebar">
<div class="logo">
<img src="pictures/icon.png" alt="LOGO">
</div>
</div>
<div id="pagecontainer">
<div class="page">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
and this is the CSS I'm using right now:
html, body {
background-color:#ffffff;
margin:0 0 0 0;
height:100%;
}
#container {
position:relative;
width:100%;
}
#subcontainer {
position:relative;
clear:both;
}
#sidebar {
width:20%;
float:left;
background-color:#BD4538;
color:white;
}
.logo {
text-align:center;
left:50%;
right:50%;
border-left:-8em;
border-right:-8em;
}
#pagecontainer {
width:80%;
float:right;
background-color:#FFFFFF;
color:black;
}
.page {
padding:1em 1em 1em 1em;
background-color:#FFFFFF;
color:black;
}
#footer {
clear:both;
height:10em;
width:100%;
bottom:0;
background-color:#B82928;
color:white;
}
p {
margin: 0em 0em 0em 0em;
text-align:justify;
text-indent:1em;
}
Unfortunatelly the SIDEBAR DIV does not extend to the end of the parent SUBCONTAINER container, so if I have a longer text in PAGECONTAINER DIV, I will see the white background of the parent BODY under the SIDEBARE DIV.
I thought of a trick: if I change the background of the container PAGECONTAINER to the bgcolor of SIDEBAR I have what I want, but I'm working on a responsive website thus SIDEBAR need to change position and to go to the top of the pabe
So, any suggestion?
I've modified the code little bit. Normally to make a equal height column div display:table display:table-cell property used.
html, body {
background-color:#ffffff;
margin:0 0 0 0;
height:100%;
}
#container {
width:100%;
}
#subcontainer {
display:table;
}
#sidebar {
width:20%;
background-color:#BD4538;
color:white;
display:table-cell;
}
.logo {
text-align:center;
border-left:-8em;
border-right:-8em;
}
#pagecontainer {
width:80%;
display:table-cell;
background-color:#FFFFFF;
color:black;}
Working Demo link.
http://jsbin.com/mopunime/1/edit
Remove the "float" property from both the #sidebar div and the #pagecontainer div, and set them as display: table-cell;
Also, set the #subcontainer to display:table and width:100%;. That will make sidebar and pagecontainer to fill the subcontainer div.
Check it out:
html, body {
background-color:#ffffff;
margin:0 0 0 0;
height:100%;
}
#container {
position:relative;
width:100%;
}
#subcontainer {
position:relative;
display: table;
clear:both;
width: 100%;
}
#sidebar {
width:20%;
display: table-cell;
background-color:#BD4538;
color:white;
}
.logo {
text-align:center;
left:50%;
right:50%;
border-left:-8em;
border-right:-8em;
}
#pagecontainer {
width:80%;
display:table-cell;
background-color:#FFFFFF;
color:black;
}
.page {
padding:1em 1em 1em 1em;
background-color:#FFFFFF;
color:black;
}
#footer {
clear:both;
height:10em;
width:100%;
bottom:0;
background-color:#B82928;
color:white;
}
p {
margin: 0em 0em 0em 0em;
text-align:justify;
text-indent:1em;
}
Here's the fiddle: http://jsfiddle.net/z56S3/
If what you want is that the DIV "Sidebar" fit (width or height) to the div "subcontainer" then do that:
#sidebar {
width:100%;
height: 100%;
float:left;
background-color:#BD4538;
color:white;
}
I have some divs set up as navigation buttons and I have put all the buttons into a div and then put that div into another "holder" div. the problem is that I can't seem to center the div that holds the buttons.
I've tried to add margin:0 auto but it doesn't seem to do anything:
HTML:
<div class="navholder">
<div class="nav">
<div class="button1"><div class="triangle"></div></div>
<div class="button2"><div class="triangle"></div></div>
<div class="button3"><div class="triangle"></div></div>
<div class="button4"><div class="triangle"></div></div>
<div class="button5"><div class="triangle"></div></div>
<div class="button6"><div class="triangle"></div></div>
</div>
</div>
CSS:
.navholder {
width:950px;
height:350px;
background-color:grey;
}
.nav {
position:relative;
bottom:0px;
margin:0 auto;
}
.button1, .button2, .button3, .button4, .button5, .button6 {
width:120px;
height:35px;
background-color:rgb(204,204,204);
margin-left:5px;
margin-right:5px;
display:inline-block;
float:left;
}
.button1:hover > .triangle, .button2:hover > .triangle, .button3:hover > .triangle, .button4:hover > .triangle, .button5:hover > .triangle, .button6:hover > .triangle{
display: block;
}
.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover{
background-color:#B7939B;
}
.triangle {
position:relative;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #B7939B;
top:-15px;
left:0;
right:0;
margin:0 auto;
display: none;
}
Heres a Fiddle of my code.
Add width to your .nav class:
.nav {
position:relative;
bottom:0px;
margin:0 auto;
width:780px;
}
You can try with this:
.navholder {
text-align:center;
}
.nav {
display:inline-block;
}
Your demo http://jsfiddle.net/S6BVL/3/
Specify a width for .nav that is large enough for the 5 buttons. It is defaulting to 100% of its container, 950px. Fiddle: http://jsfiddle.net/S6BVL/2/
Try this demo , i added text-align:center to .navholder and width:800px to .nav:
CSS:
.navholder {
width:950px;
height:350px;
background-color:grey;
text-align:center;
}
.nav {
position:relative;
bottom:0px;
margin:0 auto;
width:800px;
}
This works :
.navholder {
width:950px;
height:350px;
background-color:grey;
text-align: center;
}
.nav {
bottom:0px;
margin: auto;
display: inline-block;
}
Try this
.nav {
text-align: center;
}
the reason margin: 0 auto; does not work is because you have the div's as "inline-block". You can only center inline blocks by centering from their parent.
if you don't want that, you can always try changing this
.button1, .button2, .button3, .button4, .button5, .button6 {
display:inline-block;
}
to this
.button1, .button2, .button3, .button4, .button5, .button6 {
display: block;
}
Or you can just add text-align: center; to .nav
and then just remove float: left; from .button1, .button2, .button3, .button4, .button5, .button6 {
like this:
.nav {
position:relative;
bottom:0px;
text-align: center;
}
.button1, .button2, .button3, .button4, .button5, .button6 {
width:120px;
height:35px;
background-color:rgb(204,204,204);
margin-left:5px;
margin-right:5px;
display:inline-block;
}
Here's the Jsfiddle - http://jsfiddle.net/S6BVL/8/
I am trying to get a Sticky Footer to work, and have currently tried the following css:
#footer {
width:920px;
height:208px;
font-size:10px;
margin-left:auto;
margin-right:auto;
background-image:url(images/grad.png);
background-repeat:repeat-y;
padding:0 20px;
clear:both;
position:relative;
margin-top:-208px;
}
body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#333333;
background-repeat:repeat-x;
padding: 0;
height: 100%;
}
#wrap {
width:960px;
margin:0 auto;
min-height:100%;
height: 100%;
}
#content {
width:892px;
float:left;
border-left:4px solid white;
border-right:4px solid white;
padding:15px 0px 15px 20px;
background-image:url(images/sidebar_bg.png);
position:relative;
padding-bottom:143px;
}
I have had to reduce the #content padding-bottom, so it would fit. But I am still having issues. Firstly, There is too much space at the bottom of longer pages (see - http://bellbird.redgraphic.co.uk/headteacher/ ) Secondly, on a shorter page the footer doesnt scroll up when the browser window is resized (see - http://bellbird.redgraphic.co.uk/school-council/ )
Sticky footers always seem to be an issue, so I must be missing a trick.
Any help would be greatly appreciated.
Lewis
usefull link here. This one helped me with the same issue.
CSS mark-up:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
HTML mark-up:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
use this css instead of your
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
height:40px; /* Height of the footer */
background:#6cf;
}
html:
<div class="wrap">
<div class="inner-wrap">
...
</div>
</div>
<footer>
...
</footer>
css:
html, body {height:100%;}
.wrap {min-height:100%; height:auto !important; margin-bottom:-100px;}
.inner-wrap {padding-bottom:100px;}
footer {height:100px;}