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%;
}
Related
I have the following code on my _Layout.cshtml page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - FeeCalc</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/FeeCalc.styles.css" asp-append-version="true" />
</head>
<body style="background-color:cadetblue">
<header>
<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
<div class="container-fluid">
<span class="navbar-brand" style="display:flex;">
<a href="https://www.google.com/">
<img src="~/Img/Infoorange.png" alt="ACR" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
</a>
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">SpringField</span><br />company Name</span>
</span>
</div>
</nav>
</header>
<div class="container-bg">
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</div>
This page looks like this:
I want to put a container in center of white color just like this:
so that I can put HTML control inside the white space. In order to achieve this. I tried to write the following code:
<div style="margin-top: 70px;position:relative;top:50px">
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;" class="container" >
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</div>
nothing seems to appear on the page. the page looks the same with no color on the container. How can I make a white color center container on this blue color page.
Any help will be greatly appreciated.
I checked your code, and it seems your container-bg class with the white colored background under navbar-brand class.
Add margin-top: 100px; to container-bg class.
<div class="container-bg">
<div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%; margin-top: 100px; height: 90px;" class="container">
<main role="main" class="pb-3">#RenderBody()</main>
</div>
</div>
I'm working on a site for a class project and everything is working fine except when I tried to make the footer sticky the sidebar overlaps the footer when content is added dynamically.
I have the sidebar height set to 90vh because I could not figure out how to get the background color to take up the full height of the sidebar when there was no content I set the sidebar overflow to auto which was working fine but when I try to make the footer sticky it works find until the content grows to big. Scrollbars do appear but the sidebar overlaps the footer.
Here is the html & css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.main-image {
background-image: url(../images/crypto.jpg);
background-repeat: no-repeat;
height: 90vh;
max-width: 100%;
clip: rect(0, 400px, 200px, 0);
}
.sidebar {
height: 90vh;
overflow: auto;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Crypto & Cocktails </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="icon" href="./assets/images/favicon.ico">
</head>
<body>
<!-- header -->
<header id="top">
<div class="row">
<div class="col s12 center #26a69a teal lighten-1">
<img src="assets/images/cryptococktailsheader.jpg" class="responsive-img" alt="Crypto & Cocktails" />
</div>
</div>
</header>
<main>
<div class="row">
<!-- sidebar -->
<div class="col s12 l2 #00695c teal darken-3 sidebar">
<span class="flow-text center">
<h5 class="white-text">Search Coinbase</h5>
<form id="coin-search" action="">
<input id="coin-input" type="text" class="white" name="coin-input"
placeholder="Cryptocurrency Ticker">
<button class="btn btn-lg btn-primary submitButton">Search</button>
</form>
</span>
<div id="myCoins" class="col-12"></div>
</div>
<div class="col s12 l10 content">
<div class="row">
<div class="col s12 l3 ">
<h2 id="coin-name"></h2>
<span id="coin-display" class="flow-text"></span>
<h3 id="drinkName"></h3>
<span id="drinkImg"></span>
<a class="right hide-on-med-and-up" href="#top">Back to top</a>
</div>
<div class="col s12 l7 main-image hide-on-small-only"></div>
</div>
</div>
</div>
</main>
<footer class="#26a69a teal lighten-1 center">
<div class="container">
<div class="row">
<div class="col l12">
<h5 class="white-text">Developers - Contact Us</h5>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2021 Copyright
</div>
</div>
</div>
</footer>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Materialize Framewrk -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<!-- Custom Scripts -->
<script src="./assets/scripts/main.js"></script>
<script src="./assets/scripts/cocktail.js"></script>
<script src="./assets/scripts/coinbase.js"></script>
</body>
We just had to add the z-index: 1; to the footer.
#home::before
{
content: "";
position: absolute;
background: url(1a.jpg) no-repeat center center/cover;
/* opacity: 1; */
height: 100%;
width: 100%;
z-index: -1;
filter: blur(1.5px);
}
here's my code but I want to include only a specific part of image to cover the whole background ..any suggestions/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cakes by nandani</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<div id="leftpor">
<ul>
<li class="items">Home</li>
<li class="items">About us</li>
<li class="items">Items</li>
</ul>
</div>
<!-- <div id="logo"><img src="logo.png" alt="Cakes by nandani"></div> -->
<div id="rightpor">
<ul>
<li class="items">Contact</li>
<li class="items">Gallery</li>
<li class="items">Our Story</li>
</ul>
</div>
</nav>
<section id="home">
<a class="Brand center"> Cakes By Nandani</a>
<a class="Tag center"> Many Emotiions One delight</a>
<button class="btn">Order Now</button>
</section>
<section id="services-container">
<h1 class="hprimary center">Our services</h1>
<div id="services">
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
</div>
</section>
</body>
</html>
enter code here
only some part of image is cropped and used ....how to stop that
I have to move my ESPN to most left on the Navbar and I need to add a scan icon in Navbar like this image. I am drawing the same picture but I won't be able to add the scan icon and add 3 bars right after the programming tab. I am designing the same picture in HTML but I can't get rid of these 2 to 3 things. Any help is really appreciated.
following this image
This is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/responsee.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<link rel="stylesheet" href="css/template-style.css">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
</head>
<body class="size-1140">
<header role="banner" class="position-absolute">
<nav class="background-transparent background-transparent-hightlight full-width sticky">
<div class="s-20 l-2">
<a href="index.html" class="logo">
</a>
</div>
<div class="top-nav s-20 l-20">
<p class="nav-text"></p>
<ul class="right chevron">
<a style="text-align:right;">ESPN</a>
<li><a style="text-align:right;">HOME</a></li>
<li><a style="text-align:right;">SCHEDULE</a></li>
<li><a>PROGRAMMING</a>
<ul>
</ul>
</li>
<li><a >ABOUT</a></li>
<li><a >NEWS</a></li>
<li><a >CONTACT</a></li>
<li><a>SELECTLANGUAGE</a>
<ul>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN -->
<main role="main">
<!-- Main Header -->
<header>
<div class="carousel-default owl-carousel carousel-main carousel-nav-white background-dark text-center">
<div class="item">
<div class="s-12">
<img src="img/header.jpg" alt="">
<div class="carousel-content">
<div class="content-center-vertical line">
<div class="margin-top-bottom-80">
<!-- Title -->
<h1 class="text-white margin-bottom-30 text-size-60 text-m-size-30 text-line-height-1">ESPN SPORTS<br> PROGRAMMING</h1>
<div class="s-12 m-10 l-8 center"><p class="text-white text-size-14 margin-bottom-40">Welcome to ESPN's catalog of sports content available for broadcast worldwide.<br> Every year we distribute more than 6000 hours of live events, highlight series, <br> studio and scripted media to broadcasters across the globs.</p></div>
<div class="line">
<div class="s-10 m-10 l-3 center">
<a class="button button-white-stroke s-6" style="background-color:red;" href="/">+CONTACT US</a>
<a class="button button-white-stroke s-6" style="background-color:black;" href="/">WATCH DEMO</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<script type="text/javascript" src="js/responsee.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/template-scripts.js"></script>
</body>
</html>
my result
I think you are broken down into the wrong part. The logo and nav sections that need to be separated are easier to adjust.
nav {
display: flex;
align-items: center;
justify-content: space-around;
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
flex: 2;
}
p img {
width: 100px;
}
p {
flex: 1;
}
<nav>
<p><img src="https://cdn.iconscout.com/icon/free/png-256/espn-282356.png"></p>
<ul>
<li>HOME</li>
<li>SCHEDULE</li>
<li>PROGRAMMING</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>CONTACT</li>
<li>SELECTLANGUAGE</li>
</ul>
</nav>
You can do this:
put this in head
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
put this where you want your icon to appear
<a><i class="material-icons">menu</i></a>
Good day, slight issue here, I cannot seem place all three of my images in the same row together, can anyone help solve the issue? the first is in one row, then the second and third overlap each other. I have already used bootstrap's 12 column grid but the other 2 just kept going down a row. Also, is there a bootstrap code where the image adjusts to the row? thank you for reading.
heres a js fiddle link: https://jsfiddle.net/wxofr2ae/5/
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Homepage</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="img/link_health.jpg" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="img/link_wellness.jpg" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
</body>
</html>
CSS:
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 300px;
height: 300px;
}
Okay! I just solve your problem by doing just 3 steps:
Step 1: add the closing tag for the <div class="box"> of the BEAUTY block.
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you forgot this closing tag -->
Step 2: remove a redundant </div> tag of the <div class="container"> block
Step 3: change the css class, make width: 100%, this step will solve the image overlap:
.bhw_link {
width: 100%;
height: 300px;
}
You missed closing div <div class="box"> and change css of
.bhw_link {
width: 100%;
height: auto;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 100%;
height: auto;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
It's just because you ommitted the closing tag
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you omitted this closing tag-->
</div>
Try class "img-responsive" for your image tag if you want to scale the image to the parent element or just set it to width 100% because the image is already inside the grid system of bootstrap