I am trying to work out how I can put a border around my page. Here is my html and css:
<html>
<head>
<title>Royal Aura club</title>
<link rel="stylesheet" type="text/css" href="restyle.css" / >
</head>
<body>
<main id="main">
<div id="header">
<h1> Royal Aura club</h1>
<div id="nav">
<div class="navitem">Home</div>
<div class="navitem">Restaurant </div>
<div class="navitem">Gallery</div>
<div class="navitem">Guest list</div>
</div> <div class="navitem">Job Vancancies</div>
<div id="content">
<div id="textblock">
<h2>Why Royal Aura?</h2>
<p>
Royal Aura club and restaurant is located in Mayfair just a walk away from the Ritz.
We will guarantee you will have a ball of a time with our brilliant DJ playing the tunes while your sipping cocktails away and dancing the night away.
<p>
Aura is a glamorous and sophisticated club that has a beautiful decor to get the mood. If you fancy doing VIP in style drop us a e-mail, we will be glad to help. Not to mention our fabulous food dishes we serve are to die for.
Please make sure you e-mail us 24 hours before the day you want to come and party or dine.
</p>
</div>
</body>
</html>
Css-
body {
front-family: verdana, arial, sans-serif;
margin:0;
padding: 0;
background-color: #FFFDED;
border:0px;
}
#main {
background-color: #FFFFFF;
width: 280px;
margin: 50px auto;
border: 0px solid;
}
#header {
border-bottom:none
}
#content {
padding: 6em 1em;
border: none;
margin: 20px;
}
#footer {
}
h1 {
font: bold 1.5em Tahoma, arial, sans-serif;
color: #826BA9;
font-style: italic;
background-image: url(relogo.jpg);
background-repeat: no-repeat;
padding: 1em 1em 1em 120px;);
background-repeat: no-repeat;
padding: 1em 1em 1em 100px;
}
.navitem {
float: left;
border-right: 3px solid #999999;
border-top:1px solid #999999;
text-align: left;
}
#textblock {
background-color: #D4CAE2;
width: 300px;
border: 4px solid #000000;
padding: 10px 7px;
float: left;
font-size: 110%;
text-align: left;
height: 400px
}
a:link {
text-decoration: none;
color: #000000;
padding-left: 0.em;
padding-right: 0.5em;
float: right;
}
a:visited {
text-decoration: none;
color: #826BA9;
padding-left: 0.5em;
padding-right: 0.5em;
}
a:hover {
text-decoration: none;
color: #826BA9;
background-color: #F4E8F0;
display: block;
}
body {
border: 5px solid red;
}
This is all you need to do:
html{
border: solid;
}
I don't think <main> is a valid tag. Also, make sure to close your tags.
Replace this:
</body>
</html>
With this:
</div>
</div>
</body>
</html>
And replace this:
<main id="main">
With this:
<div id="main">
Lastly, replace this:
#main {
background-color: #FFFFFF;
width: 280px;
margin: 50px auto;
border: 0px solid;
}
Wtih this:
#main {
background-color: #FFFFFF;
width: 280px;
margin: 50px auto;
border: 1px solid red; /* width, style, colour */
}
And change the border property accordingly.
If you want a border around the entire page, put that border property within body{} in your CSS.
try this, wouldnt say its the proper way tho
body {
background-color: green;
border: 5px solid white;
padding: 100%;
margin: 0;
}
You will need to adjust the properties to match your desired result, but this should place a border around your page.
#main {
border: 1px solid red;
}
Related
I have (just parameters relative to positioning here):
.container{
width: 100%;
margin: 1rem;
border: 1px solid black;
}
.inner-container{
margin: 1rem;
border: 1px solid gray;
}
<div class="container">
<div class="inner-container">
Hello World!
</div>
</div>
I was expecting that the spaces, on the left and the right hand side, between the "inner-container" and the "container" are equals, but it isn't: the space on the right hand side is TWICE as big as the one on the left.
Why? I want to have the "inner-container" in the middle (like "align: center") of the "container".
I've tried
body{ margin: 0px } // proposed by #Uttam
or (by someone who deleted his/her comment)
*{
margin: 0;
padding:0;
}
but neither the solution is working for me! I've also tried "reset CSS" or add "position: relative" to "container" and "position: absolute" to "inner-container", but I still have the same problem!
Note: thank you very much for your help (#Uttam and #Temani Afif). Your solutions should work, but it isn't for me. This is my whole code:
* {
margin: 0;
padding: 0; }
html {
font-size: 62.5%; }
body {
font-family: "Times New Roman", Times, serif;
}
.container {
width: 98%;
margin: .5rem;
border: 1px solid #000;
border-radius: 7px;
text-align: justify;
}
.inner-container {
max-width: 100%;
background-color: #eee;
text-align: justify;
border: 1px solid #337ab7;
border-radius: 1rem;
padding: 0.5rem 0.5rem;
margin: 0.5rem 0 0.2rem 0.1rem; // trying to correct the problem
box-shadow: 1px 1px gray;
}
margin between container and inner-container are equal but if you will not remove the default margin of body then you might face some issue related with margin or padding.
body{
margin:0px;
}
.container{
width: 100%;
border: 1px solid black;
}
.inner-container{
margin: 1rem;
border: 1px solid gray;
}
<div class="container">
<div class="inner-container">
Welcome World!
</div>
</div>
HTML
<div id="header"><h1>Scott's Favorite Things</h1>
<div id="header2"><h2>Cars, Sports, and Music</h2></div>
</div>
CSS
div#header{
border:5px;
border-color: red;
border-style: solid;
}
h1{
float:right;
clear: both;
}
div#header2 h2{
float: right;
clear: both;
}
div#header2{
border:5px;
border-color: orange;
border-style: solid;
margin: 5px;
}
Here I post the link to the things I have and i want to:
Current result of mine
Result that I wanna make
Just use text-align: right instead of float: right and remove the default margin from h1 and h2.
Look at this snippet:
div#header {
border: 5px;
border-color: red;
border-style: solid;
}
div#header h1 { /* Added header to h1 because I dont want to style every h1 */
text-align: right; /* Changed from float to text-align */
clear: both;
margin: 0; /* remove the default margin */
}
div#header2 h2 {
text-align: right; /* Changed from float to text-align */
clear: both;
margin: 0; /* remove the default margin */
}
div#header2 {
border: 5px;
border-color: orange;
border-style: solid;
margin: 5px;
}
<div id="header">
<h1>Scott's Favorite Things</h1>
<div id="header2">
<h2>Cars, Sports, and Music</h2>
</div>
</div>
You have to create a nested HTML-structure an style each div via CSS.
The HTML:
<div class="main-wrapper">
<div class="head-wrapper">
Lorem Ipsum
<div class="small-head-wrapper">
Lorem Ipsum
</div>
</div>
<div class="content-wrapper">
Your Main Content
</div>
</div>
The the CSS:
.main-wrapper {
border: solid 5px green;
}
.main-wrapper .head-wrapper {
text-align: right;
border: solid 5px red;
padding: 5px;
}
.main-wrapper .head-wrapper .small-head-wrapper {
border: solid 5px orange;
}
.main-wrapper .content-wrapper {
border: solid 5px blue;
}
Check it out: https://jsfiddle.net/zxvvqszx/
I'm almost done, but my problem is the background of the text , I even try the opacity but the underline of the box appear.
.block {
display: inline-block;
border: 2px solid white;
padding: 5px;
margin-top: 1em;
}
.paddingbox{
padding: 60px;}
.boxed {
float: left;
color: white;
padding: 0 5px;
margin-top: -2em;
}
<div class="paddingbox"><center>
<div class="block">
<span class="boxed">
<h1 style="color:white;"><?php echo get_the_title(); ?></h1></span>
</div></center></div>
With backgroun color
without background color
I'm trying to achive is like this, but it have a back ground like in the picture above
I tried fieldset and this happen
The behavior can be achieved with a fieldset tag.
.block{
display: inline-block;
border: 2px solid white;
}
.title{
color: white;
font-size: 1.5em;
text-align: center;
}
body{
background: purple;
}
<fieldset class="block">
<legend class="title">
Services
</legend>
</fieldset>
I get help of positions for solve this question!
div {
position: relative;
width: 400px;
padding: 10px;
border: 1px solid;
}
span {
position: absolute;
top: -10px;
left: 40%;
background-color: #FFF;
font-weight: bold;
}
<div>
<span>About Us</span>
</div>
So, I would like to have my text aligned in the middle of the page and I would also like a separate div that has text on the bottom of the page in the middle.
Here is my CSS code
#header { text-align:center; color:white; font-family:'Capture'; font-size:34px; margin: auto; width: 800px;}
#slogan { text-align:center }
#font-face { font-family:'Capture'; src:url(/fonts/Capture_it.ttf); }
.info-container { width: 840px; border: 1px solid #d8d5c6: padding: 4px; margin: 40px auto 0; }
.inner-border { background-color: #fcfbf9; border: 1px solid #d8d5c6; padding: 10px 20px; }
.coming-soon-visitor strong, .coming-soon-owner strong { font-weight: bold; color: #000; }
.coming-soon-owner { float: left; font-size: 14px; color: #6d6a5b; font-weight: normal; width: 400px; border-right: 1px solid #d9d6c5; padding: 10px 0; margin-bottom: 10px; }
.coming-soon-visitor { float: left; font-size: 14px; color: #6d6a5b; font-weight: normal; padding-left: 20px; padding: 10px 0 10px 20px; margin-bottom: 10px; }
<div style="text-align:center">Your text here</div>
and for your css
<div id="my-div">Your text here</div>
#my-div{ text-align: center }
if you mean, "I want my DIV centered," then you possibly want this:
<div id="my-div">Your text here</div>
#my-div{ width: 800px; margin: 0 auto; text-align: center }
beyond that, your question might be too vague to give you the answer you seek
See if the code below helps:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>align</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#text_center {
text-align: center;
width: 200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-20px;
}
#text_bottom {
text-align: center;
width: 200px;
position:absolute;
left:50%;
bottom:1%;
margin-left:-100px;
}
</style>
</head>
<body>
<div id="text_center">Text 1</div>
<div id="text_bottom">Text 2</div>
</body>
</html>
I have a tagcloud in wich the tags (in Divs) should float centered. There is no float: center so I'm looking for a clean solution. My HTML looks something like this:
<div id="tagcloud">
<div class="tag">Tag 1</div>
<div class="tag">Tag 2</div>
<div class="tag">Tag 3</div>
<div class="tag">Tag 4</div>
</div>
The Divs should float with space to both sides (centered). I'm not sure how to explain this any better. Any ideas?
thanks!
update
The .tag divs must have a flexible width so that varying content fits into them.
Also it should be possible to have several tags in one line (if they are short enough)
My CSS so far:
.tag {
padding: 5px 0 0 0;
float: left;
margin: auto; }
.tag img {
border-right: 1px solid #fff;
margin: 0;
float: left;
vertical-align: top; }
.tag a {
font: bold 10px Verdana;
margin: 0;
background-color: #ccc;
padding: 3px 4px 3px 4px;
height: 16px;
float: left;
text-decoration: none;
vertical-align: top;
cursor: pointer;
color: #000; }
#tagcloud {
margin-top: 7px;
text-align: center; }
#tag_box #tagcloud .tag {
margin-left: auto;
margin-right: auto; }
My HTML:
<div id='tagcloud'>
<div class='tag' id='tag_1004'>
<img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" />
<span class='name'>design</span>
</div>
<div class='tag' id='tag_1005'>
<img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" />
<span class='name'>degeneration</span>
</div>
<div class='tag' id='tag_1006'>
<img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" />
<span class='name'>deggendorf</span>
</div>
<div class='tag' id='tag_1007'>
<img alt="Tag_22x17" src="/images/tag_22x17.png?1245428671" />
<span class='name'>hamburg</span>
</div>
Perhaps this might help?
.tag
{
margin-left:auto;
margin-right:auto;
width:100px;
}
if you set the #tagcloud and .tag styles to the same width you could then just align the text center.
#tagcloud, .tag {
width:100px;
text-align:center;
}
another option would be as follows:
#tagcloud {
width:100px;
text-align:center;
}
.tag {
display:inline;
}
Try this
.tag
{
text-align:center;
display:inline;
}
#tagcloud{
text-align:center;
}
It work on My computer
<style>
.tag {
padding: 5px 0 0 0;
display:inline;
margin: auto; }
.tag img {
}
.tag a {
font: bold 10px Verdana;
margin: 0;
background-color: #ccc;
padding: 3px 4px 3px 4px;
height: 16px;
text-decoration: none;
vertical-align: top;
cursor: pointer;
color: #000; }
#tagcloud {
margin-top: 7px;
text-align: center; }
</style>