I'm styling a list of recent posts and images from a plugin from wordpress. I know there is a wordpress section but my question is to just get some advice as how to style this list.
The website is here
This is what it looks like now.
This is my CSS
.advanced-recent-posts {
list-style-type: none;
}
.advanced-recent-posts li {
font-size: .7em;
font-weight: bold;
line-height: 20px;
color: #761616;
margin-bottom: 10px;
text-transform: uppercase;
width: 250px;
position: relative;
top: -35px;
border: 1px solid #000;
}
.advanced-recent-posts li a {
margin-left: 10px;
}
.advanced-recent-posts li img {
position: relative;
top: 0px;
left: -10px;
padding: 5px;
border: 1px solid #999;
}
and so far so good. But because both the image and the title & date are in the some They move together which is not what I want, but because it is a plugin I dont know how to change that. So I was hoping with the provided website and CSS that someone could help me just make that second line of each recent post follow directly under the first. Like in my design here.
#Bonjour: This is what I got doing the
.advanced-recent-posts li { display:table-row; vertical-align:top;}
(and of course with all the other styling I had on it)
The post titles are at least flowing right.
Some weird positioning going on there. Anyway, there are two ways to make this happen:
Float the image left, add a bit of right/bottom padding. This way text naturally flows under the image
Take advantage of the relative positioning on the li and set position:absolute on the image, while giving the li enough padding to move the text from under it. This way text will never flow under the image
Examples: http://jsfiddle.net/Ucrsk/
Try modifying the style of the anchor ie.
.advanced-recent-posts li a {
display: block;
margin-left: 10px;
}
Just to reiterate from my comment in your question, try using:
li {
display:table-cell;
vertical-align:top;
}
OR
li {
display:table-row;
vertical-align:top;
}
Related
Here is the drill: I have a main menu with items having different length text. I would like to underline the active item (text only), but lower than regular text underline. After digging internet I have come up with this:
.current-menu-item:after {
content: "";
display: block;
margin: 0 auto;
width: 80%;
padding-top: 2px;
border-bottom: 1px solid #ffffff;
}
Problem is - since text is of different length, width 80% does not work well for all. Atm I have gone around creating different menus (lame)... Is there a way to style each item differently when active under one code (thus one menu)? (like have a list under .current-menu-item with instructions for .menu-item-xxx1, instructions for .menu-item-xxx2, etc...?)
Or I am wondering in a wild and there is other more simple solution to it?
Try using :nth-child() to set the width:
.current-menu-item:after {
content: "";
display: block;
margin: 0 auto;
padding-top: 2px;
border-bottom: 1px solid #ffffff;
}
.current-menu-item:nth-child(1):after {
width: 80%;
}
.current-menu-item:nth-child(2):after {
width: 90%;
}
Note: Keep in mind it will not work on the inner child if there is only one. For example: If you use a elements inside li elements for your menu. Then you need to apply li:nth-child() a:after and not li a:nth-child():after.
got myself in a tight spot here, the widget on the right hand side of my website has lost its formatting, i need it all in one line, and to drop below the left hand widget when viewed in mobile: https://aurexgroup.com/
Im using a enfold child theme on a wordpress site.
i assume its a css issue, but i cant find the code that relates.
i have looked through the css style sheet in the theme, this is all i could for widgets find:
}
#top li.sf-widget-element{
list-style: none;
clear: none;
margin-left: 0;
padding: 0;
width:auto;
display:inline-block;
margin-right: 30px;
}
And then this in the quick css section in the enfold general styling tab:
}
#footer .flex_column{
float: right;
}
#footer .flex_column.first{
float: left;
}
.footer_color a, .footer_color .widget_first{
color: #cf5c1a !important;
}
#footer .flex_column .widget{
margin-top: 0;
margin-bottom: 0;
line-height: 26px;
display: inline-block;
width: 100%;
}
.copyright a[href*="kriesi"]{
display:none !important;
}
Very open to any ideas!
please help!
While working on a responsive design, I noticed that everything is responsive except for my unordered list. When I resize the browser, the list doesn't move or stay centered in its DIV. I've tried a bunch of things all day but simply can't figure it out. For context, #sitecontent is the container holding everything, #sitecontent .leftsidebar contains an image and the unordered list, and #sitecontent .leftsidebar ul is the unordered list. Can someone check it out and tell me what's wrong? Please visit my site at http://www.tommaxwell.me and view the source.
Try this CSS:
#sitecontent .leftsidebar ul {
position: relative;
top: -5px;
list-style-type: none;
font-family: 'Patua One', cursive;
padding-left: 10px;
}
#sitecontent .leftsidebar ul li {
margin-bottom: 3%;
clear: both;
border-bottom: 1px solid #E5E5E5;
font-family: helvetica;
text-align: center;
}
My browser is adding some padding to the list, which is a pretty common thing for browsers to do. You might consider using a reset (meyer, yui), or just setting explicit padding/margin on the ul and li's.
I guess I was overcomplicating the whole thing, and in the process forgetting the whole point of responsive designs in the first place. Adding padding/margin around the list is absolutely acceptable to use in the case, as I'll use media queries at breakpoints. Don't know why I was making things so complicated in my head!
Hi update your css with mine actually i have given the horizontal padding to your .leftsidebar ul parent div and made some changes in its list-items and its working fine now.. see the attached image for your reference :-
CSS for till IPad
#sitecontent .leftsidebar ul {
padding: 0 25%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#sitecontent .leftsidebar ul li {
border-bottom: 1px solid #E5E5E5;
display: block;
font-family: helvetica;
line-height: 25px;
margin: 2px;
}
And for iphone you will have to write the css :-
image reference for iphone :-
CSS for till IPhone
#sitecontent .leftsidebar ul {
margin-top: 10%;
margin-bottom:20%;
position: relative;
}
I'm trying to get all the text in this list to be flush against the bullet. However, the text is wrapping under the bullet image. Tried changing the padding/margin on the a and li and also nowrap, but that just make it stick out over the right border. The bullets are the WBI logos under News: http://circore.com/womensbasketball/ Any ideas? thanks!
You could try
ul {
list-style-position: outside;
}
but I would personally use a background image and some padding, something like:
li {
list-style: none;
background: transparent url(your/icon.png) no-repeat left center;
padding-left: 20px; /* or whatever the width of your image is, plus a gap */
}
See this page for more details:
http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html
I did this on your site with firefox and it works
#menu-news li:first-of-type {
border-top: medium none;
height: 55px;
list-style-position: inside;
margin-left: 8px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
vertical-align: top;
}
#menu-news li {
background: url("images/wbismall.png") no-repeat scroll 0 0 transparent;
border-top: 1px solid #666666;
height: 55px;
list-style-position: inside;
margin-left: 10px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
}
This works for unordered lists:
#menu-news ul {
list-style:outside circle;
margin-left:60px;
}
#menu-news ul li {
padding-left:20px;
}
The margin-left moves the whole list in by 60px.
The padding-left is only needed if you want extra space between the bullet point and the list item text. The list item text wraps under itself and not under the bullet.
You need to add display: inline-block; to the link inside the td element.
Your class looked like this:
#menu-news li a {
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;´
}
But need to look like this:
#menu-news li a {
display: inline-block;
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;
width: 200px;
}
I had the same problem and here is how I fixed it. The important line is background-repeat: no-repeat;. Bullet points will be added to every new line/list item of your list but it will not put a bullet point when text is wrapped to the next line. Look at my code below to see where I placed it.
ul {
margin: 0;
list-style-type: none;
list-style-position: inside;
}
ul li {
background-image: url(https://someimage.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: 0px 5px 100px;
padding-left: 39px;
padding-bottom: 3px;
}
A few notes on my code: I used an image for the bullet points. I also used background-image: instead of list-style-image: because I wanted to control the size of the image bullet. You can simply use list-style: property if you want simple bullet and this should work well even with wrapped text. See https://www.w3schools.com/cssref/pr_list-style.asp for more information on this.
Try simple set the position attribute:
list-style-position: inside; nothing more need to work.
Here is the working example:
https://codepen.io/sarkiroka/pen/OBqbxv
I ran into a similar issue while I testing accessibility of pdfs generated with pdfreactor, my problem was that list-style-type: disc broke the 'logical reading order' in Adobe acrobat's Reading Order Pane. Having a jumbled reading order won't break the NVDA screen reader experience for visually-impaired users, but it does prevent the user from bookmarking a pdf document correctly.
My solution to fix the text from wrapping directly underneath the bullet character AND fix the reading order:
ul {
list-style-type: none;
}
li {
margin-left: 10px;
}
li::before {
content: '•\00A0';
margin-left: -10px; // a negative margin will remove the bullet from interrupting the flow of the text
}
I build a simple list and added to it css. Now the vertical menu works.. the problem is in the section of the css. The list items area is bigger than the links themselves. That means that if the user clicks on the area, nothing happens cause the links area doesnt cover all the lists items area.
#sidebar1 li {
list-style: none;
position: relative;
width: 120px;
height: 30px;
padding: 0 20px;
background-color: black;
line-height: 30px;
cursor: pointer;
}
#sidebar1 li a {
text-decoration: none;
color: white;
}
What I thought to do was to match the links padding or width to that of the lists width. So wherever the users clicks on the menu's item a link will be clicked. Thats problem is that i tried it and it didnt work
Move most of the styling to the A-tag and fix a few things:
#sidebar1 li{
list-style: none;
position: relative;
margin:0 <-- added
padding:0 <-- added.
}
#sidebar1 li a{
text-decoration:none;
color: white;
width:120px;
height: 30px;
padding:0 20px;
background-color: black;
line-height: 30px;
cursor:pointer;
display:block <-- this is important
}
Just use display: block to make the a element fill the available horizontal width of the parent element:
#sidebar1 li a{
text-decoration:none;
color: white;
display: block;
height: 100%;
}
The height: 100% forces the a to inherit the full height of the parent element. Remove padding from the parent li, otherwise you'll enforce a space between the edges of the a and the li.
Further, in your li I've not only removed the padding (which simply causes problems as noted above), but also the cursor: pointer, as if the user hovers over the link the cursor will change automatically, if they're not over the link then the cursor's type, that of pointer, is merely confusing when clicking produces no effect:
#sidebar1 li {
list-style: none;
position: relative;
width:120px;
height: 30px;
background-color: black;
line-height: 30px;
}