I put the following at the beginning of my html, and it doesn't work. The point should be obvious, to set top and bottom margins to 25px and left and right to 75px. and also to indent the paragraphs. But nothing works, no matter what I do it doesn't even look like it's trying to run the code.
<style>
<!--
p {text-indent:10px;}
margin:25px 75px;
-->
</style>
<style>
p {
text-indent:10px;
margin:25px 75px;
}
</style>
Then ensure you have a <p> tag in your HTML to apply this to.
I would focus on completing some basic HTML/CSS tutorials before pushing on much further :)
The <style> should be inside <head> and it should look like this:
<head>
<style>
p {
text-indent: 10px;
margin: 25px 75px;
}
</style>
</head>
Related
I just started learning HTML in order to get a summer internship. I'm writing a HTML note page as I go through the tutorials from HTML.net and I have a question about putting a white box around the body of my text. I'm currently working on learning CSS, just finished the basics of HTML5, and I made my page have a blue background, but I would like the body of my text to be white so it's easily read. I have the text body centered at 800px
You can do this in numerous ways. I'll give you one answer, even though I have not seen your code. Hopefully, you can relate this to your own code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
background-color: blue;
}
.mainContent {
background-color: white;
width: 800px;
text-align: center;
}
</style>
</head>
<body>
<div class="mainContent">Show your text here.</div>
</body>
</html>
I'm using CSS to change the background color for different sections of the page. Good luck! I hope this helps!
If you meant the text-color by "body of my text", then it can simply be done as following:
body{
background-color: blue;
color: white;
}
For learning CSS, this sheet should be very helpful: http://overapi.com/css/
I would do it like this:
CSS:
body{
background-color:#your blue here;
}
.bodyText{
background-color:#fff;
width:1000px;
margin:0 auto;
padding:20px;
}
HTML:
<div class="bodyText">
Your text goes in here.
</div>
Obviously, adjust the width, padding, colors, etc. to suit your needs, but this should get you started.
I have a div with a background-color, and a 3 pixel white border.
When I set the html element to direction:rtl and overflow-y: scroll, I get a pixel of the background to the right of the border - only in IE9:
I'm pasting my code here, because on JsFiddle I can't replicate the bug.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html {
overflow-y: scroll;
direction:rtl;
}
.main {
margin: 0 auto;
width: 960px;
}
.sld-menu-item {
height: 85px;
border: 3px solid #fff;
background-color: #d25188;
}
</style>
</head>
<body>
<div class="main" role="main">
<div class="sld-menu-item sld-menu-item-2">
</div>
</div>
</body>
Has anyone run into this problem, and/or can someone suggest a solution? I can't give up the scroll and rtl rules...
I was only able to fix it by setting overflow: hidden on containing element and doing a negative margin hack:
.main {
overflow: hidden;
}
.sld-menu-item {
margin-right: -1px;
}
You might also want to set width of sld-menu-item to 961px then. Can probably put this in an IE9 conditional statement. I hope there's a better way of solving this though.
I banged my head against the wall for several hours, at the end I solved it in a very strange way...
Change the width of .main to 961px, it seems that Microsoft does not know how to find the "middle" of an even range.
Please note: I am new to CS. Brand new.
I want my button div to be placed horizontally inside the confirm div: example.
Right now my dialog-button div width is equal to the width of the confirm Div. Why?
I am just placing two buttons inside my Div, so it's width should be equal to 128 (the total of two button witdh). Similarly the height should be equal to button height, but it isn't.
Second i want that mt button-div placed center horizontally . I tried left: 50% inside my button-div. But it is aligning the left margin with the centre of the confirm div. How can i do it?
EDIT
--------------------------------------------------
May be I didn't understand correctly, but if you want it inside then put it inside.
<div id="message">
Are you sure you want to
<div id="dialog-button">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
Demo
Update 1
Right now my dialog-button div width is equal to the width of the confirm Div. Why?
Why, because <div>s are block tag, they always take 100% width of the containing element. It is not equal to the width of confirm Div.
To make the dialog-button take the actual width use display: inline-block as its CSS. Demo
Update 2:
To the best from what i understood. This is what you want. If not help me help you.
Update 3:
Ok, here is a demo with the image. I will leave the without image part to you. ;)
The div which the two buttons are in is actually the width of the of the comfirm div. The reasons why divs stretch to the width of their parent, is because that is block level element.
the reason every thing seems so confusing is that you have a lot left floating divs in your example. These are changing how things would normally laid out. To make things simpler why dont you try removing some of the more confusing elements. I suggest trying a more simple example like the one below:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/ie-css3.htc" type="text/css">
<link rel="stylesheet" href="css/messageDialogStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.7.1.js">
</script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js">
</script>
<script type="text/javascript" src="js/puff.js"></script>
<script type="text/javascript" src="js/jquery.dialog.js"></script>
</head>
<body>
<div id="confirm">
<div id="message">
Are you sure you want to
</div>
<div id="dialog-button">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
</body>
</html>
If you want to center a button. If you change the margin-left and margin-right to auto you will center any block element. try changing your css to the css below:
#confirm {
background-color: #ddd;
display:block;
width:400px;
min-height:120px;
position:absolute;
border:1px solid #ccc;
border-radius: 15px;
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /*Opera, safari*/
behavior: url(css/border-radius.htc); /*IE*/
}
#message {
width: 280px;
border:1px solid #ccc;
white-space: normal;
word-wrap: break-word;
margin:20px 0 0 0;
overflow: hidden;
}
#dialog-button {
border:1px solid #ccc;
position: relative;
}
button {
display:block;
margin-left:auto;
margin-right:auto;
width: 64px;
}
Note if you have to make the button a block element for the margin auto trick to work.
You can find more about block level element here.
Is there something that will do what margin does but without the background drawing in that area? For instance, when you give an element margin: 1em you get a 1em border of blank space around the element, but the background draws in that area. Is there something similar to that except where the background doesn't draw?
My problem is I'm trying to put something below three float: lefted divs and right now I can't get any spacing between that and the floated divs above it. They just abut directly against each other.
The div that is going below the float: lefted divs has the property clear: both. If there was something that made that div have space between it and that floated div above it then that would work too.
Maybe this example will help explain (and solve) your problem?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
* { margin: 0; padding: 0; }
h1, p { background-color: #eee; margin: 10px 0; }
div { background-color: pink; float: left; width: 100px; height: 100px; margin-right: 1px; }
br { clear: both; display: block; }
</style>
</head>
<body>
<h1>Hello, World!</h1>
<div></div>
<div></div>
<div></div>
<br />
<p>Lorem ipsum dolor set amit...</p>
</body>
</html>
Margins are supposed to be transparent. I think what you're seeing here is collapsing margins. Try putting a 1px border around your divs and see what happens.
Check out the CSS 2.1 spec:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Perhaps you're looking for:
border: 4px white; /* replace with your color */
With floated elements the margin around elements next to them is ignored. I think you will have to create an additional element between the floated element and the item you want.
Because the element is floated margin space won't always be properly respected. Use a margin/border hack where you simply set the element's color to the same color as your page background and its thickness to whatever you desire. Such as in the following post:
http://socialstreams.co/41/CSS_MarginBorder_Hack
I have always been wondering how other people get to align to the centre the main div container as the only way I manage so far is adding to the css file the following:
*{
padding:auto;
margin:auto;
text-align:centre;
}
I have seen other pages using: *{padding:0px;margin:0px} but I can't see where or what do they do to centralise the main container.
Could anybody explain how?
Code example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>
Could anybody explain how do they do it in the following page?
http://www.csszengarden.com/?cssfile=/179/179.css&page=4
Do not use the * selector as that will apply to all elements on the page. Suppose you have a structure like this:
...
<body>
<div id="content">
<b>This is the main container.</b>
</div>
</body>
</html>
You can then center the #content div using:
#content {
width: 400px;
margin: 0 auto;
background-color: #66ffff;
}
Don't know what you've seen elsewhere but this is the way to go. The * { margin: 0; padding: 0; } snippet you've seen is for resetting browser's default definitions for all browsers to make your site behave similarly on all browsers, this has nothing to do with centering the main container.
Most browsers apply a default margin and padding to some elements which usually isn't consistent with other browsers' implementations. This is why it is often considered smart to use this kind of 'resetting'. The reset snippet you presented is the most simplest of reset stylesheets, you can read more about the subject here:
http://meyerweb.com/eric/tools/css/reset/
The basic principle of centering a page is to have a body CSS and main_container CSS. It should look something like this:
body {
margin: 0;
padding: 0;
text-align: center;
}
#main_container {
margin: 0 auto;
text-align: left;
}
You can text-align: center the body to center the container. Then text-align: left the container to get all the text, etc. to align left.
I would omit the * { text-align:center } declaration, as it sets center alignment for all elements.
Usually with a fixed width container margin: 0 auto should be enough