Im fairly new to the world of CSS and HTML, so my apologies in advanced.
I am having a problem getting my social media icons to center themselves at the bottom of my website.
They are sitting bottom heavy rather in the middle of the footer.
Attached is screen shot of the issue and the code behind it.
Image of current footer
CODE SNIPPET:
.page-footer {
background-color: #F06D71;
padding: 1em;
}
<footer class="page-footer">
<ul>
<img class="responsive-img" src="http://placehold.it/50x50">
<img class="responsive-img" src="http://placehold.it/50x50">
<img class="responsive-img" src="http://placehold.it/50x50">
</ul>
</footer>
I've attempted to add "padding-bottom" to the style sheet, but the icons just get smaller rather moving up a few pixels.
Any advice or any terms i should look into?
Regards
Use Flexbox:
.page-footer{
display:flex;
}
.page-footer ul{
align-items:center;
}
This will center the icons vertically inside the footer. You also should have the images wrapped in <li> tags within the list as list items. If you also want to nicely center them vertically you could add display: inline-block to the list elements and text-align center to its parent, the unordered list. So the final code would be:
.page-footer{
display:flex;
}
.page-footer ul{
justify-content:center;
text-align:center;
}
.page-footer ul li{
display:inline-block;
}
Also one more thing I noticed, you have added the same ID to all three images. An ID should be a unique identifier and only used on one element.
Here is a great tool to do that.
Simple solution:
For the class of .page-footer add a property of display: table;
Then wrap your image tags in a <div> and assign the property of display: table-cell to the div and also the property of vertical-align: middle;.
Doing this will vertically align anything inside that div to the middle of the element.
See this JsFiddle that I made as a demonstration.
It is not always obvious even for an experienced developer. If you want to have just images in your footer you could just do padding. Also you have missing <li> inside <ul> tag.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.footer-list-item {
list-style-type: none;
display: inline-block;
}
.footer-list {
padding: 50px 0;
background: pink;
text-align: center;
}
</style>
</head>
<body>
<div class="footer">
<ul class="footer-list">
<li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
<li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
<li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
</ul>
</div>
</body>
</html>
JSBin link
Related
Finally got my list working and staying together on one line, but now that the solution I found was that I can't use a % for width, I can't make the whole navigation bar shrink when I change the window size. Is this something to do with li/ul that prevents shrinking down?
I thought that adding a div with the same shrinking features as the logo would work, but that doesn't seem to do much at all. I've been working on this project for a little while now, and it's pretty annoying that this one thing is the only issue left. Once this is done, I can start flipping out the images you see that are all the same in the gif and create other pages.
Note that my website is being used to represent an essay I wrote on animal crossing, haha.
Thanks for any help y'all recommend!
See gif example below (logo shrinks fine, list does not.):
css:
body {
background-image: url("repeatbg.gif");
background-repeat: repeat;
}
.taskbarimages {
height: 50px;
margin-right: 10px;
}
#title {
width: 30%;
height: 30%;
margin-left: 20%;
}
.toppage {
margin-left: 20%;
}
.shinktofit {
width: 30%;
height: 30%;
}
ul {
list-style-type: none;
white-space: nowrap;
}
li {
display: inline-block;
margin: 0 -1px;
}
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="indexcss.css">
<meta charset="utf-8"/>
</head>
<body>
<!-- TOP HEADER -->
<!-- top banner -->
<div class="toppage">
<!-- Animal Crossing Logo DIV -->
<div>
<img src="images/animalcrossinglogo.png" alt="Animal Crossing Logo" id="title"/>
</div>
<div class="shinktofit">
<ul>
<li>
<a href="link1.html">
<img src="images/homepagebutton.png" class="taskbarimages">
</a>
</li>
<li>
<a href="link2.html">
<img src="images/historybutton.png" class="taskbarimages">
</a>
</li>
<li>
<a href="link2.html">
<img src="images/historybutton.png" class="taskbarimages">
</a>
</li>
<li>
<a href="link2.html">
<img src="images/historybutton.png" class="taskbarimages">
</a>
</li>
<li>
<a href="link2.html">
<img src="images/historybutton.png" class="taskbarimages">
</a>
</li>
</ul>
</ul>
</div>
</div>
</body>
</html>
There are several ways to do it.
1)Instead of % and pixels, use vw(view width) a unit which is calculated on viewport and add min width to the li.
Eg.
/* Change the unit values as per your project */
.li{
width : 10vh;
min-width : 100px;
}
.taskbarimages{
Width : 100%;
}
2)Use media queries and set height for different screen sizes.
Eg.
#media(700px){
.li{
Width : 150px;
}
}
3)Use frameworks like bootstrap,bulma,skeleton.
you can simply use bootstrap and in bootstrap there are div classes that can use with different window sizes. Ex- There are div classes like "col-lg" for large screens, "col-md" for medium size sccreens and "col-sm" and "col-xs" for small displays. And in your html head you can simply use this line below.
<meta name="viewport" content="width=device-width,initial-scale=1">
You can go through this documentation.
https://getbootstrap.com/docs/4.1/layout/grid/
When you use above things, you dont have to worry about window being responsive.
The problem is that you are using images as your links, and images by default are not responsive. Giving .taskbarimages a width of 100% and a height of auto should solve your problem.
Since you have the height set at 50px that would make it smush weird at smaller sizes. Giving it a max height instead would help prevent this, and keep them from getting too huge.
You might need to play around with spacing and what not, but that will at lease make them scale with their container.
.taskbarimages {
width: 100%;
height: auto;
max-height: 50px;
margin-right: 10px;
}
change to this..
.taskbarimages {
height: auto;
margin-right: 10px;
width: 50%;
}
I'm trying to create the following layout using CSS:
Gray Rectangle = Container
Blue Rectangle = Image
White Rectangle = Content
Unfortunately the best I've been able to manage is this:
I have two problems with the content div:
How to make the content div sit to the right of the image without hard coding the width.
How to make the content div expand vertically to fill the container.
Apologies if a similar question has already been asked. I've read similar questions here but they all seem to relate to other layout concerns.
HTML:
<html>
<head>
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="solid">
<img id="snapshot" src="page.jpg">
<div class="content" style="margin-left: 165px;">
Test
</div>
<br style="clear:both"/>
</div>
</body>
</html>
CSS:
#snapshot {
float: left;
}
div.solid {
padding: 5px;
border: 1px solid black;
background-color: #E8E8FF;
}
div.content {
border: 1px solid black;
background-color: #FFFFFF;
}
If you know the width of the image, you can do something like this: http://jsfiddle.net/EeLjd/
Use position: absolute on the content, and set the left to the width of the image, plus the padding. Use float: left on the image.
Equal height columns are always a pain. If the image width is fixed, perhaps the easiest way is to put the image inside the content div and then push it back to the left with a negative margin:
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="solid">
<div class="content" style="margin-left: 165px">
<img id="snapshot" src="page.jpg" style="margin-left: -165px;">
Test
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
This is the sample code in which I am trying to position text below the image in a anchor.
I have problems if there are more elements in the html and browser is minimized image and text is going miss aligned
output-'Text' and image and text below the image all should be align'center' and they should stay aligned even if the browser is minimized.
<head>
<style type="text/css">
.cImg {
width:100%;
text-align:center;
}
.cImga {
display:block;
margin-top:5%;
}
.cImgimg {
position:absolute;
top:10px;
bottom:0px;
right:48%
}
</style>
</head>
<html>
<body>
<div class="cImg">Text</duiv>
<div class="cImg">
<a >
imageTag/Call us
</a>
</div>
</body>
</html>
Your widths, paddings, and margins need to be in pixels.
You need to fix your HTML and your CSS.
In your CSS, your style rules are mashed together and are not working properly. Your HTML has at least one div not properly closed.
Also, in your CSS, you should not position the img absolutely. This could be contributing to your problems.
I've simplified your HTML and CSS. This should work.
<div class="cImg">
Text<br />
<a><img src-"" /><br />
Call us</a>
</div>
.cImg {
width:100%;
text-align:center;
}
.cImg a {
display:block;
margin-top:5%;
}
http://jsfiddle.net/jasongennaro/B2nXe/
I have two divs inside a div, I want them both adjacent to each other with a margin of 10px or so separating them but instead they appear one above the other.
<div>
<div class="post" id="fact">
</div>
<div class="post" id="sortbar">
</div>
</div>
Here is my styling:
#fact{width:200px; margin-left:auto; margin-right:auto;} #sortbar{margin-left:auto; margin-right:auto;}
The whole code is within a div container wrapper with these properties:
#wrapper {
float:left;
margin-top:10px;
width:728px;
}
You have two options (choose one or the other but not both).
set float: left; on both #fact and #sortbar
set display: inline-block; on both #fact and #sortbar
The second option is better because you don't have to fix the clearing and such, as well as the fact that inline-block works a lot better layout-wise than left floating.
See this working example. You can copy and paste this HTML & CSS and try it out.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS styling - how to put these two div boxes adjacent</title>
<style type="text/css">
.wrapper .post {
-moz-border-radius:7px 7px 7px 7px;
border:1px solid silver;
float:left;
margin:10px;
min-height:100px;
padding:5px;
width:200px;
}
</style>
</head>
<body>
<h4>CSS styling - how to put these two div boxes adjacent</h4>
<div class="wrapper">
<div class="post">
<div>
Browse (Google)
</div>
<div>
This is a Div
</div>
<div>
This is a Div
</div>
<div>
This is a Div
</div>
</div>
<div class="post">
<div>
Browse (Wikepedia)
</div>
<div>
This is another Div
</div>
<div>
<div>
This is another Div
</div>
<div>
This is another Div
</div>
</div>
</div>
</body>
</html>
Something like this should do it...
#fact {
width:200px;
float: left;
margin: 0 10px 0 0;
}
#sortbar {
float: left;
}
Add float:left;:
#fact, #sortbar{
float:left;
margin-left:10px;
}
See the working demo here.
Essentially your #fact and #sortbar divs still have the default 'block' display type which, in simple terms, will put your divs in their own horizontal space. The other answers here show how to use "float" to solve your issue.
Here's some linkage for you:
box model: http://www.w3.org/TR/CSS2/box.html
display css property: http://www.w3schools.com/css/pr_class_display.asp
float tutorial: http://css.maxdesign.com.au/floatutorial/
Dan
I'm using CSS to create a header graphic:
#header {
height:125px;
background:url(/Content/images/header_footer.jpg) -0 0 no-repeat;
}
then:
<div id="header">
<!-- navigation START -->
<ul id="main_navigation">
Is there a way to make the graphic (space above the nav UL) into a clickable link?
thx
I don't think this is a good approach. If you want only the graphic to be a link put in a separate element:
CSS :
#header{
height:125px;
}
#headerImg{
display:block;
height:100px;
background:url(/Content/images/header_footer.jpg) -0 0 no-repeat;
}
HTML :
<div id="header">
<span id="headerImg"></span>
<ul id="main_navigation">
Certainly: add a link tag. CSS is great at adding graphics and visual elements to pages, but if you want the page to do anything (e.g., to link somewhere) that has to be expressed somewhere in the HTML.
A common solution to what you're trying to do is to add an empty <a> tag, styled with a width and height that match the graphic you're using.
The above answers are correct in that you need an anchor tag in your HTML, but how that plays out depends entirely on what the image is that you are linking.
I don't see any reason to ever have an empty anchor tag. That's meaningless. Most likely you are either linking a logo or wordmark or site title or some combination. That should go in your HTML code, even if you plan to replace it with an image.
The first consideration is whether your header image itself is content or design. In the case of logos, it sometimes is content. In the case of site titles or wordmarks I would more often say the image is simply design, and the text is content.
For an image that is content in it's own right:
<div id="header">
<img src="logo.png" alt="My company">
<!-- navigation START -->
<ul id="main_navigation">
For an image that is replacing content:
<div id="header">
<h1>My Company</h1>
<!-- navigation START -->
<ul id="main_navigation">
and style:
#header h1 a {
display: block;
text-indent: -999em;
height: ??px;
background-image: url(path/to/image.png);
}
In either case, you have given semantic meaning to the area used as a link. I can't quite imagine a situation where you would want a meaningless link.
Keep everything the same, move the tags within the div so it validates. Add a class to the tag.
Class then is display:block and then height and width required. Job done, validating complete.
Erm, wouldn't this do it (or have I misunderstood?):
<div id="header">
You'll probably also want to add border:none to your #header
<a href="/whereever.php">
<div id="header">
<!-- navigation START -->
<ul id="main_navigation">
Is that what you wanted?
But I agree that the above answer is a better method
just do like this:
<div style=" height: 100px; background: url('logo.png')" >
<a href="/link" style="display: block; width: 100%; height: 100%" />
</div>
You can style your hyperlink attribute directly:
Example:
<a href="<your-link>" target="_blank" style="content: ''; width: 10px; height: 10px; background-image: url('<your-image-path>'); background-repeat: no-repeat; background-size: 10px 10px; display: flex">