I had a look at similar questions, but i'm still stuck.
I am writing a website in ASP using MSVWD10.
For 1 page only, I want to have an image which is 960x700px that will have text displayed on top of it. This text will change frequently.
I tried to set this in the CSS, but the image seems to be duplicating itself.
Here is the CSS.
#about
{
background: url(img/about.jpg) no-repeat 0 0;
text-align: center;
background-color: #888888;
width: 960px;
min-height: 685px;
position: relative;
margin: auto;
}
Do i need to set a div on the content page?
Something like this should get you started:
HTML
<div id="outer"><div id="inner">Some text</div></div>
CSS
#outer{background:#ff0022;Text-align:center;width:200px;min-height:200px;}
#inner{margin:auto;}
You can see this in action here: http://jsfiddle.net/rvn5M/
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;
}
Ok, I'm fairly new to CSS and am following this Rollover Buttons code (http://www.elated.com/articles/css-rollover-buttons/). The thing is I want 9 buttons (3x3). If I repeat the code and rename the id's, they all repeat in line down the page. I'm thinking I want to make div's, but not sure where to go next.
HTML:
<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a>
CSS:
#emailUs
{
display: block;
width: 107px;
height: 23px;
background: url("emailUs.gif") no-repeat 0 0;
}
#emailUs:hover
{
background-position: 0 -23px;
}
#emailUs span
{
position: absolute;
top: -999em;
}
How would I now repeat this code so that I have 9 buttons in a 3x3 grid?
There is a lot of ways to go about this, the simplest would probably be to make three divs each being a row of three links. You can see it here on codepen
You can put all 9 a tags something like this<div id="wrapper"> 9*<a href="..."> </div>. Beacause your a tags are having fixed width (107px) you can force your wrapper to have fixed width of 240px, but you still have to remove display: block;
Try hacking this fiddle: http://jsfiddle.net/bk44c/
Other solution for your grid: add a float: left; margin: 5px to your a tags and increase the width of your wrapper width: 400px;
Regards
So I'm trying to customize a slider that came in my wordpress theme with CSS. Right now, it displays three post thumbnails side by side. Unfortunately my featured images all have different aspect ratios, so I'm trying to create a kind of letterbox effect by giving the div that contains the image a fixed size (202px by 138 px) and a black background, and then centering the image within the div.
This is what I want it to look like:
Right now, all my images are aligned with the top of their container, so it looks like the shortest/fattest image just has a black bar at the bottom.
This is what it looks like right now:
I'm SO close. I've read up on vertical-align (I've already seen that "How Not to Vertically center Content" blog post [which I can't link to because of my awful reputation], which was useful and informative but didn't solve my problem), but at this point I'm just stuck.
My html looks something like this:
<ul class="slider">
<li>
<figure class="slide-image">
<a href="blogposturl">
<img src="blogimage" />
</a>
</figure>
//and then some other stuff//
</li>
</ul>
And then there's the CSS! My CSS looks like this right now:
.slider {
position: relative;
}
.slider li {
position: absolute;
}
figure.slide-image {
border-radius: 0px;
width: 202px;
height: 138px;
position: absolute;
background-color: #000;
}
.slide-image img {
border-radius: 0px;
position: absolute;
left: 0;
max-width: 202px;
top: 50%;
margin-top: -69px;
}
I basically followed phrogz's instructions. And yet, my image is still sitting there happily at the top of its container. I think the problem is that the image is inside a link tag? Or maybe it has to do with the container? I don't know. Can anyone help me?
I removed some of the absolute positioning on the img. Try this approach instead:
It uses display:table-cell, and vertical-align:middle for vertical centering.
Working example here - as you can see, it works for varying heights. I didn't change any HTML either.
figure.slide-image a {
display: table-cell;
vertical-align: middle;
height: 138px;
}
.slide-image img {
border-radius: 0px;
max-width: 202px;
vertical-align: middle;
}
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");
im trying to make a facebook like blue bar.
So, i noticed they make a blue bar with width 100%, and make a new div under it which selects half of the div like this(the light blue part is the new div)
So, then the text or link i put under the new div is alligned just like i want it.
How can i achieve this?
My HTML
<div class="topBar" >
<div class="bar_frame">
fuuu
</div>
</div>
And here is my CSS
.topBar {
background: #3b5998;
top: 0;
height: 36px;
width: 100%;
background-position: center;
position: fixed;
}
.bar_frame{
/* The new div code must go here but i dont know how to do this */
}
This will work. I'm assuming you just need to center a fixed-width div in its parent element? This is exactly how Facebook does it in your example, and this is how it is done in many cases:
.bar_frame{
width: 981px;
margin: 0px auto;
}
Demo fiddle