I'm starting out in HTML and CSS.
I have a div element on the page, which doesn't fill the whole page.
In it- there's a ul element and some list items in it.
I want to put the list 227px from the top of the div element, but I can't manage to accomplish this- it pushes it more.
Also- between the list items I want a margin of 40 pixels, but it also does more.
What's the problem?
Here's my code:
Html:
<body>
<div class="Hashta">
<div class="Menu">
<ul id="MenuItems">
<li><a href="#" >ONE</a></li>
<li><a href="#" >TWO</a></li>
<li><a href="#" >THREE</a></li>
<li><a href="#" >FOUR</a></li>
</ul>
</div>
</div>
</body>
CSS:
body {
background-color: Gray;
}
.Hashta{
width:874px;
height:650px;
background-color:black;
margin: auto auto 50px auto;
border-radius: 20px;
border: 3px solid darkgray;
moz-box-shadow: 2px 2px 10px black;
webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
}
.Menu {
margin-top: 227px;
padding-right: 50px;
float:right;
}
#MenuItems {
list-style:none;
}
#MenuItems li {
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-bottom: 40px;
border:none;
}
#MenuItems li a{
width: 280px;
height: 70px;
background-color: green;
color:White;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
line-height: 70px;
}
If you want to measure the pixels- you can install this: http://www.mioplanet.com/products/pixelruler/
(click to rotate)
Thanks!
You should start your styling by resetting all elements so that each browser shows them identical.
You can check one of the many CSS reset libraries around there, but for starting something like this would be already good:
* {
margin: 0;
padding: 0;
}
This, appearing for first in your CSS stylesheet, will remove all margins and paddings for each element, so you can add them later only in the elements you want.
Update
If you want to restore some element margins or paddings after that code (for example in body) simply write a new rule after the one before, like
body {
padding:10px; /* Add 10px to body only */
}
The total height of every list item is height + padding + border + margin.
Change the padding of #MenuItems li into:
padding: 0 10px 0 10px;
See http://jsfiddle.net/NGLN/rBjrD/1/
Add margin:0; padding:0 for body
In #MenuItems li replace:
padding: 4px 10px 4px 10px;
with:
margin: 4px 10px 4px 10px;
This will make the distance equal to 40px between buttons.
Try absolute positioning:
.Hashta{
width:874px;
height:650px;
background-color:black;
margin: auto auto 50px auto;
border-radius: 20px;
border: 3px solid darkgray;
moz-box-shadow: 2px 2px 10px black;
webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
position:relative;
}
.Menu {
position:absolute;
top:227px;
right:0;
padding-right: 50px;
float:right;
}
try this:
<style>
body {
background-color: Gray;
}
.Hashta{
width:874px;
height:650px;
background-color:black;
margin: auto auto 50px auto;
border-radius: 20px;
border: 3px solid darkgray;
moz-box-shadow: 2px 2px 10px black;
webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
}
.Menu {
margin-top: 227px;
padding-right: 50px;
float:right;
}
#MenuItems {
list-style:none;
}
.secLi{
text-align:center;
position:relative;
padding: 0px 10px 0px 10px;
margin-right:30px;
margin-top: 40px;
border:none;
}
.firstLi{
text-align:center;
position:relative;
padding: 0px 10px 0px 10px;
margin-right:30px;
margin-top: -16px;
border:none;
}
#MenuItems li a{
width: 280px;
height: 70px;
background-color: green;
color:White;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
line-height: 70px;
}
</style>
<body>
<div class="Hashta">
<div class="Menu">
<ul id="MenuItems">
<li class="firstLi"><a href="#" >ONE</a></li>
<li class="secLi"><a href="#" >TWO</a></li>
<li class="secLi"><a href="#" >THREE</a></li>
<li class="secLi"><a href="#" >FOUR</a></li>
</ul>
</div>
</div>
</body>
Related
I have a 3 column layout which is successfully giving me 3 columns; however, my third column (similar to my first column) needs margin and padding changes. Unfortunately, I seem unable to adjust margin and padding for that column. I'm not really sure the issue and googling is bringing me no answers.
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
background: #ecf0f1;
color: #2c3e50;
font-family: "Georgia", serif;
}
h1, h2 {
font-family: "Franklin Gothic", sans-serif;
}
.header h1 {
background: #2c3e50;
color:#ecf0f1;
margin: 10px;
padding: 25px 15px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
}
.row {
margin: 0;
padding: 0;
font-size: 0;
}
.row div {
margin: 0;
padding: 0;
font-size: 18px;
}
.col-3 {
width: 25%;
display: inline-block;
}
.col-6 {
width: 50%;
display: inline-block;
}
.menu {
float: left;
}
.menu ul {
list-style-type: none;
margin: 10px 0px;
padding: 0;
}
.menu li {
background: #2980b9;
padding: 10px;
color: #ecf0f1;
padding: 10px;
margin: 5px 25px;
font-family: "Franklin Gothic", sans-serif;
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
}
.right {
float:right;
}
.right p {
margin: 10px;
}
.aside {
text-align: center;
background: #2980b9;
height: 390px;
color: #ecf0f1;
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
/* THESE DO NOT WORK AND I CAN'T FIGURE OUT WHY */
margin: 25px;
padding: 25px;
}
.footer {
width: 100%;
position: absolute;
bottom: 0;
}
.footer p {
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
padding: 50px 0px;
background: #2980b9;
text-align: center;
color: #ecf0f1;
margin: 10px 10px;
}
HTML:
<html>
<head>
<meta chrset="utf-8" />
<title>CMST-290 Project 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>Jacob Johnson</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>Education</li>
<li>Software</li>
<li>Skills</li>
<li>Awards</li>
<li>Experience</li>
<li>Projects</li>
</ul>
</div>
<div class="col-6">
<h1>Career Objective</h1>
<p>
I want to ensure quality in everything I do. I will work hard to achieve the goals my employer has for as well the goals I have set for myself.
</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>Developer</h2>
<p>I am familiar with front end tools such as HTML/CSS and JavaScript in addition to languages like C#, Python, and Java.</p>
<h2>Designer</h2>
<p>I have designed several websites from scratch.</p>
<h2>Student</h2>
<p>I am always eager to learn and keep improving my skills.</p>
</div>
</div>
</div>
<div class="footer">
<p>Copyright © 2017 | Jacob B. Johnson</p>
</div>
<script type="text/javascript" src="/d2l/common/math/MathML.js?v=10.6.10.5455-164 "></script>
<script type="text/javascript">document.addEventListener('DOMContentLoaded', function() { D2LMathML.DesktopInit('https://s.brightspace.com/lib/mathjax/2.6.1/MathJax.js?config=MML_HTMLorMML','https://s.brightspace.com/lib/mathjax/2.6.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML'); });</script>
</body>
</html>
CodePen link
Any insight would be awesome as to why I was so easily able to adjust the left-most column but not the right-most. Thanks.
Your styles on aside are being ignored because the .row div selector is more specific, and therefore overriding margin and padding to zero.
Adding this should make it work:
.right .aside {
margin: 25px;
padding: 25px;
}
You just need higher specificity because you've used .row div with margin: 0; padding: 0;. So to override that CSS with a margin or padding change, you will need to use .row in front of a selector like .col-3, so that the rule is .row .col-3 { /* margin/padding *}
You can read more about specificity here - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I have a contact us page with several divs that act as containers and inside these containers are more divs that hold the content. Here is the structure of the page :
<div class="divBlock">
<div class="spacer10"></div>
<div class="centerDiv">
<div>
<div class="divContactImg">
<div class="branchHeader">Durban</div>
<div class="branchText">89 Joe Slovo Street</div>
<div class="branchText">Durban</div>
</div>
<div class="divContactImg">
<div class="branchHeader">Hillbrow</div>
<div class="branchText">Point Building</div>
<div class="branchText"> StreetG</div>
<div class="branchText">Hillbrow</div>
</div>
<div class="divContactImg">
<div class="branchHeader">Pinetown</div>
<div class="branchText">56 Hill Street</div>
<div class="branchText">Pinetown</div>
</div>
</div>
</div>
</div>
</div>
<div class="spacer10"></div>
</div>
The problem is these divs (divContactImg) are overlapping their container div (divBlock). Here is the CSS:
.centerDiv { text-align : center; max-width : 100%; height : auto; margin: 0px auto 0px auto; display: block ; }
.divContactImg {
background-image: url('Images/Contacts_Branches_BG.png');
width:220px;
height:74px;
border-left: thin solid #333;
border-top: thin solid #333;
border-right: thin solid maroon;
border-bottom: thin solid maroon;
float:left;
text-align:left;
margin-left: 10px;
margin-top: 1px;
border-radius:5px;
}
.branchHeader {
font-size: 24px;
font-family:Arial Narrow;
margin-left: 10px;
margin-top: 5px;
text-transform:uppercase;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 00 #000;
}
.branchText {
font-size: 12px;
color:#b0b0b0;
margin-left: 10px;
text-transform:uppercase;
}
.branchHeaderOpening {
font-size: 24px;
font-family:Arial Narrow;
margin-left: 10px;
margin-top: 5px;
text-transform:uppercase;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 00 #000;
text-align:center;
}
.divBlock { border-left: thin solid #333; border-right: thin solid #333; border-bottom: thin solid #333; border-radius: 0px 0px 8px 8px;
margin: 0px 10px 0px 10px; background: #000000;}
I have tried setting clear:both on the container divs but no luck. If I take out the float:left then the center div stretches so the children div's fill it, however I need these divs to be displayed three across and this makes them display one per line.
I replaced
.divContactImg {
background-image: url('Images/Contacts_Branches_BG.png');
width:220px;
height:74px;
border-left: thin solid #333;
border-top: thin solid #333;
border-right: thin solid maroon;
border-bottom: thin solid maroon;
/*float:left;*/
display:inline-block; **/**ADD**/**
vertical-align:top; **/**ADD**/**
text-align:left;
margin-left: 10px;
margin-top: 1px;
border-radius:5px;
}
I am attaching two division's border and remove the border where two division intersect but its not remove. I have tried this code.
<div style="border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:none;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;">
<strong style="font-size:18px; color:#000">ABC</strong>
</div>
<div style="width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;">
Hello
</div>
Can anybody help me to solve this error.
jsFiddle: http://jsfiddle.net/9XFDp/1/
Just nudge the top div by 1px from top and use some background-color or even border-bottom is fine
Demo
Added the below properties to the header div
position: relative;
top: 1px;
background: #fff;
z-index: 1;
Note: Don't use inline CSS, create classes instead.
Demo 2 (Without using background-color, used border-bottom: 1px solid #fff; instead)
Like this
DEMO
CSS
.title{
border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:1px solid #ffffff;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;
font-size:18px; color:#000
font-weight:bold;
position:relative;
top:1px;
}
.content{
width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;
}
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 8 years ago.
I have some HTML and CSS that creates inline block elements (divs) that one might find on a landing page. However, they only appear to be vertically aligned correctly when they contain some content (an unordered list) inside the divs. If there is no content in the div, the element get pushed down. Here is a jsfiddle. Here is the code. Can anybody explain why the third div block is not vertically aligned?
EDIT: While I'm comfortable that the "fix" to this issue is to ensure that each div uses "vertical-align:top" in the styling, I'm still a little puzzled as to why I'm required to use this styling in the first place. I would think that the div elements would always line up evenly, regardless of the content inside the divs.
<html>
<head>
<style type="text/css">
body {
font-family: Helvetica;
}
h1 {
margin: 0px;
padding: 10px;
font-weight: bold;
border-bottom: 1px solid #aaaaaa;
font-size: 12px;
}
a {
text-decoration: none;
}
ul {
padding-left: 20px;
}
li {
list-style-type: none;
font-size: 12px;
}
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
}
.header {
padding: 10px;
background-color: red;
border-bottom: 1px solid #aaaaaa;
color: #ffffff;
}
a:hover {
text-decoration:underline;
}
h1 > a {
color: #ffffff;
}
h1 > a:hover {
color:#ffffff;
}
li > a {
color: #000000;
}
li > a:hover {
color: #000000;
}
</style>
</head>
<body>
<div>
<div class='landing-block'>
<h1 style='background-color: #3991db;'>
<a href='#'>COMPANIES</a>
</h1>
<ul>
<li><a href='#'>Search Companies</a></li>
<li><a href='#'>New Company</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #9139db;'>
<a href='#'>PEOPLE</a>
</h1>
<ul>
<li><a href='#'>Search People</a></li>
<li><a href='#'>New Person</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #c2db39;'>
<a href='#'>Products</a>
</h1>
</div>
<div>
</body>
</html>
inline-block elements are vertical-align:baseline; by default. Change this to vertical-align:top;
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
vertical-align:top; /* add this rule */
}
add vertical-align:top; to .landing-block class
Set vertical-align: top for the .landing-block class declaration in your CSS.
Add float: left
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
float: left;
}
jsfiddle
So I have an image inside a div that is centered in an outer-wrapper. I have a horizontal menu at the top of the wrapper that displays 5 sub divs inline. I have added css for a drop down menu that appears when you hover over the first of the 5 inline sub divs. When the drop down menu appears, it causes the image to shift to the right and I can't for the life of me figure out how to correct it. As you can see I have played around with z-index but i'm not sure if I understand what is happening or not happening with z-index and how it is used correctly.
HTML:
<div class="wrapper">
<div id="topmenu">
<div id="home">Home
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
<div id="logo">
<img src="image.jpeg" />
</div>
</div>
CSS
.wrapper{
position:relative;
width:960px;
height:905px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
/*text-align:left;
border:2px solid red;*/
background-color:#FFFFFF;
}
#topmenu{
position:relative;
border-bottom:2px solid #164207;
height:30px;
background-color:#ffffff;
z-index:3;
}
#logo{
position:relative;
border-bottom:2px solid #164207;
}
#logo img{
position:relative;
height:350px;
width:500px;
z-index:1;
}
#home{
display:inline-block;
float:left;
margin-top:5px;
margin-left:15px;
width:169px;
color:#164207;
font-family:serif;
font-weight:bold;
font-size:20px;
text-align:center;
border-right:2px solid #164207;
}
#home:hover .sub-menu {display:inline-block;}
.sub-menu {
overflow:hidden;
display: none;
width: 169px;
background-color: #164207;
color:#FFFFFF;
margin-top: 5px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
.sub-menu li {
position:relative;
list-style-type: none;
display: block;
border-bottom: 1px solid #FFFFFF /*#eaeaea*/;
font-family:serif;
font-size: 12px;
height: 15px;
padding: 8px 0;
}
You need to add position: absolute; to .sub-menu to create a stacking context.
jsFiddle
#home{
display:block;
float:left;
margin-top:5px;
width:184px;
color:#164207;
font-family:serif;
font-weight:bold;
font-size:20px;
text-align:center;
border-right:2px solid #164207;
}
#home:hover .sub-menu {display:block;}
#course:hover .sub-menu{display:block;}
#leagues:hover .sub-menu{display:block;}
#events:hover .sub-menu{display:block;}
#about:hover .sub-menu{display:block;}
.sub-menu {
overflow:hidden;
display: none;
width: 182px;
background-color: #164207;
color:#FFFFFF;
/*padding: 10px 10px;
margin-left: 0px;*/
margin-top: 5px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
position:absolute; /**************************** Important Bit*/
top:24px;
}
To re-adjust alignment- Remove margin-left:15px; from #home, #course, #leagues, #events, and #about and adjust widths on all of them. Then adjust the width of .sub-menu. See updated jsFiddle above for details and working model.
Example with navigation set up in <ul> unordered list </ul>. - Don't Need all the id's and resulting redundant CSS.