I seem to be having a small problem with the footer on my website.
I have swapped around the code in regards the order it appears in the styling and the html.
Any advice appreciated
Picture of the footer
.left{
text-align:left;
float:left;
}
.right{
float:right;
text-align:right;
}
.centered{
text-align:center;
}
<div class="footer-container">
<footer class="wrapper">
<div id="footer">
<p class="left"><img src="img/map25-redish.png"/> Curaheen, Cork </p>
<p class="right"><img src="img/telephone65-blue.png"/> </p>
<p class="centered"><img src="img/envelope4-green.png"/ </p>
<br/><br/>
</div>
</footer>
I would go further than Alexis's answer with a more modern approach using flexbox:
#footer {
display: flex;
justify-content: space-between;
align-items: center;
/* adjust margin and padding beow to suit your design */
margin: 0;
padding: 0;
}
#footer li {
display: flex;
align-items: center;
}
#footer li img {
margin-right: 5px;
}
<ul id="footer">
<li><img src="http://fakeimg.pl/40"/>Curaheen, Cork </li>
<li><img src="http://fakeimg.pl/40"/>Email address</li>
<li><img src="http://fakeimg.pl/40"/>Phone number</li>
</ul>
That way, the children elements inside #footer will take the space they need, with the same order they are in the HTML, letting space between them (justify-content property) and centered vertically (align-items property).
We follow the same procedure for LI children to align images with text (align-items property)
You'll have to adjust the margin and padding to suit your design, of course.
Actually, it looks like it's a floating problem. To solve this you have many solutions as playing with margin or line-height.
But my advice would be to use a ul list, display your li items in inline-block and give them a width of 33%.
Float remove your elements from the normal flow.
body {
margin:0;
padding: 0;
}
footer {
background: #eee;
padding-top: 30px;
padding-bottom: 30px;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
}
li {
display: inline-block;
width: 30%;
text-align: center;
}
<footer>
<ul>
<li>#01</li>
<li>#02</li>
<li>#03</li>
</ul>
</footer>
Related
I would like to place an image on a div which I use for a navigation bar, but when I resize the image to 50px or above, the padding on the div gets bigger as well. I don't like this since the image will either be too small to see or the navigation bar will be too big to look pleasing, any ideas on how to fix this?
.navbar{
background-color:green;
padding:20px;
}
.navbar #image1{
width:40px;
margin-left:950px;
padding:0px;
}
<div class='navbar'>
<a href='home.html'>Home</a>
<a href='1.html'>Profile</a>
<a href='2.html'>Transactions</a>
<a href='3.html'><p>Settings</p></a>
<img src='https://picsum.photos/200/300' id='image1'/>
</div>
You should first start by removing
margin-left:950px
as the margin will exclude your item from your navbar
then apply flex properties to your navbar
.navbar {display : flex}
so your navbar items become in the same line
I recommend checking out this flex-box guide as well flexbox properties
can you please share the image's link so we can help you?
also you most edit margin-left:950px; to margin-left: auto; if you want to center it
and this is an example navbar code (press run to see what is it)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar{
padding: 10px 20px;
background: black;
color: white;
display: flex;
align-items: center;
}
.navbar li{
list-style: none;
display: inline-block;
padding: 0 20px;
cursor: pointer;
}
.navbar li a{
color: white;
text-decoration: none;
}
.navbar li:hover,
.navbar li a:hover{
color: #666;
}
.navbar img{
width: 50px;
height: 50px; /*or :auto ; */
}
<ul class="navbar">
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
</ul>
<br><br><br>
<p>or</p>
<br><br><br>
<ul class="navbar">
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
</ul>
I think you need to learn the basics before start doing websites
There is a gap above the top of the image. What is causing it? I want the image to appear from the very top of the page. The image covers takes up half the width of the webpage.
The HTML (Here I have added a navbar and there is a div tag which consists an image.)
<nav class="navbar">
<ul>
<li><div class ="line-effect">Home</div></li>
<li><div class="line-effect">About</div></li>
<li><div class="line-effect">Portfolio</div></li>
</ul>
</nav>
<div class="bg-image">
<img src="newvec.png" height="800px" width="750px">
</div>
The CSS (This is the styling for the navbar. There is no style applied to the image. The "box:sizing:border-box" property has been applied to the whole document.)
.navbar{
padding:5px;
display: flex;
justify-content: flex-end;
align-items: center;
position:fixed;
padding:50px 10px;
width:100%;
height:8vh;
}
.navbar ul{
display: flex;
list-style: none;
padding: 20px 40px;
}
.navbar ul li a{
font-family: Nunito;
color:black;
text-decoration: none;
font-size: 20px;
display: block;
padding: 5px 25px;
}
did you checked your <body> tag?
If you didn't used reset.css there is standard margin in <body> tag.
Just try to add
body {
margin : 0;
}
on your css tag.
I'm a really new at this but I don't manage to ge the menu bar to get in line with the rest of the content on the page. Can someone just explain how to think to get everything in line and so everything scale nicely?
HTML:
<div id="all">
<ul id="menu1">
<li><img src="Pic/Homemini.png"></li>
<li><img src="Pic/MeMINI.png"></li>
<li><img src="Pic/portfolioMINI.png"></li>
<li><img src="Pic/contactMINI.png"></li>
</ul>
<ul id="menu2">
<li><img src="Pic/Home.png"></li>
<li><img src="Pic/Me.png"></li>
<li><img src="Pic/portfolio.png"></li>
<li><img src="Pic/Contact.png"></li>
</ul>
<div id="box1MINI"><img src="Pic/box1MINI.png"></div>
<div id="main"><img src="Pic/main.png"></div>
<footer>
<p>DID YOU KNOW?</p>
<p>alsdjaljsdkasjd askldjalksdj <br> asdlkjaslkd asldkjasldj asldk <br> alsdkjalksdj lakdj</p>
</footer>
</div>
CSS:
/* ALL CONTENT */
* {
max-width: 100%;
}
#all{
margin: auto;
}
/* END ALL CONTENT */
/* HEADER */
ul li{
display: inline-block;
width: 20%;
}
#menu2{
display: none;
}
#box1MINI{
max-width: 80%;
min-width: 60%;
margin: auto;
}
/* END HEADER*/
/* MAIN SPACE */
#main{
margin: auto;
max-width: 80%;
}
/* END MAIN SPACE */
/* FOOTER*/
footer{
background-color: darkgreen;
width: 80%;
padding: 1px;
margin: auto;
text-align: center;
}
/* END FOOTER*/
The issue you were getting because you gave "60%" width to "#box1MINI" and "80%" to "#main and footer". And no width to "Menus"
Whereas you should give width to the "Outermost" container which is "#all" in your case. and set that to center by "margin: 0 auto;" property. And keep everything else inside the "#all" container.
I have updated your code and made some modifications as per good practice.
Please find the Updated code below:
HTML
<div id="all">
<ul id="menu1">
<li>
<img src="Pic/Homemini.png">
</li>
<li>
<img src="Pic/MeMINI.png">
</li>
<li>
<img src="Pic/portfolioMINI.png">
</li>
<li>
<img src="Pic/contactMINI.png">
</li>
</ul>
<ul id="menu2">
<li>
<img src="Pic/Home.png">
</li>
<li>
<img src="Pic/Me.png">
</li>
<li>
<img src="Pic/portfolio.png">
</li>
<li>
<img src="Pic/Contact.png">
</li>
</ul>
<div id="box1MINI">
<img src="Pic/box1MINI.png">
</div>
<div id="main">
<img src="Pic/main.png">
</div>
<footer>
<p>DID YOU KNOW?</p>
<p>
alsdjaljsdkasjd askldjalksdj
<br>
asdlkjaslkd asldkjasldj asldk
<br>
alsdkjalksdj lakdj
</p>
</footer>
</div>
CSS
html,
body {
height: 100%;
}
body {
margin: 0 auto;
}
#all {
margin: 0 auto;
width: 80%;
}
/* END ALL CONTENT */
/* HEADER */
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
width: 24.6%;
margin: 0;
padding: 0;
}
#menu2 {
display: block;
}
#box1MINI {
min-width: 60%;
margin: auto;
}
/* END HEADER*/
/* MAIN SPACE */
#main {
margin: auto;
}
/* END MAIN SPACE */
/* FOOTER*/
footer {
background-color: darkgreen;
padding: 1px;
margin: auto;
text-align: center;
}
/* END FOOTER*/
Working Fiddle: http://jsfiddle.net/96ft87ev/1/
Hope this will help!
Let me know if you were looking for something else!
Add this selector:
#menu1 {
text-align:center;
}
Since you've set the li elements to be displayed as inline, they conform to text-alignment rules.
Edit: After this, the nav bar was still slightly off-center. This is due to a couple reasons. First of all, parts of your HTML are invalid, resulting in tags not being nested properly. Your link, img, and br tags all need to be self-closing. That just means you need to add a / (slash) before the > symbol on the tag.
After you've fixed that, simply remove the padding that is added to the li elements by adding padding:0 to the #menu1 selector.
Here is an example (I've added borders, but you can remove them).
When using percentages, it uses the parent to calculate. You want each li to be 20% of the page, not 20% of the parent (ul). Set the width for menu1 as 80%, then each li is 25% of that. Give the ul auto margins and it will line up with content.
#menu1{
margin: auto;
width:80%; //same as content
padding: 0px;
}
ul li{
display:inline-block;
width: calc(25% -4px); //each image is 25% of the parent, parent is 80% of page
box-sizing: border-box; //includes border and padding in box size
}
fiddle
This is my code: http://jsfiddle.net/2h6p3vvd/
I'm trying to align my list to the right of the logo, however it seems to sit on the line below, but still to the right.
HTML
<header>
<nav class="container">
<img src="#">
<ul>
<li>Add</li>
</ul>
</nav>
</header>
CSS
header {
padding-top: 65px;
padding-bottom: 65px;
}
.container {
width: 960px;
margin: 0 auto;
}
header nav {
height: 50px;
line-height: 50px;
}
header ul {
float: right;
}
ol, ul {
list-style: none;
}
Is this an issue with the float, and should I be using some sort of overflow rule to correct it?
The problem is that your li has inherited the line-height from nav parent... Reset it, and it will be inline:
Updated Fiddle
header ul li {
line-height: 0px;
}
EDIT
Also, keep in mind that float makes an element float over the element that comes after it. So, your ul must be put before the logo, so that it can float accordingly.
The ul is applying a top margin, which pushes the list down.
To avoid this, add the following to your header ul style:
margin: 0 auto;
Write your html structure following way
<header>
<nav class="container">
<div class="logo">
<img src="" alt="" />
</div>
<div class="menu">
<ul>
<li>Add</li>
</ul>
</div>
</nav>
</header>
and write css like
.container {
width: 960px;
margin: 0 auto;
}
.logo{width: 300px;float:left;}
.menu{float:left;}
Change line height to zero and add float left http://jsfiddle.net/2h6p3vvd/4/
try this
header {
padding-top: 65px;
padding-bottom: 65px;
}
.container {
width: 960px;
margin: 0 auto;
}
.container img{
position:absolute;
}
header nav {
height: 50px;
line-height: 0px;
}
header ul {
margin-left:0px;
float:left;
}
ol, ul {
list-style: none;
}
Better put them in table columns with border="0px" and width=100% with one extra column in the middle
eg:
<header>
<nav class="container">
<table width=100% border=0px>
<tr>
<td><img src="#"></td>
<td width=100%><!--This column is only needed only when you want to push image and list to extreme left and right respectively--></td>
<td><ul>
<li>Add</li>
</ul></td>
</tr>
</table>
</nav>
</header>
not sure why, but I can't get the icons centered on the page without using padding-left:130px;
Which isn't ideal of course because the icons don't center properly when you re-size the browser window. Maybe I need more coffee, but I could use some stacker help this morning!
http://towerdive.net/
HTML
<div id="center2">
<div id="social_icons">
<p>
Thanks for your interest in our blog!
You can also find us here, as well as subscribe to our newsletter:
</p>
<ul>
<li id="facebook">
<img src="img/icon_facebook.png" alt="Facebook"/>
</li>
<li id="twitter">
<img src="img/icon_twitter.png" alt="Twitter"/>
</li>
<li id="newsletter">
<img src="img/icon_newsletter.png" alt="Newsletter"/>
</li>
</ul>
</div>
</div>
CSS
#center2 {
width: 100%;
}
#social_icons {
margin: 0 auto;
width: 400px;
height: 250px;
text-align: center;
}
#social_icons p {
color: #e3cda4;
}
#social_icons ul {
margin: 0 auto;
list-style: none;
text-align: center;
}
#social_icons ul li {
float: left;
padding-right: 10px;
}
Let me know if you guys need the full HTML or CSS!
You can use display:inline-block for this. Write Like this:
#social_icons ul li {
display: inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
padding-right: 10px;
}
You currently use floats to display your navigational list horizontally. You can't align the list-items in the middle of the unordered lists because of the floats.
Another technique is instead of float: left; using display: inline-block;. The list-items will be displayed horizontally but also all extra white-space will taken into account. You'll get extra margins between the items (like 4px). Now you can use text-align: center; on the UL to center the list-items.
There are several (easy) workouts described in this article by Chris Coyier:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/