Hello I am working on my website. I would like to know how to place contact icons at the header section to the far right. (relative to the text of the header that reads creative mind. How do I do that? Below is my code. Help please. Thanks.
HTML
<body>
<div class="auto-style1">
<div id="header">
Header
<h1>Creative Mind</h1>
</div>
<div id="nav">
Navigation
<ul>
<li>Homepage</li>
<li>Tips and Tricks</li>
<li>About me</li>
<li>Get in Touch</li>
</ul>
</div>
<div id="main">Main</div>
<h3>Contact Information</h3>
<h3>Phone</h3>
<p>1-323</p>
<h3>Email</h3>
<img src=/>gmail
<h3>Social Networks</h3>
<img src=/>
<div id="footer">
Footer
<h3>Creative Mind Jonathan Mourning</h3>
</div>
</body>
CSS
#charset "utf-8";
/* CSS Document */
body {
background-color: #A6FFFF;
width: 100%;
}
#header,
#main,
#footer {
display: block;
position: relative;
float: left;
}
#header,
#footer {
height: 15%;
width: 100%;
}
#header {
margin-bottom: 2px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#footer {
margin-top: 2px;
text-align: right;
border: 2px;
}
#main {
position: relative;
width: 70%;
height: 100%;
margin: 0 auto;
background-color: #FFF;
float: center;
text-align: center;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 10px;
}
You can use float: right for example
HTML:
<div id="header">Header
<img src="http://lorempixel.com/100/50">
<h1>Creative Mind</h1>
</div>
CSS:
.contact {
float: right;
}
JSFiddle
Try adding unique classname for your icon:
#header{
position:relative; //makes relative to browser
}
#header .myIcon {
position:absolute; // makes to position to right corner of header
right:0px;
float:right;
}
Fiddle: http://jsfiddle.net/WLR5S/7/
You can use position: relative; and then positioning the icon with top, left, right and bottom property.
Related
I am new to CSS and it's not clear to me why the header and menu links stay within the container but not the other elements. I can fix this by including margins for the other elements but I would like to understand why this is happening.
Is there a way to keep elements within the container without specifying margins for each element or (div). See JS fiddle code and code below, for example. I would like to keep the #main content within #container.
JSFiddle link: http://jsfiddle.net/6qt8ry1L/
body {
background-color: #F7F7F0;
}
#container {
width: 1000px;
position: relative;
margin: 0 auto;
text-align: center;
background-color: #8e8e20;
}
header {
background-image: url("header.jpg");
background-repeat: no-repeat;
height: 224;
}
h1 {
color: #ffffff;
padding: 10px;
text-align: left;
}
#nav ul {
list-style: none;
background-color: black;
height: 40px;
margin-top: 0;
color: white;
}
#nav li {
display: inline-block;
padding-top: 10px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 10px;
}
#MainContent {
margin-top: 10px;
padding-top: 20px;
border-top: 1px solid #545454;
background-color: #b6c5a3;
height: 200;
color: #492b40;
font: 11px/12px Verdana, Arial, Helvetica, sans-serif;
}
#col1 {
width: 20%;
height: 30%;
margin-top: 15px;
float: left;
background-color: lightgray;
}
#col2 {
float: left;
margin-left: 1%;
margin-top: 15px;
height: 30%;
width: 20%;
background-color: lightgray;
}
#col3 {
float: left;
margin-top: 15px;
width: 20%;
height: 30%;
margin-left: 1%;
background-color: lightgray;
}
#Content:after {
content: '';
display: block;
clear: both;
}
#footer {
float: left;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #545454;
background-color: #b6c5a3;
height: 60;
width: 950px;
color: #492b40;
font: 11px/12px Verdana, Arial, Helvetica, sans-serif;
}
<html>
<head>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div id="container">
<header>
<div id="heading">
<h1> Hello there !!! </h1>
</div>
</header>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</div>
<div id="MainContent">
Main Content
</div>
<div id="Content">
<div id="col1">
Col1
</div>
<div id="col2">
col2
</div>
<div id="col3">
col 3
</div>
</div>
<div id="footer">
<p>Copyright 2004 xyz Association</p>
<p>All rights reserved etc etc..</p>
</div>
</div>
<!--end container-->
</body>
</html>
Your container is closed just after closing div#nav.
Put that closing div at the end and your problem'd be fixed.
I noticed you have more closing tags than you have opening DIVs. As a habit when ever you create a <DIV> be sure to insert </DIV> immediately. To keep track of the opening and closing DIVs. I am guessing this mismatch closing DIVs is likely the cause of your problem.
in my web i have a fixed navigation bar and below it i have some another divs - the nav bar links connect to those links.
the problem is when i click on some link the fixed nav bar covered the begining of the div. and what i want and tring to do is that the nav bar will be at the start of the div and so it wont covered the begining.
here is the link for the result.
here is my html code:
<body>
<div id="header">
<div id="nav_bar">
<ul>
<li>בית</li>
<li>מי אנחנו</li>
<li>מוצרים</li>
<li>צרו קשר</li>
<li><img src="1.png"></img></li>
</ul>
</div>
</div>
<div id="main_pics" class="container">
<!-- photos here -->
<div id="main_photo1" class="phocont first">
</div>
<div id="main_photo2" class="phocont">
</div>
<div id="main_photo3" class="phocont">
</div>
<div id="main_photo4" class="phocont">
</div>
<div id="main_photo5" class="phocont">
</div>
</div>
<div id="about_us" class="container">
<h1>עץ כנעני - כשעיצוב ואיכות נפגשים</h1>
<p> וייצור המוצר.</p>
<p>א.</p>
</div>
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
</div>
<div id="connect_us" class="container">
<h1>תאמו איתנו פגישה עוד היום</h1>
</div>
<div id="down_nav_bar" class="container">
</div>
<div id="credit" class="container">
</div>
</body>
here is my css code:
body{
background-color: white;
margin: 0px;
padding: 0px;
}
#nav_bar{
background: rgba(255,255,255,0.9);
height: 55px;
position: fixed;
width: 100%;
top: 0;
left: -2px;
z-index: 2;
}
#nav_bar ul{
padding: 0px;
text-align: center;
direction: rtl;
}
#nav_bar ul li {
display: inline-block;
padding: 0 10px;
color: gray;
float: inherit;
font-family: "alefregular";
font-size: 23px;
}
#nav_bar ul li a{
color: inherit;
text-decoration: none;
}
#nav_bar ul li a:hover{
color:#a51212;
}
#nav_bar img{
height:18px;
position:absolute;
padding-right:20px;
top:25px;
z-index:-1px;
}
#about_us{
text-align: center;
/*height: 250px;*/
height: 100%;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color:gray;
}
#about_us p{
width: 55%;
margin: auto;
text-align: center;
direction: rtl;
padding-bottom: 10px;
line-height: 30px;
}
#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
}
Try adding padding top to container
.container
{
padding-top: 55px;
}
fiddle
If you do not wish to have the text move down by 'x' pixels, you can programmatically scroll with an adjusted offset using jQuery:
$('html, body').animate({
scrollTop: $(target).offset().top - 55
}, 1000);
Notice, this example does not use padding-top:
fiddle
Or, without jQuery:
window.scrollTo(0, document.getElementById(targetSection).offsetTop-55);
fiddle
The easiest way by far would be to add some padding (as much as the navbar is high) to the divs that serve as targets for your links:
div.container{ padding-top: 55px; }
For the sake of semantics, I'd recommend you also use section elements instead of those meaningless divs, etc… https://html.spec.whatwg.org/multipage/semantics.html#sections
I want to cause an overlay on mouseover for my three images. I believe it will be best to use jQuery after creating a div. However, when I add a new div to my layout (below each of the <img> in my code) My layout is screwed up; goes from horizontal list to vertical list if i try to add in any <div> below my <img>.
I mainly want the overlay just sitting there. Im sure I can figure out mouseover action, but main issue is I cannot generate initial overlay
stackoverflowers: please help me add in an overlay div that will ultimately be transparent.
home.html I have commented out my attempt at placing overlay divs
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
PROGRAM
<ul id="programDrop">
<li><a href='#'>INSPECTIONS</a></li>
<li><a href='#'>SOFTWARE</a></li>
<li><a href='#'>SAVINGS</a></li>
</ul>
</li>
<li>LOGIN
<ul id="loginDrop">
<li><a href='#'>TECHNICIAN LOGIN</a></li>
<li><a href='#'>CUSTOMER LOGIN</a></li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
<div id="midMain">
<div class="circularImg">
<img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.contemporist.com/photos/e4delmar.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.rkmheatingandair.com/service-tech2.jpg"/>
<!-- <div class="overlay"></div> -->
</div>
</div>
</body>
</html>
stylesheet.css
body {
margin: 0;
}
.header {
background-color: white;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
font-size: 1rem;
}
#headerMenu > li {
display: inline-block;
}
#headerMenu > li:nth-child(1) {
color:red;
}
#headerMenu li a {
text-decoration: none;
color: black;
margin: 2rem;
padding: 0;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#programDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#programDrop li a{
color: black;
text-align: left;
list-style: none;
}
/* Sub Menu for Link Two */
#loginDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#loginDrop li a{
color: black;
text-align: left;
}
/* Photos on home page */
#midMain {
border: 1px solid red;
background-color: white;
text-align: center;
}
.circularImg {
overflow: hidden;
display: inline-block;
margin: auto;
padding: 0;
}
/* Removed code because nothing works as of yet */
.overLay {
}
/* Sets img imports as circular by default */
img {
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
opacity: .5;
}
included jQuery script.js
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(1)').mouseenter(function() {
$('#programDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(1)').mouseleave(function() {
$('#programDrop').css('visibility','hidden');
});
});
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(2)').mouseenter(function() {
$('#loginDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(2)').mouseleave(function() {
$('#loginDrop').css('visibility','hidden');
});
});
As per comments
CSS
.overlay {
background:black;
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
}
HTML
<div class="overlay"><img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/></div>
CODE
$(document).on("mouseover", "img", function() {
$(".overlay").css({"z-index": "999"});
$("img").css("opacity",".5");
});
Demo
http://jsfiddle.net/79zty3h7/
I'm trying to make a page that fits on a single screen without any scrolling, but the CSS that defines its format that I've got isn't working.
The problem can be seen in the JSFiddle
The footer is fixed at the bottom of the screen (as it should be), but the background image (within content) extends from below the header to below the footer.
There also seems to be a problem with the background image when resizing the browser, but I'm sure that will be fixed when solving this problem.
I have the following code:
HTML: index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function diff(A, B) {
return A.filter(function (a) {
return B.indexOf(a) == -1;
});
}
function show(shown) {
var all = ['home', 'about', 'projects', 'contact'];
var hide_these = diff(all, shown);
var hidden;
document.getElementById(shown).style.display='block';
for(hidden in hide_these)
document.getElementById(hide_these[hidden]).style.display='none';
$(".sidebar").slideToggle(600);
return false;
}
</script>
</head>
<body>
<div id="home">
<div class="header">
<div class="menu-btn"></div>
<h1>
Home
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="about" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
About
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="projects" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Projects
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="contact" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Contact
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<script>
$(function() {
$('body').addClass('loaded');
});
$(".menu-btn").on("click", function(){
$(".sidebar").slideToggle(600);
});
$(".header h1").delay(500).animate({"opacity": "1"}, 700);
</script>
</body>
</html>
CSS: main.css
html,body {
padding: 0;
margin: 0;
font-family: arial;
}
html, body, #home{
width: 100%;
height:100%;
}
a {
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
#home{
min-height:100%;
position:absolute;
}
#about, #projects, #contact{
width: 100%;
height:100%;
}
body .sidebar {
display:block;
}
body.loaded .sidebar {
display:none;
}
.header {
background-color: black;
height: 80px;
width: 100%;
font-family: cursive;
text-align: center;
color: white;
display:flex;
align-items: center;
z-index: 1;
position:relative;
}
.menu-btn {
background-image: url("../images/menu.png");
height: 48px;
width: 44px;
margin-left:50px;
}
.header h1 {
opacity: 0;
width:100%;
margin:0;
padding:0;
}
.sidebar {
position: absolute;
width: 200px;
top: 80px;
bottom: 0;
padding-top: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
}
.sidebar li {
color: black;
list-style-type: none;
margin-top: 10px;
width: 100%;
}
.sidebar li a {
text-decoration: none;
margin-left: 30px;
background-color: #9da1a4;
width: 100px;
padding: 8px;
border: 1px solid silver;
border-radius: 5px;
display: block;
}
.sidebar li a:hover {
background-color: #ebebeb;
}
.content {
top: -80px; /* Header height */
bottom: 30px;
background-image:url("../images/arbor.jpeg");
background-size: cover;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
}
.content p {
padding-top: -10px;
text-align: center;
color: black;
}
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position: absolute;
}
.footer a img {
position: relative;
top: -5px;
}
My attempt to fix was setting the .content area from height = [30px, -80px] (i.e., from the top of the footer to the bottom of the header).
I'm brand new to CSS, so I'm sure this is very poorly formatted, so sorry in advance.
Thanks everyone,
erip
If you want to show everything on a single page without any scrolling then Give position:fixed to body. You can see the result here http://jsfiddle.net/mcnn1d81/1/ .
So if I understand you properly, you want the footer to line the bottom of your content while making sure to fill the browser, no matter the size. This looks like a job for "relative" positioning! Currently your footer is set to "absolute", which is why it overlaps your background.
here's an updated fiddle with RELATIVE changes: https://jsfiddle.net/mcnn1d81/13/
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position: RELATIVE;
}
.content {
top: 0px; /* Header height */
bottom: 30px;
background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
background-size: cover;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
position:RELATIVE;
}
I hope that helps!
EDIT: Added code to keep the content in the screen. https://jsfiddle.net/mcnn1d81/20/
This a quick, rough edit, and realize that what's written will only adhere to the content you put in it. As soon as you tell the content how big it needs to be you'll cause some wonky things to happen.
If you want dynamic content (that stretches and fits the screen) you'll have to add some code to the resize function to make sure everything stays the same in the CSS. I'd add more, but I've got other things I need to get to. I hope this pushes you in the right direction!
just update your css with this.
html,body {
padding: 0;
margin: 0;
font-family: arial;
height:100%;
width:100%;
overflow:hidden;
}
.content {
top: -80px; /* Header height */
bottom: 30px;
background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
background-size: 100%;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
overflow:hidden;
}
that will fix your issue
you can keep background-size : cover; for .content class. it will best option to set your background image.
Try this :
body
{
margin:0%;
overflow:hidden;
}
My problem is when i resize the window(smaller) One of my divs just go through and on top of my navigation bar... Which is annoying, but i believe there is a easy way to fix it. I can give you the code, but should test it in your editor program - and then resize, youll see what i mean.
HTML CODE HERE:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="WorkFieldStartpage.css"/>
</head>
<body>
<div id="upperblock">
</div>
<div class="topbar"></div>
<div id="pageContainer">
<div id="pageContainer2">
<div>
<div id="leftnavigation">
<ul>
<li> <h4> Navigation </h4> </li>
<li>Test text</li>
<li>Test text</li>
<li>Test text</li>
</ul>
</div>
<div id="mainContainer">
<div id="newsfeed"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;
}
div {
display: block;
}
.topbar {
font-family: sans-serif;
font-size:12px;
font-weight: bold;
background-color: #11BD83;
height: px;
width: 100%;
position:fixed;
left: 0px;
top: 0px;
}
#pageContainer {
margin: 0 auto;
position: relative;
zoom: 1;
min-height: 600px;
}
#pageContainer2 {
margin: 0;
outline: none;
padding: 0;
width: auto;
}
ul {
list-style-type: none;
}
h4 {
text-decoration:underline;
}
#mainContainer {
display: block;
width: 620px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
min-height: 800px;
margin-left: auto ;
margin-right: auto ;
margin-top: 58px;
}
#leftnavigation {
float: left;
height: 300px;
width: 120.5px;
text-align: left;
font-family: sans-serif;
font-size: 15px;
padding-right: 30px;
display:block;
}
#newsfeed {
}
make #leftnavigation AND #mainContainer div float:left
Set to the maincontainer div an overflow:auto; property. This will disable to overlap on floated elements.