I'm new and i have a question about CSS3 and :empty pseudo-class.
I create a web ajax application. In my page layout I've got a sidebar and i want to hide this if is empty. So i wrote:
#my_sidebar:empty { display:none;}
For display it when isn't empty i wrote
#my_sidebar:not(:empty) { display:block; }
This is working but with chrome the sidebar appear only after one click on the page or on a link. Why?
Can someone help me?
Thanks! (excuse me for my terryfing english!!)
EDIT:
the html page:
<body id='body'>
<!-- Header -->
<header id="top" class="cf">
<div id="branding">
<h1>Project Management</h1>
</div>
<nav id="nav-user">
<ul>
<li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
<li><a id="company" href="azienda">Azienda</a></li>
<li><a id="logout" href="logout">Logout</a></li>
</ul>
</nav>
<nav id="nav-main">
<ul class="cf">
<li>
<button id="back" onClick="javascript: history.back();" href="#" />←</button></li>
</ul>
<!--popup con task finiti -->
<div id="task-ended" class="cf">
<div class="triangle-border top">
<div class="clear"></div>
</div>
</div><!--task-ended-->
<!--popup con task finiti -->
</nav>
</header>
<!-- Main Body -->
<div id="container" class="cf">
<div id="loading" style="display:none"><img src="images/loading.gif" /></div>
<div id="my_sidebar" class="sidebar"></div>
<div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">
Mentis Project Management
</footer>
</body>
and css:
.sidebar {
float:right;
width: 36%;
text-align:left;
}
The Chrome bug apparently only happens with the display property, so you can instead set visibility: hidden; to make it invisible and position: absolute; to prevent the space from being reserved. This doesn't require the use of :not(:empty).
As always, whenever you find yourself pushing browsers to their limits, stop and ask yourself if there's a simpler way to do the job. Depending on what you need, simple calls to jQuery's show() and hide() method could work just as well. :)
Related
So I added smooth scrolling and a button that scrolls you to the bottom and that's the point but now every time I load in and reload the site etc. it automatically scrolls down. I also want to put the "About me" heading further down so it isn't visible unless you click "Click to learn more"
Picture of the site: https://i.gyazo.com/79313e6ee1fe3de82d18b33f238ac5d9.jpg
HTML CODE:
<html>
<head>
<title>Intriguing Copy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
<div class="navbar">
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>About me</li>
<li>Samples</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<h1>THE COPY THAT INTRIGUES BUT DONT DECEIVE</h1>
<div class="About">
<button type="button"><span></span><b>CLICK TO LEARN MORE</button>
<div id="down">
<h1>About me</h1>
</div>
</body>
</html>
I don't understand what you want to say provide CSS for easy to understand your problem.
Set #down as default display: none and then add script(see my code) and also add onclick="show()" in button element,
<html>
<head>
<title>Intriguing Copy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
<div class="navbar">
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>About me</li>
<li>Samples</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<h1>THE COPY THAT INTRIGUES BUT DONT DECEIVE</h1>
<div class="About">
<button type="button" onclick="show()"><span></span><b>CLICK TO LEARN MORE</button>
<div id="down">
<h1>About me</h1>
</div>
<script>
function show() {
document.getElementById("down");
down.style.display = "block";
}
</script>
</body>
</html>
This
<button type="button"><span></span><b>CLICK TO LEARN MORE</button>
is invalid - you cannot nest interactive elements like that. Either use a button or use an anchor.
If your page is automatically scrolling, I'd assume you're reloading the page after clicking this anchor. I suspect that if you look at your browser's navigation bar, it will end with #down, like
https://whateveryourdomain.is/somepage.html#down
That's how page anchors work - the browser will attempt to scroll the page until the matching anchor tag or id'd element is at the top of the viewport.
I noticed that when I scroll upwards fast in Safari, the sticky nav jumps around, then I have to scroll slowly again to get it to click back into it's proper place. I'm using Foundation 6. Also, this is a new issue, as everything used to work just fine in Safari, but something must have changed in the past 4 months or so. See below for an example of the issue.
Here's the HTML for the nav bar. I haven't done anything special with the CSS.
<nav class="top-bar-container hide-for-small-only" data-sticky-container>
<div class="sticky sticky-topbar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
<div class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<ul class="menu menu-hover-lines" data-magellan>
<li><a class="menu-options" href="home">Home</a></li>
<li><a class="menu-options" href="projects">Projects</a></li>
<li><a class="menu-options" href="articles">Articles</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
The issue only arises in Safari. Chrome, etc. everything works fine. Has anyone else had this problem? Any help is appreciated.
Had the same problem. I added an id to the body tag and then anchored the top container to it.
<body id="the-body">
<div data-sticky-container>
<div data-sticky data-margin-top="0" data-top-anchor="the-body:top" data-stick-on="small">
<div class="top-bar topbar-sticky-shrink" id="top-menu">
<div class="top-bar-title">
NAME
</div>
<div class="top-bar-right">
<ul class="menu" data-magellan>
<li>FIRST</li>
<li>SECOND</li>
<li>THIRD</li>
</ul>
</div>
</div>
</div>
</div>
Here is my code:
<div class="wrap">
<div id ="header">
<a href="index" class = "logo">
<img src = "logo.png" alt = "" />
</a>
<nav class="navigation">
<ul>
<li>Share</li> |
<li>Join</li> |
<li>See Safty Tips</li> |
<li>Settings</li>
</ul>
</nav>
</div>
<div class="wrapper">
<img src="accident.png" alt="">
<div id="right-content">
<h2>Hit and Run No Injuries</h2>
<p>2.610 miles from your new neighbor<br />
May 20, 2015 at 12.34 PM </p>
<h4>California HWP 2 - High Level</h4>
</div>
</div>
<div class="wrap">
<ul class="secure_v5">
<li id="li-incident">
<a class="inviteLink dark" href="/v5/Resources.aspx?IFrameURL=Invitationv5&vn=&gORn=1">See Incident Location</a>
</li>
<li id="login-signup">
<a class="button dark" href="V4/Login.aspx?v5=1">Share Incident with Friends</a>
</li>
</ul>
</div>
<div class="thanks">
<p>Sincerely,<br />
The AlertID Team</p>
</div>
<p style="text-align:center;">This sponsor is helping to protect your neighborhood</p>
<div class="footer-links">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
and here is jsfiddle , (didn't include images)
When i run this code, some alignment is not correct,
I need something same like this
I just confused with which exact css can be used, Can anyone help me please?
Thanks,
Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your email, such as background colors and fonts.
You just put div #right-content to right
try it on CSS.
#right-content {
float:right;
width:600px;
}
#right-content h2{
text-align:center;
}
I create a little attribute to h2 inside div #right-content
and define a fixed width for right-content. It's necessary because of attribute float: right.
I'm using 2 languages on my website: Arabic / English
English version: everything is OK.
I'm facing problem with Arabic version only when opening website on Chrome only, if you can check it here online (Arabic):
Here
You will see top margin above header, I'm trying to remove it but I have no idea where it's coming from but it's removed from English version successfully
It will start above .header-wrapper class.
HTML Code :
<div class="header-wrapper">
<div id="welcome">
<form action="http://staging.wain.com.kw/index.php?route=module/language" method="post" id="language_form" enctype="multipart/form-data">
<div id="language">
<a title="English" onclick="$('input[name=\'language_code\']').attr('value', 'en'); $('#language_form').submit();">
English
</a>
<input type="hidden" name="language_code" value="">
<input type="hidden" name="redirect" value="http://staging.wain.com.kw/index.php?route=common/home">
</div>
</form>
<span>مرحبا بالزائر يمكنك</span>تسجيل الدخول<b>أو</b>تسجيل جديد
<div class="links">
حسابي <ul>
<li>حسابي</li>
<li>سلة الشراء</li>
<li>إكمال الطلب</li>
</ul>
</div>
قائمة المقارنة
قائمة رغباتي (0)
</div>
<div id="header" class="sunset">
<div id="menu">
<span>Menu</span>
<ul>
<li class="home"><a title="الرئيسية" href="http://staging.wain.com.kw/index.php?route=common/home"><span><i class="icon-home"></i></span></a></li>
<li>أكواب
</li>
<li>الإكسسوارات
</li>
<li>بوستر
</li>
<li>سماعات
</li>
<li>ملابس
<div>
<ul>
<li>تي شيرت (19)</li>
<li>طويلة الأكمام (2)</li>
<li>قبعات (2)</li>
<li>هودي (3)</li>
</ul>
</div>
</li>
<li>ملصقات
</li>
</ul>
</div>
<div id="logo"><img src="http://staging.wain.com.kw/image/data/logo2.png" title="WAIN" alt="WAIN"></div>
<div id="cart">
<div class="heading">
<h4><i class="icon-shopping-cart"></i><!--سلة الشراء--></h4>
<a><span id="cart-total">سلة الشراء فارغة!</span></a></div>
<div class="content">
<div class="empty">سلة الشراء فارغة!</div>
</div>
</div> </div>
</div>
CSS Code:
.header-wrapper {
max-width: 1200px;
margin: 0px auto 0px;
}
Thank you.
Right after you <body> tag there is a lot of white-space. remove it and the space is gone.
It's generally recommended to keep the markup as clean as possible to avoid porblems like this in the future.
<body>
<meta charset="UTF-8">
After the body tag, there is a whitespace. You need to remove that white space to avoid the margin top.
HTML
<div class="row-fluid" id="content-row">
<div class="span12">
<div class="row-fluid">
<div class="span4" id="home-logo">
<img src="img/layout/logo.png" id="logo">
<ul id="subnav">
<!-- Loaded via AJAX -->
</ul>
</div><!-- ./span4 -->
<div class="span8" id="home-copy">
<p id="home-p">
Foxcode is an investment and merchant banking Firm which advises and invests in small to mid-market companies and projects globally.
</p>
</div><!-- ./span8 -->
</div><!-- ./row-fluid -->
</div><!-- span12 -->
</div><!-- ./row-fluid -->
I try to set #subnav{margin-left: } or #subnav li{margin-left: } to control the element position so it goes to the right a little bit, but nothing happens when I try to.
Concerned element
<ul id="subnav">
<!-- Loaded via AJAX -->
</ul>
Try adding to your CSS:
#subnav{
padding:0px;
margin:0px;
margin-left:10px;
}
JSFiddle