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;
}
Related
I'm trying to get the right column of a 3 column layout to move below the left column on smaller screens. Right now the right column moves in the correct direction except that it hangs below the middle column.
I created this basic simulation of my issue. Note the middle column will always be longer than the left and right columns as shown here.
<style>
.container {
max-width:1280px;
width:100%;
height:200px;
margin-left:auto;
margin-right:auto;
display:flex;
flex-wrap: wrap;
}
.leftsidebar {
width:20%;
height:200px;
background-color:gray;
margin-top:15px;
}
.middle {
width:57%;
background-color:blue;
margin-left:15px;
margin-right:15px;
height:800px;
margin-top:15px;
}
.rightsidebar {
width:20%;
background-color:orange;
height:200px;
margin-top:15px;
}
</style>
<div class="container">
<div class="leftsidebar">left</div>
<div class="middle">middle</div>
<div class="rightsidebar">right</div>
</div>
You can't accomplish that with Flexbox, unless setting fixed height's all over.
Here is a solution that combine Flexbox with float, and use a media query to swap between the two, when on narrower screens.
Note, when using percent based width combined with fixed margins, it can at some point cause the item to wrap. Use CSS Calc to avoid that, as showed in the answer.
Stack snippet
.container {
max-width: 1280px;
height: 200px;
margin: 0 auto;
display: flex;
}
.leftsidebar, .rightsidebar {
width: 20%;
background-color: gray;
margin-top: 15px;
}
.rightsidebar {
background-color: orange;
clear: left;
}
.middle {
width: calc(60% - 30px); /* calc for margin */
background-color: blue;
margin: 15px 15px 0 15px;
height: 800px;
}
#media (max-width: 600px) {
.container {
display: block;
}
.leftsidebar, .rightsidebar {
height: 200px;
float: left;
}
.middle {
width: calc(80% - 30px); /* calc for margin */
float: right;
}
}
<div class="container">
<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>
I could come up only with old good floats, no flexboxes at all. If you don't have to use flexboxes and you are interested, with pretty light hustle it might look like this (snap point is 700px):
* {
box-sizing: border-box;
}
.container {
width:90%;
height:200px;
margin:0px auto;
}
div > div {
background-color: orange;
float: left;
color: white;
text-align: center;
padding: 1em;
}
.leftsidebar {
width: 20%;
height: 200px;
margin-top: 15px;
}
.middle{
width:56%;
margin: 15px 2% 0%;
height:415px;
}
.rightsidebar {
width: 20%;
height: 200px;
margin-top: 15px;
}
#media (max-width: 700px) {
div > div:nth-of-type(2n + 1) {
width: 33%;
}
div > div:nth-of-type(2n) {
float: right;
width: 65%;
margin-right: 0%;
}
}
<div class="container">
<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>
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.
I want to have something like this:
================================
====IMAGE==============TEXT=====
================================
and I used:
.menu {
background-color: red;
padding: 40px;
text-align: right;
}
.menu img {
float: left;
}
Result:
================================
=======================TEXT=====
====IMAGE=======================
How can I do this?
I think that you have to use line-height with height in your text and set a width to your menu, something like:
<div class="menu">
<div class="img">
<img src="http://placehold.it/350x50" />
</div>
<div class="text">
<p>your text</p>
</div>
</div>
.menu {
background-color: red;
text-align: right;
width:100%;
}
.menu img {
float: left;
}
.menu text {
float: left;
}
.text p{
height:50px;
line-height:50px;
}
DEMO
You would need the image to be first in the markup. Float will make inline items wrap around something, but only the inline items that come after it in the markup.
Elements are not getting exact float and width property.
.menu {
background-color: red;
padding: 40px;
float: right;
max-width: 40%;
}
.menu img {
float: left;
max-width: 60%;
}
Now try to wrap them and use
.wrapper {
display: inline-block;
}
I'm working on the header of a website. I've looked around stackoverflow for instructions on how to center the header (includes logo & navigation bar).
I'm using Dreamweaver CC and when I click the preview button, it shows up on the browser centered, but the right has more white space than the left.
My current CSS:
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.header_left {
float: left;
width: 300px;
}
.navi {
float: right;
width: 600px;
}
.navi li {
list-style: none;
display: inline;
}
My Current HTML:
<body id="home">
<div id="header">
<div class="container">
<div class="header_left">
<img src="../images/bestfoodservicesweb_04.jpg" width="208" height="69"/>
</div>
<div class="header_right">
<ul class="navi">
<li><img src="../images/bestfoodservicesweb_07.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_09.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_11.jpg" width="88" height="56"></li>
<li><img src="../images/bestfoodservicesweb_13.jpg" width="88" height="56"></li>
</ul>
<div style="clear: both"></div>
</div>
</div>
EDIT: Sample of what it looks like
Trying to understand the problem. The header as a whole is centered. The elements inside have margin issues due to specifying width on the images and then giving the class a different width as well. You can remove the width in the class and it will push each floated element flush to the their specified sides. Then add margin to push them the distance you would like:
body, html {
width: 100%;
height: auto;
margin: 0;
}
.container {
background: #333;
width: 1000px;
margin: auto;
text-align: center;
}
.header_left {
float: left;
margin-left: 70px;
margin-top: 12px;
}
.navi {
float: right;
margin-right: 60px;
}
.navi li {
list-style: none;
display: inline;
}
http://jsfiddle.net/derekstory/zz2Dy/3/
text-align:center and float don't make good friends :)
test this : setting ul as inline-block element and not floatting: http://jsfiddle.net/zz2Dy/2/
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
background:#333;
}
.header_left {
float: left;
}
.navi {
display:inline-block;
padding:0;
margin:0;
}
.navi li {
list-style: none;
display: inline;
}
The right header element has the property text-align: center, and it doesn't occupy the entire width of the element, so it ends up with more white space on the right. If you add to your fiddle the class:
.header_right {
text-align: right;
}
That should remove the white space on the right.
(if I understood your issue properly)
I believe this is what you are looking for:
.container {
margin: 0 auto;
text-align: center;
}
.header_left {
display: inline-block;
}
.header_right {
display: inline-block;
}
.navi {
display: inline-block;
padding: 0;
}
.navi li {
list-style: none;
display: inline;
}
Demo
Basically, I've removed floats and widths and padding, used display: inline-block;.
<img src="../images/bestfoodservicesweb_07.jpg" style=" display: block;
margin-left: auto;
margin-right: auto;"/>
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.