I am making a basic template for a website. It has div containers of 1 header, a main menu listed horizontally below the header, the main content which is a google maps iframe (variable width) and a sidebar (absolute width, floated right) and a footer.
I am having some trouble with the height of the main content. I would like the iframe and the sidebar to have equal height whilst fitting to the page and leaving a margin for the footer but the main content always sets itself to min-height rather than stretching to the page.
HTML
<body>
<div id="wrapper">
<div id="header"><img src="images/logo.png" width="360" height="127" /> </div><!--header-->
<div id="menu">
<ul><li>Home</li>
<li>About</li>
<li>Network</li>
<li>Help</li>
<li>Contact</li></ul>
</div><!--mrnu-->
<div id="content">
<div id="sidebar">
Sidebar
</div><!--sidebar-->
<div id="main">
<iframe id="map" width="100%" height="auto" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?q=52.988337,3.120117&num=1&ie=UTF8&t=m&z=6&ll=51.206883,7.756348&output=embed"></iframe>
</div><!--main-->
<div class="clear"></div>
</div><!--content-->
<div class="push"></div><!--push-->
<div id="footer" class="footer">
</div><!--footer-->
</div><!--wrapper-->
</body>
</html>
CSS
body {
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-size: 75.00%;
color: #fff;
background: url(images/bg.png);
}
a{
color: #090;
text-decoration:none;
}
a:focus, a:hover, a:active {
color: #FFF;
text-decoration: underline;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
* {
margin: 0;
}
html, body {
height: 100%;
}
/* div tags */
#wrapper {
width: auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#header {
position: relative;
width: auto;
height: auto;
background-color: #090;
}
#menu {
width: auto;
height: auto;
border: 2px solid #000;
font-size: 18px;
}
#menu ul {
padding: 0px;
margin: 0px;
text-align: center;
}
#menu li {
display: inline;
padding: 50px;
}
#content {
width: auto;
height: 100%;
}
#main {
width: auto;
margin-right: 125px;
}
#map {
width: 100%;
height: auto;
}
#sidebar {
width: 125px;
height: auto;
float: right;
text-align: center;
background-color: #FC0;
}
#footer {
width: auto;
height: 125px;
background-color:#CC0;
}
/* classes */
.clear {
clear: both;
}
.footer .push {
height:125px;
}
Note: There may be 1 or 2 unused lines of code that I haven't spotted when I've been playing around with it so if anything seems out of place then it probably is.
I have seen solutions to this problem with fixed width containers, but I think the problem lies in my use of the float function. I have read that positioning needs to be absolute for this to work properly, however using float is the only way I have been able to find that allows the map to fill the space using variable width.
It could be something as simple as being incompatible with the browsers I am testing on but I'm not sure.
Thanks in advance and sorry if this post is a bit messy. I'm sure I will learn to keep clean soon enough ;D
Try these style changes-:
#map {
width: 100%;
// height: auto;
}
#content {
width: auto;
//height: 100%;
height: auto;
}
Setting #content to height:auto pushes the #footer div to meet the #content div.
and in <iframe> set height to 100% (or 80% to show footer). It still leaves the issue of the map div now pushing the footer to below screen height. To deal with that, possibly set an absolute height for the iframe, or use an alternative to iframe.
Related
I have floated the image left with a class of logo. I apply a background color for h1 and the image but it does not appear for some reason. Why is this happening? I have floated the image because the text appears below the image not top of the image. Is there a way to deal with it?
JS Fiddle - https://jsfiddle.net/z8cw31j9/
#import url(http://fonts.googleapis.com/css?family=Niconne);
body {
background: #e6e3d7;
font-size: 16px;
}
header {
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo {
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font: 300% 'Niconne', cursive;
line-height: 200%;
height: 0;
color: white;
margin-left: 2%;
background: blue;
}
.clear {
clear: both;
}
.search {
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300">
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
Actually background color was set successfully, but you can't see because of zero height:
header h1 {
height: 0;
}
#import url(http://fonts.googleapis.com/css?family=Niconne);
body{
background: #e6e3d7;
font-size: 16px;
}
header{
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo{
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font:300% 'Niconne', cursive ;
line-height: 200%;
color: white;
margin-left: 2%;
background: blue;
}
.clear{
clear: both;
}
.search{
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300" >
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
header h1{...enter code here...}
remove height:0;
The color you applied to the img tag is actually there. It's just directly behind the image, so you can't see it. If you apply padding: 25px to the .logo class you'll see what I mean.
In terms of the h1, you've given it a height: 0, so there's no space to show the background color.
for your h1, the background is not working because you set the height of the element to 0, so there wouldn't be any color that will show up.
and as for your img, the background is not working because you have a image in front of it.
If you want to see the background for the img, you can add a padding for it
im trying to edit the width of the logo but it wont go past 130px and i've tried moving the mainnav but still didnt find what is causing the logo not to fully display as i set it :(
.logo {
float: left;
margin-top: 5px;
margin-bottom: 15px;
}
.logo h1,
.logo h1 a {
display: inline-block;
line-height: 2;
margin: 1;
}
.logo-image {
overflow: hidden;
}
.logo-image h1 {
display: block;
font-size: 0;
}
.logo-image h1 a {
background-image: url("../images/logo.png");
background-repeat: no-repeat;
width: 150px; ![enter image description here][1]
height: 60px;
}
.logo-image h1 a span,
.logo-image h1 a small {
display: none;
}
<div class="span2 logo">
<div class="logo-image">
<h1>
<a href="" class="Citadella"> <!-- this right here -->
Hi, your actual logo is displayed on a-tag element and its current width is 200px. No matter what width you set for .span2 or .logo-image it won't change the actual logo's width. So you have to edit your a-tag's style.
so I have this little beginning of a site and I want the top menu to stay on top of anything else. I used position:fixed and now it does stay on top of everything except for one div that display a logo... I tried using z-index but that didn't help. How do I force that header to stay on top without using Js if possible...
The "blackBar" passes on top of the heading but it's the only this that does...
<body>
<div id="pageBloc">
<header>
<nav>
<ul>
<li>Stuff1</li>
<li>Stuff2</li>
<li>Stuff3</li>
<li>Stuff4</li>
<li>Stuff5</li>
</ul>
</nav>
</header>
<div id="topBloc">
<div id="blackBar">
<p id="logo"><img src="Images/logoSmall.png" alt="logo"</p>
<h1 id="titrePrincipal">MyTitle</h1>
<h2 id="soustitrePrincipal">SubTitle/h2>
</div>
</div>
<section id="temporatySection">
</section>
</div>
</body>
Here's the CSS
body, html
{
margin: 0px;
padding: 0px;
height:100%;
}
#pageBloc
{
height:100%;
}
/*Header*/
header
{
text-align:center;
background-color: #26292E;
height: 40px;
width: 100%;
position:fixed;
}
nav ul, nav li
{
margin-top:5px;
text-transform:uppercase;
display: inline-block;
list-style-type:none;
}
#topBloc
{
background: url('Images/backgroundBloc12.jpg') fixed center;
background-size:cover;
width: 100%;
height: 100%;
}
#blackBar
{
background: rgba(38,41,46,0.80);
position:absolute;
bottom:15%;
width: 100%;
}
#logo
{
padding: 3px;
text-align: center;
}
#titrePrincipal
{
display:none;
text-align:center;
color: white;
}
#soustitrePrincipal
{
text-align: center;
color:black;
}
#temporarySection
{
height: 1000px;
}
Add position: relative; z-index: -1; to #logo.
Then, make sure that you add z-index: -2 to #blackbar.
See here: http://jsfiddle.net/davidpauljunior/gGMzD/1/
Instead of position fixed, you can try
position: absolute
top: 0
left: 0
right: 0
z-index: 100
but if you must use position fixed, you can disregard this and see the answer above.
I’m having problems with my CSS. Basically I have a <div> called container which holds all the content of my site. The container runs parallel to a right hand margin of other stuff.
I need the two to align correctly at the bottom. Chrome and Safari show the container height the same and the right hand margin and container both align but in firefox the container is shorter than the right hand margin. Is there anyway I can set a seperate css condition for firefox or another way because it looks silly.
I have tried using height 100% but I can’t use this because I have javascript and other stuff which is hidden and fades in and other reasons.
#container {
/* [disabled]overflow: hidden;
*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/* [disabled]float: left; */
width: 960px;
margin-left: auto;
margin-right: auto;
}
body {
/* [disabled]margin-right: auto; */
/* [disabled]margin-left: auto; */
/* [disabled]width: 1010px; */
font-size: 11px;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
color:#3F3F3F;
background-color: #F3F3F3;
margin-top: 20px;
overflow:auto;
/* [disabled]float: left; */
}
You could try something like that:
HTML
<div>HEADER</div>
<div class="container">
<div class="content">
<p>Content Area</p>
<p>row#2</p>
<p>row#3</p>
<p>row#4</p>
<p>row#5</p>
<p>row#6</p>
</div>
<div class="sidebar">
Sidebar
</div>
</div>
<div>FOOTER</div>
CSS
.container {
width: 960px;
padding: 10px 20px 20px;
margin: 0 auto;
overflow: hidden;
}
.content, .sidebar {
float: left;
padding: 1%;
padding-bottom: 100%;
margin-bottom: -100%;
}
.content {
width: 68%;
background-color: red;
}
.sidebar {
width: 28%;
background-color: green;
}
This should align the two columns to the same height.
I've made a demo you can try.
EDIT: maybe you could take a look at the article on CSS-Tricks that talk about different valid alternative methods.
Without HTML it's tough to say exactly. What about putting both in a wrapper div that has a definite pixel height, then your #content and #margin divs at 100% height?
#wrapper{
width: 100%;
height: your height in px;
}
#container {
/* [disabled]overflow: hidden;
*/
height: 100%;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/* [disabled]float: left; */
width: 960px;
margin-left: auto;
margin-right: auto;
}
#margin{
height:100%;
}
Also, play with all of your CSS in firebug to troubleshoot this. Removing attributes one by one to find a possible problem.
This is the website in question: http://co-project.lboro.ac.uk/users/cokl/Computifieds/index.php
I'm trying to make it so that the divs in the Topright shift to the left when you resize the window smaller. But for some reason it doesn't.
It works when I disable .wrapper3's width style but then the page is no longer being wrapped anymore.
I know this has probably simple answer but I can't seem to work it out. Thanks.
this is the code relating to it:
<div id="Toppage">
<div id="Header" class="wrapper3">
<img style="float:left;" width="200" height="80"src="Images/logo.png">
<div id="Topright"><div class="nav" style=" margin-left: 17px; margin-top: 3px; font-size:16px;">Buy | Sell | My Account | Community | Messages</div></div>
<font style="float: right; display:block; clear:right; overflow:hidden; margin-top: 28px; font-size:12px;">
<?php
if(!isset($user_check))
{echo 'Welcome, please login/register to continue!';
} else {
echo 'Welcome '.$_SESSION['login_user'].'. To log out, please click here.';}
?>
</font>
<?php echo $getpmalert;?>
</div>
</div>
And the css is:
#Toppage{
background: url("Images/topback.png") repeat-x scroll left bottom #FFFFFF;
}
#Topmiddlepage{
background: url("Images/topmiddle.png") repeat-x scroll left bottom #FFFFFF;
}
#Header{
height: 80px;
}
#Middleheader{
height: 40px;
}
#Topright {
background: url("Images/topright.png") repeat-x scroll left bottom #FFFFFF;
color: #FFFFFF;
float: right;
width: 400px;
height: 31px;
overflow: hidden;
}
#Topright2 {
float: right;
width: 400px;
height: 31px;
overflow: hidden;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -170px; /* the bottom margin is the negative value of the footer's height */
position: relative;
font-size: 0.9em;
margin: 0 auto -170px;
text-align: left;
}
.wrapper3{
width: 980px;
margin: 0 auto;
overflow: hidden;
}
.page {
overflow: hidden;
width: 100%;
}
For .wrapper3 setting a min-width and max-width might work to make it a variable size. I know IE has some issues with this, but there are workarounds.
http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml
Hope this helps.
You'll want to add the following CSS:
#Topright {
position:fixed;
top:0px;
right:0px;
}
and then figure out what you want to do with the "pleas login" message.