I have header which has ul tag with content inside. I can't inline them.
HTML
<div class="navbar-header">
<ul class="nav navbar-nav navbar-right">
<li>
<div>
<span><img src="1"></span>
<p class="p1">row information</p>
</div>
</li>
<li>
<div>
<span><img src="1"></span>
<p class="p1">row information</p>
</div>
</li>
<li>
<div>
<span><img src="1"></span>
<p class="p1">row information</p>
</div>
</li>
</ul>
</div>
Here is fiddle
1) Delete all your CSS and include the bootstrap css and js from CDN since you are using the bootstrap navigation syntax.
2) Change the p element to a span and you are good to go.
To inline them completely with images set p1 class display style to inline-block and remove flex-direction. Like this:
.p1 {
display: inline-block
}
https://jsfiddle.net/toL6f4h5/
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;
}
How to hide with CSS every <div class="rpwwt-post-excerpt"> in my UL/LI list except first one, but to keep all <span class="rpwwt-post-title">
<div id="rpwwt-recent-posts-widget-with-thumbnails-2" class="rpwwt-widget">
<h4 class="widget-title penci-border-arrow"><span class="inner-arrow">WIDGET TITLE</span></h4>
<ul>
<li>
<span class="rpwwt-post-title">TITLE #1</span>
<div class="rpwwt-post-excerpt">POST EXCERPT TO SHOW</div>
</li>
<li>
<span class="rpwwt-post-title">TITLE #2</span>
<div class="rpwwt-post-excerpt">POST EXCERPT TO HIDE</div>
</li>
<li>
<span class="rpwwt-post-title">TITLE #3</span>
<div class="rpwwt-post-excerpt">POST EXCERPT TO HIDE</div>
</li>
<li>
<span class="rpwwt-post-title">TITLE #4</span>
<div class="rpwwt-post-excerpt">POST EXCERPT TO HIDE</div>
</li>
</ul>
</div>
Inside your selector use the :not(:first-child) pseudo-class on the ancestor li to exclude the first <li> in a list from matching the selector - even though the style-rule ultimately affects only div.rpwwt-post-excerpt elements.
Like so:
li:not(:first-child) div.rpwwt-post-excerpt {
display: none;
}
Just select li is not first-child.
use :not for is not , and use first-child to select first element.
so , ul li:not(:first-child) { display:none; }
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 am using a child theme, on one page I want margin left 30 on the other not. But it will effect all pages how do I make it unique?
CSS:
.description.style-16 ol, ul {
margin-left: 30px;
}
.eo-events-shortcode ol, ul {
margin-left: 0; (this one will have no effect)
}
HTML:
<div class="one_third">
<div id="homeboxheader">
<h3 class="highlight">Agenda</h3>
<ul class="eo-events eo-events-shortcode">
<li class="eo-event-cat-agenda eo-event-future">
<li class="eo-event-cat-agenda eo-event-future">
</ul>
<div id="homebox_tabs">
</div>
<div class="one_third">
<div class="description clearfix style-16">
<h3 class="highlight">Werken bij SVHW</h3>
<ul>
<li>
<li>
</ul>
</div>
adding the inline to this
[one_third]
<div id="homeboxheader">
<h3 class="highlight">Agenda</h3>
[eo_events event_start_before='+1 week' event_category=party,birthday's no_events="no events." showpastevents=false numberposts='3'] %event_title% %start{D d/m}{, H:i}% till %end{H:i}{}% [/eo_events]
<div id="homebox_tabs">
<div class="homeboxtab">[button link="http://intranet/wordpress/?page_id=2418" size="small" color="blue"]Go to agenda[/button]</div>
</div>
</div>
[/one_third]
To differentiate the two either adding an ID or class will allow you to specifically target each element.
You need to create something that will uniquely identify the page you want it to apply to.
You can either have the CSS apply only if the <body> has a certain class; or you could use a second stylesheet, or inline styles for that page.
i'm having a hard time getting my Footer Navigation to show up properly now that I'm using some new CSS rules. In addition to this problem IE 9 shows my IMG with a border around the outside of it (much like the underline of a linked item).
Questions as follows:
Why is IE creating a border despite img a { text-decoration: none; } ?
What is up with the footer being all wonky? What am i missing?
Here is my jsfiddle: http://jsfiddle.net/misterizzo/fTe5Q/
<
body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Everything shows up nice in current FF and Chrome browser (as usual)
Thanks!
First question:
You should use a normalise.css to make browsers behave more consistent.
http://necolas.github.io/normalize.css/
This is the bit you need out of that file.
/**
* Remove border when inside a element in IE 8/9.
*/
img {
border: 0;
}
Second question:
Try to increase the width of your footer ul
#footer ul {
width: 530px;
}
Hope that helped.