I have two images, link and two ul's inside one td element, is there any way to inline them? http://jsfiddle.net/akeo4zmw/
<table>
<tr>
<td id="menu"><div>
<img src="imgs/logo_03.jpg" /></div>
<div>
<ul id="leftsidemenu">
<li>Woman</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
</ul>
</div>
<div>
<ul id="rightsidemenu">
<li>Log In</li>
<li>Basket</li>
</ul>
</div>
<div>
<img src="imgs/images/images/search_05.jpg" />
</div>
</td>
</tr>
</table>
Just give float left to all the div elements.
body {
background-color: #e5e5e5;
}
table {
border: 1px solid;
border-spacing: 0;
background-color: #ffffff
}
table td {
vertical-align: top;
}
#leftsidemenu li,
#rightsidemenu li {
display: inline;
}
div {
display: inline;
float: left;
}
<table>
<tr>
<td id="menu">
<div>
<img src="imgs/logo_03.jpg" />
</div>
<div>
<ul id="leftsidemenu">
<li>Woman</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
</ul>
</div>
<div>
<ul id="rightsidemenu">
<li>Log In</li>
<li>Basket</li>
</ul>
</div>
<div>
<a href="https://www.google.ru/webhp?tab=ww&ei=b0nuVK3LEoeiyAO7yYC4Bg&ved=0CAYQ1S4">
<img src="imgs/images/images/search_05.jpg" />
</a>
</div>
</td>
</tr>
</table>
Related
I want to display these 3 grey buttons on the banner. Everything i tried didn't work.
This is the html code:
<nav>
<img class="banner" src="img/Banner.png" alt="Banner">
<table>
<tr>
<td>
Index
</td>
<td class="separator">
<td>
<a class="active" href="seiteA.html">Seite A</a>
</td>
<td class="separator">
</td>
<td>
Seite B
</td>
</tr>
</table>
</nav>
I am new to HTML and CSS so i appreciate any help :)
Best practices:
It is not a good practice to use a <table> for navigation, you can use something like <ol>/<ul> as shown in nav documentation on MDN or even <div>s within display:flex container.
You can use the image as the background-image of the <nav> so that you don't have to position the navigation elements on top of it yourself.
nav {
position: relative;
height: 100px;
padding: 10px;
background-image: url("https://picsum.photos/100");
}
ol {
display: flex;
justify-content: space-around;
list-style: none;
}
li {
padding: 5px;
background: white;
}
<nav>
<ol>
<li>Seite A</li>
<li>Seite B</li>
<li>Seite B C</li>
</ol>
</nav>
Quick answer to help you move forward with what you currently have: You can make your nav a relative positioned container and absolute position your table on top of it anywhere you want.
nav {
position: relative;
}
img {
display: block;
height: 200px;
background-color: dodgerblue;
}
table {
position: absolute;
top: 50px;
left: 50%;
}
<nav>
<img class="banner" src="img/Banner.png" alt="Banner">
<table>
<tr>
<td>
Index
</td>
<td class="separator">
<td>
<a class="active" href="seiteA.html">Seite A</a>
</td>
<td class="separator">
</td>
<td>
Seite B
</td>
</tr>
</table>
</nav>
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<li class="description_os">
<ul>OS</ul>
</li>
<li class="descrption_ram">
<ul>RAM</ul>
</li>
<li class="descrption_storage">
<ul>STORAGE</ul>
</li>
</div>
</div>
I want to add price,OS,RAM right beside phone image.
Here is my image:demo-one
I have tried:
float:right;
margin:
with float property im able to move it to right side but with margin im not able to move it up and left.
Even if i manage to move it to right beside image,it breaks on smaller sized devices.
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
float:left;
}
.description_box_1{
float:left;
margin-left:25px;
}
ul{
margin:0;
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os">
OS
</li>
<li class="description_ram">
Ram
</li>
<li class="description_storage">
Storage
</li>
</ul>
</div>
</div>
You have put ul in li , which is wrong.
ul is a parent of li , so li must be in ul.
Is this the same that you want?
Hope this helps.
To keep the image and text on 1 line, here is 2 good solutions that does, even on smaller devices.
Note, since an ul need a li, I removed your inner ul's
First, the most classical one, using BFC float on the image and a margin-left on the text.
This avoid issues like white spaces with inline block and width calculation when using float, or inline-block, on both elements.
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
float: left;
}
.description_box_1 {
margin-left: 176px; /* 160px width + 14px padding + 1px + 1px border */
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="http://lorempixel.com/160/250/technics/7/" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os">
OS
</li>
<li class="descrption_ram">
RAM
</li>
<li class="descrption_storage">
STORAGE
</li>
</ul>
</div>
</div>
Second, a more modern solution, using Flexbox
.article {
display: flex;
}
.item_one_image {
border: 1px solid #ccc;
padding: 4px 0px 10px 14px;
}
.description_box_1 {
flex: 1; /* take all the remaining space */
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="http://lorempixel.com/160/250/technics/7/" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os">
OS
</li>
<li class="descrption_ram">
RAM
</li>
<li class="descrption_storage">
STORAGE
</li>
</ul>
</div>
</div>
List item element of html tags should be covered by your unordered list element, that means, "ul" tag should have children elements as "li"
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
</ul>
<li class="description_os">
OS
</li>
<li class="descrption_ram">
RAM
</li>
<li class="descrption_storage">
STORAGE
</li>
</div>
</div>
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
float:left;
}
.description_box_1{
float:left;
margin-left: 10px;
}
https://fiddle.jshell.net/hofh146n/
Just add .item_one_image, .description_box_1 { float: left; } code in to your CSS. And change the ul,li structure. Refer code from following HTML section.
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
}
.item_one_image, .description_box_1 {
float: left;
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" alt="demo image" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os"> OS </li>
<li class="descrption_ram"> RAM </li>
<li class="descrption_storage"> STORAGE </li>
</ul>
</div>
</div>
Lets say I have the following:
<div class="card">
<ul class="list-group list-group-flush ">
<li class="list-group-item" style="border: none;">
<strong>Something</strong> : 12333434
</li>
<li class="list-group-item" style="border: none">
<strong>Something else</strong>: 2837487248723847283
</li>
<li class="list-group-item" style="border: none">
<strong>Some other stuff</strong>: 123442342423423
</li>
</ul>
</div>
Above looks like the following in browser:
However ideally I want it to look like the following (ignore the font change. I only care about the alignment):
Meaning the left side gets aligned to the right while the right side text gets aligned to the left.
How can I achieve this in bootstrap?
Using inline-block this can be achieved.By default strong is inline.
strong{
display:inline-block;
width:200px;
text-align:right;
}
Here is the fiddle link
Something like this would work, but requires set widths:
HTML:
<div class="card text-center">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="list-group-item-fixed">
<strong class="list-group-left">Something:</strong>
<span class="list-group-right">12333434</span>
</div>
</li>
<li class="list-group-item">
<div class="list-group-item-fixed">
<strong class="list-group-left">Something else:</strong>
<span class="list-group-right">2837487248723847283</span>
</div>
</li>
<li class="list-group-item">
<div class="list-group-item-fixed">
<strong class="list-group-left">Some other stuff:</strong>
<span class="list-group-right">123442342423423</span>
</div>
</li>
</ul>
</div>
CSS:
.list-group-item-fixed {
width: auto;
}
.list-group-left {
text-align: right;
width: 150px;
font-weight: bold;
display: inline-block;
}
.list-group-right {
text-align: left;
width: 200px;
display: inline-block;
}
Fiddle: https://jsfiddle.net/6nxtyv7b/
However, if you don't need a list, a simple table would suffice, and wouldn't need set widths:
HTML:
<div class="text-center">
<table class="table table-borderless table-centralised">
<tbody>
<tr>
<th>Something:</th>
<td>12333434</td>
</tr>
<tr>
<th>Something else:</th>
<td>2837487248723847283</td>
</tr>
<tr>
<th>Some other stuff:</th>
<td>123442342423423</td>
</tr>
</tbody>
</table>
</div>
CSS:
.table-centralised {
width: 0 auto;
}
.table-centralised th {
text-align: right;
width: auto;
}
.table-centralised td {
text-align: left;
width: auto;
}
Fiddle: https://jsfiddle.net/m06ek73u/
I have a list like this:
<ul>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
</ul>
with this CSS:
.list-item > * {
vertical-align: top;
}
.multi-line-content {
display: inline-block;
border: 1px solid black;
}
which produces output that looks like this (jsfiddle):
I need to style the background where the list bullets are, such that it would look something like this:
I've tried setting a border on the UL, but this extends to the bottom of the whole list (including the "multi-line content" divs), which is not the desired look. The background should not extend below the bottom of the last "Label" line. I am looking for suggestions for CSS tricks to make this work, or alternative CSS/HTML structures that would produce the same output. The solution should work for any number of <li> elements, and ideally be pure CSS/HTML.
Any ideas?
Here's an approach that doesn't require changes to your markup or height statements.
.list-item > * {
vertical-align: top;
}
.multi-line-content {
display: inline-block;
border: 1px solid black;
}
li {
border-left: 12px solid;
}
li:last-child {
border: none;
margin-left: 12px;
}
li > span {
border-left: 12px solid;
padding-left: 8px;
margin-left: -12px;
}
ul {
list-style-type: none;
}
<ul>
<li class="list-item"> <span>Label</span>
<div class="multi-line-content">multi-
<br />line
<br />content</div>
</li>
<li class="list-item"> <span>Label</span>
<div class="multi-line-content">multi-
<br />line
<br />content</div>
</li>
<li class="list-item"> <span>Label</span>
<div class="multi-line-content">multi-
<br />line
<br />content</div>
</li>
</ul>
Here you go:
.list-item {
border-left: 10px solid black;
list-style: none;
padding-left: 10px;
}
ul li:last-child{
height: 15px;
}
jsfiddle
The following will give you the look you're after. You'll need to check it works in key browsers your users will have.
<html>
<head>
<style>
ul {
list-style-type: none;
padding-left: 5px;
margin: 0px;
background-color: black;
}
.list-item {
vertical-align: top;
background-color: white;
}
.multi-line-content {
display: inline-block;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
</ul>
</body>
</html>
You can add another div in your li and work with it like this:
HTML
<ul>
<div class="a">
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li></div>
<div class="a">
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li></div>
<li class="list-item">
<div class="b">
<span>Label</span></div>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
</ul>
CSS:
.list-item > * {
vertical-align: top;
}
.list-item{ list-style-type: none;}
.a{border-left:5px solid red;padding-left:7px;}
.b{border-left:5px solid red;padding-left:7px;display: inline;}
.multi-line-content {
display: inline-block;
border: 1px solid black;
}
I don't know if this is what you're looking for, maybe you just want a fancier solution, but this works.I also have added some paragraphs after the list to check if this break the layout.
Have a look on this FIDDLE
I am trying to make my list items all the same width. I've tried setting the widths in the css and nothing changes. Can anyone figure this out?
Here is an image to show what I am talking about:
HTML:
<body>
<div class="content-wrapper" id="container">
<header>logo
<nav>navigation</nav>
</header>
<div class="clear-fix"></div>
<div id="body">
<section class="main-content">
<section class="leftPane">
<h2>Categories</h2>
</section>
<section class="rightPane">
<div class="checkout">
<h1>Checkout</h1>
<ul class="steps">
<li><a href="http://localhost:59213/Cart">
<div id="step0" class="arrow_box_grey">
Shopping Cart</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Student">
<div id="step1" class="arrow_box_grey">
Student</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Delivery">
<div id="step2" class="arrow_box_grey">
Delivery</div>
</a>
</li>
<li>
<div id="step3" class="arrow_box_green">Payment</div>
</li>
<li>
<div id="step4" class="arrow_box_blue">Finish</div>
</li>
</ul>
</div>
</section>
<div class="clear-fix"></div>
</section>
</div>
</div>
And here if my fiddle with the code: http://jsfiddle.net/M74Em/
You need to change this style:
.main-content .checkout ul.steps li div {
display: inline;
width: 1000px;
}
You can't set widths for inline elements so try this:
.main-content .checkout ul.steps li div {
display: inline-block;
width: 100px;
}
Example
From twBootstrap, applied to <ul>'s (demo):
.ul-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.ul-justified > li {
display: table-cell;
float: none;
width: 1%;
}
and slap .ul-justified to any ul-list you want aligned, and you get equal width <li>'s automatically fit parent ul's width.