I have a navigation inside which I have two divs, one for the logo and the other for menu. Logo div was floated to left. So, it's parent's height is now the same as the logo div. But, the floated menu div sits at the top. I want to align it in the middle. How can I do the same? Please help me...
My code is given below...
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<div class="navigation clearfix">
<div class="logo">
<img src="logo.png" />
</div>
<div class="navigation-menu">
<a>HOME</a>
<a>HOME</a>
<a>HOME</a>
<a>HOME</a>
<a>HOME</a>
</div>
</div>
<script src="JavaScript.js"></script>
</body>
</html>
CSS
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
p {
margin: 0;
}
img {
display: block;
}
.navigation {
background-color: yellow;
}
.logo {
float:left;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.navigation-menu {
float:right;
background-color:red;
}
And, here's the fiddle...
http://jsfiddle.net/ZghVk/
Without defining a fixed height, you can change your layout to use display:table to facilitate easier vertical alignment.
Try changing your CSS to:
Demo Fiddle
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
p {
margin: 0;
}
img {
display: block;
}
.navigation {
background-color: yellow;
display:table;
width:100%;
}
.logo {
display:table-cell;
}
.navigation-menu {
text-align:left;
display:table-cell;
text-align:right;
vertical-align:middle;
}
.navigation-menu a{
background-color:red;
float:right;
padding:0 5px;
}
You can set the line-height:
JSFiddle
.navigation-menu {
float:right;
background-color:red;
line-height:120px;
}
This is what you have to do
.navigation-menu {
border:1px solid black;
background-color:red;
margin-left:40px;
}
.navigation-menu a{
margin-left:20px;
}
you are trying to ".navigation-menu" you should use for "a" anchor tag
Try this:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
p {
margin: 0;
}
img {
display: block;
}
.navigation {
background-color: yellow;
display:table;
width:100%;
}
.logo {
display:table-cell;
}
.navigation-menu {
text-align:left;
display:table-cell;
text-align:right;
vertical-align:middle;
}
.navigation-menu a{
background-color:red;
float:right;
padding:0 5px;
}
Hope it helps! :)
Related
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;
}
I'm trying to create an upload layout that contains a box with a row inside of it. The row has two buttons (with inputs wrapped inside them) and one h3. I cannot get them to stay on the same height. The following code illustrates this:
HTML
<div id="mi-wrap">
<h1>Title</h1>
<div id="main-wrap">
<div id="inner-wrap">
<div id="wide-bar">
<button id="upload-button">
<input type="file" id="upload" value="PDF"/>
</button>
<h3 id="file-preview"><i class="fa fa-arrow-left"></i>Upload je bestand</h3>
<button id="send-button" type="submit" name="search-button">
</button>
</div>
</div>
</div>
</div>
CSS:
#mi-wrap {
width:100%;
margin:0 auto 0;
height:200px;
}
#main-wrap {
background-color:blue;
width:90%;
margin:0 auto 0;
height:100%;
}
#inner-wrap {
width:100%;
height:100%;
display:table;
}
#wide-bar {
height:60px;
}
#wide-bar button, #wide-bar h3 {
background-color: green;
height:60px;
display:inline-block;
}
#wide-bar button {
width:25px;
}
#wide-bar button input {
display:none;
}
#wide-bar h3 {
width:50%;
}
The code is not finished (i.e. it is not exactly the same as my own), but it does illustrate the problem. Also in this jsFiddle
You need to put another display, as inline-block combined with vertical-align
#wide-bar h3 {
width:50%;
display: inline-block;
vertical-align:top;
}
See it working:
https://jsfiddle.net/89u30vhx/1/
try this way
#wide-bar button, #wide-bar h3 {
background-color: green;
border: 0 none;
/*display: table-cell;*/ /*Remove this property*/
float: left;/*Add this property*/
height: 60px;
margin: 0;
padding: 0;
}
This will do:
#wide-bar {
vertical-align: middle;
max-height:60px;
display:table;
}
#wide-bar button, #wide-bar h3 {
margin:0;
padding:0;
background-color: green;
display:table-cell
}
#wide-bar button {
width:25px;
height: 60px;
}
Change your css as follows:
#wide-bar {
height: 60px;
}
#wide-bar button, #wide-bar h3 {
margin: 0;
padding: 0;
background-color: green;
height: 60px;
display: inline-block;
float: left;
}
JSfiddle demo
There is the following HTML code:
<div class="row">
<label class="resume-form-label" for="ResumeForm_languages">Languages</label><textarea class="resume-form-input" name="ResumeForm[languages]" id="ResumeForm_languages"></textarea></div>
And the following styles:
.row
{
margin: 5px 0;
}
.resume-form-label {
display: inline-block;
width:100px;
background: yellow;
}
.resume-form-input {
width:300px;
}
.row {
vertical-align:middle;
}
I need to have label and div aligned by vertical. How can I do it? Now it doesn't work.
like this: http://jsfiddle.net/matias/BGwBp/
CSS:
.row
{
margin: 5px 0;
}
.resume-form-label {
display: inline-block;
width:100px;
background: yellow;
vertical-align: middle;
}
.resume-form-input {
width:300px;
vertical-align:middle;
}
Why are my Columns not aligning correctly? There seems to be a gap above. Is there away that I can make them automatically set a width of the wrapper its in 892px;
http://jsfiddle.net/pJefg/
HTML:
<div class="leftColParts">
Text Left
</div>
<div class="rightColParts">
Text Right
</div>
CSS:
.leftColParts{
width:215px;
background-color:red;
}
.rightColParts{
float: right;
display: inline-block;
width:440px;
clear:both;
background-color: green;
}
Is this what you need?
http://jsfiddle.net/pJefg/7/
HTML:
<div class="wrapper">
<div class="leftColParts">Text Left</div><!--
--><div class="rightColParts">Text Right</div>
<div>
--
CSS:
.wrapper {
width: 892px;
}
.wrapper:after {
clear:both;
content: ".";
height: 0;
visibility:hidden;
}
.leftColParts {
float:left;
width:215px;
background-color:red;
}
.rightColParts {
float:right;
width:440px;
background-color: green;
}
.leftColParts{
width:215px;
background-color:red;
float: left;
}
.rightColParts{
float: left;
width:440px;
background-color: green;
}
Try this.
Alternatively this:
.leftColParts{
width:215px;
background-color:red;
display: inline-block;
}
.rightColParts{
display: inline-block;
width:440px;
clear:both;
background-color: green;
}
I have edited the fiddle with what I think it is that you want.
What I've done:
Floated both divs left
Added a div with a clearfix (clear: both;)
You can check it here: http://jsfiddle.net/pJefg/2/
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.