Here is the html:
<header>
<img src="cp_logo2.png" alt="Cycle Pathology" />
<nav class="vertical">
<ul>
<li>Events Page</
<li class="newgroup">Rose Hill Rally</li>
There are <li> under this as well as four <li class-="newgroup">
Here is the assignment for the CSS Style Sheet:
"If the list item belongs to the newgroup class, add atop padding space of 25 px to add a bigger gab between that list item and the previous list item."
Ideas?
Sounds pretty obvious:
.newgroup {
padding-top: 25px;
}
Related
I would like to build a sample "webshop" project where I would like to list books as on the picture. How can I align text and pictures given this HTML code with CSS similarly as:
HTML code of one book (note this code is replicated the same way with different texts:
<li class="book">
<ul>
<li class="bookcover">
<a href="https://rads.stackoverflow.com/amzn/click/com/1118008189" rel="nofollow noreferrer">
<img src="https://books.google.com/books/content?id=aGjaBTbT0o0C&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
alt="Book Cover for HTML and CSS: Design and Build Websites"/>
</a>
</li>
<li class="author">Jon Duckett</li>
<li class="title">
HTML and CSS: Design and Build Websites
</li>
<li class="publisher">John Wiley & Sons</li>
<li class="date">November 2011</li>
<li class="isbn">ISBN: 1118008189</li>
</ul>
</li>
Is there a universal way with CSS to format this?
There are many ways to achieve this. I do want to mention before proceeding that #Tom Faltesek raises a good point. If you have any control over the HTML code, it would be best to approach this with more semantically accurate markup. If, for example, you had the freedom to arrange it this way...
<article class="book">
<div class="book__info">(...)</div>
<div class="book__thumbnail">(...)</div>
</article>
...then your CSS could be done in this way:
.book {
font-size: 0;
}
.book__info,
.book__thumbnail {
display: inline-block;
font-size: 1rem;
}
.book__info {
width: 75%;
}
.book__thumbnail {
width: 25%;
}
Explanation: Inline-block elements naturally follow each other because they are like block elements that display inline with the text. That in mind, setting font-size: 0; on the parent avoids the natural text space that would normally appear between the elements, so that 25% + 75% only spans 100% of the width without extra text spaces between. Remember to reset your font-size on the inner elements with this trick, though.
However, in the way that you are asking this question, I assume you may not have control over this HTML structure. #Gildas.Tambo 's answer will work, visually, but there are challenges that come with floats. The main issue is that float removes an element from the document's flow, so it does not contribute to the height of it's parent. That means the parent has the potential to be 0 pixels high even if its contents are 500+ pixels high. This can cause all sorts of weird buggy layout issues when you get into more involved css.
This seems like a good use case for CSS Grid. At this point, pretty much all the major browsers support it, and it's a hell of a good weapon to have in your arsenal.
Have a look at the code below. Use grid-template-areas to quite literally mock up your layout in the form of words to correspond with elements (in this case, each of your <li>s) and you can span across multiple rows with one element by assigning it to the entire grid area. In the example below, I provided 5 rows and marked the left column as "info" and the right column as "thumbnail", and then to take up all the available space for thumbnail, I just assign .bookcover to it with grid-area: thumbnail;. Don't worry too much about the fancy stuff I did with grid-template-rows, but know that you can use that property to distribute the height of each row.
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
.book ul {
display: grid;
grid-template-areas:
"info thumbnail"
"info thumbnail"
"info thumbnail"
"info thumbnail"
"info thumbnail";
grid-template-rows: repeat(4, auto) 1fr;
}
.bookcover {
grid-area: thumbnail;
}
<li class="book">
<ul>
<li class="bookcover">
<a href="https://rads.stackoverflow.com/amzn/click/com/1118008189" rel="nofollow noreferrer">
<img src="https://books.google.com/books/content?id=aGjaBTbT0o0C&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
alt="Book Cover for HTML and CSS: Design and Build Websites"/>
</a>
</li>
<li class="author">Jon Duckett</li>
<li class="title">
HTML and CSS: Design and Build Websites
</li>
<li class="publisher">John Wiley & Sons</li>
<li class="date">November 2011</li>
<li class="isbn">ISBN: 1118008189</li>
</ul>
</li>
You can use float - CSS:left and display : block
.book li{
display: block
}
.bookcover{float:right}
<li class="book">
<ul>
<li class="bookcover">
<a href="https://rads.stackoverflow.com/amzn/click/com/1118008189" rel="nofollow noreferrer">
<img src="https://books.google.com/books/content?id=aGjaBTbT0o0C&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
alt="Book Cover for HTML and CSS: Design and Build Websites"/>
</a>
</li>
<li class="author">Jon Duckett</li>
<li class="title">
HTML and CSS: Design and Build Websites
</li>
<li class="publisher">John Wiley & Sons</li>
<li class="date">November 2011</li>
<li class="isbn">ISBN: 1118008189</li>
</ul>
</li>
I have created a vertical navbar that contains an ul element with several li tags inside. I want each li tag to display on it's own line.
I'm able to do this easily by applying a div class = clearfix after each li tag, but I get a warning that 's are not allowed to be nested inside an ul. It renders just fine in browser, but I don't like the warnings and I'm OCD about syntax.
I have tried several different approaches to fix the problem.
CSS Fixes such as Margin/Padding, Clear, Display:Block all to no avail.
Here is my a sample of my code below:
<div class="col-sm-2" id="siteSafetyContainer" style="display:none">
<nav class="navbar navbar-inverse" style="font-size:12px;">
<div id="row">
<ul class="nav navbar-nav navbarcustom">
<li>
Permits
</li>
<li>
Standard Safety Permits
</li>
<li>
Toolbox Talks
</li>
<li>
Atlantic Marine Corps Communities
</li>
<li>
Campbell Crossing
</li>
<li>
Fort Hood Family Housing
</li>
<li>
Ft Drum Mountain Community
</li>
<li>
PAL
</li>
</ul>
</div>
</nav>
</div>
Standard Safety Permits
Toolbox Talks
Atlantic Marine Corps Communities
Campbell Crossing
Fort Hood Family Housing
Ft Drum Mountain Community
PAL
.navbarcustom li {
display: block;
}
Try this
.navbar-nav{
flex-flow: column wrap !important;
min-width: 260px;
}
McHat and cpt-cruncy,
Thanks to both of you! It was a combination of both of your answers. See below:
.navbarcustom > li {
flex-flow: column wrap !important;
min-width: 260px;}
I have a jquery mobile listview, and I'd like to make one of the li items appear first in the list via css without moving the li item in the code. I don't want the li item to be in a fixed position (in other words, I do want it to scroll with the list). I just want it to appear as though it were the first li item.
Here is the code for the list (just 2 li items). So I'm wondering how I could style the second li to appear first.
<div data-role="page" data-theme="c">
<div data-role="content">
<ul data-role="listview" data-inset="false"><li>
<a href="http://domain.com/1XyK?id=1117448578">
<img src="https://domain.com/moreicon/EN/bundle-loseweight.png" />
<h2>Healthy Weight Loss</h2>
<p>Now includes Mindful Eating!</p>
<span class="ui-li-count">NEW</span>
</a>
</li>
<li>
<a href="http://domain.com?id=977040364">
<img src="https://domain.com/moreicon/EN/bundle-top10.png" />
<h2>Our Top 10 Apps!</h2>
<p>Save BIG on our chart toppers!</p>
<span class="ui-li-count">SAVE</span>
</a>
</li>
Is that possible?
One possibility, if your browser support allows for it, is Flexbox. This allows you to control the order of elements by using the order property on the child.
For example, if your HTML is:
<ul>
<li>First</li>
<li>Second</li>
</ul>
Then, you can style the UL as a columnar flexbox in CSS:
ul {
display: flex;
flex-direction: column;
}
And you can assign a negative order to the child you want to bring to the top:
ul li:nth-of-type(2) {
order: -1;
}
Working example: http://codepen.io/honzie/pen/oLxENz
I am just starting to learn Foundation (from previous messy css experience). I am trying to do a full screen block grid of 4 col images per row. I have this to make the row full width:
.row
max-width: 100%
Here is the code:
<nav class='top-bar'>
<ul class='title-area'>
<li class='name'>
<h1>
<a href='#'>
My Website
</a>
</h1>
</li>
<li class='toggle-topbar menu-icon'>
<a href='#'>
<span>menu</span>
</a>
</li>
</ul>
<section class='top-bar-section'></section>
</nav>
<div class='row'>
<ul class='small-block-grid-2 large-block-grid-4'>
<li>
<img src='http://placehold.it/500x500&text=Thumbnail' />
</li>
<li>
<img src='http://placehold.it/500x500&text=Thumbnail' />
</li>
<li>
<img src='http://placehold.it/500x500&text=Thumbnail' />
</li>
<li>
<img src='http://placehold.it/500x500&text=Thumbnail' />
</li>
</ul>
</div>
I am getting annoying horizontal scroll bar. See below screenshot
I know it is the margin below:
#media only screen
[class*="block-grid-"]
margin: 0 -0.625em;
But do I suppose to override it? It doesn't feel right (seem like a hack). How do I use Foundation properly to display block grid with full screen? It's a simple layout requirement.
If you look at the docs explaining the Foundation grid they already use the box-sizing: border-box star hack
Since the .row containing your block-gridhas a set max-width of 100% it's overflowing the screen width. Typically, elements in the grid would be nested in .rows with defined max-widths and also contained within defined column sizes.
You can simply just do the hacky thing as you deeply fear and adjust the margin:
#media only screen
[class*="block-grid-"]
margin: 0 2em;
Or you can just contain your .block-grid with a container <div class="large-12 columns">.
Six of one half-a-dozen of the other I'd say. If you're afraid of screwing up the grid layout, you can use a conditional class on the body tag so that your customized block-grid only effects the pages that you want.
take a look of this demo by Paul Irish
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
this might be helpful else can you provide a fiddle?
For those who do not want to wrap their block grid within the standard row/column grid, simply hide the overflow on your block grid's parent element. Here's a superfluous code demonstration.
(html)
<div class="block-grid-parent">
<ul class="block-grid">
...
(css)
.block-grid-parent {
overflow: hidden;
}
Listview has a data-inset property to make its corners rounded. However, I can't use listview because my list is a nested list and the frameworks default behavior is hide the nested list and show it once the its primary list is clicked. So, I chose to use a ui-grid view inside the primary listview row which looks like below:
<ul data-role="listview">
<li><h1 class="ui-title" role="heading" aria-level="1">Completeness</h1></li>
<li>
<div class="ui-grid-b">
<div>Secondary Title</div>
<div>Content.....</div>
<div>Blah Blah</div>
</div
</li>
<li>Footer</li>
</ul>
My problem is the ui-grid's corners should be rounded. I tried to put data-inset="true" but didn't work.
You can use the classes that jQuery Mobile adds to widgets, in this case you're looking for the ui-corner-all class which puts corners on all four corners, and then you will probably want the box-shadow that ui-shadow applies:
<div class="ui-grid-b ui-corner-all ui-shadow" style="padding: 5px;">
I added the padding because the grid element didn't have any by default. Also there are the ui-corner-top and ui-corner-bottom classes that only round the top/bottom of the element to which they are applied.
Here is a demo: http://jsfiddle.net/VXrxv/
If instead you want to round the li element that is the parent of the ui-grid element you can add margin to them:
<li class="ui-corner-all ui-shadow" style="margin: 5px;">
Here is a demo: http://jsfiddle.net/VXrxv/1/
Try with css property border-radius. For example, try border-radius: 0.5em 0.5em;
On the Bootstrap the rounding is effected;
This seems to be the quickest solution for me;
Wrap mist widgets with the following div
<div class="k-block" style="padding:0px">