I've tried this:
Code:
<div class="center">
<div class="mainmenuoption">Home</div>
<div class="mainmenuoption">About Us</div>
<div class="mainmenuoption">Experiences</div>
<div class="mainmenuoption">Get Involved</div>
<div class="mainmenuoption">Support Us</div>
<div class="mainmenuoption">Contact Us</div>
</div>
CSS:
div.center
{
display: block;
margin-left: auto;
margin-right: auto;
}
div.mainmenuoption
{
float: left;
font: normal normal bold 100% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
width: 100px;
color: #FFFF00;
text-align: center;
vertical-align: middle;
}
Setting the inner divs to display: inline-block and the outer div to text-align: center, It should solve your problem.
Unless you set an explicit width on your div it will expand to take up the available width. Since you seem to know how wide you want it this will work:
div.center {
width: 600px;
margin: 0 auto;
}
If the div might be of variable width use display: inline-block as Madara Uchiha suggested.
Add a width to your div.center declaration or add text-align: center to your div.center declaration.
Give display: inline-block; to the inner divs and a text-align: center; to the parent div.
<div class="center">
<div class="mainmenuoption">Home</div>
<div class="mainmenuoption">About Us</div>
<div class="mainmenuoption">Experiences</div>
<div class="mainmenuoption">Get Involved</div>
<div class="mainmenuoption">Support Us</div>
<div class="mainmenuoption">Contact Us</div>
</div>
CSS:
div.center
{
text-align: center;
}
div.mainmenuoption
{
font: normal normal bold 100% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
width: 100px;
color: #FFFF00;
text-align: center;
vertical-align: middle;
display: inline-block;
}
Demo: http://jsfiddle.net/8Y8YW/
if you want to center the menu (class .center) then you can use
.center
{
width:600px; // what ever width you want
margin: auto 0;
}
or you want to center the menu item use text-align: center
If you set the width in your div.center, it should work!
I posted a sample at: http://jsfiddle.net/EFXXs/2/
Related
I have a cityHeader(in this pic it is Los Angeles).
Underneath cityHeader there is div called weatherMain which contains three smaller divs(id=temperature,id=weatherDescriptionHeader and id=documentIconImg
#cityHeader {
float: right;
display: block;
margin: 5px;
font-size: 42px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#weatherMain {
display: block;
margin-bottom: 20px;
text-align: right;
}
#weatherMain div {
display: inline-block;
}
#weatherDescriptionHeader {
font-size: 28px;
vertical-align: 50%;
}
#temperature {
font-size: 38px;
vertical-align: 25%;
}
<h1 id="cityHeader"></h1>
<div id="weatherMain">
<div id="temperature"></div>
<div id="weatherDescriptionHeader"></div>
<div><img id="documentIconImg" /></div>
</div>
enter image description heredocumentIconImg).
Three smaller divs should be under cityHeader, positioned next to each other and all aligned to the right.
I tried floating them to the right,adding text-align:right to their parent element(weatherMain), nothing works.
In the pic temperature div is 9 degrees,weatherDescriptionHeader is Clear sky and documentIconImg is icon.
Is this what you're looking for: https://codepen.io/dillonbrannick/pen/XOoNjp
I added in the background colours just so it's easy to identify the elements. Just put your background image into the #weatherMain and remove the other background colours and it should work fine. I added in a margin to #weathermain just to display it within the middle of the page.
Also I added a margin:0 to the h1 tag as h1 automatically adds some css style to it that was interfering.
HTML:
<div id="weatherMain">
<h1 id="cityHeader">Hello World</h1>
<div id="temperature">Howya</div>
<div id="weatherDescriptionHeader">Hola</div>
</div>
CSS:
#weatherMain {
background-color:red;
text-align: right;
margin: 10% 20% 10% 20%
}
#cityHeader {
background-color:yellow;
}
h1{
margin:0;
font-size:45px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
#temperature {
background-color:green;
font-size: 38px;
}
#weatherDescriptionHeader {
background-color:lightblue;
font-size: 28px;
}
Try this:
#weatherMain {
display: block;
margin-bottom: 20px;
text-align: right;
float: right
}
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Why does this CSS margin-top style not work?
(14 answers)
Closed 4 years ago.
I have an issue with my page its making a gap appear between the H1 and main page DIV section. After 2 hours I cant seem to fix it. Can anyone advise where its going wrong. I want the top banner and the #mainarea to be on top of each other. There is a small gap between the 2 at the moment.
body {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: #f6f6f6;
padding: 0;
margin: 0;
border: 0;
}
#logo {
width: 100%;
height: 50px;
background-color: #000;
}
#mainarea {
width: 60%;
height: auto;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #E70A0E;
height: 250px;
}
h1 {
font-size: 1.5em;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bolder;
font-style: normal;
padding-left: 15px;
}
<div id="logo">
</div>
<div style="clear: both;"></div>
<div id="mainarea">
<h1>This is a test </h1>
</div>
Set overflow:auto; in #mainarea and add margin:auto toh1 Tag.
See, what happens when you put div inside div: https://stackoverflow.com/a/8529773/9947640
body {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: #f6f6f6;
padding: 0;
margin: 0;
border: 0;
}
#logo {
width: 100%;
height: 50px;
background-color: #000;
}
#mainarea {
width: 60%;
height: auto;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #E70A0E;
height: 250px;
overflow:auto;
}
h1 {
font-size: 1.5em;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bolder;
font-style: normal;
padding-left: 15px;
margin:auto;
}
<div id="logo">
</div>
<div style="clear: both;"></div>
<div id="mainarea">
<h1>This is a test </h1>
</div>
I need images for the Top , Middle and Bottom to be on the right hand side of the text within these divs. at the moment even though the images go right and text left the image sits below the paragraphs position. I have applyed a reset.css already as well.
Here is the relevent HTML and CSS
Index.html extract:
<Div id="background">
<div id="Space">
</div><!--spacing between divs-->
<article id="Top">
<h2>Flower arrangement</h2>
<p>Our team of professional designers will make your event memorable and stress free. We will design to your theme, colour, budget and needs with attention to detail given high priority.</p>
<img src="Images/Top_Image.gif" alt="" width="207" height="195">
<a href="#" >Read More </a>
</article>
<div id="Top_box">
</div><!--spacing between divs-->
<article id="Middle">
<h2>Seed Library</h2>
<p>Don't be afraid to try growing your own plants, you will be surprised how easy seed germination really is. A large variety of native seed mixes are offered, ideal for creating sustainable wildflower gardens.</p>
<a href="#" >Read More </a>
<img src="Images/Middle_picture.gif" alt="" width="208" height="216">
</article>
<div id="Middle_box">
</div><!--spacing between divs-->
<article id="Review">
<h2>Ran Dome said:</h2>
<p>'I have never had such an outstanding experience with such a wonderful group of people who understood my needs'</p>
<img src="Images/Review_picture.gif" alt="" width="93" height="120">
</article>
<div id="Review_box">
</div><!--spacing between divs-->
<article id="Bottom">
<h2>Sustainability</h2>
<p>Belinda Aspect founded Aspect in April 1985 and is a leading expert on green floral design. Belinda's dual passions for floral design and sustainability were merged when she decided that The Aspect would 'go green'.</p>
<a href="#" >Read More </a>
<img src="Images/Bottom_picture.gif" alt="" width="208" height="216">
</article>
<div id="Bottom_box">
</div><!--spacing between divs-->
</Div><!--background picture Div-->
style.css extract:
#background {
background-image: url(Images/background.jpg);
background-repeat: no-repeat;
width:100%;
}
#catch_line{
color: #7f6e99;
height: 50%px;
width: 57%;
margin-left: 6%;
margin-top:132px;
background-color: #000000;
border-radius: 5px;
}
#catch_line h1{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 3.4em;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
paddingtop: 50px;
color: #7f6e99;
}
article#Top, article#Review {
width: 100%;
height: 200px;
border-radius: 5px;
background-color: #7a9c52;
}
article#Middle, article#Bottom {
width: 100%;
height: 200px;
border-radius: 5px;
background-color: #2d6d18;
}
article#Top h2, article#Middle h2, article#Bottom h2 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.6em;
color: #0c1306;
padding-bottom: 2%;
word-spacing: 2px;
padding-top: 3%;
padding-left: 6%;
margin right: 0px;
}
article#Top p, article#Middle p, article#Bottom p{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1em;
color: #0c1306;
width: 70%;
clear: none;
display:block;
padding-left: 6%;
padding-bottom: 2%;
margin right: 0px;
}
article#Top a, article#Middle a, article#Bottom a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.7em;
color: #dc3646;
text-decoration: none;
clear: none;
float: left;
padding-left: 6%;
margin right: 0px;
}
article#Top img, article#Middle img, article#Bottom img{
float: right;
margin-right: 20px;
clear: none;
width: 140px;
height: 140px;
display:block;
margin left: 0px;
}
article#Review h2 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.6em;
color: #0c1306;
padding-bottom: 2%;
word-spacing: 2px;
padding-top: 2.5%;
text-align: center;
}
article#Review p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-style: italic;
font-size: 1em;
color: #0c1306;
text-align:center;
padding-left: 10%;
padding-right: 10%;
padding-bottom: 0.5%;
}
article#Review img{
margin-left: auto;
margin-right: auto;
display:block;
height: 78px;
width:62px;
}
#Space, #Top_box, #Middle_box, #Review_box, #Bottom_box{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
height: 80px;
clear: both;
}
I am also aware that I could change it so that the articles have margins instead and get rid of the spacing divs to get the same effect as what I want from them but I'm not concerned with that at the moment.
I have the following CSS:
.me-header {
display: inline-block;
position: relative;
top: 50px;
left: 10px;
}
.me-header a {
color: #333;
font: 10px "Lucida Grande", Helvetica, sans-serif;
text-decoration: none
}
.resume-header {
display: inline-block;
position: relative;
top: 50px;
left: 100px;
}
.resume-header a {
color: #333;
font: 10px "Lucida Grande", Helvetica, sans-serif;
text-align: center;
text-decoration: none
}
.center-text {
text-align: center;
}
And the following HTML:
<div class="me-header">
<img src="media/me-icon.png" alt="Picture of Christian Selig"><br> <span class="center-text">Contact Me</span>
</div>
<div class="resume-header">
<img src="media/resume-icon.png" alt="Resume icon" title="Click to download resume (PDF)"><br> <span class="center-text">Resume (PDF)</span>
</div>
But my text still comes out left-aligned. Why?
Both a and span are inline elements - so they are only as wide as their contents. So when you center the text, it is centred within the inline element, but the inline element appears on the left.
If you set text-align: center; on the parent block element it will work.
If you want to center the whole block, use an automatic margin.
You could do
.center-text
{
display: table;
margin: 0 auto;
}
I am having a hard time to create make the background color stretch across the browser
here is some code
body {
font-size: 1.1em;
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;
margin: 0px auto;
padding-bottom: 25px;
width: 980px;
}
div#black_bar{
background-color: #000000;
}
div#header {
height: 66px;
font-family: arial;
margin: 0 auto;
color: #FFFFFF;
margin-top: 5px;
}
of course as you can see i have specified the width to be 980px in the body and this apply to the header of course, any ideas how to solve this
and by the way this black bar is actually a div containing the header in it
Thanks in advance.
You will need the header wrapper to be inside the body with width 100%, and to specify width=980px both on the header and content below, like this :
CSS
body, html{
width:100%;
}
div#black_bar{
background-color: #000000;
width:100%;
}
div#header {
height: 66px;
font-family: arial;
color: #FFFFFF;
margin-top: 5px;
width:980px;
margin:0 auto;
}
#content{
font-size: 1.1em;
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;
padding-bottom: 25px;
margin: 0 auto;
width: 980px;
}
HTML
<body>
<div id="black_bar">
<div id="header">
</div>
</div>
<div id="content">
</div>
</body>