I want my logo div down further, not exactly center, but about there. When I add a margin to the top it pushed my menu-bar div down too. I tried adding a padding instead by that didn't move the div. I'm guessing because there isn't actually anything in it right? Is there a way to move that div down and over a little without affecting the menu-bar div?
<div id="Container">
<div id="logo"></div>
<div id="menu-bar">
<ul>
<li><a>start</a></li>
<li><a>end</a></li>
<li><a>info</a></li>
<li><a>score</a></li>
<li><a>reload</a></li>
</ul>
</div>
</div>
</div>
-
#charset "utf-8";
/* CSS Document */
*{
padding:0;
margin:0;
}
html{
background:url(../images/water-316625_1280.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
#menu-bar{
height:30px;
float:right;
text-align:right;
background-color:rgba(173,172,172,.9);
border-radius:10px;
border:solid rgba(109,186,235,1.00)
margin-top:0;
}
#menu-bar li{
float:right;
padding: 0 10px;
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
font-size:110%;
cursor:pointer
}
#logo{
height:100px;
background-image:url(../images/logo.png);
background-repeat:no-repeat;
}
All CSS properties have a default of "position: static;". This means that all elements are rendered in order that they appear in your html file.
So when you add a "margin-top" to a div (i.e. logo) it will add height to that div while all other divs that follow will have to re-position to accommodate that change.
So margins adds to the height or width of your element. Your logo is "height:100px;" when you add a "margin-top: 15px;" your element has a total height 115px. That is why #menu-bar has moved.
A solution to this would be to set the #logo div to "position: relative;" Then you can use the properties top, left, right, down. To move that element based on it's current position but will not affect other divs in the document. So for example:
#logo {
position: relative;
top: 20px;}
Will move #logo down 20px from its current location.
Hope that helps.
why you are included the menu items inside the logo container?. It would be a good practice that to allow the logo element to independent. Please see the updated code.
Give the float property left for the #logo id
put ; after the border property for #menu-bar id (missing in your code)- border:solid rgba(109,186,235,1.00); and cursor:pointer in #menu-bar li
Please give a margin-top:0 for the <ul> elements as well.
Here are the JSfilddle
Related
I'm trying to achieve this look in a clean way:
I can make it happen with adding a large line-height and then a negative margin-top to the textbox but I doubt that's the best solution.
Here's the code I have
.container {
background-image: url(https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg);
background-position: bottom left;
background-repeat: no-repeat;
background-size: cover;
height:600px;
}
.overlay {
height: 600px;
width: 100%;
background-color: rgba(0,0,0,0.4);
}
.small-flexbox {
display:flex;
justify-content:center;
align-items:center;
max-width:1200px;
margin-left:auto;
margin-right:auto;
margin-top:-340px;
}
h1, p, a {color:white;}
h1 {
text-align:center;
display:block;
padding-top:1em;
line-height:3;
font-size:80px;
letter-spacing:5px;
text-transform:uppercase;
}
a {
border:15px solid #f5e2c8;
padding:10px 30px;
text-transform:uppercase;
}
.first-word {
letter-spacing:11px;
}
<div class="container">
<div class="overlay">
<h1><span class="first-word">Complete</span><br> Remodeling</h1>
<div class="small-flexbox">
<p style="max-width:400px; margin-right:3em">With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a>Get a Quote</a>
</div>
</div>
</div>
In practice, it's not good to give any tag a margin with a negative value. Instead, you can achieve that by giving it a position relative or, in some cases, absolute and changing its position with top, bottom, right, and left in the CSS. You see margins move the block and the entire content that is inside of it by adding space inside its body, and the position changes the place of the block and doesn't add any extra spaces inside. So if you are trying to change the position of your headlines or the small paragraph or even the button does it using the position attribute. Also, you can give those elements inside your container padding so that the container will be more similar to the one you want. I hope this helps you.
I am new to website design and need help in centering a div that has 100% page height but 70% width, the width can be set and centered but the height is only as heigh as the content itself. For example like http://www.thelounge.fi/ however the scrolling part of this is on the left side while I would like it in the centre.
Thank You.
okey. In this case we have two solutions:
You can set the div display property to inline or inline-block. And then set the text-align property to center for the div parent, as you could see here https://jsfiddle.net/ivan0013/7q9Lp45q/
Or you can give a margin to the child, if it has acertain width and the display property set to block, which is the default, like here https://jsfiddle.net/ivan0013/wwu5ttxt/
Further explanation:
In the first solution, you change the div default value for the displayproperty. When you set displayto inline you are creating a line element, which does not take all the space to its side. Then you change the tex-align property for the parent, that means that all childs that are line elments will be centered.
For the second one, we use the block value for display. Using this, the element, in our case, the div, is taking all the width available. For that reason, we need to set a width, for instance 25%. Now, the div takes only the 25% of the parent. The last step is adding a margin, which is the distance to the parent's bounds. In the fiddle we set margin: 0 auto which means that div will have 0 for margin top and bottom, and will take an auto margin for each side.
A good reference: W3schools
if you dont want to set content of hello div in separate div with overflow scroll, and you want to keep your HTML as it is you can margin-top to hello with same hieght of navbar and set navbar left (100-70)/2=15
body {
/*background-color: #f0f0f2;*/
background-color:green;
background-attachment:fixed;
margin: 0;
padding: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow-y:scroll;
}
.hello {
width:70%;
background-color:white;
text-align:center;
margin:auto;
position:relative;
background-position:center;
/*margin-top:60px;*/
margin-bottom:20px;
height:100%;
margin-top:60px;
}
.navbar {
align:center;
background-color:gray;
background-attachment:fixed;
height:40px;
padding-top:20px;
box-shadow: inset 0 -3px 3px rgba(0,0,0,0.5), inset 0 3px 3px rgba(255, 255, 255,1);
position:fixed;
width:70%;
top:0;
left:15%;
}
.navbar2 {
align:center;
background-color:gray;
height:20px;
width:100%;
bottom:0;
}
<body>
<div class="hello">
<div class="navbar">NAVAGATION BAR
</div>
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<p>test5</p>
<p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
<p>test</p>
<p>test</p><p>test</p>
<p>test</p><p>test</p>
<p>test</p><p>test</p>
<p>test</p>
<div class="navbar2">Bottom Bar
</div>
</div>
</body>
I've been battling this a few hours. The text in this span is mysteriously aligned to the top of the span. Here is a screenshot from Firebug:
And here are my related CSS blocks:
.skills {
overflow:hidden;
height:100%;
}
.skills li{
border-bottom:1px dotted black;
position:relative;
width:200px;
height:18px;
margin-left:13px;
}
.skills li span{
display:inline-block;
position:relative;
background:white;
bottom:0px;
height:100%;
padding:0 5px;
}
Here is the HTML:
<h4 class="main-heading"><span>Data Exchange</span></h4>
<ul class="skills">
<li>
<span>SOAP/Axis2</h4>
</li>
</ul>
Can you tell why this is aligned to the top? I want it in the center.
And here is the jsFiddle, where the same code results it in text being in the center. Does that mean that CSS elements higher in the hierarchy may be causing it?
...where the same code results it in text being in the center. Does
that mean that CSS elements higher in the hierarchy may be causing it?
I imagine that an ancestor in your actual stylesheet has the line-height set to less than 18px. You can look at the calculated line height for that element in your actual stylesheet to see what value was being applied.
The default value for line-height is roughly 1.2x (depends on browser).
Set the line-height to be equal to the non-padded height of the containing element to vertically align a single line of text (in this case, 18px).
Example fiddle: http://jsfiddle.net/4vq42/
No line-height. Make it the same as the height, either 18px or 100%.
.skills li span{
display:inline-block;
position:relative;
background:white;
bottom:0px;
height:100%;
line-height:18px;
padding:0 5px;
}
Try adding line-height: 18px to .skills li span CSS.
Edit: Just realised Tim Medora already said this. Ignore me.
Setting line-height to the value of your element's height is the simplest way to vertically align text.
.skills li {
height:18px;
line-height:18px;
}
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
So I tried to experiment with CSS pseudo class before and after. I tried to use those pseudo to create header element.This is to reduce using div to hold left and right images. This is code for HTML
<header id="mastHead">
<h1>Branding</h1>
</header>
So I have 3 images to create traditional header element which is 20px width for left and right side with 100px height and for the middle, 1px width and 100px height which will repeat horizontal. And here my CSS
#mastHead {
background:url(images/headMiddle.jpg) repeat-x top left;
width:1000px;
height:100px;
overflow:hidden;
}
#mastHead:before {
content:"";
display:block;
background:url(images/headLeft.jpg) no-repeat top left;
width:20px;
height:100px;
float:left;
}
#mastHead:after {
content:"";
display:block;
background:url(images/headRight.jpg) no-repeat top left;
width:20px;
height:100px;
float:right;
}
#mastHead h1 a {
display:block;
width:200px;
height:41px;
background:url(images/logo.png) no-repeat;
}
So the problem is if I remove h1 element, it will align perfectly but if I put these element, it will push the ::after pseudo-class down and it will take leftover space according to it height.How can I make this h1 element to take just middle space without affecting the ::after space?
I made a fiddle with your example: http://jsfiddle.net/3Dcw3/ (only set width to 500 to fit in a fiddle and set background to visualize them)
And here is a fixed version: http://jsfiddle.net/3Dcw3/1/
The points are:
Add position:relative; to the header.
Use absolute positioning instead of floating.
Add paddings so the blocks would position over them.