I have a main div named "backhead" that has a background image with other divs inside. The main div doesn't show on my website (using Chrome Inspect to troubleshoot). The div isn't there, as if the name is spelled wrong, or a colon is missing, etc.
Does anyone know why this would be happening? Here's my code (all other div class and ids are working fine):
CSS file:
#backhead {
position:absolute;
background-image:url("images/headerbackground.jpg");
width:100%;
height:100%;
}
.toplogo {
float:left;
padding:1.25em 0;
position:relative;
}
.rightinfo{
float:right;
width:61%;
position:relative;
}
In the PHP file:
<div id="backhead">
<div class="toplogo">
<img src="http://example.com/images/headerlogo.png"></div>
<div class="rightinfo">
<h2>Personal Specialist</h2>
</div>
</div>
height:100%;
This will work only if the parent element has height specified. If it is inside of autoheighted element, it would be replaced by auto and became 0 if there is no content.
Check for
html, body {
height: 100%;
margin: 0;
}
if the element is placed directly in the body.
Even if that CSS was invalid the div should still show up within the markup. I ran the code on jsfiddle and it showed up fine. This leads me to believe that you may just need to clear your cache especially id you're hosting this on real server.
Try running it in a Chrome Incognito mode and see what happens.
Related
I am simply adding a header navbar to an html page.But the problem is its not aligned exactly to the top.There is a small gap between the browser and the navbar.I found a solution as setting margin:0;,but the issue I have is it will only work if I code it as by selecting the whole div... like
*{ margin:0;}
why is that so ?
I found this solution in another stackoverflow question but I cant comment and ask because I have low repuation.He is stating its because of SASS.But how is my code becoming sass because I was using normal simple procedure for CSS coding.
Linked soultion question.(Please check the comments in correct selected question)
Header not touching top of screen
My code :
<html>
<head>
<style>
* {
margin:0;
}
.new {
width:100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="new">New Website</div>
</body>
</html>
Some browser have set user agent stylesheet at "body" tag
For Chrome: body have margin: 8; on body tag, so you will get a small gap between navbar.
You can set
body{
margin: 0;
}
Will solve your problem.
http://jsbin.com/luqoruqewa/edit?html,output
Don't put the margin: 0; on the div. Put it on the body or html tag. Like so:
body{
margin: 0;
}
Don't forget that you can style the html and body tags too! Making them height: 100%; might be of use in the future.
* is the universal selector. It targets all elements. When you state:
* {margin: 0}
You're removing the margin from every element on the page. That works in this case, but it will have side effects that you probably won't want on a page with more content.
Your browser is adding some padding to the body element. As amoyer pointed out, set the body margin to zero and you should be fine.
I'm working on a Classifieds/Ads Page for a client using content from a specific Database. I'm close to get the look I'm looking for but now I have a problem. I don't want CSS Styles for the empty boxes to the available spaces.I just want the CSS Styles on the ones that will appear once the information arrive to the database and it's ready to show on the Classifieds/Ads page.
Is there a way to have a CSS style that only is applied when content is present?
This is my test page.
notice how I kind of cheated the CSS style so the blank boxes (spaces) show a text saying: "place your ad here!" but I really don't want those blank boxes there. Any help will be apreciate!
thanks in advance.
All you need to do is to find the parent div which does not have content on its header (for instance) using jQuery. Then you can set its display property to none. I have created a working example ****HERE****
HTML:
class="ad">
<h2>This is an ad</h2>
<p>this is the ad which has been added by the database</p>
</div>
<div class="ad">
<h2></h2>
<p></p>
</div>
CSS:
* {box-sizing: border-box;}
h2, p {margin:0; padding:0;}
.ad {
display: block;
float: left;
height:300px;
width:130px;
background: #999;
margin: 10px 20px;
padding: 5px;
}
jQuery:
$(".ad").each(function() {
if ($(this).find("h2").text() == "") {
$(this).css("display","none");
};
})
This seems more of a backend issue than a CSS one. Your php script shouldn't be outputting html for ads that don't exist.
I'm trying to remove the margin-left on http://insightcxo.com/epicwin/
The problem is when I target the class .container, it shifts the whole website over - I only want to target the div on the specific page.
This is the code I'm using that makes the page work but shifts the whole website over as well:
.container {
margin-left: 0;
}
Most WordPress themes (including yours) include the page ID as a body class name. In this case, the <body> tag looks like the following:
<body class="page page-id-731 page-template-default page-shadow responsive-fluid ">
This means that you can target this page via:
.page-id-731 .container {
margin-left: 0;
}
More about WordPress's body_class() function can be found in the Codex.
As per the page you are linking, it seems you are using an page-id as a class in your body, so this might work:
.page-id-731 .container {
margin-left: 0;
}
I am not sure if I understand completely, but I think what you need to do is add an id to the div you want to target.
Here is a JSFiddle of what I mean:
https://jsfiddle.net/dT9Yk/25/
HTML:
<div class="div1"></div><br>
<div class="div1" id="marginleft"></div><br>
<div class="div1"></div><br>
CSS:
.div1 {
width: 100%;
height: 50px;
background: red;
}
#marginleft{
margin-left:10%;
}
As you can see they all have the same class name but the middle one has an additional id tag.
Add a class to the body on that page only and then use specificity to target the container on only that page. For instance, add body class epicwin on that page and then use
.epicwin .container {
margin-left:0;
}
to target it.
Adding margin-left: 0px; to your CSS file is conflicting with the default .container class of bootstrap.
To fix your issue apply the class directly inline, it will solve your issue, like so:
<div class="container" style="margin-left: 0px;">
You can create something like this in the stylesheet you are using:
.Container_Div { padding: 0px 0px 0px 0px;}
Add this to your HTML:
div class="Container_Div"
Try this and let me know.
You can target a div with class/id .you can target directly or with reference of parents div class/id as follow.
<div class="parent">
<div class="child"></div>
</div>
direct target
.child{}
with reference to parent div .It will only apply style to class/id that exist in parent with specific id/class
.parent .class{
}
I've seen other answers, but none of them seem to work for me.
What I want: when I type the URL .../page.html#two to go to #two, but with a 50px offset from the top of the page.
note: ive added the big space and <a>'s because you can't type the url in jsfiddle. I want it to work with urls, as well as with links.
<body>
<section id="one">First section</section>
<section id="two">Second section</section>
<section id="three">Third section</section>
<div id="big_space"></div>
one
two
three
</body>
body
{
height: 2000px;
}
#big_space
{
height: 1000px;
}
section
{
height: 100px;
background-color: lightblue;
margin-bottom: 5px;
}
Here's a link to the JSfiddle: http://jsfiddle.net/hAmCL/
I have tried using the section:before but it seems to give the wrong result (i've commented it out in jsfiddle)
This is impossible to do with pure CSS as you want it, though there are some semi-work arounds
This approach only works in certain instances, but the trick is to use margin-top:-50px; padding-top:50px;. This makes the element appear in the same position except for the background will be 50px higher and pushed up 50px. Here's a demo of that approach
The second approach which I'd recommend more is one involving an added inner element. I decided to format each one like so <section id="one"><div class="reference" id="refOne"></div>First section</section>. Then you can point to the refence in the link, i.e. one. Then all it takes it the following simple CSS
section {
... Your other lines ...
position:relative;
}
.reference {
position:absolute;
top:-50px;
}
Demo. This approach leaves all of the elements the way they were before in performance and looks but requires slight additional HTML markup
It'd be nice to be able to reference element's pseuo-elements like you tried to do but I understand how it could be non-syntactically correct to do so
Image
I tried this with the following CSS and HTML. It looks fine when the browser is of full width and scrambled when browser is resized. I WANT the elements to be where there and a HORIZONTAL SCROLL has to appear when the BROWSER is RESIZED. Pretty new to web programming. Text-align:center for positioning the center column would not work because, every time a new text is added in the left or right, it gets relocated and also center column element in ROW1(text) and ROW2(Button) do not appear along the same line. That is, text appears a bit right and the button a bit left. Text-align won't work here.
CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#000;
}
.wrapper
{
width:70%;
margin:0 auto;
padding:2px;
background-color:#fff;
}
.second_row
{
padding:2px;
margin-top:10px;
}
.center_container
{
width:30%;
margin:0 auto;
}
.left_container
{
width:33%;
float:left;
}
.right_container
{
width:33%;
float:right;
}
.topelements
{
margin-top:0px;
color:#777;
padding:2px;
}
.topelements a:link
{
color:#29a3cc;
}
.topelements a:active a:hover
{
color:#29a3cc;
}
.logo
{
overflow:hidden;
}
HTML code:
<div class="wrapper">
<span class="topelements float_left" >Mail us: admin#admin.com</span>
<span class="topelements float_right">Left links My xyz</span>
<span class="topelements center_container">Welcome to xyz ! Sign in or Signup.</span>
</div>
<div class="wrapper second_row">
<span class="left_container">Srini</span>
<span class="right_container">Vas</span>
<form class="center_container">
<input type="text" placeholder="Goooooooooooo!" />
<input type="submit" value="Search" />
</form>
</div>
<div class="wrapper">
If you want to align you object in the center, there are a couple of different ways. First of all, there is the text-align:center; which you don't need right now. There is also object-position:center; which basically does the same, but with an object. This way isn't the best, but you could add a certain percentage of padding to either side but that's not recommended. Lastly, there's alignment-adjust:central;. This may not be perfect for your situation but just try out all of these and see if they work. Good luck!
One way that would work is to set your wrapper width to a fixed value (something in 800px for example). As long as this width was longer than all the content you are putting within that wrapper, everything should work as you want. The browser will automatically place a horizontal scroll bar when the window gets smaller than the width of the wrapper.
This is just a small error I found in the CSS and I don't know if this will help too much. The div you added was not referred to as a div, but a class. For example, if you wanted to style a div in CSS, you would do this:
#divname {
CSS for div goes here...
}
On the other hand, if you wanted to add a little style to a class, you would go like this:
.classname {
CSS for class goes here...
}
If you were wondering what the difference for each is, the answer is simple. A class can define multiple objects while the divs are just limited to one object or element.