I have tried Position:fixed/static/relative/absolute... still overlapping on the body & sometimes the footer(blocking other parts of the body).
Image:
/* Footer */
footer {
background: #444;
}
.h-sec {
font: 22px Arial, Helvetica;
}
.sec {
font: 9px, Arial, Helvetica;
}
#f-nav a {
color: #F4F4F4;
}
#f-nav .current {
color: #A9A9A9;
text-decoration: underline;
}
.a-void {
color: #000000;
}
<footer>
<section class="f-sec1">
<h5>CAD | Tech Website©</h5>
<br>
<div id="f-nav">
Home
Services
Contact
About us
</div>
</section>
<section>
Donate :)
</section>
</footer>
for the full code(Error in images): https://jsfiddle.net/s0nk37cg/ - IT WILL LOOK FINE BUT IT IS BECAUSE THERE IS NO IMAGE, PLEASE LOOK AT THE IMAGE OR MAKE YOU OWN IMAGE TO BE CLEAR AND UNDERSTANDABLE
Try this:
Step 1 - Add the below to your css:
.clearfix:after {content:""; display:table; clear:both;}
Step 2 - Changes in your html:
Change:
<section id="container" >
- to -
<section id="container" class="clearfix">
see if that help, you might have to tweek your margins and/or padding though
Simple fix for this problem is to give a margin-bottom value to your body element to avoid overlap at the end of the page or scroll. provide the value depending on the height of your footer.
Related
I'm having issues trying to create a "banner" above the navigation bar on my website using CSS/HTML.
I can't get a background color to display in the banner, and I also can't manage to get the header text to float to the right of the banner logo/icon. Here is my code so far for both HTML header and CSS.
HTML:
<header>
<link href="index.css" rel="stylesheet">
<div class="banner">
<img src="logo.png" class="profile-picture" alt="Header Logo">
<h1 class="title">Header info 1</h1>
<h2 class="title">Header info 2</h2>
<h3 class="title">Header info 3</h3>
</div>
<nav>
<! --this part works fine so code omitted -->
</nav>
</header>
Here is the CSS:
.header img{
float: left;
}
.header .banner{
display:inline-block;
*display:inline;
padding: 20px;
background-color: #5C5F58;
margin:10px;
}
.header .banner .title{
display:inline-block;
*display:inline;
font-family: 'Bebas Neue', sans-serif;
color: #ffffff;
text-transform: uppercase;
}
So a summary of the problems I'm having:
I can't get the logo to float to the left of the title headings (they appear underneath the logo)
I can't get the background color of the banner to change
I can't get the font style or font color to change
I know it's probably the way I'm referring to these elements in the CSS, but I can't figure out how to refer to them properly.
Thanks in advance for your help
I can't get the logo to float to the left of the title headings (they
appear underneath the logo)
You give 1 sibling inside .banner float and the other one is not floating. This will make them overlap. Give either none or both of them float.
I can't get the background color of the banner to change
Use the background-color css-property.
I can't get the font style or font color to change
Change the .header into header in your css. The first one is targeting the class header and the latter one targets the header html-tag.
Pro tip: try using an online code editor with HTML and CSS like Codepen to ask your questions. This will make it easier for people to try and answer your questions resulting in faster and more elaborate answers.
I have replaced the css class to inline css checkit out if it can help
<div style='background-color:red'>
<img src="https://cdn.pixabay.com/photo/2014/04/14/20/11/pink-324175_1280.jpg" style="float:left; height: 80px; padding:5px;" alt="Header Logo">
<h1 class="title" style='font-size: 25px; color:#ffff00;'>Header info 1</h1>
<h2 class="title" style='font-size: 15px; color:#00ff00;'>Header info 2</h2>
<h3 class="title" style='font-size: 10px; color:#0000ff;'>Header info 3</h3>
</div>
<nav>
<! --this part works fine so code omitted -->
</nav>
Your specificity in your CSS is wrong. If you amend these to the code below you'll get the behaviour you're looking for.
.banner img{
float: left;
}
.banner {
display:inline-block;
*display:inline;
padding: 20px;
background-color: #5C5F58;
margin:10px;
}
.title {
display:inline-block;
*display:inline;
font-family: 'Bebas Neue', sans-serif;
color: #ffffff;
text-transform: uppercase;
}
here, i want to place Notification and profile link to right side and home assignment, my course, student, message to left side. I made one div and through CSS i put it in center position and width to some %. Now, I want to place left side link and some space and right side link. how it can be done in a single div.
enter image description here
You can have 3?
<div class="header">
<div id="left">
<--!Whatever code you wrote for the home, assignment, myCourse, student, and message buttons!-->
</div>
<div id="right">
<--!Whatever code you wrote for the notification and profiles button!-->
</div>
</div>
Does that count as one div? I can't think of another way to do it, but I really don't know that much either so others probably know.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav-right {
float: right;
}
</style>
</head>
<body>
<div class="topnav">
Home
MyCourse
Student
Assignment
Message
<div class="topnav-right">
Notification
Profile
</div>
</div>
</body>
</html>
I'm currently coding a very basic page for my friend and he said he wanted a box which would change color depending on which link he hovers over. I've tried a few things but none of it seem to work.
This is how the body looks:
body {
color: #fff;
background: #98adca;
text-align: center;
margin: 275px auto;
}
#box {
padding: 30px;
border: solid;
}
li {
list-style: none;
text-decoration: none;
}
a,
a:hover,
a:active,
a:visited {
color: #fff;
text-decoration: none;
}
.twt:hover {
background: #c3c0d1;
color: #fff;
}
<div id="box">
<h1>social media</h1>
<div class="twt">
<li>twitter
</li>
</div>
<div class="ig1">
<li>art instagram
</li>
</div>
<div class="ig2">
<li>regular instagram
</li>
</div>
<div class="fb">
<li>facebook
</li>
</div>
<div class="yt">
<li>youtube
</li>
</div>
</div>
But I don't get how I should write the CSS to make the box another color when just, for example, hovering over the YouTube link. In my current CSS only the background of the text is changed when hovering and not the entire box.
Try using jQuery with the "onmouseover" event:
HTML:
<div id="box">
<a onmouseover="colorChange()" onmouseout="revert()" href="#">Link</a>
</div>
Javascript:
function colorChange() {
$("#box").css("background-color", "red");
}
function revert() {
$("#box").css("background-color", "lightgrey");
}
Here is my pen: http://codepen.io/Hudson_Taylor11/pen/ozQogO
Hope this helps!
Use jQuery:
$(".twt").hover(
function() {
$("#box").css( "background-color", "#000" );
},
function() {
$("#box").css( "background-color", "#98adca" );
}
);
Let me know if you need help setting up jQuery.
From what I know. CSS doesn't be made to walk backward. All I can think about the way I can do is using jQuery to do that.
$(document).ready(function(){
$('.ig1 li a').hover(function(){
$('#box').css({'background-color': 'green'});
});
$('.ig2 li a').hover(function(){
$('#box').css({'background-color': 'blue'});
});
$('.yt li a').hover(function(){
$('#box').css({'background-color': 'red'});
});
$('.fb li a').hover(function(){
$('#box').css({'background-color': 'pink'});
});
});
body {
color: #fff;
background: #98adca;
text-align: center;
margin: 275px auto;
padding: 30px;
}
#box {
border: 3px solid #fff;
padding: 30px;
}
li {
list-style:none;
text-decoration:none;
}
a, a:hover, a:active, a:visited {
color: #fff;
text-decoration:none;
}
.twt:hover {
background: #c3c0d1;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="box">
<h1>social media</h1>
<div class="twt">
<li>twitter</li>
</div>
<div class="ig1">
<li>art instagram</li>
</div>
<div class="ig2">
<li>regular instagram</li>
</div>
<div class="fb">
<li>facebook</li>
</div>
<div class="yt">
<li>youtube</li>
</div>
</div>
</body>
Right, so I started thinking, you can do it with JS, but can you do it with pure CSS. Short answer - No. CSS does not allow child elements to access parent elements, because of security and other concerns. A simple Google search will show you all the things I read, there's no point of sharing docs here. But what if we trick the user, right, just hear me out. Instead of changing the colour of the parent, which is illegal, let's change the colour of a sibling - allowed by CSS LinkSo I unified your classes, for the links to share the same class (they still have separate IDs, chill). I then added a "pretend div" which will serve the purpose of the body. I stylised the "pretend", the unified div and added a "sibling on hover" CSS rule. Take a look:HTML`
<body>
<div class="box">
<h1>social media</h1>
<div class="link_divs" id="div_1">
<li>twitter</li>
</div>
<div class="link_divs" id="div_2">
<li>art instagram</li>
</div>
<div class="link_divs" id="div_3">
<li>regular instagram</li>
</div>
<div class="link_divs" id="div_4">
<li>facebook</li>
</div>
<div class="link_divs" id="div_5">
<li>youtube</li>
</div>
<div id="pretend_div">
</div>
</div>
</body>
And here's the CSS
body {
color: #fff;
background: #98adca;
text-align: center;
margin: 275px auto;
padding: 30px;
border: 3px solid #fff;
height: 100%;
}
li {
list-style:none;
text-decoration:none;
}
a, a:hover, a:active, a:visited {
color: #fff;
text-decoration:none;
}
/* IMPORTANT - This will be the new "body" */
#pretend_div{
position: absolute; /* REQUIRED */
width: 96%; /* Matching your body size */
height: 180px; /* Matching your body size */
border: 1px solid red; /* Differentiating made easy */
top:0; /* IMPORTANT - push the element to the top */
left: 0; /* IMPORTANT - push the element to the left */
margin: 275px auto; /* Grabbed the margin from your body */
padding: 30px; /* Grabbed the padding from your body */
z-index: -1; /* IMPORTANT - push the element to the back of stack */
}
/* IMPORTANT - generic link class */
.link_divs{
z-index: 0; /* IMPORTANT - set the links on-top of the pretend div */
position: relative; /* IMPORTANT - positioning */
}
/* What link you hover over ~ The pretend div */
#div_1:hover ~ #pretend_div{
background-color: #00A000; /* change bck colour */
}
#div_2:hover ~ #pretend_div{
background-color: orangered;
}
#div_3:hover ~ #pretend_div{
background-color: darkgoldenrod;
}
REMARKS I'm aware this is not the best solution, honestly - just use JS. But I wanted to try and make it happen with pure CSS. Now I tried to match the pretend div to your body as best I could, thus it looks, well, not as good as it could. I added some comments to help you understand what is happening with each line. The ones that use the "sibling style" CSS are marked by Important. Everything else is just matching your body style.JSFiddle Demo -> DEMO LINKHope that helps
instead of background try background-color
I am designing a webpage and I am almost finished but there is a small issue that I can't seem to figure out.
HTML:
<html>
<head>
<style>
* {margin:0; padding:0; text-indent:0; }
.float-box-footer{display:inline-block;position:relative;height:37px;background-color:#accb32;max-width: 860px;width: auto\9;}
.p4{font-size: 12pt; color: black; padding-left:5pt; left:0; top:7pt; font-family:National, Arial, sans-serif;position:relative;}
.p5{font-size: 7pt; color: black; padding-left:465pt;}
</style>
</head>
<body>
<div class='float-box-footer'>
<p class="p4">Learn more <a href="http://www.google.com" alt="" >Google.com</a>
</p>
<p class="p5">© 2016 Google Google of Google. All rights reserved.</p>
</div>
</body>
</html>
When you run the code it shows the green bar with text in it. When you resize the web page width wise the green bar shrinks along with the webpage and stays the proper size. However, the text in the far right does not do that. Once you go so far over it goes out of view and starts wrapping. I need the text to move along with the green bar.
I am stuck on this part and can not seem to figure it out. Can you anyone please help me out on what I am not doing?
Thank you in advance
If you want the green bar to respond to the width of the browser window, I would set your width on .float-box-footer to something like 100%. A percentage value will adjust with the window.
The problem you're facing now is that the width of .float-box-footer is being defined by the children elements inside there. The padding value on .p5 is forcing the green box open. If you give .float-box-footer a fluid width value like 100% and throw a text-align: right; or float: right; onto .p5 you should be in business.
I'd suggest reading up on the fundamentals of the CSS box model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Please do refer the code
* {margin:0; padding:0; text-indent:0; }
.float-box-footer{height:37px;background-color:#accb32;max-width: 860px;width: auto\9;}
.p4{font-size: 12pt; color: black; padding-left:5pt; left:0; top:7pt; font-family:National, Arial, sans-serif;position:relative; width:50%;}
.p5{font-size: 7pt; color: black; width:50%; text-align:right; float: right;}
<div class='float-box-footer'>
<p class="p4">Learn more <a href="http://www.google.com" alt="" >Google.com</a>
</p>
<p class="p5">© 2016 Google Google of Google. All rights reserved.</p>
</div>
<style>
* {margin:0; padding:0; text-indent:0; }
.float-box-footer{
display:inline-block;
position:relative;
height:37px;
background-color:#accb32;
max-width: 860px;
width: auto\9;
white-space: nowrap;
}
.p4{
font-size: 12pt;
color: black;
padding-left:5pt;
left:0; top:7pt;
font-family:National, Arial, sans-serif;
position:relative;}
.p5{
font-size: 7pt;
color: black;
padding-left:465pt;
}
</style>
Add a whitespace property with a no wrap value to the floatboxfooter div.
Check the floatboxfooter properties in my example. Hope this helps.
In a way this is simple but I have been trying to figure out this for hours now so I decided to write the problem down and maybe with your help I could find a solution.
On layout heading (h1, h2, h3) have a line next to them. Basically somehting like this:
Example Heading--------------------------------------------
Another Example Heading---------------------------------
One more------------------------------------------------------
So that is end result (----- is gfx as background-image). How would you do it? The background color could change and/or have opacity.
One thing what I was thinking would be this:
<h1><span>Example Heading</span></h1>
when the CSS would look lke this:
h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}
But since the background color can be something else than white (#fff) that doesn't work.
Hopefully you did understand my problem :D
Hacky but, maybe something like this:
HTML:
<h1>
<span>Test</span>
<hr>
<div class="end"></div>
</h1>
And the css:
h1 span{ float :left; margin-right: 1ex; }
h1 hr {
border: none;
height: 1px;
background-color: red;
position: relative;
top:0.5em;
}
h1 div.end { clear:both; }
Fiddle here
This worked for me.
HTML
<div class="title">
<div class="title1">TITLE</div>
</div>
CSS
.title {
height: 1px;
margin-bottom: 20px;
margin-top: 10px;
border-bottom: 1px solid #bfbfbf;
}
.title .title1 {
width: 125px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 22px;
color: #4c4c4c;
background: #fff;
text-align: center;
position: relative;
top: -12px
}
I don't think you can achieve this with pure css because the heading text could be any length. Here is a dynamic javascript solution which sets the width of the line image based on the width of the heading text.
Click here for jsfiddle demo
html (can be h1, h2 or h3)
<div class="heading-wrapper">
<h1>Example Heading</h1>
<img src="line.png" width="193" height="6" alt="" />
</div>
css
h1{font-size:16px}
h2{font-size:14px}
h3{font-size:12px}
h1,h2,h3{margin:0;padding:0;float:left}
.heading-wrapper{width:300px;overflow-x:hidden}
.heading-wrapper img{
float:right;padding-top:9px;
/*ie9: position:relative;top:-9px */
}
jquery
setHeadingLineWidth('h1');
setHeadingLineWidth('h2');
setHeadingLineWidth('h3');
function setHeadingLineWidth(selector){
var hWidth;
var lineWidth;
var wrWidth = $('.heading-wrapper').width();
hWidth = $(selector,'.heading-wrapper').width();
lineWidth = wrWidth - hWidth;
$(selector).siblings('img').width(lineWidth);
}
heading width = width of the heading text inside the wrapper
line image width = wrapper width - heading text width
Hope that helps :)