I can't get the text in the footer placed in the right position, just as the image below:
I've been making changes to the code from a template and now the text is in the upper part and some blank spots appear, specially on Chrome browsers:
The web is here and these are the links to the html and the css
Update: JSFiddle added.
<footer class="aligncenter">
<div class="wrapper" id="bottom_footer">
<h2 class="hidden">xxxx Footer</h2>
<section>
<div class="left_column">
<h4>OFICINAS CENTRALES</h4>
<p>xxxxxxx xxxx, 35</p>
<P>xxxx x</p>
<p>Tlfo xxxxx Fax xxxx</p>
</div>
<!-- left_column-->
<div class="mid_column"><span class="helper"></span>
<img src="images/eccWhite_200.png" width="400" height="120" />
</div>
<div class="right_column">
<h4> xxxxx ESTRUCTURAS SL</h4>
<p>estructuras construcciones y contratas</p>
<p>info#xxxx</p>
</div>
<!--right_column-->
</section>
<!-- class="container"-->
</div>
<!-- wrapper footer-->
</footer>
Could you please show me what I'm doing wrong?
I would recommend against using float:left; on the left and middle column. Since your content is not likely to change significantly there is one thing I might do. Give your footer position:relative and position your .right-column with position:absolute; bottom:0; right:0;. This will ensure that your right column is far to the right, and aligned to the bottom of the footer.
Overall, the styles in the footer seem like they are trying to be 'not a table' and end up being kind of messy for it. If you want semantic markup that still behaves like a table, try http://960.gs/.
<footer id="footer">
<h2 class="hidden">Ecomir Footer</h2>
<div class="left_column">
<h4>OFICINAS CENTRALES</h4>
<span>Almirantes Matos, 35</span>
<span>36002 PONTEVEDRA</span>
<span>Tlfo 986869940 Fax 98685362<span>
</div><!-- left_column-->
<div class="right_column">
<h4> ECOMIR ESTRUCTURAS SL</h4>
<span>estructuras construcciones y contratas</span>
<span>info#ecomir.es</span>
</div><!--right_column-->
</footer>
css
.hidden {
display: none;
visibility: hidden;
}
#footer h4{
line-height: 1em;
margin:10px 0 0 0;
}
#footer{
width: 1100px;
height: 120px;
position: absolute;
bottom: 0;
margin-left: -560px;
left: 50%;
background-color: #CCC;
background-image: url(http://www.xente.mundo-r.com/turkish/ecomir_2/images/eccWhite_200.png);
background-repeat: no-repeat;
background-size: 400px 120px;
background-position: center;
}
.left_column{
width: 200px;
background-color: #FF0080;
float: left;
padding: 0 0 0 10px;
position: absolute;
bottom: 0;
}
.right_column{
width: 300px;
background-color: #FF00FF;
right: 0;
bottom: 0;
position: absolute;
}
you can simple use this FIDDLE
I tried to solve it but stylesheet little bit messed up in my opinion, so just remove the footer at all then try to apply your footer in your own style sheet just like I created.
Be careful while choosing class names because, if there will be a overload , it will messed up again
.footer
{
background-color:#CCCCCC;
width:400px;
height:100px;
margin-left:auto;
margin-right:auto;
font-size:9px;
}
I checked the HTML version, in your code you unnecessary use section remove that first.
by removing this you can remove the while space.
there are a lots of things which need to fixed ..but here is work around to vertically align the text.
.right_column
{
width: 25%; /*remove this line**/
display: inline; /*remove this line**/
}
Not able To fix it complete but the following point will help you a lot
I looked into your code not completely but found that you used
margin-left property although your left right div are 25 % and
center one is 50 % So there is not space for that margin . IF you
remove margin-left:10px (I suppose in your code). The White lines
will be removed and you can align text by setting margin-top.
I have not studied your whole code but not able to find clear:both
property as the bottom three div float. So do that as it is a good
practice and I think it will help in solving your issue
Either set background of section to #ccc or use padding not margin
Hope this help.....
Related
I'd like to know how to get the following result:
Green is a container div 700 pixels wide. Blue is a title area which fills the green container width-wise with some title text centred in the middle. Red needs to float on the right without affecting the flow of the text in the title.
How do I achieve this? I've tried floating the red box on the right but it seems to push the text in the title to the left for some reason.
Edit - For the record, I hadn't posted an example because HTML and CSS isn't really my area of expertise and I'm struggling to get back to an example where the text didn't align (having tried half a dozen different methods I've been reading).
Here's roughly what I was trying: http://jsfiddle.net/3fgytw0u/
<!DOCTYPE html>
<head>
<title></title>
<style>
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
align:right;
width: 200px;
background-color: grey;
}
</style>
</head>
<body>
<div id="Container">
<div id="Title">
<h1>This</h1>
<h2>Is</h2>
<h2>A</h2>
<h2>Long</h2>
<h2>Title Title Title Title</h2>
</div>
<div id="GameGuidelines">
<ul>
<li>Some</li>
<li>Info</li>
<li>Here</li>
</ul>
</div>
<div id="Introduction">
<p>Rest of the page continues here</p>
</div>
</div>
</body>
</html>
Move the element up into the header, set it to position:absolute and give it a margin-left:500px;
http://jsfiddle.net/3fgytw0u/2/ <-- that one is right
Maybe it would help you: Link
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
position: relative;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
text-align:right;
position: absolute;
right: 0;
top: 0;
width: 200px;
background-color: grey;
}
Alternative approach to positioning can be using negative margin-left equal to width of red area:
h2 {
padding: 10px;
background: #EEE;
text-align: center;
overflow: hidden;
}
h2 .right-block {
width: 50px;
height: 50px;
background: coral;
float: right;
margin-left: -50px;
}
<h2>
Some centered text
<div class="right-block"></div>
</h2>
Here is what you want.
<html>
<head></head>
<body>
<div style="border:green 1px solid;height:700px;" >
<div style="border:blue 1px solid;width:100%;height:200px;text-align:center">
Some Title Text
<div style="float:right;border:1px red solid;width:100px;height:100px;margin-right:5px;position:relative;">
Some text
</div>
</div>
</div>
</body>
</html>
Red div will float on the right inside the blue one.
That could be simply done by positioning the inner div as position: absolute and putting it right: 0px, but because you need to prevent that it does not start to be positioned with the main display instead, you put position: relative to the outer div too. Also make sure that while writing you put the red div first and then the div which has purple text, or you can just add top: 0px so that you don't care about that anymore.
Then it should work!
Here's a fiddle: http://jsfiddle.net/xg6rove7/
But be wary of the fact that any text in the red box can then overlap the text in the purple, as I have tried to show you in the fiddle. You might b better with using a padding for both sides equal to the box's width, or just use your plain old float: right
I'm designing a web page with a small label off to the right of the body on some lines. For this, I created an absolute-positioned <div> inside of a relative-positioned one.
The label is appearing exactly as I want it. However, even though the absolute-positioned <div> dimensions are 0 x 0, it still is taking up some room on the line.
This can be seen at http://jsfiddle.net/sznH2/. I would like the two buttons to line up vertically. Instead, the button next to the label is pushed left a few pixels.
Can anyone see what is causing this spacing and how to eliminate it?
HTML:
<div>
<div class="pull-right">
<button>Hello world!</button>
</div>
</div>
<div>
<div class="pull-right">
<button>Hello world!</button>
<div class="outer-relative">
<div class="inner-relative">
<span>XXX</span>
</div>
</div>
</div>
</div>
CSS:
body {
width: 500px;
margin-left: auto;
margin-right: auto;
}
.pull-right {
text-align: right;
}
.outer-relative {
display:inline-block;
position:relative;
height: 0px;
width:0px;
}
.inner-relative {
position: absolute;
left: 0px;
top: -15px;
background-color: Lime;
}
Inline block elements will render the spacing between the tags. Check this out: http://jsfiddle.net/sznH2/4/
<button>Hello world!</button><div class="outer-relative"><div class="inner-relative"><span>XXX</span>
Remove the spaces and you're good to go
I think You Need to make pull-right postiton:relative
and outer-relative absolute
http://jsfiddle.net/tousif123/sznH2/3/
is this what are you looking for?
.pull-right {
position:relative;
}
.outer-relative {
position:absolute;
}
This question has come up similarly before, but I have looked around and can't find this happening to anyone else.
I can make a 4x4 grid of divs together with images using in the HTML but one of the divs I want text in (top right). When I enter <p>Some text</p> within that div it goes below the div to the left and the bottom two are still aligned and under the moved text div.
I have tried making the height fixed but nothing changed, the div just moved up but the others remained where they were.
CSS:
/* Page Content */
.container
{width: 910px;
height: auto;
margin: 0px auto;
padding-top: 35px;
position: relative;}
/* Home Page Content */
.gridblock, .gridblock2, .gridtext
{width: 450px;
height: 200px;
padding: 0px;
position: relative;
display: inline-block;}
.gridblock
{margin: 2px;}
.gridblock2, .gridtext
{margin: 3px, 0px, 3px, 0px;}
.gridtext
{width: 450px;
height: 200px;
position: relative;
background-color: #f9f9f9;}
HTML:
<div class="container">
<div class="gridblock">
<img src="images/homegrid1.jpg" alt="3345 Mastering">
</div>
<div class="gridtext">
<p>Some Text</p>
</div>
<div class="gridblock">
<img src="images/homegrid2.jpg" alt="3345 Mastering">
</div>
<div class="gridblock2">
<img src="images/homegrid3.jpg" alt="3345 Mastering">
</div>
<ul class="footer">
</ul>
This is an online demo: http://jsfiddle.net/saidbakr/2LCwg/
If I'm getting your question right, the problem seems to be with the property display:inline-block.
Add vertical-align:top to your .gridtext class:
.gridtext {
vertical-align:top;
}
It should fix it. Here's a working fiddle.
And here's an interesting article about the display:inline-block property.
Alternatively, you could remove the display:inline-block property (your divs would then, by default, be displayed as block) and give them floats instead:
.gridblock, .gridblock2, .gridtext {
width: 450px;
height: 200px;
padding: 0;
position: relative;
float:left;
}
Also, as you are working with images, you could add overflow:hidden to the above classes, to make sure those images won't expand out of its container and mess up the grid.
.gridblock, .gridblock2 {
overflow:hidden;
}
Here is the html:
<div id="terms" class="terms">
<center>Terms & Conditions
</div>
CSS:
# terms {
width: 100%;
position: absolute;
bottom: 0;
}
.terms {
width: 100%;
position: relative;
bottom: 5px;
}
WHAT AM I DOING WRONG? I have tried probably 50 different variations of html and css to get the terms to stay on the bottom of the page, but it is floating around in the center of the page. it will go from the top to the middle to the right and left but i cannot get it to float to the bottom of the page! the entire page is set up as two floating columns .right and .left
PLEASE HELP!! thank you!
I've set up a fiddle for you:
http://jsfiddle.net/uh53X/1/
Modify your code as follows:
HTML
<div class="terms">
<center>Terms & Conditions</center>
</div>
CSS
div.terms{
display:block;
position:absolute;
bottom:0;
right:0;
width:100%;
background:#eee;
border:1px solid #ddd;
}
Hope this helps.
please refer to the below demo
CLICK HERE FOR DEMO
HTML
<div class="wrapper">
<div id="terms">
<center>Terms & Conditions</center>
</div>
</div>
CSS
.wrapper{
width:500px;
height:500px;
}
#terms {
position: fixed;
bottom:5px;
width: 100%;
left:0px;
height:25px;
}
UPDATED AS PER THE COMMENT:
CLICK FOR DEMO 2
HTML
<div class="wrapper">
<div class="pageBox">
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
<p>
This is test page height will be managed accordingly and footer will be attached after this box.
</p>
</div>
<div id="terms">
<center>Terms & Conditions</center>
</div>
</div>
CSS
.wrapper{
width:500px;
}
.pageBox{
height:auto;
}
#terms {
width: 100%;
height:25px;
}
Do you want to stick the footer to the bottom of the page regardless of how much content you have in it? - sticky footer, this is what I use for when I want to anchor my footer to the bottom (although from the look of your example pages it might not be what you're after)
or do you just want to make sure it sits underneath the last item in your page? why not just add a clearing div/br underneath your last item and before the terms
.clearboth {
font-size: 1px;
line-height: 0px;
clear: both;
height: 0px;
}
<br class="clearboth" />
Then regardless of floats on either side you can just have your div sat underneath that as a regular item
Hope either of these helps
I'm using a table for the footer of my web page. I really don't know much about tables because I've always used CSS. The following is the only table I've ever made. It seems to work in Opera, Chrome, and Firefox, but everything goes to the left in IE. I'm not sure what I'm doing wrong with the table because I don't know much about tables. Here is the HTML:
<div id="framecontentBottom">
<div id="container">
<div id="row">
<div id="left">
<!-- Counter Code START --><img src="http://www.e-zeeinternet.com/count.php?page=760915&style=LED_g&nbdigits=4&reloads=1" alt="Web Counter" border="0" ><br>Page Views<!-- Counter Code END -->
</div>
<div id="middle">
Contact me at jacksterdavis<img src="images/#white.png">gmail.com
</div>
<div id="right">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f302421558e3fc2"></script>
<!-- AddThis Button END -->
</div>
</div>
<div id="row">
<div id="left">
</div>
<div id="middle">
<p>The internet is the printing press of the 21'st century.</p>
</div>
<div id="right">
</div>
</div>
And here is the CSS:
#container {
display: table;
width: 100%;
}
#row {
display: table-row;
}
#middle {
width:50%;
text-align:center;
display: table-cell;
}
}
#left
{
width:25%;
text-align:left;
display: table-cell;
}
#right
{
width:25%;
text-align:right;
display: table-cell;
padding: 5px;
}
#quote
{
text-align:center;
width:100%;
}
#logoBtm
{
align:middle;
text-align:center;
}
#logoBtmLeft
{
align:left;
}
#logoBtmRight
{
align:right;
}
#framecontentBottom{
clear: both;
position: relative;
z-index: 10;
margin-top: -3em;
top: auto;
bottom: 0;
height: 80px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #585858;
color: white;
width: 100%;
}
If you point out everything wrong with my table it's appreciated, thanks. A CSS fix would be the best but if the HTML must be edited it's fine.
the problem most likely lies in the fact that you have two divs with the same id. use classes for row instead.removed for the comfort of others. This line doesnt help the solution at hand.
also, in referring to your comment, ie 7 does not support table display CSS.
http://caniuse.com/#search=table-cell
use a combination of inline block or float. but beware, as inline block has its own issues with ie7
http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html
Here is a working, valid, example.
http://jsfiddle.net/mRHnW/2/
A couple changes: Ive styled every div inside of .row so that it gets applied once (and if it needs to be fixed, it can be, in one place. Even in CSS, it needs to be DRY.
I removed the margin-top from the #frameContentBottom selector because it was screwing with jsfiddle giving me visible results. Feel free to re-instate it if its important to your layout.
I adjusted the width of your 'columns' to be slightly less than 100%, because you've also included padding. The way the CSS Box Model as specified by W3C works is that the width declaration does not include padding, border, and margin. Thus, if you're creating a 100% div, and want 5px padding, then you need to specify less than 100% to get the padding within the 100% confines.
On a sufficiently wide screen (something bigger than jsfiddle default panes), your footer should look about what you expect.