This is my css -
#nav {
position: relative;
background-color: #292929;
float: left;
width:960px;
margin-left:auto;
margin-right:auto;
}
#nav li {
float: left;
list-style: none;
width:auto;
}
#nav li a {
color: #e3e3e3;
position: relative;
z-index: 2;
float: left;
}
ul, li {
margin:0;
padding: 0;
}
#blob {
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background-repeat:repeat;
}
I want to place this object in the center. How do i do that. I also want the background to fit the page. I tried a lot, but it isn't working.
<ul id="nav">
<li>Home</li>
</ul>
Place an object in the center:
CSS:
.Center1
{
position:relative;
text-align:center;
}
.Center2
{
position:relative;
margin-left:auto;
margin-right:auto;
width:1024px;
height:800px;
text-align:left;
}
Markup:
<body class="body">
<div class="Center1">
<div class="Center2">
<!-- Your content -->
You want place <li> int the center, right?
The easiest way according to your current markup is to apply fixed width and add margin: 0 auto; to your li.
Semantics of that solution is really bad, but i guess you don't really care.
Related
I'm trying to give my div inside a li a width value and the div's border has the width I want, but the text I have in that div is ignoring that width and it seems to be inheriting the container width. It's just the text that is doing that, though.
I don't usually work with li tags, so I don't really know what the problem is.
This is basically the HTML I'm working with:
<div id="container">
<div class="inner">
<ul>
<li>
<a class="img" href="..."></a>
<div class="desc">
...
</div>
</li>
</ul>
</div>
</div>
This is the CSS:
#container {
margin:0 auto;
width: 900px;
height: 500px;
box-sizing:border-box;
position:relative;
right: 160px;
-webkit-user-select: none;
user-select:none;
}
#container div.inner {
position:relative;
overflow:hidden;
padding:0;
margin:0;
}
#container div.inner ul {
white-space:nowrap;
position:relative;
left:0; top:0;
list-style:none;
font-size:0;
padding:0;
margin:0;
float:left!important;
width:auto!important;
height:auto!important;
}
#container ul li {
display:inline-block;
margin-top:20px;
margin-bottom:200px;
margin-left:-45px; margin-right:-30px;
-webkit-transform:scale(0.6);
transform:scale(0.6);
-webkit-transition:-webkit-transform 0.5s;
transition:transform 0.5s;
box-sizing:content-box;
text-align:center;
vertical-align:middle;
padding:0;
position:relative;
list-style:none;
backface-visibility:hidden;
}
#container ul li.active {
-webkit-transform:scale(1);
transform:scale(1);
background-color:transparent;
}
#container ul li.active .desc {
display: block;
}
.desc {
display: none;
width: 310px!important;
height: 200px;
border: 1px solid #fff;
position: relative;
right: 350px;
top: 275px;
color: #fff;
font-family: Arial;
font-size: 11px;
padding: 15px;
text-align: justify;
}
#container .img {
width: 200px;
height: 320px;
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
display:block;
position:absolute;
font-size:0;
cursor:inherit;
transition:all linear 0.4s;
}
There seems to be a lot of CSS here that is conflicting. Are you sure you need to use '!important' in so many places?
It's hard to tell what's happening but my feeling is that using position:absolute and float is breaking things.
Also, your div inside the li ("desc") is set to display:block at some point.
Try changing it to inline or inline-block depending on what you need it to look like.
#container ul li.active .desc {
display: block;
}
Then after this you are trying to set a width when it is display:none...
.desc {
display: none;
width: 310px!important;
...
This is probably not showing up because if the display:block taking precedence, because you have been more specific with your selectors. Try doing the same for the .desc section:
#container ul li .desc {
display: none;
width: 310px!important;
...
If you can supply a working Jsfiddle or code snippet so we can see what you are trying to achieve that would help.
I'd also like to rewrite this for you so that you can see there is probably a much easier way to accomplish your layout without all of the conflicts.
in your .desc {} is the second from the bottom padding: 15px;
Try deleting that one.
I am somewhat new to CSS and thought I was trying to do something simple.
I am creating a responsive page. My goal is to accomplish the following:
Anything smaller than 768px - center each div horizontally. That is happening just fine.
Between 768px and 1024px, Center the main container on the page, with the two divs side by side main container div. Everything is currently not centering.
1024px wide and above - image div on left, text on right - flush to edge of nav.
I am getting super wonky behavior here.
I am fairly certain that I have missed something fairly obvious since I am very new to this and have jumped headfirst into making something I thought was simple. I have been looking at this for quite some time. Could someone attempt to explain this to me for this scenario? Am I nullifying something by declaring referencing code it in my media queries (I did notice I had an issue since I declared mismatched properties at an earlier time)?
<body>
<header>
<img class="style-logo" src="Prism_images/RuckerLogo.png" alt="Logo">
<nav class="style-nav">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="Content">
<div class ="style-img">
<img src="Prism_images/Miles---Headshot_200.png">
</div>
<div class="style-main" id="Text">
<p>premire cabinetmaker</p>
</div>
</div>
<footer></footer>
</body>
And here is the CSS:
header {
padding: 20px;
}
.style-logo {
margin-left: auto;
margin-right: auto;
display: block;
background-color: antiquewhite;
}
.style-nav ul {
list-style-type: none;
display: block;
padding: 0px;
}
.style-nav ul li a {
text-decoration: none;
color: #414040;
text-align: center;
display: block;
text-transform:uppercase;
padding: 2px;
}
.style-img {
margin-left:auto;
margin-right:auto;
width: 200px;
}
.style-main {
margin-left:auto;
margin-right:auto;
width: 450px;
}
.style-main p {
color: slategrey;
text-align:left;
margin-top:0px;
margin-left:10px;
display:block;
}
#Content{
margin-left:auto;
margin-right:auto;
}
/*Tablet View*/
#media (min-width: 768px){
body {
max-width: 778px;
}
.style-logo {
float: center;
}
.style-nav ul li {
display: inline-block;
}
.style-nav ul {
text-align: center;
}
.style-img{
margin-top:0px;
width:200px;
display:inline-block;
}
.style-main {
margin-top:0px;
display:inline-block;
}
#Content {
margin-left:auto;
margin-right:auto;
display:block;
}
}
#media (min-width: 1024px){
body {
max-width: 1100px;
}
.style-logo {
float: left;
}
.style-nav {
float: right;
}
.style-img {
margin-top: 40px;
float:right;
display:inline-block;
}
.style-main {
padding:20px;
display: inline-block;
}
}
This is how to center everything ^^
div {
display: table;
margin: 0 auto;
}
<div>I'm centered<div>
That or this.
div {
display:block;
margin:0 auto;
}
Basically I'm looking to have a fixed navbar on my site, which moves with you when you scroll down. So far everything is good, but I'm really having trouble centering the bar.
HTML
<header id="header">
<nav id="nav">
<ul>
<li>Front</li>
<li>Mastering</li>
<li>Samples</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
#header {
z-index: 1;
width: 100%;
height: 80px;
position: fixed;
background-color:rgba(0,0,0,0.8);
display: block;
}
#nav {
z-index: 1;
width:100%;
margin-top: 20px;
display: block;
position: fixed;
text-align:center;
}
#nav ul{
list-style: none;
display: block;
margin: 0 auto;
width: 50%;
/* To help to identify the location */
height:50px;
background-color:green;
}
#nav li{
margin-top: 9px;
float: left;
padding-left: 21px;
display:block;
}
JSFiddle
https://jsfiddle.net/kjr1591d/1/
Would love to have some help. Thank you in advance :)
I think you looking for something like this-
#header {
z-index: 1;
width: 100%;
height: 80px;
position: fixed;
background-color:rgba(0,0,0,0.8);
display: block;
}
#nav {
z-index: 1;
width:100%;
margin: 15px 0;
display: block;
position: fixed;
text-align:center;
}
#nav ul{
list-style: none;
display: block;
margin: 0 auto;
width: 50%;
/* To help to identify the location */
height:50px;
background-color:green;
text-align:center;
padding:0
}
#nav li{
margin:15px 0 0;
/*float: left;*/
padding:0 10px;
display:inline-block;
}
<header id="header">
<nav id="nav">
<ul>
<li>Front</li>
<li>Mastering</li>
<li>Samples</li>
<li>Contact</li>
</ul>
</nav>
</header>
jiddle
#nav ul{
list-style: none;
display: block;
margin: 0 auto;
width: 80%;
/* To help to identify the location */
height:50px;
background-color:green;
}
Change the ul and li's to display as inline-block and assign the li's a left and right margin of equal sizing.
I have found lots of ways to center a nav using tricks. Either by setting the line height and the height equal to each other or using vertical-align with display:table. It worked but my border always came at the bottom of the container rather than text.
*{
margin:0px;
padding:0px;
}
header{
display:block;
height:100px;
background-color:blue;
}
nav{
height:auto;
width:100%;
display:block;
}
nav a{
height:100%;
text-align:center;
display:inline-block;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
}
nav a:hover{
border-bottom: 3px solid #F3008A;
}
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
To clarify the problem, I want to vertically center the text or the "a" tags within the header block. I would like to do this and also be able to put borders on the "a" tag where the border is close to the text.
You could use the table-cell display vertical-align approach.
* {
margin:0px;
padding:0px;
}
header {
display:table;
width: 100%;
height: 100px;
background-color:blue;
}
nav {
height:auto;
width:100%;
display:table-cell;
vertical-align: middle
}
nav a {
text-align:center;
display:inline-block;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
position: relative;
border-bottom: 3px solid blue;
}
nav a:hover {
border-bottom: 3px solid #F3008A;
}
<header>
<nav> Link
Link
Link
Link
</nav>
</header>
http://jsfiddle.net/wdabedbv/
You need to remove display:inline-block; and give line-height. It will solved your issue.
Check below your updated code:
*{
margin:0px;
padding:0px;
}
header{
display:block;
height:100px;
background-color:blue;
}
nav{
height:auto;
width:100%;
}
nav a{
height:100%;
text-align:center;
line-height:100px;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
}
nav a:hover{
border-bottom: 3px solid #F3008A;
}
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
Try to use :Before as i did since your Height of the nav is fixed it wont be a problem.
Fiddle Link Demo
* {
margin: 0px;
padding: 0px;
}
header {
display: block;
height: 100px;
background-color: blue;
}
nav {
height: 100%;
width: 100%;
display: table;
}
nav a {
height: 100%;
text-align: center;
display: inline-block;
text-decoration: none;
color: black;
margin-left: 25px;
font-size: 25px;
display: table-cell;
vertical-align: middle;
}
nav a:hover:before {
background-color: #F3008A;
postion: absolute;
width: 50px;
content: "";
height: 3px;
position: absolute;
z-index: 4;
top: 64px;
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
I would assert that it is best to use flexbox since it is modern and responsive. The following will work nicely in all relatively modern browsers.
nav {
display: -webkit-flex;
display: flex;
}
nav > div {
background-color: pink;
height: 40px;
-webkit-flex: 1;
flex: 1;
display: -webkit-flex;
display: flex;
-webkit-justify-contents: center;
justify-contents: center;
-webkit-align-items: center;
align-items: center;
}
nav > div:nth-child(odd) {
background-color: red;
}
nav > div > a {
text-align: center;
-webkit-flex: 1;
flex: 1;
}
<nav>
<div>hi</div>
<div>hi2</div>
<div>hi3</div>
</nav>
See this JSFiddle.
Here is a helpful guide with pictures.
It is common to have a set of links in a footer represented in a list, such as:
<div id="footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I want everything inside div#footer to be centered horizontally. If it was a paragraph, you would just easily say: p { text-align: center; }. Or if I knew the width of the <ul> I could just say #footer ul { width: 400px; margin: 0 auto; }.
But how do you center the unordered list items without setting a fixed width on the <ul>?
EDIT: clarification - the list items should be next to each other, not below.
The solution, if your list items can be display: inline is quite easy:
#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }
However, many times you must use display:block on your <li>s. The following CSS will work, in this case:
#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }
Use the below css to solve your issue
#footer{ text-align:center; height:58px;}
#footer ul { font-size:11px;}
#footer ul li {display:inline-block;}
Note: Don't use float:left in li. it will make your li to align left.
One more solution:
#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }
Then ul doesn't jump to the next line in case of zooming text.
It depends on if you mean the list items are below the previous or to the right of the previous, ie:
Home
About
Contact
or
Home | About | Contact
The first one you can do simply with:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
The second could be done like this:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }
Try wrapping the list in a div and give that div the inline property instead of your list.
The answer of philfreo is great, it works perfectly (cross-browser, with IE 7+). Just add my exp for the anchor tag inside li.
#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */
#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }