So I'm making a little website to market an application I'm going to create. I'd like to have three social media icons at the bottom of the screen, aligned to the middle of the screen, horizontally.
I've put the three icons inside a div and no matter how much I try, I can't figure out how to align this properly!
Please note, I began using HTML and CSS today, so excuse my extremely horrible code.
<div style="text-align:middle">
<ul style="white-space:nowrap; display:inline; list-style:none;">
<li style="white-space:nowrap; display:inline; list-style:none; padding:30px;">
<img src="images/custom/facebook.png" height="60"></img></li>
<li style="white-space:nowrap; display:inline; list-style:none; text-align:center;">
<img src="images/custom/twitter.png" height="60"></img></li>
<li style="white-space:nowrap; display:inline; list-style:none; padding:30px;">
<img src="images/custom/gmail.png" height="60"></img></li>
</ul>
</div>
Any help is appreciated.
Thank you,
David
You need to use text-align:center:
<div style="text-align:center">
<ul style="white-space:nowrap; display:inline; list-style:none;">
<li style="white-space:nowrap; display:inline; list-style:none;
padding:30px;">
<img src="http://placehold.it/60" height="60" /></li>
<li style="white-space:nowrap; display:inline; list-style:none; text-
align:center;">
<img src="http://placehold.it/60" height="60" /></li>
<li style="white-space:nowrap; display:inline; list-style:none;
padding:30px;">
<img src="http://placehold.it/60" height="60" /></li>
</ul>
</div>
I would use flex boxes to center your div. It's a more modern solution that also scales nicely if you want to play around with your flex-items.
<div style="display: flex; justify-content: center;">
<ul style="white-space:nowrap; display:inline; list-style:none;">
<li style="white-space:nowrap; display:inline; list-style:none;
padding:30px;">
<img src="images/custom/facebook.png" height="60"></li>
<li style="white-space:nowrap; display:inline; list-style:none; text-
align:center;">
<img src="images/custom/twitter.png" height="60"></li>
<li style="white-space:nowrap; display:inline; list-style:none;
padding:30px;">
<img src="images/custom/gmail.png" height="60"></li>
</ul>
</div>
You can learn more about flex boxes here. Alternatively if you're more of a gamer there's an interactive tutorial here.
First, separate your html and css. Second, I doubt that you need the ul and li's. Here's the html:
<div class="social">
<img src="images/custom/facebook.png" class="social-icon">
<img src="images/custom/twitter.png" class="social-icon">
<img src="images/custom/gmail.png" class="social-icon">
</div>
Then, the css:
.social {
text-align: center; //not middle
}
.social-icon {
height: 60px;
padding: 20px; // your choice here
float: left;
}
Even better would be to use the flex property in css:
.social {
display: flex;
padding: 10px; // your choice here
}
.social-icon {
flex: 1 0 30%; // experiment with the last value
padding: 20px; // your choice here as well
}
You can do it with the Flexbox:
* {margin: 0; padding: 0; box-sizing: border-box}
ul {
display: flex; /* displays flex-items (children) inline */
justify-content: center; /* centers them horizontally */
background: Lavender;
}
ul, li {
white-space: nowrap;
}
ul li {
list-style: none;
padding: 30px;
}
img {
height: 60px;
}
<div>
<ul>
<li>
<img src="http://placehold.it/60x60" alt="">
</li>
<li>
<img src="http://placehold.it/60x60" alt="">
</li>
<li>
<img src="http://placehold.it/60x60" alt="">
</li>
</ul>
</div>
Related
My image won't be positioned next to the slider.. instead it's just stacked underneath it. It's like there isnt room for the image because the slider takes up too much space, however it doesnt seem like that is the case when I look at the code, unless I missed something :)
This is my HTML:
<div id="content">
<div class="bx.wrapper">
<ul class="bxslider">
<li><img class="photo" src="IMG/pic_0001.jpg"></li>
<li><img class="photo" src="IMG/pic_0012.jpg"></li>
</ul>
</div>
<div id="hours">
<img src="IMG/hoursdk.png"/></div>
</div>
And my CSS:
#hours{
position:relative;
right:150px;
width:20%;
height:10%;
}
.bx-wrapper {
position: relative;
width:100%;
margin-left:-30px;
}
ul.bxslider {
margin-top: 60px;
padding: 0;
}
.bx-wrapper img {
min-width:30%;
max-width: 40%;
display: block;
}
I got the CSS from the BXslider, and I removed some unnecessary things, such as controls and pager, already.
Do you mean something like this? Check here
<div id="content">
<div class="bx-wrapper">
<ul class="bxslider">
<li><img class="photo" src="http://placehold.it/350x150"></li>
<li><img class="photo" src="http://placehold.it/350x150"></li>
</ul>
</div>
<div id="hours">
<img src="http://placehold.it/350x150"/></div>
</div>
CSS
.bx-wrapper, #hours{
display:inline-block;
}
.bx-wrapper{
float:left;
}
#hours{
float:right;
}
.bxslider{
list-style: none;
}
I am new to html,css and am currently working on a page.
I am unable to align the menu at the right bottom side.It is clashing with my 3 pictures in the middle. Also logo at the bottom left keeps changing when ever I make changes to the images at the centre. Kindly go through the code and let me know.
body {
margin: 0;
padding: 0;
}
.background{
position: relative;
}
.background .text {
position: absolute;
top: 300px;
left: 300px;
width: 300px;
}
.logo {
position:absolute;
left: 10px;
bottom: 10px;
}
#bottomnav ul {
list-style: none;
display: inline-block;
width: 100%;
position: absolute;
right:0px;
bottom:0px;
}
#bottomnav ul li {
width: 0%;
float: right ;
text-align:right;
}
.images{
width:250;
height:250;
display:inline;
float:right;
border:2px solid #FFF;
margin-top:300px;
}
<body>
<div class="background">
<img src="images/landing_page.png"/>
<div class="text">
<h1>welcome</h1>
<p>office</p>
<p>ink</p>
</div>
<div class="logo"> <img src="images/logo_03.png"/> </div>
<div class="images">
<img src="images/top1.jpg" width="400" style="float:right"/>
<img src="images/top2.jpg"width="400" style="float:right"/>
<img src="images/top3.jpg" width="400" style="float:right"/>
</div>
<div id="bottomnav">
<ul>
<li>Home</li>
<li>About </li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
Divi,
check out clearfix.
http://nicolasgallagher.com/micro-clearfix-hack/
You will need to apply the fix to the image parent container (.images).
Also you are using a lot of absolute positing, when it is not necessarily needed.
You could float the logo left and image container right, while applying an explicit width to each.
Also why do you have .images set to 250 width, and images are 400 width?
I am unsure if this is the answer you're looking for, but this solution solves the problem you were having regarding the menu not showing up on the bottom right hand side (I think is what you were trying to achieve with some of your css): http://jsfiddle.net/swm53ran/72/
I reorganized the structure of your html a little bit because you said the logo should be at the bottom (I'm assuming below the other larger pictures).
<div class="background">
<img src="images/landing_page.png"/>
<div class="text">
<h1>welcome</h1>
<p>office</p>
<p>ink</p>
</div>
<div class="images">
<img src="images/top1.jpg" width="400" style="display:inline-block;"/>
<img src="images/top2.jpg"width="400" style="display:inline-block;"/>
<img src="images/top3.jpg" width="400" style="display:inline-block;"/>
</div>
<div class="logo"> <img src="images/logo_03.png"/> </div>
<div id="bottomnav">
<ul>
<li>Home</li>
<li>About </li>
<li>Contact Us</li>
</ul>
</div>
</div>
heres the css:
#bottomnav {
display:inline-block;
float:right;
}
#bottomnav ul {
list-style: none;
}
#bottomnav ul li {
display: inline-block;
}
Useful tip: when dealing with css, less is more, try to be concise in your styles so that you dont have to write over styles with other styles and force your way around the DOM.
hope this helps/gets you pointed in the right direction.
I want to create a navbar with a logo in the center, and two navbar items (links) on either side, width equal spacing. I also need the logo to be lined up center with the navbar items.
Here's the code i have thus far. I'm using bootstrap.
HTML:
<div class="nav">
<div class="container">
<ul>
<li> Navbaritem1 </li>
<li> Navbaritem2 </li>
</ul>
<div class="logo">
<img src="Img/logo.png" class="img-responsive">
</div>
<ul>
<li> Navbaritem3 </li>
<li> Navbaritem4 </li>
</ul>
</div>
</div>
CSS:
.nav li {
display: inline;
margin-left:5%;
margin-right:5%;
}
.logo {
width: 100px;
display: inline-block;
height: auto;
}
.logo img {
float: none;
padding-top:10%;
}
ul {
display: inline;
text-align:center;
width:30%;
}
Did you try centering a div inside the container?
<div class="container">
<div class="center">
Centered content here
</div>
</div>
And the css:
.center {
display: table;
margin: 0 auto;
}
Also this post might've helped you with a quick search.
I am attempting to make a simple navigation bar using 4 images, wrapped inside an unordered list.
I am having issues, because the bar is not lining up, it is acting as if the parent div it is nested within has a padding-left assigned to it and pushing the unordered list to the right. Here's a picture of what is happening:
I have a border on the main navigation div to see what is going on.
Here is my code:
<div id="container">
<div id="header">
<h1 class="hidden">Blue Ridge Fencing</h1>
</div>
<div id="navigation">
<ul>
<li><img src="images/website_build/nav_bar/home.jpg" width="208" height="50" alt="Home" border="0"></li>
<li><img src="images/website_build/nav_bar/about.jpg" width="227" height="50" alt="About" border="0"></li>
<li><img src="images/website_build/nav_bar/contact_us.jpg" width="290" height="50" alt="Contact Us" border="0"></li>
<li><img src="images/website_build/nav_bar/quote.jpg" width="235" height="50" alt="Quote" border="0"></li>
</ul>
</div>
<div id="content">
</div>
</div>
And the CSS:
#navigation {
height: 50px;
width: 1000px;
background-image: url(../images/backgrounds/otis_redding.png);
overflow: hidden;
padding: 0px;
border: 1px solid #000;
}
#container #navigation ul {
margin: 0px;
list-style-type: none;
font-size: 34px;
}
#container #navigation li {
float: left;
}
Thank you in advance!
<ul> elements generally have default padding set by the browser (or one of your stylesheets). Just remove it:
#navigation ul {
padding:0;
}
You might want to look into using a CSS reset if you haven't already:
https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
Why is there the need for browser resets?
You need to remove the padding from the ul element. You can do by adding padding: 0; to #container #navigation ul in your css.
Hey im trying to make a floating grid that has different shapes.
Here is my goal and whats happening: http://imgur.com/a/wXQfA
As you can see there is a gap under the horizontal piece. Im trying to fix it without having to use any positioning so that I can add boxes on later or move them around.
Code:
Html
<li class="mediumBox">
<img src="..." height="205" width="430">
</li>
<li class="largeBox">
<img src="..." height="430" width="430">
</li>
<li class="verticleMediumBox">
<img src="..." height="430" width="205">
</li>
<li class="smallBox">
<img src="..." height="205" width="205">
</li>
<li class="smallBox">
<img src="..." height="205" width="205">
</li>
<li class="smallBox">
<img src="..." height="205" width="205">
</li>
<li class="smallBox">
<img src="..." height="205" width="205">
</li>
</ul>
</div>
</body>
Css:
body{
background-color: #fffdf9;
height: 100%;
width: 100%;
}
#content{
background-color: red;
height: auto;
width: 900px;
margin: 5em auto 0 auto;
}
#work ul{
list-style: none;
}
#work li{
float: left;
margin: 10px;
}
#work li >a{
display: block;
}
#work li .smallBox{
float: left;
display: block;
}
#work li .mediumBox{
float: left;
display: block;
}
#work li .verticleMediumBox{
float: left;
display: block;
}
#work li .largeBox{
float: left;
display: block;
}
Here is my code:http://jsfiddle.net/jw7pV/
For some reason the jsFiddle version doesn't look like my chrome version.
Edit: sorry didn't read the first time that you need dynamic boxes.
If the size of your columns scales (like some kind of responsive design) then you need something that will set these absolute positions dynamically. So you need javascript.
For that you can use jquery masonry or jquery isotope.
http://masonry.desandro.com/
http://isotope.metafizzy.co/
:)