I have a simple site so far but have two issues. I have done everything with percentages because the site might go up on a high def tv and i want them to scale well. The scaling works with the images but id also like to scale the navbar background and text so that it doesnt end up looking small.
The second issue is When the site is squished the bottom image covers the nav bar and doesn't flow under the nav bar element. Id just like this feature because it would scale well for smartphones.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="headish.css">
<title>New Site</title>
</head>
<body>
<div id="container">
<div id="tophead">
<img src="images/logo.png" alt="logo" />
<ul>
<li>About Us</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
<div id="maincont">
<img src="images/second.png" alt="image">
</div>
</div>
</div>
</body>
</html>
Here is the css:
html, body, #container {
height: 100%;
width: 100%;
margin: 0;
position: relative;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
text-align: center;
}
#tophead img {
height: 100%;
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
padding-left: 10%;
}
#maincont img{
border-radius: 7%;
width: 30%;
}
To stop the image from flowing into other elements, use clear:both on your #maincontent img
Edit : A good article can be found on it here which suggests other methods. http://quirksmode.org/css/clearing.html
Edit2: This only applys to floated elements, I have just noticed you havn't used floats atall. See my comment below
Related
I have a navigation bar which is transparent, and thus shows my gradient background at first. However when I scroll, it shows the text and/or pictures underneath, but I would like it to show the background and cover over the text. Main page: https://gyazo.com/6c5e35ca0ed4f6f37e9e72f490737c78 , scrolled down website: https://gyazo.com/9a2957d728e36ae23e0cd9af604e8de1; scrolled down more: https://gyazo.com/4849fb7f11689a5360e2e8686713d01d .
As you can see the navigation-bar is above everything - but I would like there to be a box around the navigation-bar which only shows the background when you scroll - if that makes sense - How would you do that? GIF showing scrolling problem: https://gyazo.com/6626f65e632e61127413c673d92a2cba
Relevant HTML:
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<script src="jquery.js"></script>
<script src="main.js"></script>
<script src="smoothscroll.js"> </script>
<body>
<div class="main">
<nav class="fixed-nav-bar">
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li>General<li>
<li>Computers in <br>the Workforce</li>
<li>Automated <br>Decision Making</li>
<li>Artificial <br>Intelligence</li>
<li>Environmental <br>Effects</li>
<li>Censorship &<br> The Internet</li>
<li>Monitoring<br> Behaviour</li>
<li>Analysis of<br> Personal<br> Information</li>
<li>Piracy &<br> Offensive<br> Communications</li>
<li>User Interface<br> Design<br> Considerations<li>
<li>Contact</li>
</ul>
</div>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</nav>
Relevant CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
font-size-adjust: auto;
}
.logo {
flex-basis: 15%;
margin: 0;
}
.logo img{
padding: 35px 35px;
width: 15%;
transition: transform .9s ease;
overflow: hidden;
}
.logo img:hover{
transform: scale(1.35)
}
.fixed-nav-bar{
position:fixed;
z-index: 9999;
height: 200px;
width: 100%;
}
.navigation-links{
flex: 1;
text-align: right;
margin-top: -230px;
margin-right: 106px;
padding-right: 15px;
/* note position zzzz*/
}
.navigation-links ul {
display: inline-flex;
}
.navigation-links ul li {
margin: 10px 9px;;
margin-top: 14px;
padding: 6px 5px;
font: Montserrat;
font-weight: normal;
position: relative;
list-style: none;
font-size: 85%;
word-spacing: 0px;
overflow: hidden;
z-index: 3;
}
#media screen and (max-width: 1580px) {
.navigation-links ul li {
font-size: 0.75rem;
margin: 10px 6px;
word-spacing: 0px;
padding: 6px 3px;
}
.navigation-links{
margin-right: 74px;
margin-top: -180px;
}
.logo img{
width: 230px;
height: 230px;
}
}
#media screen and (max-width: 1220px) {
.navigation-links ul li {
font-size: 0.65rem;
margin: 10px 5px;
word-spacing: 0px;
padding: 6px 2px;
}
.navigation-links{
margin-right: 74px;
margin-top: -163px;
}
.logo img{
width: 205px;
height: 205px;
}
}
.navigation-links ul li a{
color: #fff;
text-decoration:none;
}
.navigation-links ul li a:hover{
font-weight: bold;
}
.gift img{
width: 5.5%;
float: right;
margin-top: -76px;
margin-left: 10px;
margin-right: 30px;
padding-left: 30px;
padding-right: 30px;
}
I do not know if i need to add a block which is like transparent for the background but not for the text/pictures in the html file?
Hopefully that is the relevant code so that you understand my problem and know how to possibly help me?
Thanks
Maybe you can achieve that by using JQuery. You can trigger a function that displays the border on the navigation bar whenever the page is scrolled. Here is the sample code.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$('nav').css("border","1px solid black");
}
});
Should be a common and not a rare question, but still I tried everything and nothing worked. So maybe this time somebody can help and this question will be for everyone to check their mistakes.
So I am making Car Service website, I am a bit of a beginner in both HTML and CSS.
This is the normal full screen mode of my browser and it looks fine:
As soon as I resize my browser size this happens with navbar
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="img/header.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services
<li>Registration
<li>Contact</li>
<li>Profile</li>
</ul>
</nav>
</div>
</header>
</body>
CSS CODE:
body{
margin: 0;
padding: 0;
background-color: black;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background-color: #25DE8B;
}
header::after{
content: '';
display: table;
clear: both;
}
.logo{
float: left;
padding: 10px 0;
}
nav{
float: right;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 35px;
position: relative;
}
nav a{
color: #012b4f;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
nav a:hover{
color: #28AA1A;
}
nav a::before{
content: '';
display: block;
height: 8px;
width: 0%;
background-color: #012b4f;
position: absolute;
top: 0;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
I need to change code so my navbar stays on its place in any case. Thanks for any help.
you use px as your units. you should use % or something else that is relative to the size of the page.
you can see more information in this link:
https://www.w3schools.com/cssref/css_units.asp
So I'm at a loss here. I know I have the proper src code for my image, when I view the page in Chrome, without the use of Brackets, the image will show. But when I use Brackets Live preview, it does not show the image in the browser, it does create a box for it, but its empty. The funny thing is, when I hover over the code in the text editor in Brackets, I get a preview of the image. Any help will be greatly appreciated!
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
<title>Here goes #1</title>
</head>
<body>
<header class="main-header">
<ul class="nav bv">
<li><h1>My Favortie Artists</h1></li>
<li>About</li>
<li>Podcasts</li>
<li>Books</li>
<li>Ideas</li>
<li>Blog</li>
</ul>
</header>
<div class="main-content">
<div class="content1">
<ul clas="imgs">
<li class="afr"><img src="c:web projects/art/img/afr1.jpg">Afremov</li>
</ul>
<p></p>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding; 0;
box-sizing: border-box;
width: 100%;
}
body li {
list-style-type: none;
}
ul {
padding: 0;
}
.nav {
text-align: center;
background-color: beige;
box-shadow: 0 1px 10px black;
height: 230px;
}
.nav h1 {
text-shadow: 5px 7px 4px white, 2px 2px 10px beige;
line-height: .8em;
padding: 10px 0;
}
/*COMMON FONTS*/
.bv {
font-family: 'Bevan', cursive;
}
/*SMALL SCREEN STYLE*/
.nav li {
font-size: 1.25em;
text-shadow: 2px 3px 10px white;
}
/*LINK STYLES*/
.nav a {
text-decoration: none;
list-style-type: none;
border-bottom: 2px solid grey;
padding: 0 15px;
color: black;
border-radius: 10%;
}
.nav a:hover {
background-color: bisque;
padding: 0 5%;
font-size: 1.5em;
border-radius: 25%;
transition: background-color .6s, padding .8s; font-size 3s, border-radius .8s;
}
/*LARGE SCREEN*/
#media (min-width: 769px) {
.nav {
display: flex;
height: 150px;
}
.nav li {
flex-grow: 1;
align-self: center;
}
.nav:not(:first-child) {
flex-flow: wrap;
justify-content: flex-end;
}
.nav h1 {
padding-right: 50%;
flex-grow: 2;
margin-left: 10px;
}
.nav a:hover {
background-color: bisque;
padding: 0 20%;
font-size: 1.5em;
border-radius: 25%;
transition: all 1s;
}
/*Image Links*/
What is this "c:web" in src="c:web projects/art/img/afr1.jpg".
Did you mean c:/web/projects/art/img/afr1.jpg?
If so try to set a relative path something like src="art/img/afr1.jpg".
Always copy your supporting files like images and js, css on the working directory with respective folder names, then refer the relative paths to refer the files inside your code.
I've this site:
[Removed - problem solved]
As you can see, if you look at the navigation bar, buttons don't fill it, thus making it to look ugly.
I want to know if there is a way to calculate the button's width in a manner that no matter how many buttons I'll have, they'll always fill the entire page's width, thus only allowing a small stripe below them to be seen.
This is the CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #359DFF;
text-align: center;
padding:4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,a:active {
transition-property: background-color;
background-color: #33CCFF;
transition-duration: 1s;
}
.navbg {
background-color: #33CCFF;
position: absolute;
top: 70px;
width: 100%;
height: 32px;
z-index: -1;
}
Just change the li width
li {
width: 20%;
float: left;
}
The solution of this problem is in your HTML, you have to put your in your navigation bar.
for the moment you have:
<header>
<h2>Liceul Teoretic Dunarea</h2>
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Management</li>
<li>Profesori</li>
<li>Contact</li>
</ul>
</header>
<div class="navbg">
te
</div>
It should be like that:
<header>
<h2>Liceul Teoretic Dunarea</h2>
</header>
<div class="navbg">
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Management</li>
<li>Profesori</li>
<li>Contact</li>
</ul>
</div>
Change your code like the following:
<!DOCTYPE html>
<!-- WEBSITE DE DUMITROV CRISTIAN -->
<head>
<title>Liceul Teoretic Dunarea</title>
<link rel="stylesheet" type="text/css" href="css/stil.css">
</head>
<body>
<header>
<h2>Liceul Teoretic Dunarea</h2>
</header>
<div class="navbg">
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Management</li>
<li>Profesori</li>
<li>Contact</li>
</ul>
</div>
<footer>
<div class="footertxt">
<p><em>(C) Liceul Teoretic Dunarea<br>2013 [MMXIII]</em></p>
</div>
</footer>
</body>
Also add the following CSS:
.navbg ul{width:100%;margin:0 auto;}
.navbg {
display: block !important;
height: auto !important;
overflow: visible !important;
padding-bottom: 0;
}
.navbg ul > li {
display: table-cell;
width: 1%;
float: none;
position: relative;
}
.navbg ul > li > a {
background-color: #E5E5E5;
color: #777777;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 15px;
padding-top: 15px;
text-align: center;
display: block;
padding: 10px 15px;
position: relative;
}
I have a div 'container' which holds all my content and is set for 80% width. Inside that div I have div 'tophead' which contains a logo and a nav bar at 100% (but it only reaches the parent 80%). Then I have 'maincont' which is inside the 'container' div and has an image. Id like this image to be left aligned with the side of the 'container' div so that there is still that 20% space left open. If I float left or align left it shows up all the way to the left of the screen over the 20% id like blank. Any idea how to fix this would be very much appreciated.
Bonus thanks if someone can figure out why the image overlaps my nav bar.
jsFiddle:
http://jsfiddle.net/4JKus/4/
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ccoheader.css">
<title>Hello World</title>
</head>
<body>
<div id="container">
<div align="center" id="tophead">
<img src="images/logo.png" alt="logo">
<ul>
<li>About Us</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
<div align="center" id="maincont">
<img src="images/secondimage.png" alt="image">
</div>
</div>
</div>
</body>
CSS:
html, body, #container {
height: 100%;
width: 100%;
margin: 0;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
}
#tophead img {
height: 100%;
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
height: 68%;
width: 80%;
padding-top: 2%;
}
#maincont img{
height: 100%;
width: auto;
border-radius: 30px;
float: left;
}
Not sure how far this gets to solving your problem(s), but its a start:
http://jsfiddle.net/4JKus/5/
Using the align attribute in div declarations is considered bad form. You had a stray /div hanging out. Not sure why you are forcing your images and the main container to 100% height.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ccoheader.css">
<title>Hello World</title>
</head>
<body>
<div id="container">
<div id="tophead">
<img class="logo" src="images/logo.png" alt="logo">
<ul>
<li>About Us</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
<div id="maincont">
<div class="maincont_col1">
</div>
<div class="maincont_col2">
<img src="images/secondimage.png" alt="image">
</div>
</div>
</div>
</body>
CSS
html, body, #container {
width: 100%;
margin: 0;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
}
#tophead img {
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
width: 100%;
padding-top: 2%;
overflow: hidden;
}
.maincont_col1{ width:20%; float:left; }
.maincont_col2{ width:80%; float:left; }
#maincont img{
border-radius: 30px;
}
Getting rid of float:left in your #maincont img selector solves the first problem.
Problem 2 is down to the fact that you have a topheader of 20% and the nav bar overlaps this.. You can fix this by removing the stipulation that the top and bottom are fixed in size.