I have a webpage with a background graphic that is 1024x768. My CSS and HTML is below. I also have a header graphic and a left side menu that is formatted text.
I want to create a template page. Everything is OK except...
I have a footer that I want to display at the bottom of the background area. How do I position that so that no matter what content I add the footer stays put? Not fixed as in position: fixed but placed in a preset position.
I have tried using a div tag to surround all but the footer with a width and height specified. I then added a div for the footer and expected it to position itself outside the first div. Clearly I have misunderstood.
JSFiddle with following HTML and CSS
HTML
<body>
<div id="allcontent">
<div id="header">
<img src="images/xxxxxxxxxxx.png" alt="xxxxxxxxx" />
<br /</div>
<div id="menu">
Home
<br />
<br />
Weddings
<br />
<br />
Portraits
<br />
<br />
Blog
<br />
<br />
Connect
</div>
</div>
<div id="footer">
<div id="phone">
tel. xxxxxxxx
</div>
<div id="email">
email: xxxx#xxxxxxxxxxxx.co.uk
</div>
<br />
<div id="copy">
© 2012, xxxxxxxxxxxxxx
<br />
Website constructed by <a class="footlink" href="http://xxxxxxxxxxx.co.uk" target="_blank">xxxxxxx</a>
</div>
</div>
</body>
CSS
body {
font-family: Arial,Helvetica,sans-serif;
font-size: large;
width: auto;
margin-left: auto;
margin-right: auto;
background-color: #451918;
color: #221b1b;
}
div#allcontent {
width: 1024px;
height: 768px;
margin-left: auto;
margin-right: auto;
background-image: url("images/web page background 1024x768.jpg");
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
div#menu {
float: left;
}
div#header {
padding-top: 50px;
padding-left: 50px;
text-align: left;
}
div#footer {
bottom: 0;
height: 50px;
text-align: center;
font-size: 85%;
color: #221b1b;
}
div#copy {
font-size: 50%;
}
div#phone {
font-size: 85%;
margin-left: 40px;
float: left;
}
div#email {
margin-right: 40px;
font-size: 85%;
float: right;
}
a.footlink:link {
color: #221b1b;
}
a.footlink:visited {
color: #221b1b;
}
a.footlink:hover {
color: #226225
}
a:link {
color: #9c7f7f;
}
a:hover {
color: #221b1b;
}
a:visited {
color: #5f4d4d;
}
You'll have to clear the floats of any div that precedes the footer.
Go ahead and set clear:both to #footer to see if it addresses the issue.
If all is well, you won't need to set heights for any of the elements before the footer, nor apply any of the workarounds that you may have tried.
Refer to this fiddle
There float in your menu so you have to clear it. Give clear:both on #footer. Like this:
#footer {
clear:both
}
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
here is the trick. You can follow the link to a tutorial for positioning footer
Related
Was wondering if i can display 1 text box and 3 images on the same row? All the images are the same size. If possible aswell i'd ideally like a some text underneath each image aswell?
heres the code:
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<img src="img/body-metrix.png">
<img src="img/body-metrix-logo.png">
<img src="img/market.png">
</div>
</div>
.row {
display: inline;
float: left;
}
.side-bar {
padding: 10px;
background-color: #f3f3f3;
height: 200px;
width: 250px;
}
.side-bar h3 {
font-weight: bold;
font-size: 19px;
margin-bottom: 5px;
}
.side-bar p {
font-size: 14px;
}
.side-bar a {
font-size: 13px;
}
.recent-wrap img {
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
Ive searched the internet but no luck as yet.
thanks in advance.
There are a number of ways to do this, one example is to float the two child elements:
.side-bar, .recent-wrap {
float: left;
}
This will only work if there is enough room on the parent element for the .side-bar and .recent-wrap to sit next to each other.
Example: http://jsbin.com/poxox/1/edit
CSS:
.row {
width: 250px
}
http://jsfiddle.net/3DCSd/
Here Is a working Fiddle
.row {
display: inline-block; /* changed to inline-block, you don't need
inline and float */
}
.recent-wrap a { /*changed to a , since your images are wrapped in <a> */
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
The rest of the CSS stayed the same
and HTML I just added the text box
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<input type="text" id="ss" />
<img src="img/body-metrix.png"/>
<img src="img/body-metrix-logo.png"/>
<img src="img/market.png"/>
</div>
</div>
Try this:
.side-bar {
padding: 10px;
background-color: #f3f3f3;
height: 200px;
width: 250px;
float: left; /* added */
}
.recent-wrap {
margin-left: 270px; /* added (padding + width) of side-bar */
}
Working Fiddle
This approach let the second container stay in line with the first container even if the window size is small.
Here is the sample with textboxes below image: example
I looked around the boards a bit and couldn't find anything that worked for me, but basically when I center an image that has an anchor tag wrapped around it, the linkable area fills out to fit the entire width of the div, even when specifying a width. How can I get the link to only be around the image?
Link to JS Fiddle http://jsfiddle.net/jJ4hv/
HTML
<div id="right">
<div id="content">
<div class="title">
<h3>Spawn</h3>
<p><< Go Back</p>
</div>
<img src="images/spawnThumb.png" />
<p class="description">Spawn</p>
</div><!-- END content -->
</div><!-- END right -->
CSS
#content img {
display: block;
margin: 0 auto;
width: 400px;
}
.title {
border-bottom: thin solid #316b9c;
margin-bottom: 20px;
}
.title a {
font-size: 12px;
color: #bcbdbf;
}
.title a:hover {
color: #316b9c;
}
.title a:active {
color: #000;
}
.topImage {
margin-bottom: 10px;
}
p {
color: #bcbdbf;
}
Just add #content a to the #content img CSS.
#content img,
#content a{
display: block;
margin: 0 auto;
width: 400px;
}
http://jsfiddle.net/jJ4hv/2/
You could possibly apply
display: table;
margin: auto
to the [a] tag surrounding the image.
I fixed the same issue by adding text-align: center to the a tag!
#content a {
text-align: center;
}
Trying to put an image next to a paragraph but it does not seem to work.
This is what I have:
<div class="dhn-info-div">
<p>DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span></p>
<img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors">
<div style="clear:both"></div>
</div>
and CSS:
.dhn-info-div {
margin-top: 20px;
background-color: #a20e45;
width: 95%;
display: inline-block;
}
.dhn-info-div p {
padding: 20px 40px 20px 40px;
color: white;
font-size: 18px;
line-height: 35px;
word-spacing: 5px;
}
.dhn-info-div img {
float: right;
}
Image has to be on the right of the text. The div shouldn't be 100% in size. Cheers
This is how I want it to look:
http://i.stack.imgur.com/bPxbB.png
Depending on if you want to wrap the text around the image or have 2 columns, here’s both solutions:
If you want to wrap the text around the image it needs to be within the p tag. See example (I have also added 10px padding around the image).
If you want 2 columns you need to define the width of both so they fit in. I have also added float: left; to both and some padding to the image to make it look slightly better. See example
EXAMPLE
You needed to add some width to some elements such as the text
also you had no width or height on your image.
I also added top:40px; to your image to bring it down to the level of the text
Can you put the <img> in your <p> at top? that would fix it:
<div class="dhn-info-div">
<p>
<img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors" />
DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span>
</p>
<div style="clear:both"></div>
</div>
Edit: is now responsive!
i made this fiddle, check it http://jsfiddle.net/fYh7u/
you can wrap the text in a div, and the image in another div, inside the main div "dnh-info-div", in my example i miss the "div", at end of class, because is obvious.
HTML:
<div class="dhn-info">
<div class="dhn-text">
<p>devonshire house network is a <span class="text-purple">people-focused</span> membership club for director-level <span class="text-purple">professionals</span> in leadership roles who have an <span class="text-purple">instinctive focus</span> on <span class="text-purple">the human side of enterprise.</span></p>
</div>
<div class="dhn-img">
<img src="http://i.imgur.com/kzJiOjx.jpg" alt="" />
</div>
CSS:
.dhn-info {
width: 100%;
background-color: #a20e45;
display: inline-block;
}
.dhn-info .dhn-text {
width: 50%;
height: auto;
float: left;
padding: 20px 10px 0px 35px;
}
.dhn-info .dhn-text p {
font-family: arial;
font-size: 24px;
color: #fff;
line-height: 30px;
text-transform: uppercase;
word-spacing: 5px;
margin: 0;
padding: 0;
display: block;
}
.dhn-info .dhn-img {
width: 40%;
height: 100%;
float: right;
}
.dhn-info .dhn-text p > span.text-purple {
color: #9b59b6;
}
.dhn-info .dhn-img img {
display: block;
height: auto;
max-width: 100%;
}
As stated, I'm trying to use the faux column approach to having matching-height columns. I've followed the approach listed in CSS: The Missing Manual, which matches everything I've seen on ALA and other online resources. The problem I'm having is that the faux column image never appears on the screen. Here is the HTML I'm using:
<div id="contentWrapper">
<div id="reports">
<h2>yyyy</h2>
<p>xxxxx</p>
</div>
<div id="webApps">
<h2>yyyy</h2>
<p>xxxxx</p>
</div>
<div id="resources">
<h2>yyyy</h2>
<p>xxxx</p>
</div>
<div id="footer">
<hr style="text-decoration:dotted" />
<p> xxxx </p>
</div>
</div>
And the CSS:
#contentWrapper {
background: url(fauxcolumn.png) repeat-y left top;
}
#reports {
width: 300px;
float: left;
font-size: 11px;
}
#webApps {
width: 150px;
float:left;
margin: 21px 100px 0px 80px;
}
#resources {
width: 210px;
float: left;
text-align:left;
margin-top: 21px;
}
#footer {
clear:both;
text-align: center;
font-size: smaller;
color: darkgray;
}
Pulled from comment: Are you sure you have the correct link to the image? make sure the fauxcolumn.png is located in the same directory level as your page/stylesheet.
I have a list like this:
<html>
<head>
<link type="text/css" rel="stylesheet" href="testli.css">
</head>
<body>
<ul id='grok'>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title, max two lines.</p>
<p>Some longish text, max two lines, causes problems when too long.</p>
</div>
<div style='clear:both'></div>
</li>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title</p>
<p>Some longish text here which may wrap some and cause problems..</p>
</div>
<div style='clear:both'></div>
</li>
</ul>
</body>
</html>
// testli.css
* {
margin:0;
padding:0;
}
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
background-color: lightgreen;
margin: 5px;
padding: 5px;
text-align: left;
}
.cimg {
width:70px;
height:44px;
float:left;
}
.cinner {
float: left;
margin: 0px;
padding: 0px;
margin-left: 10px;
font:14px;
}
when the text in the p elements is short, the layout behaves as I want - the thumbnail and the text should appear as if they're in two separate columns. I'm basically looking to recreate the thumbnails youtube has for recommended items - thumbnail on the left, some text in another column to the right of it. Title and text each allowed two lines of text each.
If the text is too long, the cinner div gets placed below the thumbnail. What's the right way to force it to always be to the right?
Thanks
You could do it by setting a min-height on the <li> and then absolutely positioning the image to the left of the title and description:
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
position: relative;
margin: 5px;
padding: 5px;
min-height: 44px;
/* min-height fix for IE6. Ideally this would be in an IE6 only stylesheet */
height: auto !important;
height: 44px;
background-color: lightgreen;
}
.cimg {
position: absolute;
left: 0;
top: 0;
width: 70px;
height: 44px;
}
.cinner {
padding: 0 0 0 80px; /* Makes room for the image so it doesn't overlap text */
font: 14px;
}
Add max-width to .cinner (if I don't mistaken - max-width: 110px).