hello there I'm facing now a problem with controlling an element from inside of a different element .
for example if I want to control the appearance of an element inside of footer by hovering over another element in header .
i hope you have the answer and thanks in advance
One way to do this is, for example, if you have a li with a link inside and you want to change the color of the link when the li is hovered on, you could do this:
ul li:hover a {
color: green;
}
/* only for presentation */
ul li {
width: 100px;
height: 50px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
Link
</li>
</ul>
if you wanted to affect totally random elements as you said, you can do this:
/* ----- This is all extra styling ----- */
body {
background-color: #121212;
}
.header {
position: fixed;
background-color: rgb(31, 33, 34);
width: 100%;
color: white;
font-family: arial;
text-align: center;
}
.footer {
position: absolute;
top: 90%;
background-color: rgb(31, 33, 34);
width: 100%;
color: white;
font-family: arial;
text-align: center;
}
/* ----- This is all extra styling ----- */
.header:hover + .footer {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta tags and what not -->
</head>
<body>
<div class="header">
<!--Header stuff here-->
<h2>My Website</h2>
</div>
<!--In this case the footer and header must be exactly next to eachother for the + to work-->
<div class="footer">
<h4>Hover on the header to change my color</h4>
</div>
<!--This could be whatever you want the page content to be-->
<main>
</main>
</body>
</html>
Related
I am new to programming, just started a few months ago, but trying to create a portfolio page, I have watched other peoples examples, and trying to create my own.
My problem is that I am trying to transition the navbar with a hamburger icon, which is working, but I have set the navbar to be fixed(this also works) and span across the viewport, which doesn't work. The width and the height of the element is just as much as my list elements. I cannot see where the problem is, also when I toggle the class, i.e. click the button to close the navbar it does not transition it just disappears. I will past my code here, will be glad if somebody can give me a hint. Also, I have the hamburger icon on the right and title on the left which I want to stay on top always, added z-index but it does not work.. Thanks, and apologies if I did not make my question very clear.
HTML code
<body>
<div>
<!-- create navbar with hamburger icon -->
<nav class="navbar">
<h2 class="myName">this.szabi<span class="braces">( )</span></h2>
<div class="menu-btn">
<div id="menuButtonBurger"></div>
</div>
</nav>
<div class="info">
<ul>
<li>About Me</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<section id="about"></section>
<!-- create a small introduction place with a picture -->
<!-- create a div for technologies ive learnt -->
<!-- create a div to place my projects -->
<!-- create a div for contact information, social icons -->
<!-- create a footer -->
</div>
<script type="text/javascript" src="script.js"></script>
</body>
CSS code
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
background-color: transparent;
width: 100%;
position: fixed;
display: flex;
justify-content: space-between;
}
.myName {
font-family: Comfortaa;
font-weight: 500;
color: #f05454;
z-index: 101;
}
.braces {
font-size: 2rem;
}
.menu-btn {
position: relative;
width: 3rem;
height: 3rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
border: 3px solid #f05454;
border-radius: 50%;
z-index: 102;
}
#menuButtonBurger {
width: 2rem;
height: 0.25rem;
background-color: #f05454;
border-radius: 5px;
}
#menuButtonBurger::before,
#menuButtonBurger::after {
content: "";
position: absolute;
width: 2rem;
height: 0.25rem;
background-color: #f05454;
border-radius: 5px;
}
#menuButtonBurger::before {
transform: translateY(-8px);
}
#menuButtonBurger::after {
transform: translateY(8px);
}
.info {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: -webkit-linear-gradient(-45deg, #000000, #434343);
background: linear-gradient(-45deg, #000000, #434343);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: Comfortaa, Helvetica, sans-serif;
font-size: 2.5rem;
font-weight: bold;
line-height: 2.5;
z-index: 100;
transform: translateX(1500px);
}
.info .open {
background: -webkit-linear-gradient(-45deg, #000000, #434343);
background: linear-gradient(-45deg, #000000, #434343);
transform: translateX(-1500px);
transition: all 500ms linear;
}
.info ul li {
list-style: none;
}
.info li a,
.info li a:link,
.info li a:visited,
.info li a:active {
text-decoration: none;
color: #fff;
}
.info li a:hover {
color: #f05454;
}
/* change it */
#about {
width: 100%;
height: 1000px;
background-color: teal;
}
JavaScript code
const hamburger = document.querySelector('.menu-btn');
const info = document.querySelector('.info');
const list = document.querySelector('ul');
hamburger.addEventListener('click', menuToggle);
function menuToggle() {
console.log('clicked')
info.classList.toggle('open');
list.classList.toggle('open');
}
The width and the height of the element is just as much as my list elements.
Yes, that is the default behavior of elements in a div.
To change that, either define a custom width for your info div in your existing CSS section, just like that:
.info .open {
background: -webkit-linear-gradient(-45deg, #000000, #434343);
background: linear-gradient(-45deg, #000000, #434343);
transform: translateX(-1500px);
transition: all 500ms linear;
width: 270px; // Defining a custom width for the div
}
Or set a custom padding for the ul elements, like that:
.info ul {
padding-left: 30px; // Defining a padding to every list item, which causes outer div to grow according to that.
padding-right: 30px;
}
Now, regarding the transition. I tried to do something that would not change your code so much. First, We add a html class for handling when the info menu and the ul are closed:
div class="info closed">
<ul class="closed">
<!-- Rest of the code... -->
Then we create a new CSS code for handling the closed transition:
.info .closed {
background: -webkit-linear-gradient(-45deg, #000000, #434343);
background: linear-gradient(-45deg, #000000, #434343);
transition: all 500ms linear;
}
I am pretty new to this. I am hoping for some help and advise keeping my divs side by side. One is a menu which works fine but now my content is overlapping and I'm not sure what I did. I should make multiple saves. any advice on positioning my divs would be crazy appreciated.
apologies if my formatting of the post is wrong. brain is fried and my website is due for class tomorrow.
body {
background-color: #35455e;
}
h1 {
text-align: center;
font-size: 400%;
color: #ecb3ff;
padding-left: 30px;
}
h2 {
text-align: center;
font-size: 300%;
color: #ecb3ff;
padding-left: 40px;
}
ul {
list-style: none;
overflow: hidden;
list-style: none;
text-align: center;
border-style: hidden;
}
a {
color: white;
text-decoration: none;
font-size: 125%;
padding-left: 12px;
}
a:hover {
color: #fff666;
}
a:active {
color: #9bc1ff;
}
div.header {
background-image: url("https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-
9/22089728_10212094710577763_385045730802353501_n.jpg?
oh=534f6bd3108f6f68f96cf5709e404b9f&oe=5AD4BADA");
background-size: initial;
background-repeat: repeat;
border-radius: 8px;
height: 573px;
width: 449px;
border: 10px;
box-shadow: 10px 10px 5px #333333;
float: left;
position:fixed;}
div.main{
position: relative;
top: 500px;
right: 500px;
}
li {
width: 30%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Madison Queen's Art Portfolio: Home</title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Madison Art Portfolio</h1>
<ul>
<li>Home</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div><!--closing of header-->
<div class="main">
<h2>Madison Art Portfolio</h2>
</div><!--CLOSING OF MAIN-->
</div><!--CLOSING OF THE CONTAINER-->
</body>
</html>
As you are using position:fixed; in div.header and position:relative; in div.main you can change the stack of them using z-index value in CSS. if you want your header on the front side and main on the back side then add z-index:2 in div.header and z-index:1 in div.main.
it is overlapping because you have specified the fixed position to the header which is placing the header on the fixed place and anything on the page will overlap with the header. you can try position:absolute
Remove all the code from div.main. It's not required. Also remove position: fixed from the div.header block.
I'm having trouble with the text within the button in particular. Whenever I try to apply padding to the top or bottom of the button so the text is centered, bu all it does is move the whole button. I suspect it has a lot to do with my lack of understanding with positioning and display.
<!DOCTYPE html>
<html>
<head>
<title>WhiteGrid</title>
<link type="text.css" rel="stylesheet" href= "stylesheet.css"/>
</head>
<body>
<div>
<div id="header"><img src="title.png"></div>
<div id="navbar">
<div class="button"><p>Home</p></div>
<div class="button"><p>Gallery</p></div>
<div class="button"><p>About</p></div>
<div class="button"><p>Settings</p></div>
</div>
<div id="body"></div>
<div id="footer"><p>Copyright© 2015 Hayden Shaw. All rights reserved.</p></div>
</div>
</body>
</html>
CSS:
body {
background-color: #C6C1C9;
}
#header {
display: block;
background-color: #856799;
height: 60px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#header > img {
display: block;
margin: auto;
}
#navbar {
display: block;
background-color: rgba(73,71,74,0.7);
height: 40px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#body {
display: block;
width: 100%;
min-height:500px;
}
#footer {
padding-top:24px;
display: block;
background-color: #7D7285;
width: 100%;
height: 60px;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#footer > p {
position: relative;
text-shadow: 0px -1px rgba(0,0,0,0.2);
color: #A3A3A3;
font-family: Verdana;
font-size: 10px;
text-align: center;
}
.button{
margin:0px;
text-shadow: 0px -1px rgba(0,0,0,0.2);
font-family: Verdana;
text-align: center;
color: white;
display: inline-block;
height: 40px;
width: 80px;
background-color: rgba(73,71,74,0);
}
.button:hover{
background-color: #353336;
color: #856799;
}
Thanks in advance.
Don't apply padding to the button but to the paragraph you have the text in. If you are having trouble laying out the text, I would suggest using an image of the text which would be easier.
It seems like you are trying to create a menu bar. I wouldn't do it using divs. Using a table or list is much easier.
<table>
<tr>
<td>Home</td>
</tr>
</table>
<ul>
<li>Home</li>
</ul>
This will be much easier to style.
There's no need to use positioning for this. And you shouldn't be using div's to create buttons either, for a number of reasons.
The best thing you could do is use the <button /> element, or use an anchor tag instead:
HTML:
Button
CSS:
.paddedButton
{
padding: 10px;
}
.khaki
{
background-color: khaki;
}
.noUnderline
{
text-decoration: none;
}
.noUnderline:hover
{
text-decoration: underline;
}
I tried to make a banner for my website I'm creating, but when I add it to my website, it turns out really bad with the text. I'm wondering if I can add text to my banner using HTML5 and / or CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
display: block;
width: 100%;
}
.banner_h img{
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
I'm trying to center / centre my text on the banner, with a white coloured font (font can be varied). What do I have to do to make this happen? Thanks!
It depends on the kind of text you will be adding to the banner. If you want to add text that will be static (as in, it will never or rarely change) and want to add custom fonts, you should probably edit the image in Photoshop.
On the other hand, if the content in the banner will change constantly, then I would suggest adding the image as a background. Your banner h class would look something like this:
.banner_h{
display: block;
width: *actual pixel size of the banner*;
height: *actual pixel size of the banner*;
background: url('*location of file*') no-repeat;
}
If you leave the width to a percentage what will happen is that the div will not have anything inside of it and thus will not show the banner, so you need to figure out what the actual width and height of the banner is and put it in this CSS declaration so that it shows the banner.
Once you have done this, delete the image from the tag and replace it with the content you wish to add.
How do I hide scroll bars? The scroll bar appears even if the content is empty, but I don't want that.
Here is my HTML Code :
<html>
<head>
{# ... #}
{% block stylesheets %}
<link href="{{ asset('bundles/gestionconferenceapplication/css/style.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head>
<body>
<div id="body_wrapper">
<div id="container">
<!-- Start of Page Header -->
<div id="page_header">
<h1><span>Photos Site</span></h1>
</div>
<!-- End of Page Header -->
<!-- Start of Navigational Menu -->
<div id="nav_menu">
<ul>
<li id="menu1"><a href="{{ path('_acceuil', {'name': 'khalil comme toujours'}) }}" ><span>Acceuil</span></a></li>
<li id="menu2"><span>About Me</span></li>
<li id="menu3"><a href="{{ path('_creerConference') }}" ><span>Nouvelle Conference</span></a></li>
<li id="menu4"><span>Portfolio</span></li>
<li id="menu5"><span>Contacts</span></li>
<li id="menu6"><span>Links</span></li>
</ul>
<div class="clearthis"> </div>
</div>
<!-- End of Mavigational Menu -->
<div class="clearthis"> </div>
<!-- Start of Welcome to my Site -->
<div id="welcome">
<div class="content_header">
<h2><span>Welcome to my Site</span></h2>
</div>
<div class="content">
{% block content %}
{% endblock %}
</div>
<div class="clearthis"> </div>
</div>
<!-- End of Welcome to my Site -->
</div>
</div>
<!-- Start of Page Footer -->
<div id="page_footer">
Web design by Free Website Templates
</div>
<!-- End of Page Footer -->
</body>
</html>
And here is the CSS file :
* {
margin: 0px;
padding: 0px;
}
body {
padding: 80px 0px 0px;
background: url('../images/background_top.gif') #c4b8a1 repeat-x;
color: #695d47;
font-family: verdana, arial, sans-serif;
font-size: 12px;
text-align: center;
}
a {
color: #695d47;
background-color: inherit;
text-decoration: underline;
}
a:hover {
color: #ab9c7e;
background-color: inherit;
}
span {
display: none;
}
img {
border: none;
}
ul {
list-style-type: none;
}
li {
list-style-type: none;
}
p {
margin: 0px 0px 15px;
text-align: justify;
line-height: 15px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}
#body_wrapper {
padding: 5px 0px 10px;
width: 100%;
background-color: #fff;
color: inherit;
position : relative;
min-height: 100%;
}
#container {
margin: 0px auto;
width: 758px;
text-align: right;
padding-bottom: 20px;
position : relative;
min-height: 100%;
}
#container .content_header {
margin: 20px 0px 0px auto;
width: 730px;
height: 40px;
background: url('../images/content_header_bg.gif') repeat-x 0% 0%;
}
#container .content {
margin: 3px 150px 0px 28px;
width: 580px;
text-align: left;
}
/* Page Header */
#page_header {
background: url('../images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #6a604e;
float: left;
}
#page_header h1 {
width: 280px;
height: 125px;
overflow: hidden;
background: url('../images/website_title.gif') no-repeat 50% 50%;
}
/* Navigational Menu */
#nav_menu {
margin-left: 9px;
padding-left: 19px;
float: right;
background: url('../images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #b3a386;
text-align: center;
font-family: tahoma, arial, sans-serif;
}
#nav_menu a {
color: #b3a386;
background: inherit;
}
#mav_menu a:hover {
color: #857860;
background: inherit;
}
#nav_menu ul {
width: 450px;
height: 125px;
overflow: hidden;
}
#nav_menu li {
float: left;
border-width: 0px 1px 1px 0px;
border-color: #c1b7a5;
border-style: solid;
font-size: 20px;
}
#nav_menu li#menu3, #nav_menu li#menu6 {
border-right: none;
}
#nav_menu li a {
display: block;
width: 149px;
height: 62px;
text-decoration: none;
}
#nav_menu li a:hover {
color: #857860;
background-color: #f4eee2
}
#nav_menu li a span {
padding-top: 17px;
display: block;
}
/* Welcome to my Site */
#welcome .content_header h2 {
height: 28px;
background: url('../images/welcome_header.gif') no-repeat 0% 0%;
}
#welcome p {
width: 420px;
float: right;
}
/* Page Footer */
#page_footer {
padding: 9px 10px 6px;
font-weight: bold;
float: none;
clear: both;
height:40px;
}
#page_footer a:hover {
background-color: inherit;
color: #4f4635;
}
What I want to achieve is that when I don't have enough content then, the scroll bars should hide and the footer of the page remains visible (in the bottom of the page(i.e browser bottom)) without moving scroll bar.
I tested several styles like : position absolute and position:relative in #page_footer and #body_wrapper but Its not working.
I added a DOCTYPE and the problem is solved
but another problem appeared :
the footer fill a large place :
even if I fixed the width, (width:40px)
do you have any idea
Auto Hiding Scroll bars
Concept:-
You can use CSS overflow property to hide the scroll bars. If you apply overflow:hidden on any component of the webpage or on the whole page, the scroll bars will become permanently hidden.
Check this example where scroll bars are visible in a text area.http://jsfiddle.net/qtAqq/1/
Now to hide these scroll bars we will apply overflow:hidden this text area. As you can see the Text is more than the text area but scroll bars are hidden.http://jsfiddle.net/hnyVc/1/.
But We don't want to do that as scroll bars are useful when site has content more than the screen size. So we will use overflow:auto. See this example http://jsfiddle.net/EZr89/
Solution for your Problem:-
As you can see using overflow:auto hides the scroll bars when page has less content and makes scroll bars visible when page has more content than display size. So just add the following code to your page css styles you can auto hide the scroll bars when page has less content:
html
{
overflow:auto;
}
Fixing Footer at the Browser Bottom
You can use postion:fixed; and bottom:0px; on you page footer to fix it at browser bottom. Add this code to your page css styles:-
#page_footer {
padding: 9px 10px 6px;
font-weight: bold;
float: none;
clear: both;
width:100%;
height:40px;
background: url('../images/background_top.gif') #c4b8a1 repeat-x;
/*Add this Code to fix the footer at browser bottom*/
position:fixed;
bottom:0px;
}
Other Issues/Problems in your code
1)Add to your page html at top of all the code.
2)You have coloured the whole body with the darker colour which makes the footer looking big. It can be solved by setting the body color to white and adding a header div with darker color after the container div.
3)You have set a limited width for container div which makes the header look smaller at the center of the page. It could be fixed by giving container div 100% width and placing an inner container div with the limited width to be aligned in center of the page.
Check the code with these problems fixed here:-
find main html and css styles in the zip file here: http://www.keepandshare.com/doc/5182191/yoursite-zip-2k?da=y
Let me know if it helps
add this style to your body
body{
margin:0px;
padding:0px;
overflow:hidden;
}