I want the content to be centred in the page. However, it doesn't seem to work.
CSS:
body {
text-align: center;
}
.velkommen {
text-align: center;
font-family: Verdana;
font-size: 28px;
width: 400px;
background-color: rgb(240, 255, 240);
-webkit-box-shadow: black;
border-radius: 50px
}
#links {
font-family: Verdana;
width: 300px;
padding: 5px 20px 5px 20px;
}
HTML:
<div class="velkommen">Velkommen til min hjemmeside</div>
<div id="links">Links:<br>Random Page!</div>
Test it here: http://jsfiddle.net/URdTD/
What is wrong?
Add this style to the div:
margin-left:auto;
margin-right:auto;
To remove even one more line you could use
margin: 0 auto;
Just remember that you need to have a width on the element that you want to center.
This dosnt work if u have "float:left" to the element that you want to center.
Remember that the content should have
1)margin: 0 auto;
2)width: some px;
3)no floats
Related
screen shot of webpage with excess white space at the bottom
I have created this webpage but there is excess white space at thee bottom that I do not know how to get rid of. I feel as though it has something to do with the width and height of either my body or main section in my CSS file but I am not sure. Here is the code for my CSS file.
body {
background: url('black_gradient.png')repeat-x;
text-align: center;
height: 800px;
}
#main{
width: 1000px;
height: 1000px;
background: url('brown gradient.jpg')repeat-x;
margin: 25px auto;
border: solid 2px #ff3819;
border-bottom: solid 0px;
padding: 10px;
}
h1{
text-align: center;
font-family:"Times New Roman";
font: 24pt;
color: #000000;
}
hr {
height: 2px;
color: #000000;
}
p {
font-family:"Calibri";
font-size: 12pt;
text-align: left;
text-indent: 48px;
color: #000000;
}
remove the height from your body and #main or set them to auto
Try:
background-size: cover;
I also recommend reading about gradients in css.
How to I can I center this texts horizontally which is inside two divs. When I'm previewing it in Dreamweaver, it is finely centered.
My HTML codes:
<div class="maincontainer">
<div class="microcontainers">
<p class="design"><span style="color: #F90;">D</span>ESIGN</p>
</div>
<div class="microcontainers">
</div>
</div>
My CSS Style:
#maincontainer{
width:1120px;
height:auto;
background-color:#E4E4E4;
margin-left: auto;
margin-right: auto;
margin-top: 124px;
padding: 40px 40px 40px 40px;
overflow: hidden;
display:block;
text-align: center;
}
.microcontainers{
width: 350px;
height: 600px;
border: #999 1px solid;
margin: 40px 40px 40px 40px;
padding: 15px 15px 15px 15px;
display: inline-block;
overflow: hidden;
}
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
text-align: center;
display: block;
margin: 0 auto;
}
Thank you and more power!
v Please try this, it may solve your problem.
There is some CSS changes.
.microcontainers{
width: 350px;
height: 600px;
border: #999 1px solid;
margin: 40px 40px 40px 40px;
padding: 15px 15px 15px 15px;
display: inline-block;
overflow: hidden;
text-align: center;
position: relative;
}
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
position: absolute;
left:0;
right:0;
}
FIDDLE
Add text-align:center for the paragraph.
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
text-align:center;
}
Your content "DESIGN" seem to be overflowing its container thus placing it off-center. Look at this demo where I have added overflow: hidden to .design.
With your updated CSS, including text-align: center for .design you could either reduce the font-size, reduce the padding of .microcontainers or add negative margin on the <p> element
add
text-align:center;
in your design class
Just adding text alignment will fix it see this Fiddle
doing exactly what the above user suggested.
.design{
font-family: TrajanPro-Regular;
font-size:85px;
color: #999;
text-align: center;
}
but I don't see why you are doing this can you explain it..If you are doing a big project i suggest you use bootstrap
You can use center tags also
<div class="maincontainer">
<center><div class="microcontainers">
<p class="design"><span style="color: #F90;">D</span>ESIGN</p>
</div></center>
<center><div class="microcontainers">
</div></center>
</div>
I am trying to create a <kbd> tag for myself. I was trying with this image like below,
CSS:
kbd {
font-family: Courier;
padding-top:8px;
padding-bottom:8px;
padding-right:15px;
padding-left:10px;
background: url('kbd.png');
background-repeat:no-repeat;
}
HTML:
<p>Open Terminal <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>T</kbd> </p>
But images are not showing completely unless the text is large enough to cover the image. see the screen shot below.
Also I could not able to bring the text at center, I tried align but could not succeeded.
Any help including any better way to have <kbd> tag will be appreciated.
It's very worth noting that this could be done pretty much entirely without the need of an image. It would be more flexible without it; a long <kbd> text would break if it were an image, but wouldn't if it was done entirely in CSS.
So I propose:
http://jsfiddle.net/TLV4a/1/
kbd {
display: inline-block;
min-width: 45px;
text-align: center;
font-family: Courier;
margin: 0 5px;
padding: 0 5px;
background-color: #f7f7f7;
border-width: 1px 1px 3px;
border-style: solid;
border-color: #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 4px 1px #fff;
box-shadow: inset 0 0 4px 1px #fff;
line-height: 1.75;
}
If you have even padding, instead of different left vs. right padding, as well as utilise a min-width along with text-align: center;, you can get it to display nicely.
http://jsfiddle.net/TLV4a/
kbd {
display: inline-block;
min-width: 50px;
text-align: center;
font-family: Courier;
padding: 6px 5px 8px;
background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png') no-repeat 50% 0;
}
Have a look at this jsFiddle
kbd {
font-family: Courier;
padding-top:6px;
padding-bottom:6px;
background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png');
display: inline-block;
width: 54px;
text-align: center;
background-repeat:no-repeat;
}
You can use this code to get your desire resutl:
kbd {
background: url("kbd.png") no-repeat;
display: inline-block;
font-family: Courier;
min-height: 31px;
min-width: 54px;
font-size: 0.75em;
padding: 6px 0 0;
text-align: center;
}
/*use font size to adjust with the key image and use padding 0px for the left and right after that use text-align to obtain your best result .I have attached an image look it*/
Adding background-size may be your best solution.
background-size:100% 100%;
You can use text-align:center for align your text and on the background image you can use a z-index Property.
have a look here for z-index examples:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
HTML:
<div class="cont">
<center>
<div class="xmdiv">
<img class="xmenu" src="media/file1.png">
<img class="xmenu" src="media/file2.png">
</div>
</center>
<p>-snip-</p>
</div>
CSS
.cont {
position: relative;
margin-top: 3%;
background-color: transparent;
width: 65%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 1px;
-moz-box-shadow: 0px 0px 11px #000000;
-webkit-box-shadow: 0px 0px 11px #000000;
box-shadow: 0px 0px 11px #000000;
font-family: 'Open Sans', sans-serif;
color: #070707;
font-size:15px;
font-weight:300;
text-align:justified;
line-height:1.5;
}
p {
margin-left: 8px;
margin-right: 8px;
}
What it looks like:
I want it to be centered, how do I do that? Tried looking it up online, and it didn't really work.
Is this what you want ? Link: http://jsfiddle.net/jtFUs/
CSS:
.cont
{
position: relative;
margin: 0 auto;
}
If you need to center a div vertically and horizontally on your page, use:
div {
width: 100px;
height: 100px;
background-color: #000000;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
http://jsfiddle.net/65adr/48/
In case you need to center it just horizontally, use:
center
{
width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
Just define a width for the element, in this case i added 200px for example.
http://jsfiddle.net/65adr/50/
To center a div (and many other types of elements), use this CSS code:
.cont {
margin: 0 auto;
width: XXXpx;
}
JSFiddle.
Make sure to specify the width, or else the div won't be centered.
Edit
To center an element without specifying with, you could do something like this (not sure if this will work in all browsers, however):
body { text-align:center; }
.cont { display:inline-block; }
Side-note
Don't use the center tag, it is deprecated. You can read more about it here.
I would like a two column layout without worrying about the background when one column happens to be tallest than the other.
I have read about faux columns, liquid layout, but I would like to ask you if it may work this way: I have a "main" element with a semi-transparent image as background (16x17px). The main element contains the 2 floating columns, the left floats left and the right one floats right.
.main {
width: 1024px;
background-image: url();
padding:10px 0px 10px 0px;
margin: 0 auto;
}
.colleft {
float: left;
width: 618px;
padding:10px 5px 10px 10px;
}
.rightbar {
margin: 0 auto;
width: 50em;
float: right;
padding:10px 5px 10px 10px;
width: 376px;
}
.titolo {
text-align: center;
font-family: ClaireHandRegular, Helvetica, sans-serif;
font-size: 30px;
color: #35231e;
line-height: 100%;
padding:10px 0px 0px 0px;
}
.contenuto {
text-align: left;
font-family: ClaireHandRegular, Helvetica, sans-serif;
font-size: 25px;
color: #35231e;
line-height: 100%;
padding:20px 0px 0px 0px;
}
There is something wrong in my HTML and I cannot see where.
Am I this far from the solution?
<div class="main">
<div class="colleft">
<div class="titolo">ARTICLES</div>
<div class="contenuto">CONTENT</div>
</div>
<div class="rightbar">
<div class="contenuto">RIGHT BAR CONTENT</div>
</div>
</div>
You may use JSFiddle or similar to test it. As well as Firebug or similar.
When you work with floats, you must contain your floats.
In order to do so, you have several techniques at your disposal.
Among them, a simple one:
overflow:hidden; your float container.
In your case, the element with class .main.
Try this:
.main {
width: 1024px;
background-image: url();
padding:10px 0px 10px 0px;
margin: 0 auto;
background-color: red; //<-- added just to test.
overflow:hidden; //<-- to contain the floats.
}