I would put the site name in the middle of this header but unfortunately I can not do it, I've tried many combinations but I just can not. I'll post the source
CSS
.header {
background-color:#00B9ED;
height:50px;
border-bottom:0px;
padding-left:auto;
padding-right:auto;
width:100%;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:1000px;
padding-top:0px;
padding-bottom:0px;
}
.logo {
width:150px;
margin: 0 auto;
}
.logo img {
width:150px;
height:50px;
}
.logo:hover {
height:50px;
background-color:#A9E2F3;
cursor:pointer;
}
HTML
<div class="header">
<div id="wrapper">
<div class="logo">
<img src="image.png" />
</div>
</div>
</div>
have no idea how can I do? Thanks
Use Below Code
<style>
.header {
background-color:#00B9ED;
height:50px;
border-bottom:0px;
padding-left:auto;
padding-right:auto;
width:100%;
}
#wrapper {
margin-left:auto;
margim-right:auto;
padding-top:0px;
padding-bottom:0px;
}
.logo {
text-align: center;
}
.logo img {
width:150px;
height:50px;
}
.logo:hover {
height:50px;
background-color:#A9E2F3;
cursor:pointer;
}
</style>
<div class="header">
<div id="wrapper">
<div class="logo">
<a>Bhavin<img src="image.png"></a>
</div>
</div>
</div>
Always try to code with standards. You can use text-align but it is for align paragraph or other elements with text. Insted align I would recommend to use margin:0 auto;width:150px;.
Here you got jsFiddle
try this
CSS
#wrapper {
margin: 0 auto;
padding-bottom: 0;
padding-top: 0;
width: 1000px;
}
.logo {
margin: 0 auto;
width: 150px;
}
HTML
<div class="header">
<div id="wrapper">
<div class="logo">
logo<img src="image.png" alt="LOGO"/>
</div>
</div>
</div>
Related
So essentially I am writing a game in javascript. I have a canvas on the left, a canvas in the middle, a textarea topright, and a canvas bottom right. But I can't seem to get the right CSS code to figure out this layout like the picture. I want the middle to take up about 50-60% of the middle of the page, and the left and right columns taking the rest of the space. Would be nice if it auto resized with browser window. Any help would be appreciated.
Set a container to hold all the elements and then make smaller containers inside. Target each with CSS and set its properties.
Here I set a general CSS class .generalStyles just to simplify the code.
You would use something like this: (run the snippet)
.generalStyles
{
position:relative;
float:left;
background-color:#000;
border-radius:4px;
box-sizing:border-box;
color:#f00;
height:100px;
padding:5px;
text-align:center;
}
.container
{
width:100%;
background-color:#FFF;
}
.leftPanel
{
width:24%;
margin:0 1% 0 0;
}
.rightPanel
{
width:24%;
margin:0 0 0 1%;
background-color:#FFF;
padding:0;
}
.middlePanel
{
width:50%;
margin:0;
}
.topPanel
{
width:100%;
margin:0;
height:49.5%;
}
.bottomPanel
{
width:100%;
margin:1% 0 0 0;
height:49.5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div class="container generalStyles">
<div class="leftPanel generalStyles">left stuff goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="middlePanel generalStyles">middle goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="rightPanel generalStyles">
<div class="topPanel generalStyles">top stuff<br/>and more here</div>
<div class="bottomPanel generalStyles">bottom stuff<br/>and more here</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h2 {
text-align:center;
font-family:arial;
color:red;
font-weight:normal;
}
.left {
background-color: #000;
border-radius:10px;
float: left;
width: 20%;
padding: 10px;
margin:10px;
height: 300px;
}
.middle {
background-color: #000;
border-radius:10px;
float: left;
width: 60%;
padding: 10px;
margin:10px;
height: 300px;
}
.right {
float: left;
width: 20%;
margin: 10px;
height: 300px;
position: relative;
top: 0;
}
.top {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
}
.bottom {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.row {
box-sizing:border-box;
display: flex;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="left">
<h2>left</h2>
</div>
<div class="middle">
<h2>middle</h2>
</div>
<div class="right">
<div class="top">
<h2>top right</h2>
</div>
<div class="bottom">
<h2>bottom right</h2>
</div>
</div>
</div>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right">
<div class="rightDiv"></div>
<div class="rightDiv"></div>
</div>
</div
and css
.container{display:block;width:100%}.left,.middle,.right{width:100px;display:inline-block}.left{border:1px solid red;height:100px}.middle{border:1px solid green;height:100px}.rightDiv{border:1px solid #ff0;height:40px;margin:10px 0}
Fiddle
i have this CSS:
<style type="text/css">
#box {
width:100%;
height:80px;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
#text, #text a {
font-size:16px;
color:#F36F25;
margin:10px;
}
#text:hover, #text a:hover {
color:#666666;
text-decoration:none;
}
#text img {
vertical-align: middle;
margin-right:20px;
}
</style>
its currently displaying the image and text inline but i have multiple images/text below each other. how can i make all the images align in the same position below each other?
here is a fiddle: http://jsfiddle.net/8dsTu/
http://jsfiddle.net/8dsTu/4/
<div id="text">
<img src="../images/icons/address.png" height="60" />
<div style="display:inline-block;">
Address 1,<br />
Address 2,<br />
County Post Code
</div>
</div>
Edit css:
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:left;
margin-left:100px;
}
Your HTML is invalid, id property is meant to be unique and you have a few <div> elements with id="text". To get what you want you'll have to: (jsFiddle)
replace all id="text" with class="text" and add <div class="caption"> to wrap each of the captions:
<div id="box">
<div class="box-inner">
<div class="text">
<img src="../images/icons/telephone.png" height="60" />
<div class="caption">00000 00 00 00</div>
</div>
<div class="text">
<img src="../images/icons/email.png" height="60" />
<div class="caption">sales#domain.co.uk</div>
</div>
<div class="text">
<img src="../images/icons/address.png" height="60" />
<div class="caption">Address 1,<br />Address 2,<br />County Post Code</div>
</div>
</div>
</div>
Adjust the css:
#box {
width:100%;
height:80px;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
.text, .text a {
font-size:16px;
color:#F36F25;
margin:10px;
}
.text:hover, .text a:hover {
color:#666666;
text-decoration:none;
}
.text img {
vertical-align: middle;
margin-right:20px;
}
.caption{ /* This is the new bit - display:inline-block does the trick. adjust margin-top to your needs */
display:inline-block;
vertical-align:top;
margin-top:15px;
}
#box {
width:100%;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
.text, .text a {
font-size:16px;
color:#F36F25;
}
.text:hover, .text a:hover {
color:#666666;
text-decoration:none;
}
.text img {
vertical-align: middle;
margin-right:20px;
width: 60px;
background: black;
float: left;
}
.text {
overflow: hidden;
width: 250px;
margin: 10px auto;
}
Something like this? But you must replace your id's with classes.
I have a site I'm currently working on which requires a sticky footer as some of the pages content is smaller then the rest.
My Website
I have tried many resources/tutorials trying to get a sticky footer working.
Tutorial Followed
I have attempted to implement this tutorial and below is my code which goes with it. I'm hoping someone
Could anybody possibly suggest CSS changes to my code to implement this feature.
<body>
<div id="wrapper">
<div id="header-wrap">
<div id="header"></div>
<div id="home-header"></div>
<div class="push"></div>
</div>
<div id="footer-wrap">
</div>
</div>
</body>
CSS
#footer-wrap
{
background: url("images/footer.jpg") repeat-x scroll center bottom transparent;
color: rgb(117, 139, 141);
height: 462px;
position: relative;
width: 100%;
}
#header-wrap
{
clear: both;
min-height: 100%;
margin-bottom: -462px;
}
#header-wrap:after
{
content:"";
display:block;
height:462px;
}
Not working for me. Need Help!
Also 'push' is not in use. Use it maybe?
EDIT
body {
height: 100%;
margin:0px
}
html
{
height: 100%;
margin: 0px;
}
#wrapper
{
min-height: auto !important;
min-height: 100%;
}
UPD
<style type="text/css">
#footer-wrap
{
height: 462px;
position: relative;
width: 100%;
}
html, body {
height: 100%;
margin:0px;
background: #eee;
margin-bottom: -462px;
}
#wrapper
{
min-height: auto !important;
min-height: 100%;
border: 1px solid red;
margin-bottom: -462px;
}
#wrapper:after
{
content:"";
display:block;
height:462px;
}
</style>
HTML
<div id="wrapper">
<div id="header-wrap">
<div id="header"></div>
<div id="home-header"></div>
<div id="page-wrap"></div>
</div>
</div>
<div id="footer-wrap">
</div>
You can do this by css trick
css
body, html{
padding:0;
margin:0;
height:100%;
}
.wrapper{
min-height:100%;
position:relative;
}
.container{
width:960px;
margin:0 auto;
padding-bottom:100px;
}
.header{
height:100px;
background-color:#066;
}
.footer{
position:absolute;
bottom:0;
height:100px;
background-color:#006;
width:100%;
}
html
<div class="wrapper">
<div class="container">
<div class="header">
Header
</div>
<div style=" text-align:center; padding-top:25px;">
Place you content here as much as you like
</div>
</div>
<div class="footer">
Footer
</div>
</div>
working js Fiddle File
This works.
CSS
* {
margin: 0;
}
html, body, #wrapper {
height: 100%;
}
.header-wrap {
min-height: 100%;
margin-bottom: -462px;
}
.header-wrap:after {
content: "";
display: block;
}
#footer-wrap, .header-wrap:after {
height: 462px;
}
#footer-wrap {
background: orange;
}
HTML
<div id="wrapper">
<div class="header-wrap">
<div id="header">#header</div>
<div id="home-header">#home-header</div>
</div>
<footer id="footer-wrap">
#footer-wrap
</footer>
</div>
Using CSS, I want to horizontally center two "boxes" I have within a div. The boxes are absolutely positioned.
Here is the JSFiddle: http://jsfiddle.net/p4sA3/8/
How would I achieve this without using specific widths?
HTML:
<button id="change">Change</button>
<div id="total-wrap">
<div id="hello-wrap" class="bunch">
<div id="box">
<p> Hello, this is text1 </p>
</div>
<div id="box">
<p> Hello, this is text2 </p>
</div>
</div>
<div id="goodbye-wrap" class="bunch">
<div id="box">
<p> Goodbye, this is text1 </p>
</div>
<div id="box">
<p> Goodbye, this is text2 </p>
</div>
</div>
</div>
CSS:
#total-wrap {
border:1px solid #000;
height:500px;
}
#box {
position:relative;
display:inline-block;
width:300px;
height:100px;
background-color:yellow;
margin:10px;
}
.bunch {
position: absolute;
text-align:center;
}
I would do it with left:0; and right:0 as they are absolutely positioned.
DEMO http://jsfiddle.net/kevinPHPkevin/p4sA3/19/
.bunch {
position: absolute;
text-align:center;
left:0;
right:0;
}
Solution:
#total-wrap {
border:1px solid #000;
height:500px;
}
#box {
display:inline-block;
width:300px;
height:100px;
background-color:yellow;
margin:10px;
text-align:center;
}
.bunch {
text-align:center;
}
<div id="wrap">
<div id="left">Box1</div>
<div id="right">Box2</div>
</div>
#wrap {
background: #e7e7e7;
padding: 40px;
text-align: center;
width: auto;
}
#left, #right {
background: yellow;
display: inline-block;
padding: 20px;
}
Is this what you want?
#box {
position:relative;
display:inline-block;
width:100px;
height:100px;
background-color:yellow;
margin:10px;
}
DEMO: http://jsfiddle.net/p4sA3/11/
The thing is that as long the sum of the widths exceeds the container, the second div will be positioned beneath the first one
In this other demo I didn't use width: http://jsfiddle.net/p4sA3/13/
If you want to use jQuery:
Demo
keepCentered = function() {
$('#hello-wrap').css({'margin-left':($('#total-wrap').width()-$('#hello-wrap').width())/2});
$('#goodbye-wrap').css({'margin-left':($('#total-wrap').width()-$('#goodbye-wrap').width())/2});
}
$(document).ready(keepCentered);
$(window).bind('resize', keepCentered);
i have trying to achieve this
| Div | |Div nav wrapper|
| logo |
|container|| Div banar container |
| || |
i hv tried this
<div class="grid_12">
<!--logo_container start here-->
<div id="logo_container">
</div>
<div style="margin-top: 57px" class="grid_13">
<div id="banar_container">
</div>
</div>
<!--logo_container end here-->
<div id="nav_wrapper">
<ul id="nav">
<li class="current_page_item">Home</li>
<li>My Profile</li>
<li>LogOut
</li>
</ul>
</div>
<!--#nav_wrapper-->
</div>
and the css are
.grid_12 {
width:940px;
}
.grid_13 {
width:851px;
}
#logo_container{
float:left;
margin-top:20px;}
#logo{
background:url(../images/bp.jpg) no-repeat left;
width:100px;
float:left;
height:100px;
}
#banar_container
{
float: left;
}
#banar
{
background:url(../images/Banner1.png) no-repeat left;
width: 851px;
float:left;
height: 71px;
}
#nav_wrapper {
position:relative;
display:inline;
float:right;
margin-right:25px;
margin-top:6px;
height:50px;
}
its not coming that way.. so what should i do?
this is my complete code ... this is what i am trying but failing to do it ... so guys pls take a look at this and tell me my fault
guys i am still struggling with this
I hope you'll find this example useful. Notice that, as you said, the size is fixed but still fluid relative to it's parent by using percentage.
HTML
<div id="example">
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
</div>
CSS
#example {
width: 400px;
height: 400px;
}
div.box01 {
float: left;
width: 20%;
height: 100%;
background-color: #eee;
}
div.box02 {
float: right;
min-width: 100px;
min-height: 100px;
background-color: #ccc;
}
div.box03 {
float: right;
width: 80%;
min-height: 100px;
background-color: #aaa;
}
Code Example
The trick is to realize you need more divs than just those three. That is to say, divs 2 and 3 need to have a parent that is a sibling of div 1. Try something like this: http://codepen.io/anon/pen/rLDqc
HTML:
<div id="left">This is your div on the left</div>
<div id="center">
<div id="main">Hello, this is the third div</div>
<div id="right">This is the div in the top right</div>
</div>
<div class="clear"></div>
CSS:
#left{
width:30%;
background:red;
height:100px;
}
#center{
width:70%;
background:blue;
height:100px;
}
#left, #center{
float:left;
}
#right{
position:relative;
display:inline;
float:right;
}
#main{
margin-top: 57px;
float: left;
}
.clear{
clear:both;
}
You may do something like this:
<div class="wrapper">
<div class="div1"></div><div class="div2"></div>
<div class="div3"></div>
</div>
and CSS:
div{border:solid 1px black;}
.div1 {
width:50px;
height:100px;
float:left;
}
.div2 {
width:50px;
height:18px;
float:right;
}
.div3 {
width:250px;
height:80px;
float:left;
}
.wrapper{
width:304px;
border:none;
}
Demo
Or maybe even something like this: http://jsfiddle.net/4YX9H/1/ - width and height of div2 may be almost any (it just must be not wider than its parent)
#div1 {
width: 100%;
}
#div2, #div3, #div4 {
width: 33.3%;
float: left;
}
<div id="div1">
<div id="div2"></div><div id="div3"></div><div id="div4></div>
</div>
Change width of inside divs according to your needs.
Most confusing job in web designing for me is to align divs like these but if you understand every aspect of float, display and some other properties important for layout designing then you can easily create such layouts.
Check this fiddle for an example
http://jsfiddle.net/DeepakKamat/xQKXz/1/
The HTML :
<div class="container">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
</div>
The CSS :
.container {backgroundcolor:yellow;display:block;width:400px;height:150px;padding:10px;}
.container div {margin:2px;color:white;}
#div1 {background-color:blue;width:20%;height:100%;border:2px dashed white;float:left;}
#div2 {background-color:green;display:inline-block;width:20%;height:70px;float:right;border:2px dashed white;}
#div3 {background-color:red;display:inline-block;width:76%;height:48%;border:2px dashed white;}
I hope this helps you.
Not sure what is the values of your div width and height.
Check this DEMO
Updated DEMO