After researching for hours I still can't get it to work.
I want to add a color or a texturey image to my site's background, but it stays white.
The relevant CSS is:
#html {
min-height: 100%;
}
#body {
min-height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
font-family: "Lucida Console", Monaco, monospace;
}
And the HTML. Its kinda messy because I'm a noob.:
<body>
<div id="ribbon">
<div id="container" style="height: 100%;">
<div id="social_and_music">
<div id="audioplayer">
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div id="social">
<img src="images/facebook.png" width="32" height="32" />
<img src="images/twitter.png" width="32" height="32" />
<img src="images/lastfm.png" width="32" height="32" />
<img src="images/myspace.png" width="32" height="32" />
</div>
</div>
<div id="header"></div>
<div class="nav" id="nav1">HOME</div>
<div class="nav" id="nav2">MUSIC</div>
<div class="nav" id="nav3">SHOWS</div>
<div class="nav" id="nav4">CONTACT</div>
<div id="main_content">
<div id="main_img"></div>
<div id="second_image">
<div class="widget_iframe" style="display:inline-block;width:100%;height:200px;margin:0;padding:0;border:0;">
<iframe class="widget_iframe" src="http://www.reverbnation.com/widget_code/html_widget/artist_3258446?widget_id=52&posted_by=artist_3258446&pwc[design]=default&pwc[background_color]=%23333333&pwc[layout]=compact&pwc[show_map]=0&pwc[size]=fit" width="100%" height="100%" frameborder="0" scrolling="no">SHOWS</iframe>
</center>
</div>
</div>
</div>
</div>
<div id="leftbox">
<div id="imgA" class="img"></div>
<div id="imgB" class="img"></div>
<div id="imgC" class="img"></div>
<div id="imgD" class="img"></div>
</div>
<div id="rightbox">right</div>
<div id="footer">Content for footer goes here</div>
<div id="bottom">STEREO WARFARE COPYRIGHT 2011 ARIEL MEHRBAN</div>
</div>
</div>
</div>
<div id="push"></div>
</body>
i think your css should be:
html {
min-height: 100%;
}
body {
min-height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
font-family: "Lucida Console", Monaco, monospace;
}
and on the html page you should have like this:
<html>
<body>
<!-- ... -->
</body>
</html>
when you put a # it means u are using a id like
css:
#text{
background-color:#aaa;
}
html:
<html>
<body>
<input type="text" id="text"/>
</body>
</html>
Try to add the image in body tag, this should work fine in any browser.
<!DOCTYPE html>
<html>
<head>
</head>
<body background="imagename.jpg">
<p>some text</p>
</body>
</html>
I am using my html and css code for the background color like these .
HTML
<div class="wrapper">
CSS
wrapper {
width: 900px;
height: 800px;
background-color: #ffffff;
margin: 0 auto;
}
Related
I have problem with my footer. I am using ASP.NET Core 2 MVC, with Razor View.
Right now I tryed everything from this, including comments:
https://css-tricks.com/couple-takes-sticky-footer/ & https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Note, that I do not want fixed footer. I know that there is several similar topics in SO, but I tryed already everything I found. I belive that I am missig something obvoius. I work on this whole day already and it just stops me.
Every time my footer is rendered just below Edit, Delete buttons, or somewhere in the middle of page. I am guessing that it might be something with my _Layout architecutre or for in Index file is causing ot somehow.
My _Layout.cshtml looks like this:
<div class="wrapper">
<div class="header">
<!--HEADER-->
</div>
<div class="content">
<!--BODY-->
#RenderBody()
</div>
<div class="footer">
<!--FOOTER-->
<footer>
<div></div>
</footer>
</div>
</div>
My Index.cshtml looks like (for most of the cases footer was rendered below Edit/Delete form:
<div>
#if (Context.User.Identity.IsAuthenticated)
{
<a asp-action="Create" class="btn btn-sm btn-primary adminBtn">Add new project</a>
}
<div>
#foreach (var item in Model)
{
<div class="projectContainer col-lg-6">
#if (Context.User.Identity.IsAuthenticated)
{
<form asp-action="Delete" method="post">
<a asp-action="Edit" class="btn btn-sm btn-warning"
asp-route-projectID="#item.ProjectID">
Edit
</a>
<input type="hidden" name="ProjectID" value="#item.ProjectID" />
<button type="submit" class="btn btn-danger btn-sm">
Delete
</button>
</form>
}
<div class="innerContainer" style="background-color: #item.BackColor">
<div class="projectHeader col-xs-12">
#item.Name
</div>
<div class="hyperButton col-xs-12">
<a asp-action="Details" asp-route-projectID="#item.ProjectID">See more ></a>
</div>
<div class="projectPictures col-xs-12">
<a asp-action="Details" asp-route-projectID="#item.ProjectID"><img src="#item.PictureUrl" asp-append-version="true" /></a>
</div>
</div>
</div>
}
</div>
</div>
My site.css looks like that right now:
html, body {
height: 100%;
overflow-x: hidden;
}
body {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
UPDATE with source code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="/src/lib/fontawesome/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="/src/lib/bootstrap/css/bootstrap.min.css">
<script src="/src/lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/dist/site.css" />
<style>
.input-validation-error {
border-color: red;
background-color: #fee;
}
</style>
<title>
Przemyslaw Bak - My projects
</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<!--HEADER-->
<div class="mainHeader">
<div class="helloTextContainer col-12">
<div class="helloTxtWrapper">Hi! I am</div>
</div>
<div class="mainTextContainer col-sm-9 col-xs-12">
<div class="mainTxtWrapper">Przemyslaw Bak {developer}</div>
</div>
<div class="socialContainer col-sm-3 hidden-sm-down">
<!--VIEW COMPONENT-->
<i class="fab fa-facebook-square"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-github-square"></i>
</div>
</div>
<div class="mainNavbar">
<div><a class="mainButton projects" href="/">my projects</a></div>
<div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
<div><a class="mainButton about" href="/Literature">literature</a></div>
<div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
</div>
<div class="stickyNavbar">
<div><a class="mainButton projects" href="/">my projects</a></div>
<div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
<div><a class="mainButton about" href="/Literature">literature</a></div>
<div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
</div>
<!--HERE TRIGGERS APP.JS-->
<div class="emptySpace" id="app"></div>
</div>
<!--BODY-->
<div class="content">
<!--button-->
<style>
.projects {
color: gray !important;
}
</style>
<div>
<div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #E8E8E8">
<div class="projectHeader col-xs-12">
Name of the project
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="#" />
</div>
</div>
</div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #fafafa">
<div class="projectHeader col-xs-12">
Name of the project
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" />
</div>
</div>
</div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #f9fbf8">
<div class="projectHeader col-xs-12">
Best project ever
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" />
</div>
</div>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div class="footer">
<footer>
<div class="footText">© 2018 - Przemyslaw Bak</div>
</footer>
</div>
</div>
<!--SCRIPTS-->
<script src="/dist/bundle.js"></script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
</body>
</html>
Currently after scrolling down my footer looks like this (2018 - Przemyslaw Bak):
UPDATE2:
I am using Bootstrap 4, maybe it changes something
Take out that position: absolute; in the footer CSS
.footer {
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
html, body {
height: 100%;
overflow-x: hidden;
}
body {
min-height: 100%;
position: relative;
}
.footer {
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
<div class="wrapper">
<div class="header">
<!--HEADER-->
</div>
<div class="content">
<!--BODY-->
<p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p>
</div>
<div class="footer">
<!--FOOTER-->
<footer>
<div>Div inside footer</div>
</footer>
</div>
</div>
if you using bootstrap 4 there good solition for you,
https://getbootstrap.com/docs/4.0/utilities/flex/#align-self
you need self item end if you wanna use to bootstrap I think you should be use this.
After Viktor`s comments I stripped out my HTML code and started to suspect, that my Bootstrap (previously 4.0.6) is messing up something.
So I started to Google "flush footer bootstrap" and I found this:
Flush footer to the bottom of the page in bootstrap 4
After installation Bootstrap 4.1.X files, I changed my site.css and _Layout.cshtml as follows:
body, wrapper {
min-height: 100vh;
}
footer {
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
_Layout.cshtml:
<body>
<wrapper class="d-flex flex-column">
//nav bar
//render body
<main class="container-fluid py-3 flex-fill">
#RenderBody()
</main>
//footer
<footer>
<div class="footText">© #DateTime.Now.Year - Przemyslaw Bak</div>
</footer>
</wrapper>
//scripts
</body>
And it works!
Here is the code:
<div class="row" >
<div id="box1" class="col-lg-4 box"style="">
<img src="images/1.png" style="" class="num-img">
box 1 content
</div>
<div id="box2" class="col-lg-4 box" style="">
<img src="images/2.png" style="" class="num-img">
box 2 content
</div>
<div id="box3" class="col-lg-4 box" style="">
<img src="images/3.png" style="" class="num-img">
box 3 content
</div>
</div>
CSS of the box:
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
This is how I want it to look like:
This is how it looks right now :
And this is how it looks when I remove the box class and write:
<div id="box1" class="col-lg-4 "style="">
How do I fix this??
Update (after adding margin:0 auto):
You are possibly overriding the width of the col-lg-4 divs, depending on when your box css is loaded. Try
<div id="box1" class="col-lg-4">
<div class="box">
<img src="images/1.png" style="" class="num-img">
box 1 content
</div>
</div>
This will not force the col-lg-4 div to have a set px width, but instead a % with the inner div having a set width.
If you want to center the blocks within the bootstrap cols, add margin: 0 auto; to your box css.
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
margin: 0 auto;
}
example using your fiddle
Add col-offset-2 with all col classes and you will see change. change col-offset-2 as per requirement.
Or you can wrap the box in a column like this..
<div class="row" >
<div id="box1" class="col-lg-4"style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 1 content
</div>
</div>
<div id="box2" class="col-lg-4" style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 2 content
</div>
</div>
<div id="box3" class="col-lg-4" style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 3 content
</div>
</div>
</div>
Please check this:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="row" >
<div id="box1" class="col-lg-4 text-center">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 1 content
</div>
</div>
<div id="box2" class="col-lg-4 text-center" style="">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 2 content
</div>
</div>
<div id="box3" class="col-lg-4 text-center" style="">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 3 content
</div>
</div>
</div>
</body>
</html>
CodePen:http://codepen.io/anon/pen/ZbOKKw
I have a position:fixed footer on my page so that it scrolls with the page. Inside that footer I have a set of five images. The problem is that the images all hang off the bottom of the footer so the bottoms are not visible. No margin or padding values have moved them to the appropriate place on screen. Is there a css command I am missing or is their something weird with the footer?
This is the css for the footer and images within it. Thanks for any help.
.footer {
background-color: rgba(0, 0, 0, 0.5);
height: 100px;
font-size:20px;
color:black;
font-family:Verdana;
padding-left: 8px;
width: 100%;
position:fixed; left:0px; bottom:100px;
}
.footer img{
width: 59px;
height: 90px;
float: right;
display:inline;
padding: 1px;
margin-right: 50px;
}
<body>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="leftSidebar">
<div align="center">
<h3>Quick Stats</h3>
</div>
<p>Title: Exposure</p>
<p>Author: Kathy/Brendan Reichs</p>
<p>Series: Virals</p>
<p>Length: 436 pages</p>
<p>Publication Date: March 6, 2014 </p>
<p align="center"><img src="../Images/Barnes-and-Noble.png" width="180" height="120" /><img src="../Images/amazon.png" width="180" height="98.18" style="z-index: -1;" /></p>
</div>
<div class="rightSidebar">
<div align="center">
<h3>Kathy Reichs</h3>
</div>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br></p>
</div>
<div class="middleBar">
<div class="bookTitle" align="center">
<h1>Virals: Exposure</h1>
<h2 style="font-size:24px;">Kathy and Brendan Reichs</h2>
</div>
<div align="center"><img name="" src="../Exposure.jpg" width="315" height="456" alt="" /></div>
</div>
</div>
<div class="footer">
<div class="relatedBooks">
<p>Related Books: ssssss </p>
</div>
<div class="footerImages">
<img src="../Images/Swipe.jpg" width="1000" height="1500" />
<img src="../Images/Code.jpg" width="59" height="90" />
<img src="../Images/Shift.jpg" width="1000" height="1500" />
<img src="../Images/Seizure.jpg" width="327" height="500" />
<img src="../Images/Virals.jpg" width="327" height="500" />
</div>
</div>
</div>
</body>
Just delete the "height: 100px;". It will be set to auto then, and if you want some more space around the images then use something like "padding: 24px 0;" to space it out a bit. There's no reason to declare the height of the footer. It will auto-grow to the size of your images. I imagine that's why they're floating off.
I have a footer and am wanting it to be 100% in width using the 960 grid system, all is fine I can it to work within a div tag using an id. but the grid floats all the way to the left of the page while the whole site using the grid is centered on the page. I have tried prefix_2 to give a push over to the right but it doesn't line up correctly.
Here is my code to start with.
<div id="footer" class="container_12"><img class="prefix_6" id="abs" align="right" src="#img" width="500" height="258" />
<br /><br />
<div class="grid_2"><p>Home</p><p>Services</p><p>Plans</p></div>
<div class="grid_2"><p>Pricing</p><p>Design</p><p>Logos</p></div>
<div class="grid_2 suffix_6"><p>Call Tool Free:</p><p>1-800-495-5933</p><p>Contact Us</p></div>
<div class="grid_6"><img src="#img" width="16" height="16" />Follow me on Twitter <img src="#img" width="16" height="16" />Become a Fan on Facebook</div>
</div>
css:
#footer {
background-color: #f0e9d8;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #6e2500;
font-weight: bold;
height: 250px;
}
#abs {
position: absolute;
clip: rect(auto,auto,500px,auto);
}
If I understand you correctly, you want that footer would be 100% width? That's a easy fix.
You just need an another wrapper around your footer code. I would do it like this:
<div id="footer">
<div class="container_12">
<img class="prefix_6" id="abs" align="right" src="#img" width="500" height="258" />
<br /><br />
<div class="grid_2"><p>Home</p><p>Services</p><p>Plans</p></div>
<div class="grid_2"><p>Pricing</p><p>Design</p><p>Logos</p></div>
<div class="grid_2 suffix_6"><p>Call Tool Free:</p><p>1-800-495-5933</p><p>Contact Us</p></div>
<div class="grid_6"><img src="#img" width="16" height="16" />Follow me on Twitter <img src="#img" width="16" height="16" />Become a Fan on Facebook</div>
</div>
</div>
And the css for that would be:
#footer {
background-color: #f0e9d8;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #6e2500;
font-weight: bold;
height: 250px;
width: 100%;
position: relative;
}
#abs {
position: absolute;
clip: rect(auto,auto,500px,auto);
}
If you want the footer's width to be 100% just remove it from the 960 Grid System.
<html>
<body>
<header>
Header
</header>
<section class="container_12">
<!--960 grid-->
</section>
<footer class="footer-main">
<!--img-->
</footer>
</body>
</html>
css
.footer-main {
width:100%;
}
I'm trying to make a little gallery of some school works I've done in my animation class. I want to put 3 images on each line and they are all in divs because I did onion skin wrapping for a dropshadow on them. Unfortunately this makes them all just stick together in two lines across the page. But I want them specifically formatted so I tried to wrap a div of 480px wide around each set of 3. In IE this works great and it looks perfect. However in firefox it does this
I can't figure out why it is putting that one left aligned on the second line and therefore screwing up the order of the rest. Here's my code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ryan Merl's Portfolio</title>
<style type='text/css'>
* {
padding: 0px;
margin: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
body {
background-color:#333333;
background-image: url('images/head.png');
background-repeat: repeat-x;
}
a {
color:#333333;
text-decoration: none;
}
a:hover {
color:#000000;
text-decoration:underline;
}
div.main {
width: 800px;
background-color:#FFFFFF;
margin-top: 10px;
color: #000000;
height: 1000px;
margin-bottom: 10px;
}
img.thumb {
}
.wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
}
.wrap1 {
float:left;
background:url('images/shadow.gif') right bottom no-repeat;
}
.wrap2 {
background:url('images/corner_bl.gif') left bottom no-repeat;
}
.wrap3 {
padding:0 4px 4px 0;
background:url('images/corner_tr.gif' ) right top no-repeat;
}
</style>
<link rel="stylesheet" type="text/css" href="doc/css/style.css" />
<script type="text/javascript" src="src/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="src/shadowbox.js"></script>
<script type="text/javascript" src="glossy.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', 'src/skin');
Shadowbox.loadLanguage('en', 'src/lang');
Shadowbox.loadPlayer(['flv', 'html','img', 'swf'], 'src/player');
window.onload = function(){
Shadowbox.init();
};
</script>
</head>
<body>
<center><div class='main'>
<img src='images/theantistudio.png' /><br /><br />
<img src='images/gallery.png' /><br />
<div style='text-align:center;width:480px;'>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_particle_fire.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_fire.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_firework.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_firework.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_fountain.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_fountain.png' /></a>
</div>
</div>
</div>
</div>
<br />
<div style='text-align:center;width:480px;'>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_logo.flv' rel='shadowbox'><img class='thumb' src= 'thumbs/thumb_logo.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_rocket_ship.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_rocket.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_solar_system.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_solar_system.png' /></a>
</div>
</div>
</div>
</div>
<br />
<div style='text-align:center;width:480px;'>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_space_ship.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_space_ship.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_still_life.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_still_life.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_walkthrough.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_walkthrough.png' /></a>
</div>
</div>
</div>
</div>
</div></center>
</body>
</html>
It looks like your second image may be slightly taller than your third. So your floated second line is only floating back until it hits the second image. Either set your image or wrap1 heights, or add style="clear:both" to the break tags between lines.
I cannot see your picture, but based on your description it sounds like you're not clearing the floats. You have a br after each block of three images in a div, so adding the following CSS will clear the floats and show three in a row.
br { clear: both; }
Also, if there is not enough width on a specified "line", it will drop down to the next line. Try making the window as wide as possible (click n drag) and see if this is the issue.