Dear Stackoverflow community,
I just can't figure out how to center the footer links on my magento website. The footer links are within a div and the correspondig CSS is, as I believe, as follows:
I have tried everything, from margin:auto to margin-right and margin-left auto.
Then I thought, maybe the right footer, there used to be a newsletter box there, is forcing to take up space, so I slashed it out, but still no effect. Anyone any idea what could be the solution? Thank you so much!
.footer-container { width:100%; text-align: left;}
.footer { margin: 0 auto 0;width: 940px; padding: 0 20px 30px; background: #fff; }
.aditional-footer { margin:0 auto 0; padding: 30px 20px 35px; width: 940px; background: #FFF;}
.footer .links li { text-transform: none;}
.footer-container a { color:#666669; font-size: 9px; }
/*.footer-container .footer-right { width: 250px; }*/
.footer .f-left { width:520px; text-align: left; margin: 0 auto;}
/*.footer .f-right { width:420px; text-align: right; }*/
This is the HTML
<html>
<div class="footer-container">
<div class="aditional-footer">
<?php echo $this->getChildHtml('bottomContainer') ?>
<div class="f-right">
<div class="footer-right">
<div class="right-conteiner">
<?php echo $this->getChildHtml('newsletter') ?>
<div class="clear"></div>
</div>
<div class="right-conteiner">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('footer_time')->toHtml(); ?>
<?php if(themeOptions('topbtn')): ?>
<div id="back-to-top"><?php echo $this->__('Back to top') ?></div>
<?php endif; ?>
<div style="clear: both;"></div>
</div>
</div>
</div>
<div class="f-left footer-left">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('footer_shipping')->toHtml(); ?>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="footer">
<?php echo $this->getChildHtml('bottomContainer') ?>
<div class="f-left">
<?php echo $this->getChildHtml('footer_links') ?><br />
<?php echo $this->getCopyright() ?>
<?php echo $this->getChildHtml('cms_footer_links') ?>
</div>
<div class="f-right">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('verify')->toHtml(); ?>
</div>
</div>
</html>
Change the following code
.footer-container { width:100%; text-align: left;}
to
.footer-container { width:100%; text-align: center;}
Let me know if you have any query
Related
What I want:
1:
What I want is that the echo '<span class="badge bg-red">Denied</span>'; is directly under the echo '<b> '</b>'; and that the img is the full height. And if I use the <br> it puts the text under the img and not next to it. Because I need the image to be always on the left with the text next to it.
2: The second thing that I want is that there is a small line under the
echo '<b> '</b>';
echo '<a> - ' . $topic['voornaam'] . '</a>';
How it looks like now.
The code:
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title"><b>Topics</b></h3>
</div><!-- /.box-header -->
<div class="box-body">
<?php
$toppic = $app->get_topics();
foreach($toppic as $topic){
echo '<div id="topic">';
if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) {
echo '<img style="height:100%;"class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id']src="###.'/'.$topic['foto'].'"###'" />';
} else {
echo '<i class="fa fa-fw fa-user img-circle"></i>';
}
echo '<b> '.$topic['topicnaam'].'<$####'</b>';
echo '<a> - ' . $topic['voornaam'] ####. " " . $topic['achternaam']#### . '</a>';
echo '<span style="float:right;"class="fa-stack"><span class="fa fa-comment-o fa-stack-2x"></span><strong class="fa-stack-1x" style="font-size:10px;">999</strong></span>';
echo '<span class="badge bg-red">Denied</span>';
echo '</div>';
}
?>
</div><!-- /.box-body -->
<div class="box-footer text-center">
</div><!-- /.box-footer -->
</div><!-- /.box -->
The custom css:
#topic a {
color: black;
margin-left: 1%;
}
#topic {
padding: 10px;
}
#topic i{
font-size: 2.3em;
width: 33px;
}
One of the alternatives is by using the list tag
Here is an example for your convenience:
HTML:
<ul>
<li>
<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" class="pic">
</li>
<li>
<h2>Title</h2>
<p>description declined</p>
</li>
</ul>
CSS:
.pic{
max-width:150px;
max-height:150px;
margin-right:50px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
ul {
list-style-type: none;
}
.pic{
max-width:150px;
max-height:150px;
margin-right:50px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
ul {
list-style-type: none;
}
<ul>
<li>
<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" class="pic">
</li>
<li>
<h2>Title</h2>
<p>description declined</p>
</li>
</ul>
Adjust it accordingly with your code. Have fun :)
First of all, there's some sintax errors at the php code in the <div class="box-body">, check it out because the compiler can throw an error.
At the css part, i would use position: relative to the DOM elements inside the <div class="topic"> and later adjust it with top, bottom, left, right (Check this out for more info about the positioning properties in css).
Also, i would set the image full height with height: 100%, but, just as a recommendation, try using height: auto, with this property the img height adjusts to the DOM and it MAYBE get a height you like(Here's some info about height property).
Finally, you could get the small line with the <u> html tag or with the css text-decoration: underline. You can see both here.
Hope this answer helps you, if it does, please vote it up so that people can get helped if needed :)
i'm developing this website : www.sfitnesscenter.com
i'm trying to make the 4 boxes below the slider to be horizontally aligned 2 by 2 to the center. i've tried using margin:auto, but nothing changed.
here's the html
<section id="wrapsecond">
<div class="container">
<div class="services-wrap">
<?php if( get_theme_mod('shortinfo_sb') ) { ?>
<?php echo get_theme_mod('shortinfo_sb'); ?>
<?php } else { ?>
<?php echo '<h2>What We Do</h2>
<p>We are passionate about our clients results.</p>'; } ?>
<div class="space50"></div>
<!-- Home Boxes Section -->
<div class="home_boxes">
<?php
for($bx=1; $bx<5; $bx++) {
if( get_theme_mod('page-setting'.$bx)) {
$bxquery = new WP_query('page_id='.get_theme_mod('page-setting'.$bx,true));
while( $bxquery->have_posts() ) : $bxquery->the_post();
?>
<div class="one_third <?php if($bx%4==0){ ?>last_column<?php } ?>">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?>
<h4><?php the_title(); ?></h4><?php echo fitnesslite_content(22); ?>
<span class="ReadMore"><?php _e('Read More','fitness-lite');?> </span>
</a>
</div>
<?php endwhile; }else{?>
<div class="one_third <?php if($bx%4==0){ ?>last_column<?php } ?>">
<a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/thumb_0<?php echo $bx; ?>.jpg"><h4><?php _e('Page Title','fitness-lite'); ?><?php echo $bx; ?></h4><p><?php _e('Phasellus viverra aliquet magna quis interduming. Sed quis fringilla massa. In ut porttitor felis necing iaculis mi. Proin tempo...','fitness-lite');?></p><span class="ReadMore"><?php _e('Read More','fitness-lite');?></span>
</a></div>
<?php }}?>
</div>
<!-- Home Boxes Section -->
</div><!-- services-wrap-->
<div class="clear"></div>
</div><!-- container -->
</section><div class="clear"></div>
and here's the css
/* = Services section css
-------------------------------------------------------------- */
#wrapsecond{ background-color:#272727; color:#fff; padding-bottom:100px; }
.services-wrap, #FrontBlogPost .BlogPosts{ visibility:hidden;}
.one_third{ margin:0 5% 3.5% 0; float:left; padding:25px; border:2px solid #fff;}
.one_third:hover{ border-color:#ff4e1c;}
.one_third:hover .ReadMore{ background-color:#ff4e1c;}
.one_third img{ width:100%;}
.one_third h4{font:600 18px/22px 'Roboto',sans-serif; padding:20px 0; margin:0; text-transform:uppercase; color:#fff;}
.one_third h4 span{ color:#ff4e1c; font-weight:300;}
.one_third h4 span::after{content:" ________"; display:inline-block;}
.one_third p{ margin-bottom:20px; color:#fff;}
.last_column{clear:right; margin-right:0 !important; }
#media (max-width: 992px) {
.one_third { min-width: 45% }
}
#media (min-width: 992px) {
.one_third { max-width: 40% }
}
#wrapsecond h2{ font-size:40px; color:#fff; font-weight:600; margin-bottom:0; text-transform:uppercase; }
#wrapsecond h2 span{ color:#ff4e1c; font-weight:300; }
NB :
actually, the layout should be like this
top left : aerobic class,
top right : bellydance class,
bottom left : yoga class,
bottom right : zumba class
it was horizontally and vertically paralled, until my client put the contents the other day. nothing's change even after the photos was removed. so, i don't think it was caused by the dimension of those photos
Change the display of the boxes to inline-block and reduce the margin a bit. And remove the float .
Change the .one_third class to the following
.one_third {
margin: 0 3% 3.5% 0;
padding: 25px;
display: inline-block;
border: 2px solid #fff;
}
Avoid using floats . its a messy thing to deal with.
I have this page here and the div .menu-content only reaches half the page even on 100% height. I really have no idea why.
Thanks!
<div class = "menu-content">
<div class="wrapper" style = "background-color:white; height:100%; width:750px;">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php global $rd_data; if ($rd_data['rd_error_text']) { ?>
<?php echo $rd_data['rd_error_text']; ?>
<?php } else { ?>
Oops, It looks like an error has occured
<?php } ?>
<?php endif; ?>
</div>
You need to remove height:100%; on .menu-content .wrapper in your CSS code and in the inline style you set on it.
That way it will be set to default height:auto; and the height will be calculated by it's content.
Try this css..
.menu-content {
display: table;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
position: relative;
}
Add html {height: 100%} and it should work.
to solve this you can simply add a div with style = "clear:both;" at the end of your div .menu-content
like this :
<div class="menu-content">
.....................
<div style="clear:both;"></div>
</div>
you have to use css this way. use the overflow:auto property and remove the unnecessary property like z-index and position from class .wrapper.
.menu-content {
background-color: #FFFFFF;
height: 100%;
overflow: auto;
}
.wrapper {
margin: 0 auto;
width: 750px;
}
I tried searching for answers online, couldn't find anything.
When I click on a div in IE10, a thin red border appears. The intention is for nothing to happen when the divs are clicked on. I've tried "border:none" and "outline:none" on a few divs to test it out and that solution doesn't work.
Also, when some divs are clicked on, it shifts all adjacent divs over to the right.
Any ideas on what could be causing this and how to resolve them?
More info:
Neither of these issues are happening in Mozilla or Firefox.
Using Bootstrap.css for input field stylings but not for individual div
stylings.
I can include my code but the problem is occurring on
almost all other divs throughout my files
UPDATE:
I started to notice a pattern (still in process of testing all occurrences) that the red border appears when the div contains label tag and input type in it.
Below is the HTML/CSS/JS code.
HTML:
<div id="setup-container">
<div class="ppp-intro font-size-130">
<h1 class="center" style="margin-bottom: 30px;">TEXT</h1>
<h4 style="margin-bottom: 40px;">TEXT</h4>
</div>
<form action="/setup" method="post" class="form">
<div id="signup">
<?php foreach ( $results['setup'] as $setup ) { ?>
<div class="setup-wrapper">
<div class="settings-label"><input type="checkbox" name="setup[]" id="<?php echo strtolower( $setup->name ) ?>" class="setup" value="<?php echo $setup->id ?>" style="visibility: hidden" /></div>
<label for="<?php echo strtolower( $setup->name ) ?>" class="<?php echo strtolower( $setup->name ) ?>"><?php echo $setup->name ?></label>
<div class="setup-label"><?php echo $setup->name ?></div>
</div>
<?php } ?>
</div>
<div class="messageContainer"></div>
<div class="buttons"><input type="submit" name="setupSelect" value="Select" /></div>
</form>
<script type="text/javascript" src="/js/checkmate.js"></script>
<script type="text/javascript" src="/js/checkmateCall.js"></script>
</div>
CSS:
.setup-wrapper {
float: left;
width: 154px;
margin: 0 18px 22px 18px;
border: none;
outline: none;}
.setup-label {
text-align: center;
font-size: 110%;
font-weight: bold;
margin: 0 0 0 14px;}
.settings-label {
width: 20%;
float: left;}
#signup {overflow: hidden}
#signup label {float: left;}
#setup-container {
overflow: auto;
width: 980px;
margin-left: auto;
margin-right: auto;
padding: 10px;}
Thank you
Need help to solve some resolution issues on a project i'm currently working on.
Have a look here http://viewlike.us/?url=tinyurl.com%2Fsoreso&button.x=75&button.y=17&button=Submit
The css/layout was done as a liquid layout but as you can notice the columnns and the search box on the right start overlapping from 800*600 onwards.
At higher resolutions say 1920*1200 it starts looking a bit ugly particularly the search box on the right looks a bit stretched.
The site looks ok only when viewed at 1200*800 or at the next resolution.
What can i do to both
1)Make it work for 800*600 and above
2)Prevent it from looking ugly at higher resolutions
I'm also thinking about adding a media queries specific style sheet to make this work for smartphones, tablets etc.
Here's both the page and the css for it
index.php
<html>
<body>
<div id="wrap">
<div id="header">
<?php include("header.inc.php"); ?>
<div id="menu" align="left">
<div class="top_menu_left">
<li><?php echo $lang['HOME_LINK']; ?></li><li>|</li>
<li>Subscribe</li>
</div>
<?php if($auth->id) { ?>
<div class="top_menu_right">
<li>My Account</li><li>|</li>
<li>Watch List</li><li>|</li>
<li>Logout</li>
<?php }else{ ?>
<li>Login</li><li>|</li>
<li>Sign up</li>
</div>
<?php } ?>
</div>
</div>
<!--END OF MENU DIV CONTENT-->
<div align="center"><div id="bar"></div></div><br />
</div>
<div id="content">
<div id="left_content"> <?php include('left_sidebar.php'); ?> </div>
<div id="main_content">
<?php include("path.inc.php"); ?>
<div style="display:none;"><?php echo "<!--#&88;#&90;#&101;#&114;#&111;".
"#&83;#&99;#&114;#&105;#&112;#&116;#&115;#&46;#&99;#&111;#&109;-->"; ?></div>
<?php echo $content;unset($content);?>
</div>
<div id="right_content">
<?php
if($xview != "post" && $xview != "postimg")
{
?>
<div class="right_top" align="center"><?php echo $lang['SEARCH']; ?> <?php include("search.inc.php"); ?> </div>
<?php
}
?>
</div>
</div>
<div style="clear:both" ></div>
<div style="clear:both" ></div>
<div id="footer" align="center">
<div class="footer_menu">
<li>About us</li> <li>|</li>
<li><?php echo $lang['TERMS_OF_USE']; ?></li><li>|</li>
<li><?php echo $lang['PRIVACY_POLICY']; ?> </li><li>|</li>
<li>Contact us</li> <li>|</li>
</div>
<div class="footer_menu2">
<strong>Copyright © 2011 <?php if(($y=date("Y")) != 2011) echo "- $y"; ?> <?php echo $site_name; ?>. All Rights Reserved </strong>
</div>
</div>
</div>
</body>
</html>
Style.css
html { -webkit-text-size-adjust: 70%; }
body { margin:0px; padding:0px;font-family:Arial, Helvetica, sans-serif; }
b { font-size:14px;}
#wrap { width:100%; height:100%; background-color:#FFFFFF; padding: 0;}
#header {
padding: 10px;
height:251px;
}
#menu { width:100%; height:2.2em; margin-top:1%; background:#80b2e4; border- radius:10px; -moz-border-radius:10px; -webkit-moz-border-radius:10px;}
.top_menu_left {float:left; width:86%;height:35px; margin-left:3%;}
.top_menu_left li a { color:#fff !important; }
.top_menu_left li a:hover { color:#336699 !important; }
.top_menu_right {float:right; width:17%;;height:1.2em;}
li{list-style:none; float:left; color:#74677E;font-size:70%;font- weight:bold;font- family:Arial, Helvetica, sans-serif; text-align:left; padding:0 5px; -top:9px; color:#fff;}
.top_menu_left li {padding-right:1%; color:#fff;}
.top_menu_right li {padding-right:5%; color:#fff;}
#searchbar { width:100%; height:auto;margin-top:8%;}
#top_search {width:100%; height:auto;}
#bottom_search {width:89%; height:auto;padding-left:10.5%;font-size:75%;}
.sarch_box { width:10%; height:auto; float:left; margin-left:1%;font-size:75%;}
.box_1 { width:20%; height:auto; float:left;font-size:85%;}
box_1 input { width:80%; height:1.2em;font-size:85%;}
.box_1 select { width:70%; height:1.5em;font-size:85%;}
.box_2 {width:2%; height:auto; float:left;}
#content { width:87%; height:auto; margin-left:11%; margin-top:0; }
#left_content { width:7%; height:auto; float:left; }
#left_searchbar_title {width:95%;height:2%;padding-top:1%;padding-bottom:1%;padding- left:5%;background-color:#A5D959;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#left_sidebar_content{width:100%;height:2%;background-color:#EFFFD8;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#main_content { width:59%; height:auto;float:left; }
.main_content_header {margin-left:2%;color:black;font-size:100%;font- family:Arial, Helvetica, sans-serif;font-weight:bold;margin-bottom:5%;}
.content_header {width:70%; height:auto; margin-left:3%;}
/*.left_1 {margin-left:2%;width:.05em; height:100px;background- image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left;padding-left:2px; }*/
.left_1 {margin-left:2%;width:.05em; height:100px;background-image:none;background- repeat:repeat-y;float:left;padding-left:2px; }
/*.left_6 { width:.05em;height:100px;background- image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left; }*/
.left_6 { width:.05em;height:100px;background-image:none;background-repeat:repeat- y;float:left; }
.left_content_middle {width:95%;float:left;font-size:80%;font-family:Arial, Helvetica, sans-serif; background:white; border:1px solid #c6c6c6;border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px}
.content_title {padding:2%; text-align:center; color:black; <!--#336699;-->font-weight:bold;font-size:100%;font-family:Arial, Helvetica, sans-serif; }
.content_line{size:2px; width:95%; background-image:url(images/horizotal-line.gif);}
.left_2 { margin-left:3%; width:21.5%; height:auto; float:left; }
.left_3 { width:23.5%;height:auto;float:left;}
.left_4 { width:23.5%;height:auto;float:left;}
.left_5 { width:23.5%;height:auto;float:left;}
#right_content { width:20%;height:auto;background-color:white;float:left;margin- left:1%;padding:10px; border:1px solid #c6c6c6; border-radius:10px; webkit-border- radius:10px; -moz-border-radius:10px}
.right_top { width:100%; height:auto; color:white; font-size:100%; color:#336699;}
.Left_portion { width:45%; height:auto; float:left;padding-left:8%;}
.right_portion { width:45%; height:auto; float:left;}
.right_content_title {color:#BB532E;font-weight:bold;font-size:70%;font-family:Arial, Helvetica, sans-serif;padding-bottom:4%;padding-top:5%; }
.right_content_body {color:#5E6472;font-size:70%;font-weight:bold;font-family:Arial, Helvetica, sans-serif;padding-bottom:3%;}
.menu_bar { width:10%; font-family:Arial, Helvetica, sans-serif; color:red; float:left; font-size:50%;}
.gap {width:35%;}
#footer {height:40px;width:100%;margin:auto;text-align:center;text- align:center;margin-top:2%;background:url('images/footer_bg.png') repeat-x; line-height:40px; color:white;}
.footer_menu {
color: white;
float: right;
height: 1.2em;
-left: 3%;
width: 70%;
}
.footer_menu li {
color: white;
padding-right: 1%;
}
.footer_menu li a { color:#fff; text-decoration:none;}
.footer_menu li a:hover { text-decoration:underline}
.footer_menu2 {
background: url("images/footer_bg2.png") repeat-x scroll 0 0 transparent;
color: grey;
float: left;
font-size: 13px;
margin-top: 21px;
width: 100%;
}
.footer_menu strong { font-weight:lighter; color:#666}
Give max-width and min-width a try.
I'm guessing by liquid layouts you're using some form of percentages for it. In which case after a certain size the columns etc will be getting too large.
You will also most likely want to try min-width to stop the columns overlapping each other. You can prevent the text from going into the other columns by using overflow:hidden, however you would probably be better off just making the column have a minimum width and making the font-size smaller.
http://reference.sitepoint.com/css/max-width
http://reference.sitepoint.com/css/min-width