My website I'm creating for a company looks great but I just don't know the right CSS to put in the to make the "WELCOME" title show underneath. I understand that I should put a height, but then if I do that it will show a height for all pages as it is wrapped in an if statement. If on the home page show this widget, if not don't show it. So if I have a set height even if the widget isn't visible on the about page the height will still be in the way. So I thought height:auto; would do it but it's not doing that.
#home-services {
width: 100%;
height: auto;
clear: both;
margin-bottom: 30px;
margin: 0px !important;
}
#home-services section {
float: left;
width: 240px;
height: auto;
margin-right: 10px;
background-color: #aaa685 !important;
}
This is what it looks like across all browsers.
What else do I have to put into my CSS to have the WELCOME title move down just on this page? Any help is appreciated!
Hey now add this css
Already add in your css style sheet this css
#home-services img{
margin: 0 0 -25px !important;
padding: 0 !important;
}
Now put this css Used this one
#home-services .textwidget img{
margin:0 !important;
}
Do this
#home-services .textwidget img{ margin-bottom:25px !important;}
Try inserting padding-top:30px in the h1 css.
It will clear the problem. If this gets you into trouble with the layout and you need to eliminate the padding, have a javascript function called on load that checks if that h1 is displayed or not and modify the padding accordingly. This is in no way elegant, but it will solve your problem.
you can also use jquery in if statement to change CSS like
$(".yourclass").css("CSSproperty", "value");
Related
I know very little to nothing of jQuery or JavaScript. So after fiddling - and failing - for hours here's my question:
In the header of my website (http://dev.shespeakswithpassionmembership.com/index.php), I have got an svg image that shrinks on scroll. Great, it works!
But, what happens is: the menu doesn't jump next to the shrinking image. I want that because it saves a lot of space and it looks nicer.
This is what I've done so far:
The image is centered on load. For this I have added this CSS to the navbar-header:
.navbar-header {
width: 100%;
}
The image has got this CSS:
header.large img {
height: auto;
margin: 10px auto;
max-width: 100%;
width: 900px;
display: block;
}
When you scroll the image shrinks. As you can see the header has a class of .large and the image is shrunk by removing that class and replacing it with .small:
header.small img {
height: 49px;
max-height: auto;
width: 154px;
max-width: 100%;
margin: 10px 5px 0 10px;
}
This is done by this jQuery script:
function slabTextHeadlines(){jQuery("h1.slabbed").slabText({viewportBreakpoint:380,minCharsPerLine:10})}var App=function(){function e(){jQuery.browser.msie&&jQuery.browser.version.substr(0,1)<9&&jQuery("input[placeholder], textarea[placeholder]").each(function(){var e=jQuery(this);jQuery(e).val(e.attr("placeholder")),jQuery(e).focus(function(){e.val()==e.attr("placeholder")&&e.val("")}),jQuery(e).blur(function(){(""==e.val()||e.val()==e.attr("placeholder"))&&e.val(e.attr("placeholder"))})})}function r(){jQuery(".carousel").carousel({interval:15e3,pause:"hover"}),jQuery(".tooltips").tooltip(),jQuery(".popovers").popover()}function o(){jQuery(".search").click(function(){jQuery(".search-btn").hasClass("icon-search")?(jQuery(".search-open").fadeIn(500),jQuery(".search-btn").removeClass("icon-search"),jQuery(".search-btn").addClass("icon-remove")):(jQuery(".search-open").fadeOut(500),jQuery(".search-btn").addClass("icon-search"),jQuery(".search-btn").removeClass("icon-remove"))})}return{init:function(){r(),e(),o()}}}();jQuery(document).on("scroll",function(){jQuery(document).scrollTop()>100?jQuery("header").removeClass("large").addClass("small"):jQuery("header").removeClass("small").addClass("large")}),jQuery(window).load(function(){setTimeout(slabTextHeadlines,.01)}),jQuery(document).ready(function(){jQuery("#totop").hide(),jQuery(window).scroll(function(){jQuery(this).scrollTop()>100?jQuery("#totop").fadeIn():jQuery("#totop").fadeOut()}),jQuery("#totop").click(function(){return jQuery("html, body").animate({scrollTop:0},660,"easeInOutExpo"),!1})});
$(function() {
$('[data-rspnsv]').rspnsv({delay: 200, duration: 3000});
});
For the menu to jump to the right of the svg image, I need to remove the width: 100%; and to assign a width: auto; to it. I would like to do that by adding a line of code to the script above so that it not only replaces header.large with header.small, but does the same trick with the navbar-header.
Is there anyone who can append the script to do this? To me it would seem rather simple for someone who knows about jQuery (which I don't).
Thanx in advance,
Thom
This is a CSS question. It doesn't require any jQuery changes. Add this CSS
header.small .navbar-header{
width: auto;
}
If you want the menu to remain at the bottom, this is one way of doing that.
header.small #js-meganavi{
margin-top: 46px;
}
I am trying to center the footer on a website but for some reason, the way I use that normally works won't work this time. Can anyone tell me why?
Site is here
It's set up using two classes, one inside the other
First one is called mainFoot:
.mainFoot {
background-color: #184879;
width: 100%;
height: 60px; /*had to include this because it would not appear otherwise. browser read it as a 0 height container*/
display: block;
clear: both;
}
Second is page-footer:
#page-footer {
width: 990px;
display: block;
clear: both;
margin:0 auto;}
I was using the same structure right above it for the bottom widgets and it worked as is, but for some reason, while i was setting this one up, I had to set a height property for the outer div to appear as it wouldn't read the inner div's height and adjust.
For reference, he similar set up I mentioned that DOES work is right above the mainFoot class and is controlled by the classes b4Foot and half-widgets:
.b4Foot {
background-color: #277bc1;
width: 100%;
display: block;
clear: both;
}
.half-widgets {
width: 990px;
min-height: 200px;
margin: 0 auto;
color: #fff;
}
To center the contents of a block, you need to set the style "text-align:center". However, note that you cannot center a block-type element within another block-type element. The inner element needs to have the display style of inline or inline-block.
To fix your problem, you need to: a) remove the fixed width, and b) change page-footer to display:inline-block. Currently it is display:table because of the class clearfix - you need to remove that class fromt he div.
you need to change just this line please see below and put on your CSS and see result
.mainFoot
{
background-color:#184879 !important;
height:60px;
width:auto;
}
footer.span12 { color:#DEDEDE; width:100%;}
#page-footer { display:block; margin:0 auto; width:990px;}
only change on .mainFoot , footer.span12 and #page-footer
Thanks,
http://www.michaelhoffmandesign.com
So I and pretty new to coding and have been coding this website from the ground up for professional use. The problem is, when users click the Resume section, the whole navbar moves over to the left. I have tried to correct this by adding a left:x px. But it doesn't seem to work. Any help?
The scrollbar causes the slight difference. You can enable scrollbar on all the pages with:
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
This makes the scrollbar always visible and only active when needed.
Or another solution would be:
html {height: 101%;}
use margin: 0 auto for nav to align center
Try this:
nav {
position: relative;
width: 800px;
height: 17px;
margin: 0 auto;
text-decoration: none;
}
header nav ul {
width: 800px;
margin: 0 auto;
}
In the html for resume.html, check this line :
< nav style="right:10px;">
Remove that style attribute and give it a try.
I have an input in a form that I am trying to align in the center. Usually margin-left:auto and margin-right: auto fail to respond when display: block isn't added to the CSS. I have added display: block to my CSS but still it isn't display as I would like it to.
I've made a JSFiddle to keep easier to understand: http://jsfiddle.net/XnKDQ/97/
In order for margin: 0 auto; to work, in addition to display:block a width needs to be specified.
In my case, it was float: left that I forgot about. So, make sure you apply float: none to your input field.
You already have display: block and margin: 0 auto, you just need to set width too.
Example that should work:
input{
width:50% !important;
margin:0 auto !important;
display:block !important;
float:none !important;
}
If that doesn't work try adding !important to the values or make sure your style is not overwritten by something else.
I found the solution for you
you should specify element width
input {
display: block;
width: 60px;
margin: 10px auto;
padding: 3px;
}
You have can do something like this:
input {
width: fit-content;
margin: auto;
}
You want the three forms together to be aligned in the center? Wrap them in a single div and center that div instead.
in addition to specifying width and display block also check if the float property is set to none.
In addiction to everything, you may check if your body have the parameter position. It may be set to fixed.
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.