I have currently the following problem:
The footers width gets smaller as soon as i click on a product. Live example here:
(Small footer:)
http://osolemio.nl/serdar/index.php?route=product/product&path=59&product_id=97
(How it should be:)
http://osolemio.nl/serdar/index.php
I have tried several ways by editing the css, width 100% etc but nothing worked.
Someone see what is wrong??
Thanks in advance.
The <div id="content"> is not closed properly. It has to be closed before <div id="footer">.
It's because your footer in the product page is getting rendered inside #content while in the main index page it's outside.
You have either forgotten to close any div or the code coming from CMS is screwing up your markup.
In the product page there is one div which doesn't close (without </div>).
Find out it and add </div>. It's inside the <div class="product-info"> element
Take the #footer element out of the #content element and put it immediately after the #content element.
Related
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
I am building this website for a friend of mine. She asked if i could make a slider of the header pics. I have tryd making it full width but it looks different in firefox and chrome and i dont know why.
the url is xx
The problem is that in firefox it has a margin/padding left of a lot, instead of 0. Tried adding !important, but no difference. In chrome it is nearly full width, but still not totally. I think im looking over something obvious :( help is highly appreciated.
The first problem is that you created a row as a container of the slider only. The row adds margin-left: -25px and margin-right: -25px. If you wanna use such a structure, you should put a col-xs-12 (if you're using Bootstrap 4 use col-12) inside row.
After that, you will see a fullwidth slider.
As a consequence your structure will be like that:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
...
slider structure
...
</div>
</div>
</div>
This should fix your problem in Firefox too.
I am not sure if you defined the width of the parent element carousel-example correct. You can extend your bootstrap.css for .carousel with the full width:
.carousel {
width:100%;
position:relative;
}
BR
webbolle
I'm using anchor tags to jump to certain questions on a page. And there is a sticky container (with position: fixed) at the top of the container.
<div class="main_container">
<div class="jump_to_questions">
Jump to question 30
</div>
<div class="questions">
# a bunch of questions...
<a name="question_30">30</a>
</div>
</div>
When I click the link in the .jump_to_questions_container; question 30 jumps to the top of .main_container and falls behind the fixed container (which has a z-index: 5). Is there a way I can set the link location (after click) to be just under the fixed container?
I've tried adding a padding-top and margin_top to the .questions div... but that just pushed everything down the specified amount.
One way could be to separate out the internal link from the actual question and the space between them should be >= the height of your fixed container. Assuming 50px is the height of your fixed container
Go To Question 30
...
...
<a name="question-30"></a>
<div style="height: 50px;clear:both;width: 100%"></div>
Your actual question
Should work
The anchor link has to begin with a hash sign "#".
Jump to question 30
if you can use jquery code on you page then try following jquery code
$(".jump_to_questions a").click(function(e){
e.preventDefault();
$('html,body').animate({scrollTop:$($(this).attr('href')).offset().top - $('.fixed-container-class').outerHeight()},1000);
});
it will scroll to the desired section smoothly on click on link
you will need to change fixed-container-class with actual fixed container class or id
I'm not really a CSS-hero ;-) Well, I try to create a form with bootstrap and some custom css.
I want 3 columns:
Content
Editor
Settings
The Editor should be fixed.
Thats my html: http://d.pr/n/YsVJ
The part of the fixed editor is:
<div class="form-vertical fixed">
<?php echo $this->form->getControlGroup('content'); ?>
</div>
I added some custom css like this:
http://d.pr/n/v9EN
Well, it works, the editor is fixed, but there is one problem: If I use my iPad or Netbook the div of the editor overlaps the div of the settings (span3).
How can I solve that?
By setting something as fixed it removes it from the flow of the document, which means it won't affect anything else on the page.
You would need to use a margin or padding to create a bit of extra space for the element that is being overlapped and not positioned fixed.
I created a testcase here http://testcases.site44.com/ in IE-7 dropdowns are not coming over banner image. in firefox and chrome it's fine.
Please help to find the issue.
IE has a different approach in understanding z-index.
Besides the very irritating approach of HTML in the mentioned link, you should do the following:
if you have 2 divs, and in the first one there is something that should go over content in the second one, than you need to set z-index on both of them, and a higher value for the one that has the content that goes over the other.
example:
<div id="wrapper">
<ul id="flyout">
//
</ul>
</div>
<div id="content">
//
</div>
CSS:
#wrapper {position:relative;z-index:2;}
#flyout {position:relative;z-index:3;}
#content {position:relative;z-index:1;}
IE now understands that the content in the first div should go over the content in the second div.
Try to put yours element id="footer" with a higher z-index than id="main"
Remove
z-index:1 from div id="banner" do this changes for ie-7 only
in-fact only z-index:1is affecting for ie-7