I want to modify unordered lists on my website so that when the text is wrapped to the next line within one <li> it is indented according to the line above. I tried many different ways but nothing seems to be working. I don't have much experience with css so I might just be missing something simple...
.entry ul li{
list-style:disc inside none !important;
padding:5px 0px
}
It's because the list-style style has inside as part of the declaration.
Take this off and then adjust the margin-left to push the whole list item to the right, and then padding to separate the text from the list item bullet. Something like this should do it:
.entry ul li {
list-style: disc !important;
margin-left: 20px;
padding: 3px 0 0 5px;
}
It's not indented properly because its not on single line. please add <p> tag inside your <li> and padding to <p> tag from left side like :
.entry ul li p{
padding: 0px 0px 0px 10px;
}
no "rauberdaniel" thats a waste of time, anyways i found out why my UL tags in my source code wouldn't work with the h2 and h7 in the UL tags ... because i edited all of the min.css and default.css classes that my source code calls but it was for this drop down menu
but.... what i failed to see when editing all of the .css folders ... there was a menu.js that controlled the main menu functionality... DUH!!! thought it was a general purpose function in one of the (JavaScript)libraries but surely it was there.... this was a template i downloaded and edited.....and the js code is below after the source code calls....
<div id="MainMenu">
<ul id="MegaMenu">
<li> <h2 class="question">Mechanical</h2>
<div>
<p> ......urthrtfhfthth</p>
</div>
function megaHoverOver(){
// show effect
$(this).find(".sub").stop().slideDown();
// render cufon on headings again (because it wasn't visible before)
Cufon.replace('#MainMenu h2', { fontFamily: 'Vegur' });
//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
i feel so stupid b/c i spent an hour and half searching the plain CSS styles.. dumb waste of time ....but there it is (h2)... now to add and h7 which i added into the css styles ALLL because i wanted the text smaller than the title describing the point and click drop down button in the HTML site.
Related
I'd like to have links zoom in when the mouse hovers on them, I've tried with transform unsuccessfully, but then I found this answer, which looked promising.
However, making an inline element an inline-block also seems to prevent it from being split across several lines, as shown in the snippet below, which can create very unpleasant results for short width of the enclosing box.
div {
border: 1px solid black;
text-align: justify;
width: 20em;
}
a {
text-decoration: none;
display: inline-block;
}
a:hover {
transform: scale(1.01);
}
<div>
<p>Today, <a href="https://github.com/Aster89/WinZoZ">my
Vim plugin for easy window navigation</a>, which I named
WinZoZ,
has got its first star! Given <a
href="https://stackoverflow.com/questions/69007954/vim-remap-ctrl-w-in-insert-mode-to-behave-as-it-does-in-normal-mode#comment121984179_69007954">this
comment on StackOverflow</a>, the star is from the user #yolenoyer.
</p>
</div>
On the other hand, in this specific example above I see that the first link is so long that it does split across lines, so it looks like inline-block elements can indeed do that. How can allow it when they are shorter than the text width?
The animation missing is due to the original link (a tag) element not having the transition: property defined. Per the positioning documentation here it seems only inline-block is suitable for flowing text and that fails to show wrapped text, even with wrap: break-word; present. The inline-flex, inline-grid don't work either since they are both block display types.
One solution would be to break the text lines at certain points and setting different <br> elements to show at different #media widths for certain page widths/devices. However the inline-block elements cannot wrap like normal text, so the breaks just end up making it a 2-line block in the middle of the text.
div {
border: 1px solid black;
/* text-align: justify; */
width: 20em;
}
a {
text-decoration: none;
/* new */
transition: transform .15s; /* Animations: "transform" on a-tag must be present */
display: inline-block;
}
a:hover {
transform: scale(1.01); /* then we transform the transition here */
-ms-transform: scale(1.01); /* IE 9 */
-webkit-transform: scale(1.01); /* Safari 3-8 */
}
<div>
<p>Today, <a href="https://github.com/Aster89/WinZoZ">my
Vim plugin for easy window navigation</a>, which I named
WinZoZ,
has got its first star! Given <a
href="https://stackoverflow.com/questions/69007954/vim-remap-ctrl-w-in-insert-mode-to-behave-as-it-does-in-normal-mode#comment121984179_69007954">this
comment on StackOverflow</a>, the star is from the user #yolenoyer.
</p>
</div>
Some JS scripting
A breaking up of the line into blocks in a ul list with the li items being inline-block themselves could be a solution. A function to run at DOM load on each desired div's contents could do this. A loop for all a elements in those divs that transform each of the links into an array of words and puts the array items in a ul -> li. Perhaps there is a jQuery plugin for this already.
Light JS example
(not complete code, but using querySelectorAll, which could be used to gather the links from a <div> with a class you put as the function input):
<script type="text/javascript">
// function to look for a-tags in a DIV with a specific class
function linkToList(inputDivClass) {
// get the links inside the div with the input div class
const allLinks = document.querySelectorAll("div." + inputDivClass + " > a");
for (var i = allLinks.length; i < 0; i++) {
// here we go through the links returned from the div...
}
// then go through the data and see what to put where...
}
// when dom is loaded we run the function that looks for the divs with the a-tags...
document.addEventListener("DOMContentLoaded", linkToList(inputDivClass) );
</script>
Am developing a WordPress site using the underscores theme and I just added a widget with contact info to my site with the following code:
<div class="topheader">
<div class="info">
<?php if( is_active_sidebar( 'info' ) ) : ?>
<?php dynamic_sidebar( 'info' ); ?>
<?php endif; ?>
</div>
</div>
CSS:
.topheader {
background-color:#e6e6e6;
}
.info {
max-width: 1280px;
}
The info is the first thing that I on the page. But I see that there is a space at the top and at the bottom where my slider is located.
How can I eliminate the existing margin that I see before and after the heading?
Cause at the moment I gap, then the widget, and after the widget there is another gap and only then the slider.
I am tried to setting the header margin to 0px, but it didn't really work.
Here a screenshot
How can I eliminate the existing margin that I see before and after the heading?
By heading do you mean an H3 tag by any chance? These are default in sidebars. You should just set margin-top:0 on the H3 tags in your sidebars, to get rid of any margin pushing your sidebar down.
To counter act this, I would then add some margin-bottom to the widget block to space them out a bit.
I think that's what you mean.. but it's hard to understand without any visual representation of what your problem is.
You have to set the start values in css like this:
body, html {
margin: 0;
padding: 0;
}
Otherwise please copy the whole Code of the page here. Open it in your browser, open the site Code and copy all.
Just inspect the element and test whats causing the margin. You can try this code. This might help. But not sure because your question is not clear enough to know your code.
*{
margin: 0;
padding: 0;
}
.top-header, .info {
margin: 0;
padding: 0;
}
I'm building some sort of framework where the content of the page can be edited with ContentTools. A requirement of ContentTools is that the regions must be parents.
If you try this:
<h1 data-editable data-name="heading">Content</h1>
It wont work as a region has to contain editable block level elements. A way around this is to wrap the tag like so:
<div data-editable data-name="heading">
<h1>Content</h1>
</div>
But I just want to make the text editable, so I automatically wrapped the inner elements in a div. This works but it affects the styles.
Is there a way to make a div 'transparent', so it will inherit all styles?
I tried the following code.
To be clear: In this example I don't write the h1 css, so i have no influence over which styles are used.
$("[data-editable]").wrapInner("<div class='innerWrap'></div>");
/* example h1 css, could be anything */
body > h1{
font-size: 40px;
color: red;
font-family: sans-serif;
border: 3px solid green;
background-color: blue;
padding: 5px;
}
.innerWrap{
all: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 data-editable data-name="heading">Content</h1>
As you can see some things work. But things like a border will double.
It has to be no difference with or without the innerWrap.
Is it possible to do this with css? It has to work on every css property.
I think you need to wrap the h1 with a div not div with h1.
for eg. .wrapInner() will produce something like
<h1 data-editable="" data-name="heading">
<div class="innerWrap">Content</div>
</h1>
But what you want is
<div data-editable data-name="heading">
<h1>Content</h1>
</div>
So please try with .wrap() instead of .wrapInner()
$("[data-editable]").wrap("<div class='innerWrap'></div>");
h1{
font-size: 40px;
color: red;
font-family: sans-serif;
border: 3px solid green;
background-color: blue;
padding: 5px;
}
.innerWrap{
all: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 data-editable data-name="heading">Content</h1>
.innerWrap{
all: inherit; /* remove it*/
}
As a default behaviour, if you not specify css props for ".innerWrap" it will look same as parent only
The ability to make an individual element editable standalone as opposed to as part of a collection (e.g in a region) is currently being worked on: https://github.com/GetmeUK/ContentTools/issues/79
There is however a short-term imperfect approach you could try, first change you're HTML as follows:
<h1 data-editable data-name="heading">
<span data-inline data-ce-tag="h1">Content</span>
</h1>
This will make the h1 tag the region and tell ContentTools/Edit to treat the inner span element as a h1 (text) element (thanks to the data-ce-tag).
But the next problem is that if the user hit's return you'll end up with a new paragraph tag inside of your h1 - which we don't want. This is where the data-inline attribute comes in, we need to listen for mount events and if the element mounted has the data-inline attribute we'll modify its behaviour so it can't do certain things which might produce undesirable events:
ContentEdit.Root.get().bind('mount', function(elem) {
// We're only interested in elements that are marked as inline
if (elem.attr('data-inline') === undefined) {
return;
}
// Change the default behaviour of the element
elem.can('drag', false);
elem.can('drop', false);
elem.can('remove', false);
elem.can('spawn', false);
});
You can find out more about modifying behaviours here, along with their current limitations here.
I'm working on a Classifieds/Ads Page for a client using content from a specific Database. I'm close to get the look I'm looking for but now I have a problem. I don't want CSS Styles for the empty boxes to the available spaces.I just want the CSS Styles on the ones that will appear once the information arrive to the database and it's ready to show on the Classifieds/Ads page.
Is there a way to have a CSS style that only is applied when content is present?
This is my test page.
notice how I kind of cheated the CSS style so the blank boxes (spaces) show a text saying: "place your ad here!" but I really don't want those blank boxes there. Any help will be apreciate!
thanks in advance.
All you need to do is to find the parent div which does not have content on its header (for instance) using jQuery. Then you can set its display property to none. I have created a working example ****HERE****
HTML:
class="ad">
<h2>This is an ad</h2>
<p>this is the ad which has been added by the database</p>
</div>
<div class="ad">
<h2></h2>
<p></p>
</div>
CSS:
* {box-sizing: border-box;}
h2, p {margin:0; padding:0;}
.ad {
display: block;
float: left;
height:300px;
width:130px;
background: #999;
margin: 10px 20px;
padding: 5px;
}
jQuery:
$(".ad").each(function() {
if ($(this).find("h2").text() == "") {
$(this).css("display","none");
};
})
This seems more of a backend issue than a CSS one. Your php script shouldn't be outputting html for ads that don't exist.
Given is the following page (SSCCE, just like we all like it):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {
border:0;
margin:0;
padding:0;
}
body {
background:#BCD5E1;
font:.85em Verdana;
}
#flag_panel {
position:absolute;
right:15px;
top:20px;
}
#flag_panel img {
vertical-align:middle;
}
#flag_panel .selected_image {
border:solid 2px #444;
padding:5px;
}
</style>
</head>
<body>
<div id="flag_panel">
<a href="#">
<img src="ro.gif" />
</a>
<img class="selected_image" src="us.gif" />
</div>
</body>
</html>
This HTML file together with the 2 images can be found at the URL: image-problem.zip (1.6 KB)
The expected result is:
But the actual result is:
As you can see, there's a little underscore between the 2 images. And I can't figure out why.
I tried this code in Firefox v24 and in Chrome v31. So I'm pretty sure I'm the one missing something.
I noticed that this problem goes away in 2 situations:
if the <img class="selected_image"... comes before <a href="#"... (a.k.a. if they're swapped)
if the first image is NOT enclosed inside an achor tag (<a>).
The goal of this piece of code is to be able to switch languages between English and Romanian on a site that I own. So one of the images must always have that border around it and the other must always be clickable. But I want to be able to do this without that underscore appearing there (looks ugly / buggy).
Any ideas on how to solve this ? Thanks.
Put the a tag element and its content on one line, like: <img src="ro.gif" />
EDIT:
The text-decoration: none; approach still leaves you with a clickable white space.
Just use the below in your code
#flag_panel a {
text-decoration: none;
}
Because you are using, so white space is the issue there
<a href="#">
<img src="#" />
</a>
So that's nothing but default text-decoration
Generally you should use the below snippet in your CSS
a {
text-decoration: none; /* Gets rid of dirty default underline */
}
Note: The above is an element selector, will select all a elements
in the document, but this is a general approach so thought I should
share one..
Also, I just went through your profile and I saw that you are not that friendly with HTML and CSS, so here's a tip for you, use CSS Reset stylesheet, it will save your time when dealing with cross browser inconsistencies ... Or if you are not that worried about.. than use the below snippet in your CSS..
* {
margin: 0;
padding: 0;
outline: 0;
}
The above selector simply selects all the elements in your document and gets rid of all the default margin and padding of the elements which are applied by the browser default stylesheet.
I think your problem is with text-decoration property that for default is underline in a tags. Just add this to the CSS:
a {
text-decoration:none;
}
The demo http://jsfiddle.net/XF2qL/6/
I'm not sure but closing the outer div is missing?