I have a problem using a clickable adverting skin as background of my Wordpress site. My site is this: http://www.tvindiretta.com. If you scroll down any page of my site you will see that the top of the background covers the content and mess all up... I think that I should add a white background in foreground. I really need your help, I'm a noob in CSS and programming.... I read about this parameters googling for...
display: block; ??
text-indent: px; ??
overflow: hidden; ??
z-index:22 ???
...but I don't know how to solve this problem... Here is my Wordpress theme CSS file http://www.tvindiretta.com/wp-content/themes/videoplus/style.css Thanks a LOT for any help in advance
P.S. This site: IMPRONTALAQUILA.ORG in certain pages shows the same ad and also other similar skins without any bug or problem... how can I get the same result? I want the background to be fixed so that users see it browsing any part of the page
Remove fixed from
background: white url(http://www.affiliago.it/accounts/default1/banners/SKIN_BAKECA.jpg) no-repeat fixed;
In your body style.
UPDATE:
Add in your css:
.myClass{
background-color:white;
width:994px;
margin:0 auto;
}
And add those styles to:
<div class="clear"> to <div class="clear myClass">
<nav> to <nav class="myClass">
<div class="wrap"> to <div class="wrap myClass">
Related
Newbie question.
I'm just learning how to create WordPress themes.
Every-time I start a new project, the texts of posts scroll off the screen rather than wrapping to it.
See the picture attached.
enter image description here
I haven't yet added any CSS.
I've added the HTML doc header to the Header file and closed it in the footer file.
Am I missing something here? When I watch tutorial videos everyone else's post/page content is wrapped to the screen with no side-scrolling.
Any help greatly appreciated!
Thanks,
James
You can use main <div>
<div class="container">
// Your Content
</div>
in your <body> and give the CSS of width, padding and margin as your requirement. Like below
CSS
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
I am attempting to create a footer tag to change the background color of it.
footer {
display: block;
background-color: #92a8d1 !important;
}
<footer>
<div class="container-fluid" name="footer">
</div>
</footer>
Code
Code
Could someone help me fix the code for CSS color displays on the footer?
I cant comment yet so will just answer here. You might not have a height for your footer, that is why it is not showing. Try setting a height like:
footer {
/*display: block;*/ /*remove this, footer is already a block element*/
height: 200px;
background-color: #92a8d1 !important;
}
This might help. You can send a sample/plunk of your code in order for us to help you better.
This is because the footer does have to be inside the body. After the body comes only the closing html-Tag.
If you want a footer for your page, add it before the closing body Tag. This is the same behaviour as if you would have a p-tag in another p-tag. The browser auto corrects your errors and places them next to each other.
If I got your question right this should work :
<footer style="background-color: #92a8d1;">
<div class="container-fluid"> </div>
</footer>
I think the background-color is overwritten by an other style.
I have done everything I could to make a decent web page validated with W3C validator etc and tried to make a responsive design and did all i could to enhance SEO onsite and off site. But all my efforts go down the drain with stupid IE ! I am using IE 8 now. How I wish internet bans IE for its various vagrancies !
My problem is I am not able to get a solution for clicking on elements laid over a div background image. Whether I use background color or not. If I use -ms-filter with opacity, the div disappears !
Somebody please give a proper solution ! I have tried posting the issue in another question. I just got one suggestion that did not work. Hence I am trying again.
My code
HTML
<div id="header">
<h1 style='float:left;margin-left:20px;color:white;font-family:verdana'>Landshoppe</h1>
<div id="smshare">
<img src="share.png" width="20" height="20" alt="Share on Social Media">
<div id="smp"></div>
</div>
<div style="clear:both"></div>
<div class="header-small-image">
<img src="images/bldg1.jpg" width="180" height='170' alt="Landshoppe"><br>
<div style="font-size:bold;text-align:center;margin:1px;width:100%">Landshoppe</div>
<div style="clear:both"></div>
</div>
<div class="opaq">
BLOGS
LOANS
SEARCH PROPERTY
FREE LISTING
</div>
<?php include('searchbox.php');?>
<div style="clear:both"></div>
</div>
CSS
#header{background:url('images/Thane2.jpg') no-repeat;background- size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o- background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg ',sizingMethod='scale') no-repeat;-ms- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg',sizingMethod='scale') no-repeat;height:350px;border:1px solid black;margin-bottom:30px;}
#header h2{font-size:35px;color:white;text-align:center}
#searchbox{text-align:center;padding:5px;width:60%;margin:0px auto;margin- top:20px;z-index:5}
#searchbox input[type=text]{width:80%;padding:10px;font-size:25px;border- radius:1px;float:right;height:30px;margin-right:2px;border-radius:5px}
#searchbox input[type=submit]{float:right;
background: url("images/searchicon2.jpg") no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;
width:55px;
height:51px;
border:none;border:1px solid whitesmoke;
cursor:pointer;
padding:0px;
border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-0-border-radius:0px;;
}
My site is www.landshoppe.com
Your header element has pointer-events: none; set in the css.
#header {
...
pointer-events: none; //remove this line
}
Remove pointer-events: none; from header and then click events will work within it.
Also this issue isn't IE specific. Didn't work for me in Chrome either. pointer-event: none makes that element and its child elements not clickable, and clicks to fall through to the underlying element.
#Arathi, I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)
I'm trying to add in a sponsor logo into the top right corner of the Navigation Pane of my website using CSS.
Here is my website link: www.headlightshortfilm.com.au
Does anyone know how to do this using CSS? Squarespace can't help me so I was about to pay a Squarespace specialist to do it but I feel it must be pretty simple. I thought i'd try here first :)
Add this Div after your <div id="topNav" style="padding-right: 0px;"></div>
<div class="sponsored-logo">
<img src="imageURL">
</div>
Add this class on your stylesheet
.sponsored-logo {
float: right;
}
Add float: left; to your #logo and #topNav
Hope this helps.
I've got a strange problem with Chrome, Firefox and obviously IE.
I'm building a WordPress theme for my portfolio site/blog and everything has been okay, up until today when I viewed the site in chrome and suddenly there was a large white bar at the bottom of the page, when the page is viewed in Firefox/IE it shows a double sidebar.
here is the page http://iamdannygreen.com/?p=5
Please excuse the ugly header in firefox, havent yet bug fixed all browsers.
Any help would be greatly appreciated.
Thank you
Fix your header and remove overflow-x: hidden from body and it'll work just fine.
By fix your header, I mean, what is this...?
margin-left:-1000px;
padding-left:1000px;
padding-right:1000px;
margin-right:1000px;
If you want the header background to span the width of the window, move it outside of #wrapper and put another wrapper inside for the content (so the content stays centered).
<div id="header">
<div class="wrap">content here</div>
</div>
<div class="wrap" id="content"> body stuff here </div>
.wrap {
width: 500px;
margin: 0 auto;
}
#header {
background-color: #CCC;
}
#content {
background-color:#FFF;
}
DEMO.