I'm having some troubles with my HTML and CSS, in that the HTML on my siet isn't doing what I've put down in the CSS.
I'm trying to make a block of text have width: 50, but it doesn't seem to be working.
Here's a code snippet:
<div id="welcome">
<h2>Welcome!</h2>
hello, this is some text.
<p>
text before that text down there. v
<p>
we have some text here.
<p><img src="images\halo.jpg" width="250" height= "250" alt="Master Chief" /><p>
</div>
This is from the site. I've put some rules down in the CSS to make this DIV, and other DIVs on seperate pages, have a width of 50%, but it just isn't working. Here's the CSS rule:
#welcome, #about, #contact {
width: 50%;
}
All my other CSS is working, and the HTML is correctly linked to the CSS. What am I doing wrong?
I've tried force-reloading, only having the rule for one DIV, and everything like that. If you can help me, thanks!
EDIT: Solved, thanks to ob. Cheers again.
-Tim
try adding this to your page styles:
html, body, form { width:100% }
The style definition seems OK.
Do you have any other style defined for div?
Is it working on some browsers and not on others?
You can easily diagnose the problem with web-developer tool or firebug.
This kind of problem often is the result of 50% width combined with 1px border. It's 50% + 1px, and therefore more than 50%.
Related
I have some problems with my css background-image property. According to the syntax i saw when studying my syntax would be true. I checked and the image is in the right folder.
Here is my code
HTML:
<div class="left"></div>
CSS:
.left {
width:240px;
background-image: url(img/sos-logo.png);
}
Why is it not working? Help please.
You need to add a height attribute to the div to get it to show up. By default, an empty <div> is has a height of 0px.
see pen http://codepen.io/JustH/pen/EavXZO
a little css problem that i cannot quite find on SO - although I assume it has been asked before, apologies.
So, here is the html:
<html>
<body style="color:white">
<div class="a" style="width: 70%; background: blue;"><p>helloes helloes helloes</p></div>
<div class="b" style="width: 70%; background: pink;"><p>talk talk talk</p></div>
<div class="a" style="width: 70%; background: blue;"><p>yay! yay! yay!</p></div>
</body>
</html>
lovely.
If i open this in ff, i get three vertically stacked divs - but with space in between them! This is not what i wanted! Drama-rama!
ie renders this as i'd expect, which raises some alarm bells.
ie is 9, ff is 11
cheers,
andrew!
UPDATE a lot of mentioning the "p" tag - why/how is the p tag affecting anything? Isn't it wrapped by the div, and the div has the background color applied? Shouldn't, in fact, the div just be internally bigger, but with no space between adjacent divs?
UPDATE:
So i tried this html instead:
<html style="margin:0px; padding:0px;">
which didn't fix the issue, and also this:
<body style="color: white; margin:0px; padding:0px;">
which also didn't fix the issue - shouldn't the css be inherited by the "p" tag in both cases? Interestingly, i also examined the resultant css with firebug, and the p tags all have a margin and padding of 0...
ideas?
UPDATE: a lot of responses asking me to set padding to 0. This doesn't work. Any more answers stating that and i'll down vote 'em.
UPDATE: the question is really specific about using inline css. I don't actually care for inline css myself, but why is everybody providing css stylesheets for their answer?
UPDATE: somebody mentioned -webkit, and while i'm not using a google chrome at all, it is an interesting idea. I cannot see any ff related extra css that might be causing this problem, anybody have any ideas?
I tried it with Chrome and saw the same behavior. After looking at the underlying CSS (F12), Chrome is applying the following two lines to the <p> tag:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
If I add the following to the css the blank lines go away:
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
Hope that helps!
Basically the P tags are by default taking margin. Add css
p{margin:0px; padding:0px;}
This is because of the auto-generated margin of a <p> element.
Firefox (and others) do this differently than IE.
You can "reset" this simply by doing a p{margin: 0} in your css.
You can do the same for all elements at once (which I recommend) by simply adding * { margin: 0; padding: 0;} in your css.
Small tip: Install a browser extension to inspect the behavior of your elements such as Firebug.
Your <p> tags have vertical margins. Vertical margins in CSS collapse, so that child margins can sometimes apply to parents. See http://www.w3.org/TR/CSS21/box.html#collapsing-margins
I resolved this be specifying a CSS 'line-height' I just set it to the same as the font size and then I got consistent DIV spacing across all browsers.
Trying to put a div id inside another div id, but having problems. The html is simple enough, a div inside a div with two closing divs beside each other, but I can't for the life of me get the css correct. I feel really silly asking such a newbie question, please help. I want the css to display the html with the outer container with a background color that shows around the outside of the inner container.
Can you give me an example of the css required for this? Thanks for your help, -Matthew
Here you have example on JSFiddle:
http://jsfiddle.net/JXUeF/1/
if your html looks like this (this is how i understood your description):
<div id="outer">
<div id="inner">
some content here
</div>
</div>
your css should look like this:
#outer{
background-color: red;
padding: 5px;
}
#inner{
background-color: blue;
}
I have a some images that I need to line up without any gaps. I can get them fine in jsFiddle, see http://jsfiddle.net/QZLSf/2/
But on the actual SharePoint site the images have a gap between them, kind of like http://jsfiddle.net/QZLSf/1/
I have checked with FireBug and the images, and links, have all the properties they should have, but I can't get rid of that gap.
What could I be missing?
EDIT: I know that the second link has footerlinks defined as a class, but I was just using that to illustrate the problem I'm having. That's not what my actual code is.
EDIT: EDIT: Ok guys there seems to be a misunderstanding as to what I am asking here. I know HOW to get the required result, just that it isn't working on the SharePoint site. I just need advice on what might be wrong as everything that should work isn't working.
Remove the whitespace/line breaks between images.
Demo: http://jsfiddle.net/QZLSf/12/
Just posted this solution elsewhere and think it's the same thing.. is your Sharepoint implementation putting the <img> elements on separate lines in the HTML?
In your fiddle you have them all on one line.. if that's the difference then I'm afraid it's natural behaviour for inline elements (space between words).. there are hacks out there that involve HTML comments or removing the spacing or splitting the img tags, but if you can't have (or don't want) an HTML workaround - then something like this should work
CSS:
div {word-spacing: -4px; background: #eee; border: 1px solid #000; width: 600px;}
div p {word-spacing: 0;}
HTML
<div>
<img src="http://dummyimage.com/150x50/dad/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/000/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/dad/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/000/fff" alt="my mini thing" />
<p>the div containing these images and text has it's word-spacing set to -4px which removes the default whitespace</p>
<p>but then you want some text with normal spacing reset the word-spacing to 0 on the <p> elements, which is the default</p>
</div>
this is your code:
#footerlinks a, #footerlinks img{
but footerlinks is class not an id, so use this:
.footerlinks a, .footerlinks img{
ways to skin cats...
http://jsfiddle.net/eCSYt/45/
Update for bazmegakapa:
Sorry assumed the code was pretty easy to follow and I just presented it as an alternative way to approach it..
The gaps were caused by the white space in the HTML formatting - which is significant. By setting the font-size to 1px (actually 0 would be better if it is supported xbrowser) the white space is too small to render. In a real page you may also need to zero the line-height as well.
I used text-align to centre the text just to show an alternative method... and it has the advantage that you don't need to know the total width of the images
That's just the way it is. You have to set the margin-left to -4px
.footerlinks img {
margin-left: -4px;
}
.footerlinks img:first-child {
margin-left: 0px;
}
Demo: http://jsfiddle.net/QZLSf/11/
EDIT: This solution is more correct. I fixed the margin on the first child.
I am essentially trying to create a version of the "figure" element (upcoming in HTML5), whereby I have an image with a short description below it.
However, I want to limit the width of this entire element to that of the image, so the text isn't wider than the image (wrapping to multiple lines if necessary).
Basic HTML:
<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>
I'm well-versed with CSS but I can't think of any pure CSS solution, without adding a style="width:100px" to the div to match the image width.
Update: After a bit of searching and thinking, the best method seems to be using an inline width on the div. I will keep the width attribute on the image, in case I wish the div to be a bit wider than the image (for example to accomodate a longer caption).
This approach also means I could have two images side-by-side with a caption below. If I have a set of images the same size, I can of course add an extra style to each div.
Thanks to everyone who answered!
This could also be accomplished using 'display: table-caption' for the caption, as follows:
HTML
<div class="wrapper">
<img src="image.jpg" />
<div class="caption">My caption...</div>
</div>
Stylesheet
.wrapper {
display: table;
}
.caption {
display: table-caption;
caption-side: bottom;
}
This block can also be floated left of right of other text. I've tested this in IE8+. Here's a JSBin example: http://jsbin.com/xiyevovelixu/1
For setting the width to match the image automatically you could use
.figure {
display: table;
width: 1px;
}
This makes the div behave like a table (not supported in Internet Explorer). Or you could use a table instead of the div. I don't think there is another way of setting the width automatically.
Edit: The simplest way is to forget about the auto width and set it by hand. If it is really needed you can use JavaScript or a table. In this case the use of a table is not so ugly because you are addressing a limitation of the HTML version. In the case of server-side scripting you could also set the width when generating the page.
Stylesheet
div.figure img,
div.figure div.caption {
width: 100%;
}
div.figure div {
overflow: hidden;
white-space: nowrap;
}
note: to enable wrapping just remove that last css line
HTML
<div class="figure" style="width:150px;">
<img src="logo.png" alt="logo" />
<div class="caption">A description for the image</div>
</div>
I've checked it in Chrome, Firefox and IE7 and it looks good in all three. I realise this has the width on the div and not the img, but at least you only need to set the width in one place. Short of using css-expressions (IE only) I can't see a way of setting the outer divs width to the width of the first child element.
I had the same problem and after reading this decided to use an inline-style on the surrounding element. Seems the better solution over using a table to me.
You can also acheive this using the following solution proposed by Temani Afif in his blog post (All credits to him, I just don't want the solution to be forgotten)
<div class="box">
<img>
<h1>Lorem ipsum dolor ..</h1>
</div>
.box {
display: inline-block;
}
h1 {
width: 0;
min-width: 100%;
}
Make the container inline-block, and makes the h1 (or whatever text tag you use) occupy the space dictated by the sibling element. It's essentially a hack, but it works! No unintended semantic consequences like the table solutions
You could use the display:table solution for all other browsers, and a CSS Behaviour for Internet Explorer.