My menubar show on my banner... It stacks.
Can you tell me how to put menubar below the banner?
<body>
<style type="text/css">
* { margin:0 auto;
padding:0;
}
html { background:#ffffff; }
body{
width:1600px;
height:800px;
overflow:auto;
background:#ffffff;
}
div#menu {
margin:40px 0 0 95px;
text-align:center;
position:absolute;
}
div#menu span {
font-size:22px;
padding-left:14px;
}
</style>
<?php
//include('menu.php');
include('menu_inc.htm');
?>
<img src="bannersketch.png" border="0">
</body>
Well the reason it is stacking is you have position:absolute;. Try putting the <img> tag above the php include and remove the absolute positioning and see if that helps.
Related
I know there are a lot of topics about image header; but I checked most of them, and they couldn't help me.
This is my problem: I have an image that I want to use as header. I finally found the way to place it, but then it shows with its original size. I tried max-width:100%, but the size didn't change and just stays there.
HTML:
<body>
<header id="niberus">
<img src="nib1.jpg" alt="nib1" width="1900px" height="450px"></img>
</header>
And for my CSS, I have this:
header#niberus
{
width: 100%;
}
I tried to remove the width and the height from my HTML file, but then the image stays at normal size. When I add the width and height like now, it fills the screen; but of course, when you make the window smaller, the picture doesn't change.
Here is my full HTML code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<title>Niberus-gaming</title>
</head>
<body>
<header id="niberus">
<img src="nib1.jpg" alt="nib1" width="1900px" height="450px"></img>
</header>
<div class="hbuttons">
<ul>
<li>-Home-</li>
<li>-News-</li>
<li>-Forum-</li>
<li>-Upcoming projects-</li>
<li>-About me-</li>
<li>-Contact-</li>
</ul>
</div>
<hr>
<table border="1" cellpadding="5px" cellspacing="10px">
<tr>
<td width="300px"><h1>Under construction</h1></td>
<td width="1300px" ><h1>Under construction</h1></td>
<td width="300px"><h1>Under construction</h1></td>
</tr>
</table>
</body>
</html>
And here is my full css code:
ul.horizontal li{
display:block;
float:left;
padding:0 10px;
width: 150px;
}
header#niberus
{
width: 100%;
}
body
{
background-color:black;
}
h1
{
color: white;
}
table
{
color: white;
text-align: left
}
.hbuttons{
float: left;
width: 100%;
background-color: #00FF00;
overflow:hidden;
position:relative;
}
.hbuttons ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
.hbuttons ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
.hbuttons ul li a {
display:block;
margin:0 0 0 1px;
padding:10px 10px;
font: 30px Impact;
color: white;
text-decoration:none;
line-height:15px
}
Currently you are targeting the header tag, you need to target the image itself. Remove the width and height attribute from the html. You can also set a max-width for the img tag if you need to
Target the image
header#niberus {
display: block;
}
header#niberus img {
width: 100%;
max-width: xxxx;
}
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 want to create a contact me section on a website i'm making but the problem is my whole website has text-align:center and i am using a definition list for the contact information. is there a way i can still use the wrapper for my page but align the text to the left without it going out of the white border?
CSS:
#charset "utf-8";
html {
text-align: center
}
#container {
margin-left:auto;
margin-right:auto;
margin-top:50 auto;
margin-bottom:50 auto;
width:1000px;
background-color:#666666;
}
#body1 {
background-color:#666666;
width:1000px;
height:405px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body2 {
background-color:#666666;
width:1000px;
height:800px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body3{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body4{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body5{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {
margin:0px;
background-color:#999;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px;
}
ul.navbar li {
width:20%;
display:inline-block;
}
ul.navbar a {
color:white;
font-size:20px;
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
color:#000000;
background-color:#CCC;
}
body {
background-color:#333333;
}
#portrait {
position:relative;
top:20px;
right:420px;
}
#headerhome {
position:relative;
bottom:130px;
left:50px;
font-size:30px;
text-decoration:underline;
font-family:arial;
color:#CCCCCC
}
#goal {
margin-left:40px;
text-align:left;
text-indent:40px;
position:relative;
bottom:110px
}
.tab {
margin-left:40px;
}
#contact {
position:relative;
right:390px;
text-align:left
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joe Scotto | Contact</title>
</head>
<body>
<div id="container">
<div id="body3">
<img src="banner.png" width="1000" height="100" />
<!--Navbar Start-->
<center>
<ul class="navbar">
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
</ul>
</center>
<!--Navbar End-->
<div id="contact">
<dl>
<dt><h3>Phone Number</h3></dt>
<dd>XXX-XXX-XXXX</dd>
<dt><h3>Email Address</h3></dt>
<dd>XXXXXX#gmail.com</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
If i understand you correctly then your problem can be fixed using two things:
in #contact css add "!important" after the "text-align:left;" on the same line
add margin if it overlaps.
If this doesnt answer your question please send me a link so i can see what is happening.
hope i helped.
#contact {
text-align:left;
} Might work. position:relative; Try removing. Because CSS goes from top to bottom and over-writes the properties with new values.. Check this
If you want to keep the "contact block" in the body3 (which is centered), why you added the code - "right: 390px;" to the #contact, I do not see the reason. So if you delete it everything will be okay.
Have you tried this?
dl {
text-align: left;
}
Edit: I added the above to your css and the list was aligned to the left.
remove the text-align:center from css in html tag and add text-align attribute in every div tag so you will get align as you want
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;}
I have a problem with a website I'm putting together. I have a simple div layout. Which is as follows:
<body>
<div id="Container">
<div id="Logo"></div>
<div id="Banner">
<div id="Nav"></div>
</div>
<div id="Content">
</div>
<div id="footer">Footer</div>
</div>
</body>
And my CSS is as follows:
#charset "utf-8";
/* CSS Document */
html, body {
height:100%;
padding:0;
margin:0;
background-image:url(../layout.img/background_gradient.gif);
background-repeat:repeat-x;
}
#Container {
height:100%;
width:950px;
margin:auto;
background-color:#FFFFFF;
border-left:1px solid #333333;
border-right:1px solid #333333;
}
#Logo {
width:160px;
height:160px;
float:right;
}
#Banner {
width:100%;
height:160px;
}
#Nav {
width:550px;
height:33px;
position:relative;
top:100px;
left:50px;
}
#Content {
clear:both;
}
And finally the result can be seen here:
http://jsfiddle.net/mczMS/
As you can see the 'container' div doesn't stretch out with the content as you scroll down the page. I know this is probably something stupidly simple but I'm running short of brain power today. Haha.
Try adding:
#container { min-height: 100%; }
after height 100%. You may also want to try:
#container { overflow: auto; }
If you remove the height:100% from the container it will stretch to fit its contents.