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.
Related
Greeting all,
I'm a newbie here and I just started my carrier as junior web developer. Can some help me with below situation,
I have a WordPress theme, there's some contents doesn't want to be appear so I'm trying to hide those contents by adding some coding to Additional CSS and the div element that I'm trying to hide don't have any class or id given.
Please consider the example code below (I'm not showing entire code here, its just example code exact the same with html elements)
<div id="shop">
<ul class="products">
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
</ul>
</div>
This solution only consider the posted code so not sure if it will also work in the actual wordpress theme, as there might be existing styles that overrides it.
The element to be hidden seems to be an error or helper text that follows a form, so perhaps this can be selected as: a div directly after a form inside summary-bottom.
Example:
.summary-bottom > form + div {
display: none;
}
<div id="shop">
<ul class="products">
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
</ul>
</div>
You can select the element with by using the general div tag.
We can specify this further by assuming that the div should always be a child of the .summary-bottom element, and then can either always select the third child or target the general div based on its inline style attribute.
This would leave you either with: .summary-bottom div:nth-child(2) (starting from 0) or .summary-bottom div[style="color: red;"].
Of course, how you can select such an element heavily varies on the real usage, and they are way more possibilities to do so, but both snippets mentioned should work on the above HTML code.
You can use the selector property
.summary-bottom div:nth-child(2) {
display: none;
}
I have the main HTML page and another HTML page are located in the C:\Users\computer\Pictures. When I run the main HTML page and click on the link to another HTML page, it says "file not found. It may have been moved or deleted. ERR_FILE_NOT_FOUND."
I haven't moved and deleted the files since I saved HTML files in the C:\Users\computer\Pictures.
Here is the HTML code
<div id="Border" class="">
<div id="Topic_List" class="creature">
<ul id="ListName" class="">
<li> home </li>
<li>Life</li>
<li> Interest </li>
</ul>
</div>
</div>
Here is another HTML page
<style>
#Content{margin:5px auto;padding:0;width:600px;height:auto;border:1px solid #666;background-color:#f1f1f1}
#col{margin:5px;padding:0;width:590px;height:auto;}
</style>
<body>
<div id="Content" class="">
<div id="col" class="">
<p><font size="5" >
Hello, Welcome to my home page
</font>
</p>
<h1 align="center"> Activities </h1>
<p><font size="5" >
<ul id="ActivitiesList" class="">
<li> Soccer </li>
<li>Football</li>
</ul>
</font></p>
<p>
</div>
</div>
Try this: I use URIs like this all the time.
<div id="Topic_List" class="creature">
<ul id="ListName" class="">
<li> home </li>
<li>Life</li>
<li> Interest </li>
</ul>
</div>
</div>
If your index.html is in the same folder this should work:
<div id="Border" class="">
<div id="Topic_List" class="creature">
<ul id="ListName" class="">
<li> home </li>
<li>Life</li>
<li> Interest </li>
</ul>
</div>
</div>
If you get "File not found." As I see you got from the other post, go to the file, shift right click and select "Copy Path" Paste that into a notepad to verify the path is correct.
You have a formatting error in C:\\Users\\computer\\Pictures\\home.html. You should use C:/Users/computer/Pictures/home.html. HTML counts C:\\... as 2 slashes, not one. Also, HTML uses forward slashes (/) instead of backslashes (\).
Some of my issues was trying to follow some tutorials about off-screen navigation menu but they didn't quite fit my requirements.
Here is one example
What I am trying to accomplish here is kinda difficult and I can't find the answer. What I want is to press on the label and toggle the sidebar. Most of the tutorials show that but only when these two are directly related.
<div class="header">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>
<input type="checkbox" class="sidebar__toggle" id="sidebar__toggle">
<label for="sidebar__toggle">More info</label>
</li>
</ul>
</div>
<div class="content">
...rest of code here...
</div>
<div class="sidebar">
...sidebar code here...
</div>
And css(I'll be omitting the rest for the sake of simplicity):
.sidebar__toggle:checked ~ .sidebar {
background-color: pink;
}
As I followed the various tutorials on the web, this was the method if they we're related somehow, but mine(or THE one I need) actually is not.
You can put the checkbox anywhere you want as long as the label points to its id using the for attribute. I put it in front of .sidebar below:
.sidebar__toggle:checked ~ .sidebar {
background-color: pink;
}
<div class="header">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>
<label for="sidebar__toggle">More info</label>
</li>
</ul>
</div>
<div class="content">
...rest of code here...
</div>
<input type="checkbox" class="sidebar__toggle" id="sidebar__toggle">
<div class="sidebar">
...sidebar code here...
</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 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. :)