I'm currently working on a simple webpage for my music-project and want to make the Navigation-Bar stay on top of everything else all the time. I've set an absolute position, z-index and overflow:hidden, but I can't seem to find the tiny cause of my problem.
There are more people with similar issues and I tried more solutions but I just can't find my error.
When I resize the window, my elements still mix into eachother:
I attached my full code below:
<html>
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>fabrice.</title>
<meta name="description" content="fabrice - official website">
<meta name="author" content="Daniel Pölzgutter">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" type="text/css" href="/style.css">
<!-- favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="shortcut icon" type="image/png" href="/res/icons/favicon.png"/>
</head>
<body>
<!-- PAGES
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!--featured-->
<div id="js_featured" class="page">
<div class="container">
<div class="row">
<div class="twelve columns" style="margin-top: 5%">
<h4 align="center" style="font-family: aileron-heavy; font-size: 50px">featured</h4>
</div>
<div class="twelve columns">
<p align="center" style="font-family: aileron-thin; font-size: 25px">...</p>
</div>
</div>
</div>
</div>
<!--releases-->
<div id="js_music" class="page" style="display:none">
<div class="container">
<div class="row">
<div class="twelve columns" style="margin-top: 5%">
<h4 align="center" style="font-family: aileron-heavy; font-size: 50px">releases</h4>
</div>
<div class="twelve columns">
<p align="center" style="font-family: aileron-thin; font-size: 25px">...</p>
</div>
</div>
</div>
</div>
<!--contact-->
<div id="js_contact" class="page" style="display:none">
<div class="container">
<div class="row">
<div class="twelve columns" style="margin-top: 5%">
<h4 align="center" style="font-family: aileron-heavy; font-size: 50px">contact</h4>
</div>
<div class="twelve columns">
<p align="center" style="font-family: aileron-thin; font-size: 25px">...</p>
</div>
</div>
</div>
</div>
<!-- NAVIGATION BAR
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div id="navbar_box">
<div class="navbar">
<div id="brand_box">
<div class="brandtext">fabrice.</div>
</div>
<div id="textbutton_box">
<button class="textbutton" onclick="openPage('js_featured')">featured</button>
<button class="textbutton" onclick="openPage('js_music')">releases</button>
<button class="textbutton" onclick="openPage('js_contact')">contact</button>
</div>
<div id="icon_box">
</div>
</div>
</div>
<!-- JAVASCRIPT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script>
/*switch sites*/
function openPage(name) {
var i;
var x = document.getElementsByClassName("page");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(name).style.display = "block";
}
</script>
</body>
HTML
CSS
Is this want you want? https://jsfiddle.net/cCrul/a4g3ghLt/
I just removed this:
.navbar{
background-color: white;
}
And add background-color: white; to #navbar_box styles:
#navbar_box {
background-color: white;
(...)
}
Have you tried position:fixed,and don't use overflow property
Related
I want to create a layout responsive like the pic down, with bootstrap 4 or other support. (full screen)
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="flex-row">
<div class="col" style="background-color: blue;">Header</div>
</div>
<div class="flex-row">
<div class="col-md-4" style="background-color: orange;">Left Nav</div>
<div class="col" style="background-color: gray;">Content</div>
</div>
<div class="flex-row" style="background-color: green;">
Footer
</div>
</div>
#RenderBody()
</body>
</html>
.container
{ height: 100%;
width: 100%; }
Any idea for this ?
p.s. I work with VS2019
I created your design using bootstrap col.You can modify the height as you wish but you can use this layout for your blueprint.For more info you can check : https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<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.4.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>
</head>
<body>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-12" style="background-color:yellow;height:200px">Header</div>
</div>
<br>
<div class="row" style="height:450px">
<div class="col-sm-4" style="background-color:yellow;">Left Navigation</div>
<div class="col-sm-8" style="background-color:orange;">Content</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm-12" style="background-color:yellow;height:225px">Footer</div>
</div>
<br>
</div>
</body>
</html>
Try following,
<div class="container-fluid">
<div class="flex-row">
<div class="col" style="background-color: #5B9BD5;">Header</div>
</div>
<div class="flex-row">
<div class="col-md-4" style="background-color: #ED7D31;">Left Nav</div>
<div class="col" style="background-color: #A5A5A5;">Content</div>
</div>
<div class="flex-row" style="background-color: #70AD47;">
Footer
</div>
</div>
I have provided the code snippet
here i want to display the marque below logo but it is covering the whole header.
Visit here
use display: inline-block and width: 100%; on alert-info div it will work fine that you want.
UPDATED
You missed at least a container-fluid style declaration. See your snippet updated, here https://www.w3schools.com/code/tryit.asp?filename=FEL4BAHI14YZ.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="bootstrap-overrides">
<header class="container-fluid">
<div class="header">
<img width="300" class="img-responsive" style="height: 120px; float:left" src="images/logo.jpg" />
<button class="btn btn-primary pull-right">BUTTON</button>
</div>
</header>
<div class="container-fluid">
<form id="frm" runat="server" class="form-horizontal">
<div class="alert alert-info" role="alert" style="color: red">
<marquee>Welcome To IDB WEB APPLICATION. All (*) Fields Are Mandatory</marquee>
</div>
</form>
</div>
</body>
</html>
Hope this helps.
Updated- Just wrap your header and alert-form individually inside a container-fluid with a row. Thats the best solution using bootstrap.
below is the wokring code. For logo I am using dummy image
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<div class="container-fluid">
<div class="row">
<div class="header">
<img width="300" class="img-responsive" style="height:120px; float:left;" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
<button class="btn btn-primary pull-right">BUTTON</button>
<!--- Remove this inline style style="height: 120px; float:left" -->
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<form id="frm" runat="server">
<div class="alert-info" role="alert" style="color: red">
<marquee>Welcome To IDB WEB APPLICATION. All (*) Fields Are Mandatory</marquee>
</div>
</form>
</div>
</div>
When i zoom in and out on my website, the navigation bar and my "Open Touch" text seems to go out of the div and float down and for my navigation bar, it seems to disappear word by word when i zoom in. I've been trying to fix this for the past 2days and researching on this website and nothing seems to work.
My code and codepen will be available as well
How can I keep the "Open Touch" Text from overlapping the navigation bar?
Demo: http://codepen.io/anon/pen/xqLLeJ
html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
<body>
<!-- Section for Jobs Popup -->
<div id="job-popup">
<div class="x-div"><img class="x-icon1" id="fadeX" src="web%20x%20icon%20white.png"></div>
<div id="job-content">
<h1 id="jobWords">Test</h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords">Test</h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords">Test</h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords">Test</h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords">Test</h1>
</div>
</div>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
</head>
</html>
Any help is appreciated,
Thank You
Take out overflow: hidden from
#nav-menu {
width: 50%;
height: 70%;
position: absolute;
z-index: 101;
word-wrap: break-word;
/* overflow: hidden; */
left: 15%;
top: 20%;
}
So the problem I am having is the webpage is not loading the background image
Following image address does not seem to load so page background stay's pitch black and nothing can be read because of it.
Edit:
Here is my full css code.
#intro {
position: relative;
padding-bottom: 102px;
min-height: 900px;
width: 100%;
background: #161415
background-image: url("http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg"); no-repeat center center;
background-size: cover !important;
-webkit-background-size: cover !important;
}
this is what my index.html looks like.
<!DOCTYPE html>
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Coming soon</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="http://example.com/new/css/default.css">
<link rel="stylesheet" href="http://example.com/new/css/layout.css">
<link rel="stylesheet" href="http://example.com/new/css/media-queries.css">
<!-- Script
================================================== -->
<script src="http://example.com/new/js/modernizr.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="example.com/new/favicon.png" >
</head>
<body>
<div id="preloader">
<div id="status">
<img src="http://example.com/new/images/preloader.gif" height="64" width="64" alt="">
</div>
</div>
<!-- Intro Section
================================================== -->
<section id="intro">
<header class="row">
<div id="logo" >
<a href="#" >
<img src="http://185.27.134.27/login_logo/ce7c43a1c5602d942c279e478e4c7823.jpg" alt="Zoon">
</a>
</div>
<nav id="nav-wrap">
<a class="menu-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="menu-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li class="current">Home</li>
<li>About</li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
</header> <!-- Header End -->
<div id="main" class="row">
<div class="twelve columns">
<p>Attention if you are the website owner you are seeing this page because you have not yet uploaded or installed a website if you are having problems please contact support through your cpanel or you may login below to edit your website.</p>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
</div>
<form action="http://cpanel.example.com/login.php" method="post" name="login" >
<label for="mod_login_username">Cpanel Username:<input name="uname" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" /></label>
<label for="mod_login_password">Password:<input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" /></label>
<input type="submit" name="Submit" class="button" value="Login" />
Lost your password?
</div>
</div> <!-- main end -->
</section> <!-- end intro section -->
<!-- About Section
================================================== -->
<section id="about">
<div class="row section-header">
<div class="twelve columns">
<div class="icon-wrap">
<i class="fa fa-group"></i>
</div>
</div>
</div> <!-- end section-header -->
<div class="row section-content">
<div class="six columns">
</div>
<div class="six columns">
</div>
</div> <!-- end section-content -->
<div class="row section-content">
<div class="six columns">
</div>
<div class="six columns">
</div>
</div> <!-- end section-content -->
<div id="call-to-action">
<div class="row section-ads">
<div class="twelve columns">
<div class="action">
</div>
</div>
</div> <!-- end section-ads -->
</div> <!-- end call-to-action -->
</section> <!-- About Section End-->
<!-- Location Section
================================================== -->
<section id="location">
<div class="contacts">
<div class="row contact-details">
<div class="columns">
</div>
<div class="columns">
</div>
<div class="columns end">
</div>
</div> <!-- end contact-details -->
</div> <!-- end contacts -->
</section> <!-- end location section -->
<!-- footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns">
<ul class="copyright">
<li>© Copyright 2016 Coming soon</li>
</ul>
</div>
</div>
<div id="go-top"><a class="smoothscroll" title="Back to Top" href="#intro"><i class="icon-up-open"></i></a></div>
</footer> <!-- Footer End-->
<!-- Java Script
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://empire-webhosting.com/new/js/jquery-1.10.2.min.js"></script>')</script>
<script type="text/javascript" src="http://example.com/new/js/jquery-migrate-1.2.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://example.com/new/js/gmaps.js"></script>
<script src="http://example.com/new/js/waypoints.js"></script>
<script src="http://example.com/new/js/jquery.countdown.js"></script>
<script src="http://example.com/new/js/jquery.placeholder.js"></script>
<script src="http://example.com/new/js/backstretch.js"></script>
<script src="http://example.com/new/js/init.js"></script>
</body>
</html>
Change your css to this, because your css is invalid (when you define background-image you can't include the no-repeat. either use background: url() no-repeat; or add background-repeat: no-repeat;):
#intro {
position: relative;
padding-bottom: 102px;
min-height: 900px;
width: 100%;
background: #161415 url(http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg) no-repeat center center;
background-size: cover;
}
Also, not necessary to include the quotes in the url syntax. I prefer to leave it out. More information on this in this post: Is quoting the value of url() really necessary?
I have just started learning front-end web development. I was working on my portfolio mockup and I am having issues with image sizing. I am using bootstrap framework. When i use an image with img-responsive class, the height and width of the image I upload are set automatically. Since I wanted to set the height myself, I changed the height of the image (in css file). However, now when i reduce my browser's width in order to see how my portfolio will look when in mobile view, the width resizes but the height remains the same. This makes the image look disproportional. How can i fix this? If I don't use custom height, everything is fine in mobile view.
this worked for me in my google chrome browser. As far as the mobile view and other devices this meta tag helps "meta name="viewport" content="width=device-width, initial-scale=1.0" (refer to the meta tag in my html head element)
hr {
border-style: solid;
border-width: 1px;
width: 100%;
}
.featured-work {
color: #BCBBBB;
}
.font {
font-family: 'Lato', sans-serif;
font-weight: 100;
font-size: 60px;
}
.font1 {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
}
.footer-title-fonts {
color: #747704;
}
.name {
margin-top: 66px;
}
.ulogo {
margin-top: 40px;
}
.multiple-borders {
box-shadow: 0px 0px 0px 7px black;
}
.multiple-borders1 {
box-shadow: 0px 0px 0px 7px blue;
}
.multiple-borders2 {
box-shadow: 0px 0px 0px 7px red;
}
.multiple-borders3 {
box-shadow: 0px 0px 0px 7px green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container"> <!-- start of container class -->
<div class="row"> <!-- start of row class -->
<!-- udacity logo -->
<div class="col-md-6">
<img class="ulogo" src="images/logo.jpg" alt="udacity logo">
</div>
<!-- end of udacity logo -->
<!-- start of name div -->
<div class="col-md-6">
<h1 class="font name text-uppercase text-right">Jane Doette</h1>
<h5 class="font1 text-uppercase text-right">Front-end ninja</h5>
</div>
<!-- end of name div -->
</div> <!-- end of row class -->
<hr>
<!-- main image -->
<div class="row">
<div class="col-md-12">
<img class="img-responsive multiple-borders" src="http://placekitten.com/1170/500" alt="filler image">
</div>
</div>
<!-- end of main image -->
<!-- bottom 3 images -->
<div class="row"> <!-- start of row class -->
<div class="col-md-12">
<h3 class="featured-work">Featured Work</h3>
</div>
<!-- First Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders1" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Applify</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Appify/</h6>
</div>
<!-- End of frst Image -->
<!-- Second Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders2" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Sunflower</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Sunflower/</h6>
</div>
<!-- End of second Image -->
<!-- Third Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders3" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Bokeh</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Bokeh/</h6>
</div>
<!-- End of Third Image -->
<!-- end of bottom 3 images -->
</div> <!-- end of row class -->
</div> <!-- end of container class -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap_css/bootstrap.min.css">
<link rel="stylesheet" href="Custom_css/P1.css" media="screen" title="no title" charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>
<title>Project 1</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="top-image" src="images/udacity.png" width="200px" class="img-responsive" alt="Responsive image">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1 class="text-thin">Jiwanjot Singh</h1>
<h4>Front-end Ninja</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="images/mainimage.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/arcade.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">ArcadeDemo</h3>
<p>https://github.com/udacity/ArcadeDemo/</p>
</div>
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/alarm.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">AlarmMe</h3>
<p>https://github.com/udacity/AlarmMe/</p>
</div>
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/bokeh.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">Bokeh</h3>
<p>https://github.com/udacity/Bokeh/</p>
</div>
</div>
</body>
</html>