I am having trouble with using margin-left with safari
here's my css
<style>
.profile___options {
position: absolute; width: 828px; height: 45px; border-top: 1.1px solid #eee; margin-top: 97px; margin-left: 282px;
}
.profile___options ul {
float: right;
margin-right: 329px;
}
.profile___options ul li {
border-right: 1px solid #e9eaed;
float: left;
font-size: 15px;
font-weight: 600;
height: 43px;
position: relative;
list-style: none;
vertical-align: middle;
white-space: nowrap;
cursor: pointer;
padding: 16px;
color: #365899;
padding: -1px;
}
</style>
and here's my html code
<div class="profile___options">
<div class="fsaafFDSA__">
<div class="223__adAas">
<div class="profile___options_inner">
<ul class="user_ul">
<li>
<a class="questions_link">Questions</a>
</li>
<div class="user_bookmark" style="
position: absolute;
margin-left: -121px;">
</div>
<li style="width: 136px;" class="followerLink">
<!--<span class="badge badge-danger" style="color: #fff;background-color: #dc3545;width: 19px;margin-top: 5px;position: absolute;margin-left: -7px;">3</span>-->
Followers
</li>
<li style="width: 136px;" class="followingLink">
<!--<span class="badge badge-danger" style="color: #fff;background-color: #dc3545;width: 19px;margin-top: 5px;position: absolute;margin-left: -7px;">3</span>-->
Following
</li>
</ul>
</div>
</div>
</div>
</div>
and here's the result on chrome
result on chrome
and here's the result on safari
Result on safari
what I am trying to accomplish is to keep the bottom navbar with the black outline to be aligned at the same place on both browsers
Thanks,
Arnav
Try this:
-webkit-margin-start (left)
-webkit-margin-end (right)
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
Hope I helped.
Related
this might be an easy one.
This is how my pure css menu currently looks like:
html, body {
margin:0;
padding: 0;
font-family: arial;
}
/* Menu */
.menu__wrapper {
background: #fff;
z-index: 8000;
min-height: 30px;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Main links */
.menu__mainlink {
cursor: pointer;
border: none;
color: $dark-color;
padding: 5px 16px;
display: inline-block;
}
/* Sublinks */
.menu__sublink {
font-size: 16px;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.menu__mainlink, .menu__sublink:hover {
color: red;
text-decoration: none;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Sticky header */
.menu__wrapper.sticky {
position: fixed;
background-color: #fff;
width: 100%;
top: 0px;
}
/* Dropdown button */
.sticky .dropdown .dropbtn, .sticky a {
color: #000;
}
<div class="menu__wrapper padding-left-large sticky">
<div class="dropdown no-padding-left">
<a class="menu__mainlink" href="#">Main</a>
<i class="fa fa-caret-down"></i>
<div class="dropdown-content">
<a class="menu__sublink" href="#">Information</a>
<a class="menu__sublink" href="#">Archiv</a>
<a class="menu__sublink" href="#">Kontakt</a>
<a class="menu__sublink" href="#">Impressum</a></div>
</div>
<div class="dropdown no-padding-left">
<a class="menu__mainlink" href="#">Program</a>
<i class="fa fa-caret-down"></i>
<div class="dropdown-content show">
<a class="menu__sublink" href="#">This</a>
<a class="menu__sublink" href="#">That</a>
<a class="menu__sublink" href="#">Really_long_menu_item</a>
<a class="menu__sublink" href="#">Calendar</a></div>
</div>
<div class="dropdown no-padding-left">
<a class="menu__mainlink" href="#">Found</a>
<i class="fa fa-caret-down"></i>
<div class="dropdown-content">
<a class="menu__sublink" href="#">Videos</a>
<a class="menu__sublink" href="#">Image</a>
<a class="menu__sublink" href="#">Sound</a>
<a class="menu__sublink" href="#">Text</a>
</div>
</div>
</div>
Pen: https://codepen.io/t-book/pen/yLNwRba?editors=1100
Question 1: How can I color red the parent menu item like "main" when hovering over its subitems (like Archiv or Kontakt)?
Question 2: How could I push the absolute positioned submenu left to align it under its parent? The moment I position the submenu relative it will keep the x of its parent but unfortunately, in case of really long submenu names, it pushes the next floated parent item right.
Answer 1:
.dropdown:hover> a{color:red;}
Answer 2:
remove overflow:hidden; to .dropdown
add position:relative; to .dropdown
remove width: 100%; from .dropdown-content
I built a horizontal menu with dropdown menus under each category. I know in general my website coding has been unorganized, but the main issue is why the dropdown menus are obscured by a wrapper I have above the main content of my page. In the jsfiddle it would be behind the "Uganda" and extend across the page. Whenever I open a dropdown menu however, the dropdown goes behind the wrapper despite it being classified as a background-image in my css.
https://jsfiddle.net/pr8kexmt/
a {
text-decoration: none;
display: block;
padding: 12px 16px;
}
body {
margin: 0px;
overflow-x: hidden;
}
.bodycontent {
z-index: -1;
}
.content {
font-family: verdana;
font-size: 30px;
}
.donate {
background-color: orange;
border: white;
color: rgb(255, 255, 255);
padding: 7px 14px;
font-size: 15px;
border-radius: 8px;
}
.donate:hover {
background-color: rgb(102, 51, 0);
color: rgb(255, 255, 255);
}
.divnav {
width: 100%;
overflow: hidden;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
font-size: 13px;
border: none;
outline: none;
background-color: inherit;
float: right;
display: block;
margin: 3px 3px 3px 3px;
font-family: verdana;
font-weight: 550;
}
.dropbtn:hover {
color: orange;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
overflow: auto;
top: 100%;
}
.dropdown-contentblock {
height: 20px;
}
.dropdown:hover .dropdown-content {
display: block;
}
html {}
.image {
overflow: hidden;
}
.navbar {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.navelement {
float: right;
display: block;
margin: 3px 3px 3px 3px;
font-family: verdana;
font-size: 13px;
font-weight: 550;
}
.nava {
padding: 5px;
}
.nava:hover {
background-color: white;
color: orange;
}
.pagetitle {
height: 68px;
width: 100%;
background-image: url("pictures/titlebar1.jpg");
z-index: -10;
}
.par {
/* DIV THAT GOES UNDER TODOCONTENT ONLY AND MARKS A PARAGRAPH WITH INFORMATIVE CONTENT*/
}
.parcontent {
font-family: verdana;
color: rgb(150, 150, 150);
font-size: 15px;
}
.titleimage {
overflow: hidden;
height: 310px;
margin: 0px;
width: 100%;
}
.title {
font-family: verdana;
font-size: 50px;
color: white;
}
.todocontent {
width: 47%;
/* A DIV WITH CLASS TODOCONTENT MEANS A DIV THAT WILL CONTAIN ALL INFORMATIVE CONTENT OF THE PAGE*/
}
.wrapper {
width: 100%;
height: 5%;
overflow: hidden;
}
<div class="titleimage">
<img src="file:///Users/kirannairrl/Desktop/KiranNairRL/internship/current/pictures/heading2.jpg" alt="GLI.logo" style="width:100%;height:100%;">
</div>
<div class="divnav">
<div class="wrapper" style="POSITION: absolute; TOP: 300px; LEFT: 0px;">
<img src="file:///Users/kirannairrl/Desktop/KiranNairRL/internship/current/pictures/wrapper.png" alt="wrapper" style="width:20000px;height:5px;">
</div>
<div style="POSITION: relative; TOP: 20px; LEFT: 15%;">
<img src="file:///Users/kirannairrl/Desktop/KiranNairRL/internship/current/pictures/GLI.logo.png" alt="GLI.logo" style="width:145px;height:152px;">
</div>
<div style="POSITION: relative; TOP: -50px; LEFT: 10%;">
<ul class="navbar">
<div class="dropdown">
<button class="dropbtn">HOME</button>
<!--<div class="dropdown-content">
HOME
</div>-->
</div>
<div class="dropdown">
<button class="dropbtn">ABOUT</button>
<div class="dropdown-content">
Vision & Mission
What We Do
Our Story
GLI Leadership
Academic Partners
Annual Report
</div>
</div>
<div class="dropdown">
<button class="dropbtn">PROGRAMS</button>
<div class="dropdown-content">
Immersion Trips
Internships
IKnow Concert Series
Women's Leadership Retreat
Youth Summit
</div>
</div>
<div class="dropdown">
<button class="dropbtn">ENTUSI</button>
<div class="dropdown-content">
About Entusi
Entusi Leadership
</div>
</div>
<div class="dropdown">
<button class="dropbtn">MEDIA</button>
<div class="dropdown-content">
Press
Blog
Videos
</div>
</div>
<div class="dropdown">
<button class="dropbtn">UPCOMING EVENTS</button>
<!--<div class="dropdown-content">
UPCOMING EVENTS
</div>-->
</div>
<div class="dropdown">
<button class="dropbtn">TRIP PREP</button>
<div class="dropdown-content">
Orientational Materials
F.A.Q.
</div>
</div>
<div class="dropdown">
<button class="dropbtn">RESEARCH</button>
<div class="dropdown-content">
Articles
Capstones
</div>
</div>
<div class="dropdown">
<button class="dropbtn">CONTACT</button>
<!--<div class="dropdown-content">
CONTACT
</div>-->
</div>
</ul>
</div>
<div class="divdonate" style="POSITION: relative; TOP: -140px; LEFT: 80%;">
<button class="donate">DONATE NOW</button>
</div>
</div>
<body>
<div class="bodycontent">
<div class="pagetitle">
<div>
<header class="title" style="POSITION: relative; LEFT: 15%">Uganda</header>
</div>
</div>
<div class="todocontent" style="POSItiON: relative; TOP: 15%; LEFT: 15%;">
<div class="par" style="POSITION: relative; TOP: 15%; LEFT: 0%;">
<p class="parcontent">
Uganda was formed from the colonization of the Buganda Kingdom by the British in the 19th century. Britain wanted to protect the viability of the Nile River for its trading potential which prompted the British government to annex Buganda to create the
Uganda Protectorate in 1894. In 1962 Uganda regained its independence and declared itself a republic with Milton Obote as the first prime minister and former Bugandan King Muteesa as the president. Despite being largely ceremonial, Obote removed
the presidential position and established a new constitution in which he became a powerful president similar to a dictator. After committing many atrocities Obote was removed from power in a coup orchestrated by General Idi Amin who seized control
of the country. Amin proceeded to be nearly as atrocious as Obote when almost 500,000 citizens perished under his regime. Despite entering presidency with cheers, his actions made the country of Uganda hate him. After Amin was removed from power
by largely Tanzanian forces, Obote returned to presidency. A war broke out as a result from the election resulting in the deaths of between 100 and 500,000 people. This compelled 2 military commanders to conduct a coup in which Museveni gained
control. Yoweri Museveni remains in power till this date.
</p>
</div>
</div>
</div>
It's because of this
.divnav {
width: 100%;
overflow: hidden;
}
it really needs to be overflow hidden? if you remove it, works fine
[This is what I want to do: ](
https://developers.google.com/maps/documentation/javascript/?csw=1#Custom_Controls)
What is the floating window called? (which says base maps, with drop down list.)
It's not over lay, nor infowindow, what is it?
It's a div, which they've styled to float over the map pane. If you inspect the element you can see:
<div class="open visible" id="panel">
<div class="mtam-title">
<div id="panel-title">Base Maps</div>
</div>
<div id="panel-body">
<div class="banner basemaps-banner">
<div class="g-plusbtn">
<div id="___plusone_1" style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 24px; height: 15px;">
<iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&annotation=none&size=small&origin=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com&url=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com%2Fdemos%2Fbasemaps&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.tbkZX74SaQs.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOYzemCn6PkYhgzRa3g2KtXX0dBpg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1433919884595&parent=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com&pfname=&rpctoken=31017501" name="I0_1433919884595" id="I0_1433919884595" vspace="0" tabindex="0" style="position: static; top: 0px; width: 24px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 15px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" width="100%" frameborder="0"></iframe>
</div>
</div>
</div>
<div class="section section-text">
<p>
For the last decade, we've obsessed over building great maps—maps that are comprehensive, accurate, and easy to use.
</p>
</div>
<div class="section">
<div class="tabs"><a class="active" href="#">Base Maps</a>Styled Maps</div>
</div>
<div class="">
<div>
<h2>Go Further</h2>
<ul style="display: block;">
<li><a class="active" href="/demos/basemaps/new-york">New York</a></li>
<li>Hong Kong</li>
<li>Search</li>
</ul>
<ul style="display: none;">
<li>Sydney</li>
<li>Tokyo</li>
<li>San Francisco</li>
</ul>
</div>
</div>
</div>
</div>
and also:
#panel.visible {
right: 20px;
}
#panel.open {
top: 20px;
}
.section-demos #panel {
display: block;
}
#panel {
position: absolute;
z-index: 1000;
top: 0px;
right: -500px;
width: 270px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 5px;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.61);
display: none;
}
I'm trying to use angular to create list of elements. The page will be an app on mobile phone.
The list itself can have many elements so what I expect is that the ul element should be scrollable ("swipable"?). I tried to follow some example like http://jsfiddle.net/sirrocco/9z48t/ and http://jsfiddle.net/qcv5Q/1/..
This is the html code:
<div class="container">
<div id="spinner-icon" style="display:none">
<span class = "icon-spinner"></span>
</div>
<div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeElementInfo">
<div class="clearfix">
<div class="pull-left">
<h4>{{cei.description}}</h4>
<p>{{cei.name}}</p>
</div>
</div>
<div class="log-widget-list">
<ul class="list scroller clearfix" id="elements-list">
<li class="pull-left" ng-repeat="tinfo in cei.techInfo | orderBy: 'tinfo.sentTime'">
<h4 class="align-center">{{tinfo.elementShortCode}}</h4>
<div class="clearfix">
<span class="icon-clock pull-left"></span>
<span class="pull-right"> {{tinfo.sentTime}}min</span>
</div>
</li>
</ul>
</div>
</div>
</div>
and this is the css code:
.list {
margin: 0;
padding: 0;
}
.log-widget-list {
height:100px;
width: 720px;
overflow: hidden;
}
.log-widget-list .scroller{
overflow-x: scroll;
list-style-type: none;
width: 1500px; /* combined width of all LI's */
}
#elements-list li {
width: 100px;
list-style: none;
box-sizing: border-box;
border-top: none!important;
background-color: #0accf8;
padding: 4px;
}
#elements-list li:not(:last-of-type) {
border-right: 3px solid #ffffff;
}
#elements-list [class^="icon-"], #elements-list [class*=" icon-"] {
margin-top: 4px;
font-size: 12px;
}
Now the problem is that i don't want that the horizontal scrollbar appears, but it appears and i don't understand why... Any idea?
add overflow:hidden in #wrapper css.
CSS:
#wrapper {
background: transparent;
width: 550px;
color: white;
height:100%;
overflow:hidden;
}
Demo: http://jsfiddle.net/lotusgodkk/9z48t/5/
DEMO
http://jsfiddle.net/FTUrF/6/
Changed some CSS here:
.log-widget-list {
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
.log-widget-list .scroller {
width: 215px;
height: 300px;
overflow: scroll;
padding-bottom: 15px;
list-style-type: none;
}
Added height and padding-bottom in .scroller and border in .log-widget-list
and added some more of these:
<span class="pull-right"> {{tinfo.sentTime}}min</span>
What I'm trying to do is to change the background color on the whole "row" div on mouse over and open the href link clicking on any part of the div. I have tried all the solutions I found on SO (both with jquery and pure css) but I can't get it working
Here is my code:
HTML
<div id="row">
<div class="document-date"><?php the_time('d-m-Y') ?></div>
<div class="document-category"><img src="/images/icon.png" /></div>
<div class="document-title">My link
<p>some description</p>
</div>
And the CSS
#row {
position: relative;
width: 700px;
padding: 5px 0 5px 10px;
display: block;
float: left;
}
#row:hover {
background: #fbf5d8;
}
.document-date{
float: left;
color: #1b6392;
font-size: 12px;
margin-right: 10px;
line-height: 35px;
}
.document-category{
float: left;
margin-right: 10px;
line-height: 35px;
}
.document-title {
width: 350px;
float: left;
color: #020100;
font-size: 12px;
font-weight: normal;
margin-top: 1px;
text-decoration: none;
}
.document-title a{
width: 350px;
float: left;
color: #020100;
font-size: 14px;
font-weight: bold;
margin-top: 1px;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.document-title a:hover{
color: #fff;
}
Any suggestion?
Assuming when you say li, you mean div#row
CSS:
#row:hover {
cursor: pointer
}
JavaScript (using jQuery):
$('#row').click(function() {
// do something
// example:
$(this).find('a:first').click();
});
<div id="row" onclick="alert(1)">
<div class="document-date" >12-08-2014</div>
<div class="document-category" ><img src="/images/icon.png" /></div>
<div class="document-title" ><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
</div>
This would do the trick.
Or if you want the divs separately
<div id="row">
<div class="document-date" onclick="alert(1)">12-08-2014</div>
<div class="document-category" onclick="alert(1)" ><img src="/images/icon.png" /></div>
<div class="document-title" onclick="alert(1)"><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
</div>