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.
Related
I'm new at coding (especially html/css/js) and for some reason, my bottom right image, keeps getting strected and it's not at the bottom right. The original image's resolution is 2280 x 2280.
This is for school. Is there any way to fix this simply? I'm really not sure where the error is.`
body {
background-image: url("https://lh3.googleusercontent.com/3ZUxEMdTqMRqUSdgVZ2o-g64VwIIpg9vrudRJ_sgHc0sH8kSyw2wniPdctzoJvYkIWxCdMWG7z02RtSndmuDdtuBRbnC-KiCjJIIWitWyTvbOlSIycuZTwTFYhqGr2qj3YF8K84rlA=w2400?source=screenshot.guru");
height: 100%;
background-position: center;
background-repeat: repeat;
background-size: cover;
font-family: 'Carter One', cursive;
color: white;
}
h1 {
color: white;
text-align: center;
}
h2 {
color: white;
text-align: center;
}
img {
border: 5px solid #FFFFFF;
}
body, html {
height: 100%;
margin: 0;
font-family: 'Carter One', cursive;
}
.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 a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #F3721D;
color: white;
}
.top_left{
float: left;
position: absolute;
left: 16px;
}
.right {
float: right;
position: absolute;
top: 200px;
right: 16px;
}
.bottom_left {
float: left;
bottom: 0px;
left: 16px;
z-index: 10;
padding: 0px;
margin: 500px 500px 100px 16px;
}
.bottomright {
float: right;
bottom: 0px;
right: 16px;
z-index: 10;
padding: 0px;
margin: 500px 16px 100px 500px;
}
<!DOCTYPE html>
<html>
<head>
<title>Charlotte's super cool art gallery</title>
<link rel="stylesheet" href="C:\Users\blazette\Downloads\bs\CSS\mystyle.css">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Commissions
About
</div>
<div class="cubed">
<h1>I design stuff.</h1>
</div>
<div class="cubed">
<h2> My works.</h2>
</div>
<div class="top_left">
<img src="https://lh3.googleusercontent.com/nXUNj-kqfceSzKATH6slZLbb10j9p-WUilkT8v5EFBoA8wsfPJHxaBflhe51roafWlM8FV8z8rlOI4ET_O5j0pyHCoMN9W0_y8XGBcwsS7PSmBMtg-_K6x6VpoxQ0zts8C77DtR7nw=w2400?source=screenshot.guru" img width="310" height="372" id="top_left">
<p>
A digital illustration of Sherlock Holmes <br>from the TV series Sherlock.
</p>
</div>
<div class="bottom_left">
<img src="https://lh3.googleusercontent.com/AiNJsDbDBkv0rXUj0wEe-vdggMKBTNFEyfB-Ukw9DrsLAKj7I_-jWjxOPYMG50ItNXolThQesF3LnVyjsuPSRkhln0nmoL1cdEewTr7H03w2JauCUqseab2Wol-9mP8Adv0dT18iiw=w2400?source=screenshot.guru" img width="310" height="372">
<p>
A digital illustration of Clockson. An <br>original character based on antique clocks
</p>
</div>
<div class="right">
<img src="https://lh3.googleusercontent.com/9NRWdbN3EqE5u6Z4cZDZmBVu2Ar3o8lcBR09C8gtTXDmz0rDdZRuaL23UDM7B-bgBVSfg_4w4lvZiV4I6qwDlHoBsYCbgjybw5ZOGPtu_vj-8whkKHtaKN9PwbNEDix-RHD2zMHLrQ=w2400?source=screenshot.guru" img width="310" height="372" id="right">
<p>
Doctor Who fanart of the 13th Doctor.
</p>
</div>
<div class="bottomright">
<img src="https://lh3.googleusercontent.com/BhntO9ci2WyceI-7qWdlNzsUcS0Bo8_29s2HDO09gM2nSV6Syehodp5q14wQ9vgUUpE8KL9elU9z52xLHDYhigypqpAnFO0inqgoW1fOlTRwlCeXwH6uppVSLBjHBKMfXfQ14xlIJw=w600-h315-p-k" width="310" height="310">
</div>
</body>
</html>
`
You're hard coding the image width and height, it may be the case that some of those images aren't actually that dimension. Try and see if changing the width and height fixes it. Change the width and height in the html tag for the
I'm not very knowledgeable in javascript. But I need a dropdown on a vertical menu that is pure javascript, so I copied/paste the script from W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown
and modified it to fit the page style. This menu needs to be on multiple pages, so it's also an html include. I got it to somewhat work, but you have to double click the drop-drop down in order to close it and this needs to be a single-click. I've been searching for a solution for a couple weeks now and still not sure what I'm doing wrong. I can't use jquery, bootstrap or any outside library since it's not connected to the internet.
HTML:
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div onclick="myButton()">Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
Codepen
The problem is that on your .drop-button element, you have an inline onClick() attribute/event, AND inside the handler function (function myButton()) you you declare another eventListener on top of that.
You should just remove the onclick="myButton()" attribute all together, and then your JavaScript would look like this:
(Run code snippet)
There are a few different ways in JavaScript to declare event listeners. One way is Inline/HTML Event Handlers that you put inline on the HTML element like an attribute, ie- <div onClick="handlerFunction"> But the more modern, and more recommended way is using addEventListener() directly from your JavaScript.
var dropdown = document.querySelector(".drop-button");
dropdown.addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display == "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display= "block";
}
});
#content {
margin: 1.875em 0px 0.625em 0px;
width: auto;
background-color: #002f6c;
border-radius: 0.75em;
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
display: inline-block;
overflow: hidden;
top: 9.375em;
}
.quick {
margin: 0;
padding: 0;
display: block;
overflow: hidden;
font-family: sans-serif;
}
.quick a {
display: block;
height: auto;
padding-top: 0.625em;
padding-bottom: 0.625em;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
text-align: center;
text-decoration: none;
background-color: #888B8D;
}
.quick a:hover {
display: block;
width: auto;
height: auto;
color: #002F6C;
background-color: #FFD300;
}
.topvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmverthome {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.vertheader {
width: auto;
padding: 2%;
display: block;
text-align: center;
}
.vertbtn {
width: auto;
cursor: pointer;
display: block;
}
.vertbtn :hover {
background-color: #FFD300;
position: relative;
display: block;
}
a.backhome {
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
color: #fff;
text-align: center;
padding: 2%;
box-sizing: border-box;
}
a.backhome:hover {
color: #002f6c;
background-color: #FFD300;
position: relative;
display: block;
}
.quicklinks {
color: #fff;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
}
.drop-button {
padding-top: 0.625em;
padding-bottom: 0.625em;
text-decoration: none;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
color: #fff;
display: block;
border: none;
background-color: #888B8D;
width: 100%;
text-align: center;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.drop-button:hover {
color: #002f6c;
background-color: #FFD300;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.active {
background-color: #06a7e0;
color: white;
}
.dropdown-container {
display: none;
background-color: #b4e4f5;
border-bottom: solid 2px #06a7e0;
}
.dropdown-container > a {
background-color: #50c1e9;
border-bottom: solid 1px #06a7e0;
}
a {
display: block;
position: relative;
color: #f3f3f3;
text-decoration: none;
}
a:hover {
color: #fff;
position: relative;
}
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div>Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
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.
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.
<center>
<div class="trivlimp">
<center><div class="lyrics"><!-- |field_1| --></div></center>
</div>
<div class="imp">
<div class="trgls"><!-- |points| --> Gallons</div><br>
<div class="trals"><!== |field_2| --></div><br>
<div class="trpc"><!-- |posts| --> posts</div><br>
<div class="trttr"><!-- |field_3| --></div><br>
</div>
</center>
I'd like to be able to hover over the div "trivlimp" to show the div "imp" right on top of "trivlimp"; hiding the first div underneath the div "imp". I tried doing this by :hover but completely failed and only ended up making it more frustrating for myself. I'm not against using Jquery, but I'd like to do this completely by css; but if it is easier using jquery I'll use it.
http://jsfiddle.net/Thrw2/3/
html code
<center>
<div class="trivlimp">
<center><div class="lyrics"> |field_1| </div></center>
</div>
<div class="imp">
<div class="trgls"> |points| Gallons</div><br>
<div class="trals">|field_2| </div><br>
<div class="trpc"> |posts| posts</div><br>
<div class="trttr">|field_3|</div><br>
</div>
css code
.trivlimp { background-color:#FF0000;
width: 260px;
height: 400px;
text-align: center;
position: absolute; }
.imp { width: 260px;
height: 400px;
background-color:#676767;
display: none;
position: absolute;
top: 0; }
.lyrics {
margin-top: 50%;
background-color: #CC0066;
width: 180px;
padding: 5px;
height: 130px
overflow: auto;
text-align: justify;
text-transform: uppercase;
font-family: Georgia;
font-style: italic;
font-size: 10px;
line-height: 10px;
}
.trgls {
width: 190px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color:#6666FF;
text-transform: uppercase;
}
.trals {
width: 170px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #00FF00;
text-transform: uppercase;
}
.trpc {
width: 150px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #FFCC00;
text-transform: uppercase;
}
.trttr {
width: 130px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
float: right;
margin-right: 35px;
background-color: #009900;
text-transform: uppercase;
}
jquery
$(function(){
$('.trivlimp').hover(function() {
$('.imp').show();
},
function() {
$('.imp').hide();
});
});
I don't quite understand your question, but you could use the following:
.imp {
display: none;
}
.trivlimp:hover + .imp {
display: block;
}
I would use jQuery to work with the hover states. I'm somewhat not following the question as well. So I popped your code into JSFiddle and brewed up what I thought was along the lines of what you're looking for. I used jQuery's mouseover/mouseout:
$('.trivlimp').mouseover(function() {
$('.imp').show();
});
$('.trivlimp').mouseout(function() {
$('.imp').hide();
});
http://jsfiddle.net/arsCr/
Do something like this: http://jsfiddle.net/chanckjh/PWtTw/
html:
<div class="trivlimp">
</div>
<div class="imp">
</div>
css:
.trivlimp{
border: 1px solid red;
width: 500px;
height: 300px;
}
.imp{
border: 1px solid blue;
width: 500px;
height: 300px;
background: blue;
display: none;
}
jquery:
$(function() {
$('.trivlimp').hover(function() {
$('.imp').show();
}, function() {
$('.imp').hide();
});
});