I know that this should be a simple fix, but I just can't seem to figure out how to place my nav to sit directly on top of the h4 that is positioned on the bottom of the page. I want to have this feature continue throughout my site and don't want to move forward until I can resolve this issue. Any Help is very much appreciated.
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Nathan Langer</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper=">
<div id="name">
<h1>Nathan Langer</h1>
</div>
<div id="content"></div>
<div id="footer">
<nav>
<ul>
<li><strong>home</strong><img class="logos" src="images/homelogo.png" width="45"height="35"></li>
<li><strong>resume</strong><img class="logos" src="images/resume logo.png" width="36"height="37"></li>
<li><strong>portfolio</strong><img class="logos" src="images/portfolio logo.png" width="45"height="35"></li>
<li><strong>what i do</strong><img class="logos" src="images/camera logo.png" width="60"height="37"></li>
</ul>
</nav>
<h4>for professional video and media production</h4>
</div>
</div> <!-- close for wrapper -->
</body>
</html>
CSS
body {
background: url(images/test.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#wrapper {
margin: auto}
#name {
text-align: center;
margin-top: -65px;
font-size: 40px;
color: white;
font-family: 'Dr Sugiyama', cursive;
text-shadow: 0 1px 0 #333,
0 2px 0 #333,
0 3px 0 #333,
0 4px 0 #333,
0 5px 0 #333,
0 5px 4px #989898;
}
#footer {
width:100%;
height:93px;
position:absolute;
bottom:0;
left:0;
right:0;
}
nav{position: relative;text-align: center;}
nav ul {list-style: none; }
li {
display: inline;
border: 2px solid rgb(256,256,256);
font-family:'Ubuntu', sans-serif;
border-top-left-radius:1em;
border-top-right-radius:1em;
background-color: #A3A3A3 ;
padding: 13px;
margin: 10px;
}
img.logos{vertical-align: -11px; padding-left: 3px;}
nav li a:hover {text-decoration:none ;}
nav li a:visited {color: rgb(256,256,256);}
nav li a:link {text-decoration:none; color: white;}
h4 {
text-decoration:none ;
text-align: center;
background-color: #A3A3A3;
color: white;
font-family: Tahoma, Geneva, sans-serif;
}
/* resume page */
/* end resume page */
/* portfolio page */
#warning {
text-align: center;
color: white;
font-size: 35px;
padding-top: 100px;
}
Check if this works: http://jsfiddle.net/IronFeast/n85Cd/2/
Changed the h4 to div.production, removed the height of the footer and added position:relative
Try adding "clear:both" to the main nav designation:
nav{position: relative;text-align: center; clear:both}
Related
This is my code. It starts off in HTML and the other half is CSS.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>
Home - Hasan's Website
</title>
</head>
<body>
<div class="navigation">
<a class="active" href = "#home">Home</a>
About Me
Careers
Contact Us
Web Development
</div>
<div class="intro">
<h1>Computer Engineering</h1>
</div>
</body>
</html>
body, html{
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight:400;
line-height:1.8em;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
body {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
width: 100%;
color: white;
font-size: 100px;
padding: 10px;
}
I really need help putting the Computer engineering title in the center of the background image, also I want a bar of colour behind it. Can anyone please help me? This stuff is due tomorrow!
Add bar image address in jumbotron css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>
Home - Hasan's Website
</title>
<style>
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
}
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(gg.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
border: 1px;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
body {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
width: 100%;
color: white;
font-size: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div class="navigation">
<a class="active" href="#home">Home</a>
About Me
Careers
Contact Us
Web Development
</div>
<div class="intro">
<div class="jumbotron">
<h1>Computer Engineering</h1>
</div>
</div>
</body>
</html>
My CSS works fine but after adding Bootstrap through source files, some CSS styles were removed and were overridden by bootstrap's. I also tried using Bootstrap CDN but still, the same results. I also tried my previous projects as a reference, everything's the same but this one's not working. Here's my code:
This is my CSS and HTML File:
* {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
}
#font-face {
font-family: Minima;
src: url(font/Minima.TTF);
font-family: Arial;
src: url(font/arial.TTF);
}
/*home background image*/
#header {
background-image: url("../images/home.jpg");
min-height: 700px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
#mytitle {
color:#f2f2f2;
font-size: 60pt;
padding-top:20%;
font-family: Minima;
text-align:center;
}
#subtitle {
color:#f4f4f4;
font-size: 18pt;
float:right;
margin-right:15.5%;
font-family: Arial;
}
#subtitle2 {
color:#f4f4f4;
font-size: 18pt;
float:right;
margin-right:15.5%;
font-family: Arial;
}
/*navigation */
.div-menu .sub-menu{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
margin-right:5%;
margin-left:5%;
float:right;
font-family: Arial;
}
.div-menu .sub-menu li {
float:left;
}
.div-menu .sub-menu li a {
display: block;
text-decoration: none;
color: #FFF;
text-align:center;
padding: 14px 16px;
}
/*for ghost button*/
.ghost-button-semi-transparent {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
border-color 0.2s ease-out;
border-radius: 7px;
font-size:15pt;
}
.ghost-button-semi-transparent:hover,
.ghost-button-semi-transparent:active {
background-color: #fff; /* fallback */
background-color: rgba(255, 255, 255, 0.4);
border-color: #fff; /* fallback */
border-color: rgba(255, 255, 255, 0.4);
transition: background-color 0.3s ease-in,
border-color 0.3s ease-in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NAME | Web Profile</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div id="header">
<div class="div-menu">
<ul class="sub-menu">
<li>LOGO</li>
<li>Home</li>
<li>Profile</li>
<li>Experiences</li>
<li>Education</li>
</ul>
</div>
<div class="text">
<h1 id="mytitle">SOME CAPTION HERE</h1>
<h2 id="subtitle">CAPTION AGAIN</h2>
<br>
<br>
<h2 id="subtitle2">CAPTION AGAIN</h2>
</div>
</div>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>
Your order should be like this
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
you should change the order in which your css file is loaded ie,
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
Read more about it here: http://www.w3.org/TR/CSS2/cascade.html
Edit1:
As shown below * and body(tags) has lower precedence than class selectors, because of that your custom CSS is getting overridden by bootstrap, as bootstrap gives styles based on the classes such as container. To resolve this you can give a class to the body and apply all styles to that class.
* {
color: red;
}
.class{
color:purple;
}
span{
color: orange;
}
<p>p tag with out any class</p>
<p class="class"> Class has more precedence than * <p>
<span class="class"> Class has more precedence than tag(such as body, span, p etc) </span>
Hi I'm learning html and css by Youtube tutorial, how to slide out navigation with css/html, but I've stucked with some codes.
Everything is working fine except
#sidebartoggler
display: none
&:checked + .page-wrap
.sidebar
left:0px
this one. When I click this, the sidebar should come out but it isn't.
I tried to fix the problem, trying to find anything wrong on my code for two days, but I couldn't and exhausted.
It would be a great help for me to figure what is wrong.
Please help me
ps. youtube link is https://www.youtube.com/watch?v=d4P8s-mkMvs
#import 'bourbon'
.page-content
position: relative
z-index:0
.toggle
text-decoration: none
font-size:30px
color: black
+position(fixed, 20px 0 0 200px)
z-index:1
.sidebar
+position(fixed, 0px 0 0px 0px)
width: 120px
padding: 30px
background: #333
z-index:0
li
color: rgba(255,255,255,0.8)
font-family: "Ubuntu",sans-serif
font-size: 16px
-webkit-font-smoothing: antialiased
margin-bottom: 16px
cursor:pointer
&:hover
color: rgba(255,255,255,1)
#sidebartoggler
display: none
&:checked + .page-wrap
.sidebar
left:0px
<!doctype html>
<html>
<head>
<title>GagaPro</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/slidebar.css">
</head>
<body>
<input type="checkbox" id="sidebartoggler" name="" value="">
<div class="page-wrap">
<label for="sidebartoggler" class="toggle">☰</label>
</div>
<div class="page-content">
<div class="wrapper">
</div>
</div>
<div class="sidebar">
<ul>
<li>Home</li>
<li>Project</li>
<li>Client</li>
<li>Blog</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</body>
</html>
I have tried your code using normal css and i found some thing cool.
No need to change any thing in HTML, only css will change little bit
CSS :
.page-content{
position: relative;
z-index:0;
}
.toggle{
text-decoration: none;
font-size:30px;
color: black;
+position(fixed, 20px 0 0 200px);
z-index:1;
}
.sidebar{
+position(fixed, 0px 0 0px 0px);
width: 120px;
padding: 30px;
background: #333;
z-index:0;
display:none;
}
li{
color: rgba(255,255,255,0.8);
font-family: "Ubuntu",sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
margin-bottom: 16px;
cursor:pointer;
}
li:hover{
color: rgba(255,255,255,1);
}
#sidebartoggler{
display:none;
}
#sidebartoggler:checked ~ .sidebar{
display:block;
}
very new to code and all this, i am trying to make a simple page with html and css for class. Basically the problem is there is a space between the picture div and the menu div, you can see if you check out my code, also if there is anything that i really don't need, it would be really helpful to point it out. Also i am making this in Chrome. Cheers :)
PS. I am only showing one page of the html so the links wont work.
Here the link to jsFiddle.
HTML
<!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>
<title>Cristiano Ronaldo</title>
<link rel="stylesheet" type="text/css" href="../realstyle.css" />
</head>
<body>
<div id="contentwrap">
<div id="languagebar">
<ul id="languagelist">
<li id="Ronaldo">CRISTIANO RONALDO</li>
<li>Português</li>
<li>English</li>
</ul>
</div> <!--languagebar-->
<div id="bigpic">
<a href="http://www.realmadrid.com/cs/Satellite/en/Home.htm">
<img id="Madrid" border="0" src="../GalleryI/Madrid.jpg" width="100" height="100px" />
</a>
<a href="http://www.manutd.com/Splash-Page.aspx">
<img id="United" border="0" src="../GalleryI/United.jpg" width="120" height="100px" />
</a>
</div> <!--bigpic-->
<div id="menubar">
<ul id="menubarlist">
<li>Home</li>
<li>Early Life</li>
<li>Clubs</li>
<li>Records/medals</li>
<li>Personal Life</li>
</ul>
</div> <!--menubar-->
<div id="content">
</div> <!--Content-->
</div> <!--contentwrap-->
</body>
</html>
CSS
body {
background-image: url("GalleryI/Background.jpg");
width:100%;
margin:0;
padding:0;
}
A:hover {text-decoration: none; color:#CD2626;}
a:link {color: White; text-decoration: none;}
a:visited {color: White; text-decoration: none;}
#contentwrap {
text-align:center;
white-space: nowrap;
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#languagebar {
width:800px;
height:30px;
background-image: url("GalleryI/languagebaricon.jpg");
background-repeat: no-repeat;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
margin:0 auto;
}
#languagelist li {
display:inline;
list-style:none;
position: relative;
line-height:25px;
padding: 2px 10px 0px 10px;
color:#CD2626;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: right;
}
#languagelist li a:hover{
color:#CD2626;
}
#bigpic {
width:800px;
height:100px;
background: #fff;
background-image: url("GalleryI/Jersey1.jpg");
background-repeat: no-repeat;
background-position: 190px -155px;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
margin:0 auto;
}
#menubar {
width:800px;
height:40px;
background-image: url("GalleryI/menuicon.jpg");
background-repeat: no-repeat;
padding:0;
white-space: nowrap;
list-style:none;
font-family: Impact, Arial, sans-serif;
text-transform:uppercase !important;
font-size: 16px;
margin:0 auto;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
}
#Madrid {
float: left;
}
#United {
float: left;
}
#content {
width: 800px;
height: 726px;
background-color: #FFF;
color: white;
font-size: 18px;
text-align:center;
font-family: arial,sans-serif;
color: white;
margin:0 auto;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
}
li#Ronaldo {
line-height:25px;
padding: 2px 25px 2px 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: white;
float: left;
font-weight: bold;
}
ul#menubarlist li {
display:inline;
position: relative;
letter-spacing:2px;
line-height:35px;
padding: 0px 25px 0px 25px;
color:#CD2626;
}
ul#menubarlist li a:hover{
color:#CD2626;
}
ul#list-nav li a {
text-decoration:none;
color:#ffffff;
}
Just remove this:
#languagebar{
border-left:1px solid #FFFFFF;
}
There is a white space because you have a border!
Edit:
If you mean the gap between the images, see http://jsfiddle.net/GZ8ZT/5/
Just add
#bigpic{font-size:0}
And if you want to add text inside bicpic, you will also need
#bicpic>*{font-size:16px} /* Or your default font-size value */
Remove this
border-left:1px solid #FFFFFF;
from *css #languagebar *
I am not a designer but today i am doing an experiment with css
My problem is i want to display an image on my webpage using css only like Here's a link
http://gsg.com.au/solutions/six-drivers-of-sustainable-growth-healthy-brands
Here is my sample code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups 2</title>
<style type="text/css">
<!--
body {position: relative; background: black; margin: 0; padding: 0;}
div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #FFC; background:;
border-right: 5px solid #505050;}
div#links #whl1 a:hover {color: #411; background: #AAA;
border-right: 5px double white;}
div#links a img {height: 0; width: 0; border-width: 0;}
div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}
div#content {position: absolute; top: 26px; left: 161px; right: 25px;
color: #BAA; background: #22232F;
font: 13px Verdana, sans-serif; padding: 10px;
border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}
h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right;background: #00ff00 url('wheel01.png') no-repeat fixed center;
; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:visited {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:link:hover {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
div#content a:visited:hover {background: #00ff00 url('wheel01.png') no-repeat fixed center;}
code, pre {color: #EDC; font: 110% monospace;}
-->
</style>
</head>
<body>
<div id="links">
<a id ="whl1"><img src="wheel01.png" ></a>
<a id ="whl2"><img src="wheel02.png"></a>
<a id ="whl3"><img src="wheel03.png"></a>
<a id ="whl4" ><img src="wheel04.png"></a>
<a id ="whl5"><img src="wheel05.png"></a>
<a id ="whl6"><img src="wheel06.png"></a>
</div>
</div>
</body>
</html>
But it is not working for me please suggest me how they are doing with some example or ideas thanks
Use the hover pseudo-class.
#foo {
background-image: url('not-hovered.png');
}
#foo:hover {
background-image: url('hovered.png');
}
<div id="links">
<a id ="whl1"></a>
</div>
#links a{
width:123px;
height: 123px;
background: url("your_normal_image.jpg") no-repeat;
display: block;}
#links wh11{
width:123px;
height: 123px;
background: url("your_HOVER_image.jpg") no-repeat; }
Remove <img> from your HTML
Blasteralfred's ans is also R8 but in this case we cant change image, we can jst set opacity of current image
Here you go - a working example: http://jsfiddle.net/kKLKC/
The HTML (in a nutshell):
<p><a class="blue" href="http://www.icanhascheezburger.com"></a></p>
Note that the has been removed from the HTML markup.
The CSS:
a.blue { display:block ;
width:151px ;
height:180px ;
background:url("http://www.digitaldemo.net/blue-bunny.png") no-repeat ;
}
a.blue:hover { background:url("http://www.digitaldemo.net/pink-bunny.png") no-repeat ;
}
You will need to do a CSS set (a.classname and a.classname:hover) for each link.