I just wanted to copy some dropdown menu to other site of mine. but it seems i did something wrong, so all of my dropdown items have some white space aside them. (like the picture)
white space side the dropdown items
but in the first site i developed the code, this problem did not exist! (example)
example of source code dropdown item
actually i mixed bootstrap and materialize to form the code (and i know this is a bad idea, but it worked last time for me).
I just don't know what to do, to remove the gap!
and this is part of my code:
`
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="{% static 'petrobavar/css/materialize.min.css' %} "
media="screen,projection"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<nav class="mb-3">
<div class="nav-wrapper blue-grey darken-1 amber-text darken-text-5" style="font-family: IRANSansWeb">
<i class="material-icons">menu</i>
<a href="{% url 'petrobavar:home' %}" class="left hide-on-large-only"><img
src="{% static 'petrobavar/petrologo.png' %}" style="width: 5rem"></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="tab dropdown-trigger " data-target="dropdown6" style="text-shadow: 0 2px 5px rgba(0,0,0,.5);"><a href="#">ارتباط با
ما</a></li>
</ul>
<ul id="dropdown6" class="dropdown-content center-align" style="font-family: IRANSansWeb">
<li>آدرس و تلفن های تماس</li>
</ul>
<style>
/* Dropdown list color */
.dropdown-content li > a, .dropdown-content li > span {
background-color: #546e7a;
margin: 0;
border: 0;
width: 100% !important;
}</style>
`
Can you please just add padding: 0; width: auto !important; in .dropdown-content class in CSS file as below:
We have added padding and width in last line.
.dropdown-content {
background-color: #fff;
margin: 0;
display: none;
min-width: 100px;
overflow-y: auto;
opacity: 0;
position: absolute;
left: 0;
top: 0;
z-index: 9999;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
padding: 0;
width: auto !important;
}
Please try and let me know.
Related
I am working on a project and i am facing a problem with the navigation section. I am making a navigation bar in which i need an image in the background and in front I want to add div containing links & buttons on that image.
Here is the HTML & CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
font-size: 62.5%;
}
body {
font-family: "Roboto", Courier, monospace;
}
.page-content {
width: 120rem;
margin: 0 auto;
}
.nav-section {
position: relative;
}
.banner-img {
width: 100%;
}
.nav-link-container {
background-color: wheat;
display: flex;
justify-content: space-between;
padding: 1.6rem;
position: absolute;
top: 76%;
left: 10.9%;
}
.nav-link-container ul {
font-size: 1.6rem;
list-style: none;
display: flex;
gap: 4.8rem;
}
.nav-link-container ul a {
text-decoration: none;
}
.nav-btn-container {
display: flex;
gap: 4.8rem;
}
.header-section {
background-color: bisque;
}
.header-section h4 {
font-size: 1.6rem;
padding: 1.6rem;
text-align: center;
}
<!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" />
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
<title>document</title>
</head>
<body>
<nav class="nav-section">
<img class="banner-img" src="https://lehndorff.com/music/wp-content/uploads/2013/10/1600x230-banner.jpg" alt="" />
<div class="nav-link-container page-content">
<ul>
<li><a class="nav-links" href="#">Home</a></li>
<li><a class="nav-links" href="#">About us</a></li>
<li><a class="nav-links" href="#">Services</a></li>
<li><a class="nav-links" href="#">Servers</a></li>
<li><a class="nav-links" href="#">Forum</a></li>
</ul>
<div class="nav-btn-container">
<button class="nav-btn">Login</button>
<button class="nav-btn">Sign up</button>
</div>
</div>
</nav>
<header>
<div class="header-section page-content">
<h4>Hello World!!</h4>
</div>
</header>
</body>
</html>
Now I have two questions (watch the code snippet in full screen please):
When you will zoom in/out, you will see header-section stays in the middle without caring how much we zoom in/out while nav-link-container stays to the left side while zooming out/in. I think this is because of position:absolute;. So how do I fix it? Why is this happening?
I have set margin:0; & padding:0;in * but still if you see there is small pixel of gap between header-section and image. Why is it happening?
We have come up with a solution, Hope it will work for you.
Please refer to this link: https://jsfiddle.net/yudizsolutions/yk8ftdgn/
Here we have taken the image as a background image, instead of taking it in the img tag, and also made modifications in your CSS styles to achieve your desired output.
I'm really new to programming. Whenever I try inserting an image using it moves the border down and inputs down. I then have to move them back to match the text as shown in the picture below. I do that using "margin:" in CSS. Why do the borders and input move down when I try inserting it? Is there an easier way to position things like borders rather than using :margin:" ?
CSS(for the navbar and the input):
#navBar {
border: 2px solid black;
height: 30px;
width: 43%;
margin-top: -42px;
margin-left: 405px;
padding: 5px;
}
#searchInput {
margin-top: 3px;
margin-left: 1250px;
height: 35px;
width: 185px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
outline: none;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Restaurant</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href= "{{ url_for('static', filename='style.css') }}">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<img src="/static/searchImage.png" id="searchImage">
<div id="search">
<input id="searchInput" type="text">
</div>
<div id="navBar">
<a href="deals">
<button id="dealsButton">Deals</button>
</a>
<a href="burgers">
<button id="burgersButton">Burgers</button>
</a>
<a href="drinks">
<button id="drinksButton">Drinks</button>
</a>
<a href="sides">
<button id="sidesButton">Sides</button>
</a>
<a href="desserts">
<button id="dessertsButton">Desserts</button>
</a>
</div>
</body>
</html>
Image:
The border was perfectly aligned with the text before inserting the image and input was right next to the border. But when I insert this happens.
using bootstrap grid for responsive design, but when screen size is reduced, the footer is lost, and one can't move down page. shown below is why.html page plus styling from css file and scss file.
my attempts to fix this have been:
to look for some syntax problem in css file, and i changed background image from body to html to no avail. any help appreciated. https://jsfiddle.net/eojcam/htkxnywL/7/
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="images/favicon_nylon.ico" type="image/x-icon" />
<title>why</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- My styles for project0 -->
<link rel="stylesheet" href="css/styles_p0.css">
<!-- My sass styles for project0 -->
<link rel="stylesheet" href="css/variable_p0.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<a class="navbar-brand" href="index.html">Home</a>
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="why.html">Why</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="examples.html">Examples</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<h1></h1>
<h2>Drop That Pick!</h2> <!-- use of unicode for emoji -->
<p class="header_p">It's gonna happen anyway...😎</p>
</header>
<section class="join">
<div class="container">
<div class="row">
<div class="col">
<p>Several years ago, after returning from a position as Orchestral Guitarist on Royal Caribbean Cruise
Lines ship the "Monarch of the Seas,"</p>
<p>I decided to take some Classical Guitar lessons with a private
teacher. I learned how to play the guitar without a pick...</p>
...revealing some new possibilities.
Like playing Walking Bass Lines,
Chords, and Melody all at once!
</div>
</div>
</div>
</section>
<section class="join">
<div class="container">
<div class="row">
<div class="col">
<table>
<tr>
<th>Finger Style</th>
<th>Pick</th>
</tr>
<tr>
<td>Thumb and Fingers work independently.</td>
<td>Only one attack possible.</td>
</tr>
<tr>
<td>Invented first 😎 (technique has been developed for longer time.)</td>
<td>Reliance, such that if you drop it, (or don't have one),
means you are "out of business!"</td> <!--use of table -->
</tr>
</table>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p id="footer_p">Copyright © 2020 Joe Austin Mcintosh. All rights reserved.</p> <!-- id used -->
</div>
</footer>
</body>
</html>
css:
body{
padding-top:5rem;
background:url(/Users/king/proj_0/images/nylon_string_original.JPG) no-repeat center center fixed;
background-size: cover;
overflow: hidden;
color: #ffffff;
{box-sizing: border-box;}
}
div {
padding: 2px;
text-align: center;
}
h1, h2, h3, h4 {
color: #FFFF00;
}
h3 {
margin-top: 0;
margin-bottom: 0;
}
header {
margin-left: 1%;
margin-bottom: 1%;
}
p {
margin-bottom: 0;
}
table {
margin: 0 auto 0 auto;
border: 2px solid #ffffff;
border-collapse: collapse;
width: 80%;
}
th, td {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
}
th {
background-color: lightgray;
color: #6D2E0D;
}
ul {
list-style: none;
}
.header_p { /* use of class*/
text-align:center;
text-shadow:5px 5px 10px #ffffff;
color: #FFFF00;
}
.join {
padding:2px;
margin-top: -20px;
text-align: center;
}
.row > div {
padding-top:5rem;
color: #ffffff;
}
#media print {
.screen_only {
display: none;
}
}
.section_d {
padding: 2px;
margin-bottom: 0px;
font-family: Palatino, serif;
text-align:center;
}
#a_examples {
color: #ffffff;
}
#footer_p { /* use of id */
font-family: cursive;
padding-top:2px;
padding-left:4px;
padding-right: 2px;
margin-top: 0;
text-align:center;
text-shadow:5px 5px 10px #ffffff;
color: #FFFF00;
}
#p_examples {
text-align: center;
}
#media (min-width: 500px) { /* media query use */
h1::before {
content: "Finger Style Guitar Club";
}
}
#media (max-width: 499px) {
h1::before {
content: "Finger Style!";
}
}
scss:
$cap: small-caps; /* variable use*/
ul {
font-variant: $cap;
}
div {
ul { /* use of nesting*/
li a {
color: #ffffff;
}
}
}
%style { /* inheritance use */
border: 1px solid black;
padding: 1px;
margin: 0px;
}
.full_name {
#extend %style;
color: blue;
}
.age {
#extend %style;
color: blue;
}
.playing_style {
#extend %style;
color: blue;
}
.where {
#extend %style;
color: blue;
}
the footer gets lost as you are not using the repsonsive Bootstraps design in your footer element. Also to utilise the responsive element, and grid component it is best to define an elements col per the device being used. For example:
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-9">
<!-- code in here -->
</div>
</div>
The lg large devices, md medium devices and sm small devices. This is will allow all of your elements to adapt to a device. https://getbootstrap.com/docs/4.5/layout/grid/
Here is more information on the grid system bootstrap uses and how to write responsive code.
Also, to make it easier for custom styling your website you can just use one stylesheet and only link one stylesheet. Your SASS stylesheet will get changed into a .css file, you can write vanilla css in your SASS file and it will remain css.
I want to create a CSS class that, when applied to a div or a p element will place that text in a colored box with an icon based on a unicode character vertically centered to the left of the text. This is to use to create "To Do", "Note", "Warning" type call outs.
For example I have this so far:
.todo {
background-color: lightyellow;
float: right;
border: solid black 1px;
padding: 10px;
max-width: 30%;
}
.todo:before {
content: "\2714";
font-size: 250%;
}
The usage of this class:
<div class="todo">
This is something that really needs to be done.
Even if you don't want to still do it.
</div>
Gives me a result like:
What I would like to do is make the check-mark bigger (my font-size term seems to be ignored) and place it vertically centered in the box and to the left of all text. Can this be done without requiring styling or
other elements in the div itself?
Well, you started right with :before but use position to define its position and alignment.
.tick{
padding-left: 15px;
position: relative;
}
.tick::before {
content: '\2713';
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
<p class="tick">To do</p>
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
}
ul {
background-color: lightyellow;
float: left;
border: solid black 1px;
padding: 10px;
max-width: 30%;
}
ul li {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: 500;
}
ul .icon {
float: left;
font-size: 22px;
padding: 0 15px 0 0;
}
</style>
</head>
<body>
<ul>
<li>
<i class="fa fa-check icon"></i>
<p>This is something that really needs to be done. Even if you don't want to still do it. This is something that really needs to be done. Even if you don't want to still do it.</p>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have an arrow, which is a bookmark link on top of video. How can it be positioned to the bottom of the video, not the top? Arrows div has position:absolute, while main container has relative. Using padding/margin causes overflow. How can i fix it?
/*NAVIGATION-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#navbarul{
width: 20%;
margin: auto;
display: block;
}
#navbar{
display: block;
font-family: "Abel", sans sans-serif;
text-transform: uppercase;
font-size: 2em;
cursor: pointer;
display: inline-block;
text-align: center;
}
#mynavigation{
color: #864cfe;
height:6% ;
}
#media only screen and (max-width : 768px) { #mynavigation{
height:15% ;
}
}
/*IFRAMES--------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
iframe.video_1{
width: 100%;
height: 100%;
margin-top: 3%;
padding: 0;
}
#ifranme_container{
width: 100%;
height: 100%;
position: relative;
}
#scroll-arrow{
position: absolute;
}
#scroll-img{
width: 70%;
height: 70%;
display: inline-block;
margin: 0 auto;
}
#arowwrap{
text-align: center;
pointer-events: absolute;
margin: 100px;
z-index: 25;
}
/*PARAGRAPHS-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.the_idea p{
margin-left: 28%;
}
.the_creative p{
margin-right: 28%;
}
/*BODY, DIVS-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#mybody{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#rowfirst{
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html lang="EN-us">
<head>
<title> Portfolio</title>
<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">
<link rel="stylesheet" href="CSS/pages.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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>
<script>
$(document).on('click', 'a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 1000);
});
</script>
</head>
<body id="mybody">
<div id="rowfirst" class="container-fluid">
<div id="ifranme_container" class="embed-responsive embed-responsive-16by9">
<iframe class="video_1" src="https://player.vimeo.com/video/195665241"></iframe>
<div id="arowwrap"> <a id="scroll-arrow" href="#scroll"><img class="img-responsive center-block" id="scroll-img" src="img/arrow.png"></a></div>
</div>
<div id="scroll" class="col-lg-6 the_idea">
<p>We collaborated with 180 LA to create an installation piece using HP’s versatile Pavilion X2 laptops; in order to showcase the submissions and bring fan generated content to the forefront of the red carpet premiere event.
180 LA hosted an online microsite to gather fan submitted light side and dark side theme renditions. Select entries were chosen and the user generated content was displayed on the HP Pavilion X2 computers. The result was an immersive moment that connected celebrities to the fans by giving them a chance to view the videos and experience the custom soundtracks synched in unison.
</p>
</div>
<div class="col-lg-6 the_creative">
<p>As an extension of HP’s larger “Keep Reinventing” campaign, HP partnered with Disney to create the “Sound Wars" experience for the global premiere of Star Wars™: The Force Awakens.
HP challenged Grammy nominated producer DJ Snake and Vine Star Rudy Mancuso to reinvent the music of Star Wars™: The Force Awakens in a whole new way. The video acted as inspiration and invited fans to record themselves recreating the sounds of two iconic Star Wars themes in their own way, for a chance to have their video featured on screen and on the red carpet using #awakenyourforce.
</p>
</div>
<nav id="mynavigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div id="headernav" class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Portfolio</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<div id="navbarul">
<ul class=" nav navbar-nav">
<li id=webli><a id="navbar">Web</a></li>
<li id="videoli"><a id="navbar">Video</a></li>
<li id="photoli"><a id="navbar">Photo</a></li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>
For bottom positioning use position and bottom property.
#arowwrap{
width: 100%;
text-align: center;
margin: 100px auto;
z-index: 25;
position: absolute;
bottom: 0;
}
What you want, if I understand correctly, is something like this:
#arowwrap{
position: absolute; /* You had pointer-events */
bottom: 20px; /* put the container to the bottom */
left: 0; /* Left and Right at 0 will center it */
right: 0;
margin: 0 auto; /* May or may not need this */
text-align: center; /* center it if you're using images or text */
height: 40px; /* Just to see it */
width: 40px; /* Just to see it */
}
Here is a codepen I made with your code, trying to understand the issue.