Can someone please tell me , why i can't add margin-top/bottom or padding-top/bottom to this "a" tag.
I need to ceter "Konoha" in the Header box
html{
background-color: white
}
body{
width: 88.5%;
height: 1200px;
margin: 0 auto;
border: 2px solid black;
background-color: #161e2c;
}
.top-box{
margin:0 auto;
width: 99.5%;
height: 153px;
background-color: #314e59;
border:1px solid rgb(211, 41, 97);
box-shadow: 0px 10px 7.4px 2.6px rgba(0, 0, 0, 0.74);
}
a{
display: inline-block;
margin: 23px 0 0 5px;
padding: 5px 5px;
max-width: 400px;
color: white;
text-decoration: none;
font-size: 500%;
background-color:pink;
border:2px solid black;
}
.right{
margin-top:13;
display: inline-block;
width: 600px;
background-color: pink;
border:2px solid black;
float: right;
text-align:center;
color:white
}
ul{
display: inline-block;
list-style-type: none;
font-size:35px;
width:100%;
padding-left:0;
}
li{
display:inline-block;
padding:7px;
}
<body>
<header class = "top-box">
Konoha
<div class = "right">
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
</header>
</body>
Thanks all this problem was solved , but now i have a new problem.
Why cant i just use margin-top:50% and margin:bottom:50% on the classes .logo and .right
According to what i've read margin:bottom:50% and margin-top:50% should automatically center vertically both.right and .logoin their container header but rather they come to some random middle place of the page
2.If i use margin-top:x% then when i resize the window to small the LOGO shifts from being in middle of headerto top.
Because margin-top/bottom or padding-top/bottom only apply for block element
But <a></a> is a inline element.
You can read about Block formatting contexts
You can try:
HTML code
<body>
<header class = "top-box">
<div id = 'link'>Konoha</div>
</header>
</body>
CSS code:
#link{
color: white;
text-decoration: none;
font-size: 100px;
margin-top: 50%;
margin-bottom: 50%;
}
anchor is a inline element if you want to use padding-top/bottom,
you should using add display:block for anchor tag
a{
color: white;
text-decoration: none;
font-size: 100px;
display:block
}
readmore
Try to make a tag as block element. Add this
display:block
in a tag's CSS properties.
Or put a tag inside a block element
Related
When you move the mouse over image thumbnails, i.e. all images in ul .thumbs, you should see a small box which shows the text in the span embedded in the image link. This does not happen. Why and how do I fix it ?
http://jsfiddle.net/raj4dev/hbyg43d9/3/
html
<body>
<div id="container">
<h1>css slide show</h1>
<ul class="thumbs">
<li><img src="img/thumb1.jpg"><span>Img 1</span></li>
<li><img src="img/thumb2.jpg"><span>Img 2</span></li>
<li><img src="img/thumb3.jpg"><span>Img 3</span></li>
</ul>
<ul class="slides">
<li class="first" id="slide-1"><img src="img/slide1.jpg"></li>
<li id="slide-2"><img src="img/slide2.jpg"></li>
<li id="slide-3"><img src="img/slide3.jpg"></li>
</ul>
</div>
</body>
css
*{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
}
body{
background: #465c8f url(../img/bg-image.jpg) repeat-x;
font-family: 'Arial', 'sans-serif';
}
#container{
width: 718px;
overflow: hidden;
margin: 40px auto;
}
h1{
color: #fff;
text-align: center;
margin-bottom: 20px;
}
ul.thumbs li{
float: left;
margin-bottom: 10px;
margin-right: 9px;
}
ul.thumbs a{
display: block;
position: relative;
width: 85px;
height: 55px;
border: 4px solid transparent;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;/*remove underlines*/
text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15);
}
ul.thumbs img{
border: #333 solid 4px;
}
ul.slide{
overflow: hidden;
clear: both;
border: #333 solid 4px;
}
ul.slides, ul.slides li, ul.slides a, ul.slides img{
width: 705;
height: 350px;
position: relative;
}
ul.thumbs li a:hover span{
position: absolute;
z-index: 101;
bottom: -30px;
left: -22px;
display: block;
width: 100px;
height: 25px;
text-align: center;
border-radius: 3px;
}
This is a clever approach to creating a slide show that does not require JavaScript or jQuery, rather nicely done.
There was a typo in one of your class names in the CSS and that was creating some confusion (change ul.slide to ul.slides).
I guessed that what you wanted to do was display the span on hover, which means that to begin with, the span need to be hidden using display: none, and I added a new CSS rule for ul.thumbs li a span to correspond with ul.thumbs li a:hover span. (Note, you could also use :hover on li instead and get a similar effect.)
I also altered how the floated elements are styled. If you add overflow: auto to ul.thumbs, all the floats are contained within the parent block and you can then add the bottom margin to the parent ul instead of the li, which is more advantageous in some designs, your can decide.
For the thumbnail images, see ul.thumbs img, I set the height to 100% and let the thumbnails scale to fit the inherited height (from li) and use vertical-align: top if you want to remove the whitespace below the images.
I also set the with on the li instead of the a, but the distinction really depends on the details of our design.
For the most part, your CSS is good as is. The only missing concept was the initial hiding of the span so that it can appear on hover.
Note: I did not pay much attention to the width of the span and its exact positioning. If you have a lot of text (like a caption), the width of 100% will not be enough (I set it that way to make it fit in the li container). You can change it as you see fit.
*{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
}
body {
background: #465c8f url(../img/bg-image.jpg) repeat-x;
font-family: 'Arial', 'sans-serif';
}
#container{
width: 718px;
overflow: hidden;
margin: 40px auto;
}
h1{
color: #fff;
text-align: center;
margin-bottom: 20px;
}
ul.thumbs {
border: 1px dotted white; /* for demo only... */
overflow: auto;
margin-bottom: 10px;
}
ul.thumbs li{
float: left;
width: 85px;
height: auto;
margin-right: 9px;
border: 1px dotted white; /* for demo only... */
}
ul.thumbs a {
display: block;
position: relative;
border: 4px solid transparent;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;/*remove underlines*/
text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15);
}
ul.thumbs img{
vertical-align: top; /* if you need to remove whitespace below image */
height: 100%;
border: #333 solid 4px;
}
ul.slides { /* fix typo in class name */
overflow: hidden;
clear: both;
border: #333 solid 4px;
}
ul.slides, ul.slides li, ul.slides a, ul.slides img{
width: 705;
height: 350px;
position: relative;
}
ul.thumbs li a span { /* Need to provide a default styling for the span... */
position: absolute;
bottom: 0px;
left: 0px;
display: block;
width: 100%;
height: auto;
text-align: center;
border-radius: 3px;
background-color: white;
display: none;
}
ul.thumbs li a:hover span {
display: block;
}
<div id="container">
<h1>css slide show</h1>
<ul class="thumbs">
<li><img src="http://placehold.it/60x60"><span>Img 1</span></li>
<li><img src="http://placehold.it/60x60"><span>Img 2</span></li>
<li><img src="http://placehold.it/60x60"><span>Img 3</span></li>
</ul>
<ul class="slides">
<li class="first" id="slide-1"><img src="http://placehold.it/240x120"></li>
<li id="slide-2"><img src="http://placehold.it/180x120"></li>
<li id="slide-3"><img src="http://placehold.it/120x120"></li>
</ul>
</div>
Your hover styles work fine, but you have ul.slides on top of ul.thumbs, so the :hover action isn't being passed to your anchor.
In the future, please share the relevant pieces of code in your question on StackOverflow for posterity and searchability.
Just add z-index: 2; to your ul.thumbs a css like coryward said your link is underneath something so you can't hover over it you need to bring it to the top so you can hover on it.
I'm trying to do something so astonishingly simple, and yet after pounding my head on the wall I'm unable to get the div that contains my navigation menu to center within the container. I would appreciate it if you'd have a look and let me know why it isn't working. I have a 1px border around the elements so you can see how the 'nav' div is staying left justified.
Here's a link to jsfiddle:
http://jsfiddle.net/glennw9/7vr7tovh/3/
html, body {
background-color:#F2EED6;
width:900px;
height:900px;
border: 1px solid #630800;
margin: 0px 0px 0px 0px;
}
#container {
/*border: 1px solid #630800;*/
width: 860px;
margin: 0 auto;
border: 1px solid #630800;
}
h1 {
font-size: 2.5em;
font-family: Georgia;
letter-spacing: 0.1em;
color: #630800;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
text-align: center;
}
div.nav {
margin-left: auto;
margin-right: auto;
display: inline-block;
border: 1px solid #630800;
text-align: center;
}
ul.nav {
width: 840
margin: 0 auto;
display: block;
}
ul.nav, li.nav {
list-style-type: none;
}
li.nav, a.nav {
background: #354178;
color: white;
font-family: Arial, Helvetica, sans-serif;
padding: 6px 10px;
text-decoration: none;
}
li.nav, a.nav:hover {
background: #4A5AA7;
display:inline;
}
li {
display:inline;
padding: 10px;
}
a.active {
background: white;
color: black;
border: 1px solid #CCCCCC;
}
<body>
<div id="container">
<h1>Edit Order Record</h1>
<div class="nav">
<ul class="nav">
<li><a class="nav" href="inv-main.php">Main Page</a>
</li>
<li><a class="nav" href="prod-view-paged.php">View Products</a>
</li>
<li><a class="nav active" href="order-view-paged.php">View Orders</a>
</li>
<li><a class="nav" href="cat-view.php">View Categories</a>
</li>
<li><a class="nav" href="#Bot">Go to Bottom</a>
</li>
</ul>
</div>
<br>
<br>
<br>
</body>
Simply add text-align: center; to the #container element.
Here's a fiddle.
You can center align it by simply two ways.
This "div.nav" class has inline-block. To make it center aligned with its parent, you have to use "text-align:center" to its parent.
Remove inline-block for "div.nav" class and add margin:0 auto in this class. It will be center aligned.
you have a lot of options mentioned above. This too counts as one of them: position: absolute;
left:50%;
margin-left: (half of the width of the div u wish to center)
Remember, set your parent element/div to relative.
What about this (updated fiddle)?
div.nav {
margin: 0 auto;
border: 1px solid #630800;
text-align: center;
}
If you want to consider using flex-box, you can do something like this too (see the fiddle, and here's the browser compatibility table):
HTML:
<nav>
<h1>Hello world</h1>
<ul>
<li>Thing</li>
<li>Another thing</li>
<li>Yet another</li>
</ul>
</nav>
CSS:
nav {
border: 1px solid gray;
display: flex;
flex-flow: column wrap;
align-items: center;
width: 100%;
}
li {
display: inline-block;
border: 1px solid black;
}
And lastly, here's a list of ways to center stuff:
Set this on the child element: { margin-left: 50%; transform: translateX(-50%) }
If the child element is block do this: { margin: 0 auto }
Or, on the parent element, do: { text-align: center }
remove the margin:0px 0px 0px 0px; and change that to margin:auto; in html,body{}
and add text-align:center in #container.
html, body {
background-color:#F2EED6;
width:900px;
height:900px;
border: 1px solid #630800;
/* margin: 0px 0px 0px 0px;*/
margin: auto;
}
#container {
/*border: 1px solid #630800;*/
margin: 0 auto;
border: 1px solid #630800;
text-align:center;
}
just edit the css part. and it will generate the output like this:
I currently have the following:
HTML
<body>
<h1>Web Services</h1>
<div id="wrap">
<ul id="nav">
<li>Home</li>
<li>Service A</li>
<li>Service B</li>
<li>Service C</li>
<li>Service D</li>
</ul>
</div>
<h2>Overview</h2>
<div class="textParagraph">
<p>
The Web Services listed on this site allow users to retrieve, alter and summarize information contained with a "Market Data File".
A Market Data File contains data about financial instruments.
</p>
<p>
Please click on the links above for more information about our services and have a trial run.
</p>
</div>
CSS
#CHARSET "ISO-8859-1";
body {
font-family: Verdana, Arial, sans-serif;
width: 900px;
margin-left: auto;
margin-right: auto;
}
/* Begin Navigation Bar Styling */
#nav {
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
border-left:1px solid #ccc; }
#nav li {float: left;}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
/* End navigation bar styling. */
/* This is just styling for this specific page. */
#wrap {
margin-left: auto;
margin-right: auto;
background-color: #fff; }
h1 {
text-align:center;
}
h2 {
text-align:center;
}
This is what it looks like at the moment.
The navigation bar should also be aligned in the center. I got the code for the navigation bar from some site.
Overview should be on the next line and centered with WebServices.
How can I got about achieving this? I don't understand why the <div> and <h2> are appearing on the same line..
Change #nav to something like this.
#nav {
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
border-left:1px solid #ccc;
}
#wrap needs some help to know that it has to contain it's floated children; you can easily do this by adding an overflow: auto;:
#wrap {
margin-left: auto;
margin-right: auto;
background-color: #fff;
overflow: auto;
zoom: 1;
}
zoom is a IE-specific rule, there to help trigger hasLayout in older versions.
Because you have #nav { float: left } you will need to add a clear after the it. You may do this will a utility class of .clear on the h2.
.clear {
clear: both;
}
Or, just add clear: both to the h2 element.
Your navbar is floated; you need to apply clear: left; to the h2 element to force it to appear below the navbar. If you want everything centered, remove the float: left and add text-align: center to your code.
check the demo
#wrap {
margin-left: auto;
margin-right: auto;
background-color: #fff;
float: left;
border: 1px solid #f00;
width: 100%;
}
Demo
add this to your wrap
class="clearfix"
then in css add this
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0px;
visibility: hidden;
}
You have floated element in your wrap thus making your wrap height zero, you need clearfix to adjust the wrap height according to the floated element
change wrap css to :
#wrap {
display:inline-block;
margin-left: auto;
margin-right: auto;
background-color: #fff;
}
http://fiddle.jshell.net/utfp20sp/
For the life of me I can't see why my "div" will not wrap around the header... I've closed it, the height is not specified...
I've searched other posts and no solutions so far. Is there a conflict that I'm overlooking?
Here's the html:
<div id="navcontainer">
<div id="siteLogo"> <img src="images/some image in a folder"/>
<div id="menu">
<ul>
<li>Home</li>
<li>Calendar</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
And the CSS:
#menu li a:hover {
color: #ff9900;
border-bottom: 4px solid #ff9900;
}
#siteLogo img{
height:auto;
width: 220px;
}
#menu {
font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
font-size: 16px;
color: #c0c0c0;
}
#outer {
width: 960px;
margin:0 auto;
}
#wraper {
width: 900px;
margin:0 auto;
}
#navcontainer {
width: 900px;
margin: 0 auto;
border-bottom: thick 1px #ffppoo;
}
#siteLogo {
float: left;
margin-top: auto;
}
#menu {
float: right;
margin-top: auto;
}
#menu ul li {
display:inline;
}
#menu ul {
margin-top: 50px;
text-align: center;
}
#menu ul li a {
padding:0 0 0 20px;
}
Slight change to your syntax and containing/clearing your floats:
#navcontainer {
width: 900px;
margin: 0 auto;
border-bottom: solid 1px #000;
overflow: hidden;
}
http://jsfiddle.net/xSfrb/
The floats are probably killing you. Try adding one last
<div style="clear:both"></div>
before closing the navContainer
The child elements are floating within a non-floating parent which causes the so-called zero-height container problem and has several solutions.
You can use overflow, like David Randall suggests
You can use an empty clear:both div, like Federico Jacobi suggests
Another solution is 'Clearfix', which uses pseudo content elements. See this related thread What is a clearfix? for further information on clearfix
EDIT: more background information on the problem http://complexspiral.com/publications/containing-floats/
I am trying to get these list items to center in the list, but I can't seem to figure out the problem. Here's the code:
HTML
<!DOCTYPE html>
<html>
<head>
<link href="my.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="centerDiv">
<ul class="centerUL">
<li>Amazon 1</li>
<li>Amazon 2</li>
<li>Amazon 3</li>
</ul>
</div>
</body>
</html>
CSS
#centerDiv {
width: 330px;
text-align: center;
border: 1px solid red;
}
.centerUL {
width: 70%;
margin: 2px auto;
line-height: 1.4;
border: 1px solid green;
}
li {
display: inline;
text-align: center;
border: 1px solid orange;
}
If you aren't using a CSS Reset, you should. http://www.cssreset.com/
CSS Resets will normalise your elements so you know how they will act; what to expect from them.
By default, uls and ols will have a left-padding on them, for the bullets :)
http://jsfiddle.net/MXGz5/
.centerUL {
width: 70%;
margin: 2px auto;
padding: 0; /* this new line */
line-height: 1.4;
border: 1px solid green;
}
... ixes the issue.
The best solution is to use text-align:center; for the ul element and set display:inline-block; for the li elements.
ul{
text-align:center;
}
ul li{
display:inline-block;
}
DEMO