I have the following elements. The image is fixed at 325X70px and is placed at the top left corner. I want the list items, evenly spaced, to fill the remainder of the width and be responsive to browser resize. I'm sure this is easy, but I can't seem to get it to work.
<div class="wrapper">
<div class="left">
<div class="image">Image Here</div>
</div>
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
<li>A</li>
</ul>
</div>
</div>`
CSS
* {
padding: 0px;
margin: 0px;
}
.wrapper {
position: relative;
}
.left {
float: left;
}
.image {
min-width: 325px;
max-width: 325px;
height: 70px;
background-color: red;
}
.menu {
width: 100%;
height: 70px;
background-color: black;
}
.menu ul {
position: absolute;
width: 100%;
height: 70px;
display: table;
}
.menu li {
color: #FFF;
width: 25%;
text-align: center;
vertical-align: middle;
display: table-cell;
list-style-type: none;
}
You may not need the .left class, you might be able to just do that styling on the image itself, but regardless, what needs to happen here is that .left and .menu need to be side by side. To do that...
.left,
.menu {
display: inline-block;
vertical-align: middle;}
We know the image is always 325px wide, so let's set the parent container to match...
.left {
width:325px;}
And then we want .menu to be the entire width of the screen, minus that image/container, so can we do this...
.menu {
width: calc(100% - 325px);}
You'll still have to turn your li horizontal...
li {
display: inline-block;
vertical-align:middle;}
Related
I'm kind of a beginner using CSS3 and I'm trying to center a li tag that contains a SVG object.
I want the SVG object to appear centered while the other li tags float to the left and right.
Also, the SVG object is bigger than the other li, I'd like to align all the li so the bottom of the SVG is at the same height as the other li.
Any tips on how to do that ?
Thanks !
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
background-color: red;
height: 200px;
}
ul {
list-style: none;
background-color: red;
position: absolute;
bottom: 0;
width: 100%;
}
ul li {
background-color: yellow;
display: inline-block;
float: right;
}
ul li:first-child {
float: left;
}
ul li.svg {
float: center;
}
<div class="container">
<ul>
<li>Title</li>
<li class="svg"><object id="svg" type="image/svg+xml" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="20%"></object></li>
<li>Project</li>
<li>Project</li>
<li>Project</li>
</ul>
</div>
How about targeting the object #svg ?
Try a text-align: center; for the containing li tag. Works in Safari and Chrome.
I tried to take off the SVG object and it looks like I can't even get the li tag to be centered:
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
background-color: red;
height: 200px;
}
ul {
list-style: none;
background-color: red;
position: absolute;
bottom: 0;
width: 100%;
}
ul li {
background-color: yellow;
display: inline-block;
float: right;
}
ul li:first-child {
float: left;
}
ul li.svg {
float: center;
text-align: center;
}
<div class="container">
<ul>
<li>Title</li>
<li class="svg">Example</li>
<li>Project</li>
<li>Project</li>
<li>Project</li>
</ul>
</div>
for this you can simply add this code to your css
ul li.svg {
text-align: center;
}
very simple . but i seen you use incorrect value for "float"
float:center ;
in css float can be
float:right;
or
float :left;
hope this can help
Here's a try with "title" (the first item) floating on left and all generic items on right, due to a margin-left as wide as 2 columns.
Columns have similar but not equal heights by fixing line-height to 1.5 and a multiple of latter. That means you must know the number of items to set height of title with this quick solution.
Codepen: http://codepen.io/PhilippeVay/pen/ORqQoo
Note on semantics: a title should be a h1-h6 element just before this list. If you had previously on your page a h1, than it would be a h2 followed by that list.
/* (Codepen normalize and Autoprefixer are ON) */
.container {
position: relative;
background-color: red;
min-height: 200px;
}
ul {
list-style: none;
width: 100%;
padding-left: 0;
}
li {
width: 33.33%;
}
li:nth-child(n+3) {
margin-left: 66.67%;
line-height: 1.5;
background-color: yellow;
}
li:first-child {
float: left;
line-height: 4.5;
text-align: center;
background-color: tomato;
}
li.svg {
float: left;
vertical-align: top;
background-color: lightblue;
}
<div class="container">
<ul>
<li>Title</li>
<li class="svg"><object id="svg" type="image/svg+xml" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="20%"></object></li>
<li>Project</li>
<li>Project</li>
<li>Project</li>
</ul>
</div>
I am trying to make responsive layout. I have two <div>'s inside two different li elements. I want to adjust them on screen change and with media query on specific size. I want them to move down. If I make their width in pixel they are coming next to each other but if I make width in percentage they are overlapping each other. How can I make their width in percentage and not to overlap eachother? Please see the jsfiddle. Thanks
#btmIconsDiv {
float: left;
margin-top: 84px;
width: 100%;
height: 341px;
background-color: orange;
position: relative;
}
#btmIconsDiv ul li {
display: inline-block;
list-style-type: none;
margin-left: 30px;
}
#btmIconsDiv ul li div.btmIconsUlliDiv {
float: left;
width: 274px;
height: 300px;
background-color: red;
border: 1px solid blue;
}
<div id="btmIconsDiv">
<ul>
<li>
<div class="btmIconsUlliDiv"></div>
</li>
<li>
<div class="btmIconsUlliDiv"></div>
</li>
</ul>
</div>
jsFiddle
https://jsfiddle.net/mohsinali/mucs2ep3/1/
try this
#btmIconsDiv ul
{
width: 100%;
display: inline-block;
margin: 0px;
margin-top: 10px;
}
#btmIconsDiv ul li{
width: 45%;
display: inline-block;
list-style-type: none;
}
#btmIconsDiv ul li div.btmIconsUlliDiv{
float: left;
width: 100%;
/*margin-right: 50px;*/
height: 300px;
background-color: red;
border: 1px solid blue;
}
I believe the reason they are overlapping is because of the float left value. No harm in using float as there are obvious situations in which it is useful but this is a fairly common occurrence. The first thing I would suggest trying is setting overflow: hidden; Some people suggest overflow: auto; but hidden is what I use when I have divs not alligning properly and it always works! Best of luck!
with CSS3 you can use calc property which allows you to plus or minus from percentage:
#btmIconsDiv{
float: left;
margin-top: 84px;
width: 100%;
height: 341px;
background-color: orange;
position: relative;
}
#btmIconsDiv ul li{
width: calc(50% - 32px); // 50% and minus 30px of margin right + 2px of border...
display: inline-block;
list-style-type: none;
margin-right: 30px; // user margin right instead of left...
}
#btmIconsDiv ul li div.btmIconsUlliDiv{
float: left;
width: 100%;
/*margin-right: 50px;*/
height: 300px;
background-color: red;
border: 1px solid blue;
}
https://jsfiddle.net/mohsinali/mucs2ep3/1/
Just modify this css
#btmIconsDiv ul li{
display: inline;// you have to correct this
list-style-type: none;
margin-left: 30px;
}
1. Update
For that margin-left problem use this
#btmIconsDiv
{
float: left;
margin-top: 84px;
width: 100%;
height: 341px;
background-color: orange;
position: relative;
display:table; // add this
}
You can use this as Updated Fiddle
You can use Flex to solve your problem try code below.
<!DOCTYPE html>
<html>
<head>
<style>
#btmIconsDiv {
float: left;
margin-top: 84px;
width: 100%;
height: 341px;
background-color: orange;
position: relative;
}
#btmIconsDiv ul {
display: flex;
list-style-type: none;
}
.btmIconsUlliDiv {
float: left;
width: 274px;
height: 300px;
background-color: red;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="btmIconsDiv">
<ul>
<li>
<div class="btmIconsUlliDiv"></div>
</li>
<li>
<div class="btmIconsUlliDiv"></div>
</li>
<li>
<div class="btmIconsUlliDiv"></div>
</li>
</ul>
</div>
</body>
</html>
I have a vertical navigation menu, with a picture next to it. So now the navigation menu and the pic are vertically aligned to the top. I want it to be bottom, like, the navigation menu to vertically finish at the same point where the image does. How do I go about doing this with using absolute positioning?
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Portfolio</li>
<li>Reviews</li>
</ul>
<img src="pic.jpg">
CSS:
ul {
float: left;
text-align: right;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 230px;
height: auto;
float: left;
}
I don't want to use absolute positions, because the image is supposed to interconnect with the navigation menu (It's supposed to be a png picture of a guy with the buttons coming from behind him) so I'm worried it might mess things up if someone had a different font sizing in their browser.
You can use display: table; to achieve this.
Create a wrapping element for the ul and img and give it display: table;. ul and img should have display: table-cell; vertical-align: bottom; then. You don't need float: left; on ul or img either if you do it this way.
Demo: http://jsfiddle.net/xq6SY/
HTML
<div class="wrapper">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Portfolio
</li>
<li>Reviews
</li>
</ul>
<img src="pic.jpg">
</div>
CSS
.wrapper {
display: table;
}
ul {
display: table-cell;
text-align: right;
vertical-align: bottom;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 300px;
height: auto;
display: table-cell;
vertical-align: bottom;
}
try this code even though I pressed it to the bottom of the screen)) DEMO
<div class="page-wrap">
</div>
<footer class="site-footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Portfolio</li>
<li>Reviews</li>
</ul>
<img src="http://placehold.it/350x300">
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
/*height: 142px; */
}
.site-footer {
background: white;
}
ul {
/*float: left;*/
text-align: right;
display:inline-block;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 230px;
height: auto;
display:inline-block;
vertical-align:bottom;
}
You can do this:
fiddle
css
ul, img { display:inline-block; vertical-align:bottom;}
** Important: Don't forget to remove your floats, and add padding:0; margin:0; to your UL.
(look at the fiddle)
I'm making a responsive site, so most of the elements I'm working with have unknown heights. Here's what I got...
<div class="main">
<div class="submenu">
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
</div>
CSS:
.main {
background: #0e0e0e;
width: 80%;
margin: auto;
position: relative;
}
.main .submenu {
background: #e62e7a;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 15%;
}
.submenu ul {
background: pink;
float: left;
height: 100%;
}
.submenu ul li {
display: block;
float: left;
}
.submenu ul li a {
background: rgba(0,0,0,0.5);
padding: 8px;
}
Okay. So I have div with a proportional size inside a div with a changing height and width. I have two problems:
1) How do I vertically center the anchors at the end of the code inside the .submenu div? Apparently percentage line height doesn't work, and I'm not sure why, but the table display trick does not work either.
2) Also in the anchors, the padding escapes its parent boundaries. The text is perfectly at top, but the padding transparently black background of the anchors is escaping the parent. Why is that?
P.S. as for .main height I added a div inside with a padding-top of 50% to set its height relatively to its width.
This article may be able to help: http://css-tricks.com/centering-in-the-unknown/
Basically, by using display: table-cell;, you can use vertical-align: middle; on your content.
Here's a JSFiddle updated to use this method:
http://jsfiddle.net/yVn7Z/
Updated CSS:
html, body {
margin: 0;
height: 100%;
width: 100%;
display: table;
}
.main {
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.main .submenu {
background: pink;
margin: 0 auto;
display: table;
}
.submenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.submenu ul li {
display: table-cell;
}
.submenu ul li a {
background: rgba(0, 0, 0, 0.5);
padding: 8px;
display: 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;"/>