still very new to this so apologies in advance.
In my footer, the desktop view works fine. As does the landscape mobile view. Heres how it looks on those two views
Landscape views
But in mobile portrait, the social media icons are missing, where have i gone wrong?
Portrait View
HTML code for my footer
<footer class="nav navbar-fixed-bottom navbar-default">
<div class="container-fluid">
<p>© 2017 Example Example</p>
<ul>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-instagram"></span></li>
<li><span class="fa fa-snapchat"></span></li>
<li><span class="fa fa-youtube"></span></li>
</ul>
</div>
</footer>
CSS for footer styling
footer {
background-color: #000000;
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
footer p {
float: left;
text-align: center;
margin-top: 15px;
}
footer ul {
list-style: none;
display: flex;
flex: 1;
flex-direction: row;
float: right;
font-size:35px;
margin-top: 2px;
}
.fa-twitter {
margin-right:10px;
color: #fff;
}
.fa-twitter:hover{
color: #00aced;
}
.fa-facebook {
margin-right:10px;
color: #fff;
}
.fa-facebook:hover{
color: #3b5998;
}
.fa-instagram {
margin-right:10px;
color: #fff;
}
.fa-instagram:hover{
background-image: linear-gradient(45deg, #fccc63, #fbad50, #e95950, #cd486b, #8a3ab9, #4c68d7);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
.fa-snapchat {
margin-right:10px;
color: #fff;
}
.fa-snapchat:hover{
color: #fffc00;
}
.fa-youtube {
margin-right:5px;
color: #fff;
}
.fa-youtube:hover{
color: #cb2027;
}
Any help would be appreciated!
Most likely the ulwith the social icons simply doesn't fit into the width of the footer next to the text of the p tag and is pushed below into a new line (both are floated). But since the height is fixed (50px), it's hidden. Try to change the height of footer to sonething like 100px for testing, then you'll see if this is what's happening. If yes, you have to make everything a little bit smaller (within a media query) so that it can fit into one line.
Your issue is that your social icons are too big, so the entire <ul> is wrapping to the next line, but since you have a defined height on the <footer> it falls outside of the viewport. Try making your icons smaller, or maybe do something to your <p> to have its text wrap two lines in a narrower width.
You might want to try putting body tags around everything like
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body class="works_on_smartphone">
.
.
.
<footer>
.
.
.
</footer>
</body>
</html>
This might help.
Another method you might want to look at is using flexbox for you unordered list
as described here: [1]: Flexbox with Unordered list
Charles
Related
I am putting in new code as I have been studying, Hopefully this is a clearer picture of what my goal is.
I want to go from a table based to a div setup, I have tried
<div class="image"></div>
with this CSS
div.image:before {
content:url(http://placehold.it/350x150);
}
But I am unsure of the placement of the text, also putting an image in the div as well as making sure the dimension is correct.
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Site</title>
<meta http-equiv="Content Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bgimg {
background-image: ('file:///C:/Location/somimg.jpg');
}
</style>
</head>
<body>
<img src="somimg.jpg" width="246" height="94" alt="sm pic'/>
<div class="bgimg">
</div>
<div class="mainsection">
</div>
</body>
</html>
CSS code:
td {
text-align: left;
vertical-align: top;
font-family:Tahoma;
font-weight: bold;
font-size:15px;
color: #E5E5E5;
}
.div-with-bg
{
width: 263px;
height: 94px;
background-image:url('smpic.jpg');
margin:0;
padding:0;
}
a {
text-decoration: underline;
color:#9D5FBB;
}
A:Hover {
color : #DBACF2;
text-decoration : underline;
}
h1 {
color: #9929bd;
font-weight: normal;
font-size: 20px;
font-family: Tahoma;
}
H3 {
color: #7F409E;
font-weight: bold;
font-size : 20px;
font-family:Tahoma;
}
My goal is to have the div's go out to the edge of the browsers as I have multiple tables that I would like to replace with div elements. I have viewed this setup in a browser and the div and image show up but not at the edge of the page.
I don't know if I understand what you're asking but I just copied your HTML in Sublime text, and did this for css:
div.image:before {
width: 263px;
height: 94px;
background-image:url('somepic.jpg');
content:url(http://placehold.it/350x150);
margin:0;
padding:0;
}
It works for me. I have the left div on the left and the right div next to it.
Also, I would the the style of the divs in the css file:
div.right {
float: "middle"
}
div.left {
float: "left";
}
And for the HTML:
<body>
<div class="image left">Left Div</div>
<div class="right"">Right Div</div>
</body>
And if you want to make your life easier just learn flexbox. The way i learned it was using this site.
.container{
display:flex;
}
<div class="container">
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
RIGHT
</div>
</div>
This is one way to do it.
However i think that you should change the question into how i can learn to design in the browser (e.g. https://hackernoon.com/css-box-model-45ecf4ac219e) or something like that.
My webpage wont work with IE. I fully validated my webpage with W3C, and I made sure not to use anything that was not supported in all browsers (at least I think I did)
I think I tested it with IE 8 (I don't have IE installed, just used a free webprogram)
Basicly with IE the sidebar took up the full space of the page, and then the rest of the website went below the sidebar. By the way I cannot change things to absolute. (I absolutly can't change it to absolute haha)
http://www.adrianhoulewebprojects.com/
<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Adrian Houle Web Projects</title>
</head>
<body>
<div id="Sidebar">
<h3>Projects</h3>
<ul>
<li>
Under Construction
</li>
<li>Unfinished Project #2</li>
<li>Unfinished Project #3</li>
<li>Unfinished Project #4</li>
<li>Unfinished Project #5</li>
</ul>
</div>
<div class="box">
<div class="HalfSpacer"></div>
<div class="TransBox" id="Header">
<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
</div>
<div class="Spacer"></div>
<div class="TransBox" id=About>
<h2>About:</h2>
<p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies. Note: If you are accesing this on a mobile phone you will probaly notice the side bars text is sticking out of its box; this is just part of the joys of web porgraming, I cannot fix it for this page without rewriting it, but my next web page will be compatible.</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="NewStuff">
<h2>Coming Soon</h2>
<ul>
<li>
<h3>Australia Travel Blog</h3>
<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif" alt="Australian Flag" >
<p>2013-2014 Australia Travel Blog coming soon.</p>
</li>
</ul>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Contact">
<h2>Contact Info:</h2>
<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
<p>Adrian Houle</p>
<p>adrianhoule#gmail.com</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Footer">
<p>Website by Adrian Houle</p>
</div>
</div>
<div class="BottomBorder"></div>
</body>
</html>
CSS code
/***************************************** Info *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
adrianhoule#gmail.com
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/
/************************************* Table of Contents **************************************************/
/*CSS layout*/
/* -none specific elements*/
/* -classes*/
/* -ID's and children of ID's*/
/* -Other*/
/************************************************************************************************************/
/************************************** CSS code ****************************************************/
/* -none specific elements ***********************************************************************************/
p {
font-size: large;
font-weight: bolder;
}
a {
color: blue;
}
a:hover, a:focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
/* -classes **************************************************************************************************/
/*Element that contains everything except the sidebar and has the main background image.*/
.box {
display: block;
position: relative;
width: 100%; /*test and adjust to keep it from expading the browser*/
height: 100%;
border: 3px solid black;
right: 0;
top: 0px;
padding: 0;
background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
}
/*Allows for synchronised space adjustment between elements*/
.Spacer {
position :relative;
height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
position :relative;
height: 30px;
}
/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
width: 70%;
padding: 1em;
z-index: 1;
left: 20%;
position: relative;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.Italic {
font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/
/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
height: 100%;
width: 10%;
left: 0px;
top: 0px;
padding: 2%;
display: inline;
position: fixed;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
border-style: solid;
border-width: 3px;
z-index: 2;
}
#Sidebar ul {
padding-left:0;
}
#Sidebar li {
margin: 10%;
}
/*Header text*/
#Header h1 {
text-align: center;
}
#Footer p {
text-align: center;
}
/* -Other (empty)*****************************************************************************************/
Thanks for any help.
You should force IE8 to render with edge:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
It can be placed within the head of your HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- other head tags -->
</head>
<body>
</body>
</html>
Check out this answer for more a more indepth look at how it can be used.
I am programing a webpage with html and CSS. My pseudo class :hover stopped working on my webpage, but :focus still works. Hover was working fine, and then I made an unrelated edit (added an image to one of my blocks), and noticed it had stoped working. I deleated my last change and it still did not work.
I have checked everything and ran both the html and css through validators and there are no errors other than something about using character encoding, but I know it worked fine without that. It really makes no sense!
I will show my page and my code. Keep in mind this is my very first webpage, I know that I did not optimize my background images properly, and may have some unnecessary divs, but I feel pretty good about it considering a week ago I did not know what html was. I have heavily commented and organised my CSS, you can find my hover code near the top along with the rest of the none classes/ID's. The hover link is the only link on the webpage on the sidebar.
http://www.adrianhoulewebprojects.com/HomePage.html
Here is my HTML
<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
<title>Adrian Houle Web Projects</title>
</head>
<body>
<div id="Sidebar">
<h3>Projects</h3>
<ul>
<li>
Under Construction
</li>
<li>Unfinished Project #2</li>
<li>Unfinished Project #3</li>
<li>Unfinished Project #4</li>
<li>Unfinished Project #5</li>
</ul>
</div>
<div class="box">
<div class="HalfSpacer"></div>
<div class="TransBox" id="Header">
<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
</div>
<div class="Spacer"></div>
<div class="TransBox" id=About>
<h2>About:</h2>
<p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies.</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="NewStuff">
<h2>Coming Soon</h2>
<ul>
<li>
<h3>Australia Travel Blog</h3>
<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif" alt="Australian Flag" >
<p>2013-2014 Australia Travel Blog coming soon.</p>
</li>
</ul>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Contact">
<h2>Contact Info:</h2>
<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
<p>Adrian Houle</p>
<p>adrianhoule#gmail.com</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Footer">
<p>Website by Adrian Houle</p>
</div>
</div>
<div class="BottomBorder"></div>
</body>
</html>
Here is my CSS
/***************************************** Info *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
adrianhoule#gmail.com
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/
/************************************* Table of Contents **************************************************/
/*CSS layout*/
/* -none specific elements*/
/* -classes*/
/* -ID's and children of ID's*/
/* -Other*/
/************************************************************************************************************/
/************************************** CSS code ****************************************************/
/* -none specific elements ***********************************************************************************/
p {
font-size: large;
font-weight: bolder;
}
a {
color: blue;
}
a :hover, :focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
/* -classes **************************************************************************************************/
/*Element that contains everything except the sidebar and has the main background image.*/
.box {
display: block;
position: relative;
width: 100%; /*test and adjust to keep it from expading the browser*/
height: 100%;
border: 3px solid black;
right: 0;
top: 0px;
padding: 0;
background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
}
/*Allows for synchronised space adjustment between elements*/
.Spacer {
position :relative;
height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
position :relative;
height: 30px;
}
/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
width: 70%;
padding: 1em;
z-index: 1;
left: 20%;
position: relative;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.Italic {
font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/
/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
height: 100%;
width: 10%;
left: 0px;
top: 0px;
padding: 2%;
display: inline;
position: fixed;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
border-style: solid;
border-width: 3px;
z-index: 2;
}
#Sidebar ul {
padding-left:0;
}
#Sidebar li {
margin: 10%;
}
/*Header text*/
#Header h1 {
text-align: center;
}
#Footer p {
text-align: center;
}
/* -Other (empty)*****************************************************************************************/
Thank you for any help.
CSS is very touchy about putting extra spaces in it. Combine a with :hover like this:
a:hover, a:focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
Also want to make it a:focus unless you want every element to be affected.
Remove the space between a and :hover
a:hover{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
I have the following HTML code where the subnav div is a collection of div tags that will act as tabs across the featuredexhibit div. Problem is that there is a white space adding between the top of the featureexhibit div and bottom of the subnav tab.
HTML:
<div id="subnav">
<div id="subnavtab">Plan Your Visit</div>
<div id="subnavtab">Tour the Museum</div>
<div id="subnavtab">Program & Events</div>
<div id="subnavtab">Membership</div>
<div id="subnavtab">Donate</div>
</div>
<div id="featuredexhibit">
Featured Exhibit - this can be a rotating menu of exhibits
</div>
CSS:
#subnav { margin-top: 20px; width: 740px; display: inline-block; }
#featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
#subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; display: inline-block; }
I have tried using the Chrome Developer Tools to find the issue but I do not have any luck or I do not know what to look for.
There doesn't seem to be any problem with your code.
Are you sure no other CSS is conflicting? Make sure the CSS tags you are using are from the last CSS added in the HTML.
For example,
<link rel="stylesheet" type="text/css" href="css-1.css">
<link rel="stylesheet" type="text/css" href="css-2.css">
If there are common tags in "css-2.css", then it will over ride any similar tags of "css-1.css"
You should give a float to the subnav and then clear the featuredexhibit and then only it couldn't save a space between them.
#subnav{float: left;}
#featuredexhibit{clear: both;}
See this Demo
I'm honestly not sure why the white space is there, but I got it fixed in Chrome by removing the inline-block and creating a clear both.
CSS
.subnav { margin-top: 20px; width: 740px; }
.featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
.subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; }
.clear { clear: both; }
HTML
<div class="subnav">
<div class="subnavtab">Plan Your Visit</div>
<div class="subnavtab">Tour the Museum</div>
<div class="subnavtab">Program & Events</div>
<div class="subnavtab">Membership</div>
<div class="subnavtab">Donate</div>
<div class="clear"></div>
</div>
<div class="featuredexhibit">
Featured Exhibit - this can be a rotating menu of exhibits
</div>
jsFiddle: http://jsfiddle.net/vFFx5/
I know this is old, but since I just ran into this issue I might as well point future visitors to this article: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
The problem seems to be that a new line counts as white space character in a row of inline-block elements. To solve this use floated blocks or flexbox.
I have a pure CSS collapsable div which is based on someone else's code who uses the :target psuedoclass. What I am trying to set up is a page with 12+ questions, and when you click on the + button the answer div expands beneath. I cannot figure out how to make multiple collapsing div elements on this page without writing a ton of extra CSS. Anyone have suggestions on how to write this so my CSS code is minimized? (i.e., so i dont have to input a bunch of unique selectors for each of the 12+ questions).
I cannot use Javascript since this is going on a wordpress.com site which does not allow JS.
Here is my jfiddle: http://jsfiddle.net/dmarvs/94ukA/4/
<div class="FAQ">
+
-
<div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
<div class="list">
<p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
</div>
</div>
/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */
.FAQ {
vertical-align: top;
height:auto !important;
}
.list {
display:none;
height:auto;
margin:0;
float: left;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
/*style the (+) and (-) */
.hide, .show {
width: 30px;
height: 30px;
border-radius: 30px;
font-size: 20px;
color: #fff;
text-shadow: 0 1px 0 #666;
text-align: center;
text-decoration: none;
box-shadow: 1px 1px 2px #000;
background: #cccbbb;
opacity: .95;
margin-right: 0;
float: left;
margin-bottom: 25px;
}
.hide:hover, .show:hover {
color: #eee;
text-shadow: 0 0 1px #666;
text-decoration: none;
box-shadow: 0 0 4px #222 inset;
opacity: 1;
margin-bottom: 25px;
}
.list p{
height:auto;
margin:0;
}
.question {
float: left;
height: auto;
width: 90%;
line-height: 20px;
padding-left: 20px;
margin-bottom: 25px;
font-style: italic;
}
Depending on what browsers/devices you are looking to support, or what you are prepared to put up with for non-compliant browsers you may want to check out the <summary> and <detail> tags. They are for exactly this purpose. No css is required at all as the collapsing and showing are part of the tags definition/formatting.
I've made an example here:
<details>
<summary>This is what you want to show before expanding</summary>
<p>This is where you put the details that are shown once expanded</p>
</details>
Browser support varies. Try in webkit for best results. Other browsers may default to showing all the solutions. You can perhaps fallback to the hide/show method described above.
Using <summary> and <details>
Using <summary> and <details> elements is the simplest but see browser support as current IE is not supporting it. You can polyfill though (most are jQuery-based). Do note that unsupported browser will simply show the expanded version of course, so that may be acceptable in some cases.
/* Optional styling */
summary::-webkit-details-marker {
color: blue;
}
summary:focus {
outline-style: none;
}
<details>
<summary>Summary, caption, or legend for the content</summary>
Content goes here.
</details>
See also how to style the <details> element (HTML5 Doctor) (little bit tricky).
Pure CSS3
The :target selector has a pretty good browser support, and it can be used to make a single collapsible element within the frame.
.details,
.show,
.hide:target {
display: none;
}
.hide:target + .show,
.hide:target ~ .details {
display: block;
}
<div>
<a id="hide1" href="#hide1" class="hide">+ Summary goes here</a>
<a id="show1" href="#show1" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>
<div>
<a id="hide2" href="#hide2" class="hide">+ Summary goes here</a>
<a id="show2" href="#show2" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>
#gbtimmon's answer is great, but way, way too complicated. I've simplified his code as much as I could.
#answer,
#show,
#hide:target {
display: none;
}
#hide:target + #show,
#hide:target ~ #answer {
display: inherit;
}
Show
Hide
<div id="answer"><p>Answer</p></div>
You just need to iterate the anchors in the two links.
+
-
See this jsfiddle http://jsfiddle.net/eJX8z/
I also added some margin to the FAQ call to improve the format.
Or a super simple version with barely any css :)
<style>
.faq ul li {
display:block;
float:left;
padding:5px;
}
.faq ul li div {
display:none;
}
.faq ul li div:target {
display:block;
}
</style>
<div class="faq">
<ul>
<li>Question 1
<div id="question1">Answer 1 </div>
</li>
<li>Question 2
<div id="question2">Answer 2 </div>
</li>
<li>Question 3
<div id="question3">Answer 3 </div>
</li>
<li>Question 4
<div id="question4">Answer 4 </div>
</li>
<li>Question 5
<div id="question5">Answer 5 </div>
</li>
<li>Question 6
<div id="question6">Answer 6 </div>
</li>
</ul>
</div>
http://jsfiddle.net/ionko22/4sKD3/