I have the following code which creates a list containing images.
HTML:
<ul>
<li class="list">
<div class="list_div">
<img class="list_image" align="top" src=""/>
<h3><a>Headline 1</a></h3>
<p>text,text,text,text,text,text</p>
</div>
</li>
<li>
<div class="list_div">
<img class="list_image" align="top" src=""/>
<h3><a>Headline 2</a></h3>
<p>text,text,text,text,text,text.</p>
</div>
</li>
</ul>
CSS:
li {
padding: 2px;
color: #000000;
font-size: 12px;
text-align: left;
vertical-align: middle;
word-wrap: break-word;
border-bottom: 1px solid #AFAFAF;
background-color: #CCD5DF;
}
.list_div {
width: 100%;
display: block;
}
.list_image {
float: left;
width: 30%;
height: auto;
border: 2px solid #000;
left: 0;
top: 0;
}
I want to:
place image in left and headline, text in right side. ==> in first List
place image in center and show headline, text within Image in center ==> in second List
BUT, this style need to follow:
image width 30% in 1st List and 50% in second List.
ul, li in static position.
page is responsive.
here is my code sample, link: http://jsfiddle.net/2ycggga9/
is this what u want to do
http://jsfiddle.net/2ycggga9/5/
.list2 > h3,.list2>p{
position:relative;
left:-23%;
}
<li class="list2">
<img class="list_image" src="http://thekitemap.com/images/feedback-img.jpg"/>
<h3><a>Headline 2</a></h3>
<p>text,text,text,text,text,text.</p>
</li>
Related
Problem
Scroll bars are implemented with images.
I made the scroll bar like this with reference to the following.
With reference to the following, the scroll bar has become like this now.
Reference site:
I want to make knob of input range an image - StackOverflowJP (I'm sorry at the Japanese site..)
Implement scrollbar-button - JSFiddle
▼ I want to do this:
specify the width & height size of the scrollbar
scrollbar-button left / right one by one
position scrollbar at a distance away from target
Code
▼ Probably is not properly displayed unless it's a webkit browser (eg Chrome etc.)
html {font-size: 62.5%;}
#thumb-wrap {
position: relative;
box-sizing: border-box;
width: 100%;
margin-bottom: 12.4rem;
overflow-x: scroll;
overflow-y: hidden;
writing-mode: bt-lr; /* IE */
-webkit-appearance: none;
}
#thumb-wrap::-webkit-scrollbar {
width: 33.2rem;
}
#thumb-wrap::-webkit-scrollbar-track {
-webkit-appearance: none;
width: 30.1rem;
background: url("https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228080150.png");
}
#thumb-wrap::-webkit-scrollbar-thumb {
width: 1.5rem;
height: 1.3rem;
background: #fff;
border: 1px solid #000;
}
#thumb-wrap::-webkit-scrollbar-button {
width: 1.6rem;
height: 1.6rem;
}
#thumb-wrap::-webkit-scrollbar-button:start {
display: block;
}
#thumb-wrap::-webkit-scrollbar-button:horizontal:decrement {
width: 1.6rem;
height: 1.6rem;
background: url("https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228080158.png") no-repeat center center;
}
#thumb-wrap::-webkit-scrollbar-button:end {
display: block;
}
#thumb-wrap::-webkit-scrollbar-button:horizontal:increment {
width: 1.6rem;
height: 1.6rem;
background: url("https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228080155.png") no-repeat center center;
}
#thumb-wrap ul {
width: 100%;
white-space: nowrap;
}
#thumb-wrap li {
display: inline-block;
}
#thumb-wrap li:first-child {
margin-left: 3rem;
}
#thumb-wrap li:last-child {
margin-right: 3rem;
}
#thumb-wrap li + li {
margin-left: 3rem;
}
<div id="thumb-wrap">
<ul>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075715.png" alt="あ=a" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075712.png" alt="い=b" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075710.png" alt="う=c" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075706.png" alt="え=d" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075704.png" alt="お=e" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075810.png" alt="か=f" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075807.png" alt="き=g" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075805.png" alt="く=h" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075802.png" alt="け=i" />
</li>
<li>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075759.png" alt="こ=j" />
</li>
</ul>
</div>
This is the best I could do using CSS and JS. It uses a range input as a slider
<input id="slider" type="range" min="1" max='100' value="0" step="1">
with the value representing the percentage of the view to scroll left :)
I could not find a pure-CSS solution
See demo below
$(function() {
// this just reads the initial value of the input and displays it on the span
$("#position").text($("#slider").val());
// this is an event handler. The the slider changes it executes the function within
$("#slider").on('change input', function() {
// display the input value on the span (updates it)
$("#position").text($(this).val());
// calculate the new left position of the displayDiv by getting a percentage of the width
// of the parent.
// the idea here is that the range has a min value of 1 and a max of 100, they represent
// a percentage of pixels to move right or left. So if I move the input/range slider to
// have a value of 10, I mean to slide the displayDiv 10%.
// this means, 10% of the width of the wrapper (350px) which is 35px;
var posLeft = $(this).val() * $("#wrapper").width() / 100;
// set the new left position of the displayDiv with the calculated value
$("#displayDiv li").css('left', -posLeft);
});
});
#wrapper {
overflow: hidden;
width: 400px;
white-space: no-wrap;
}
.nav {
padding:0;
margin:0;
width: 400px;
height: 210px;
columns: 100px 100;
column-gap: 1px;
overflow: hidden;
}
.nav li {
position: relative;
list-style: none;
display: inline-block;
padding: 2px;
margin: 0 auto;
text-align: center;
}
input['range'] {
margin: 0 auto;
width: 100px;
}
#sliderDiv {
text-align: center;
width: 350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<ul id="displayDiv" class="nav">
<li>
<img src="http://placekitten.com/100/200" />
</li>
<li>
<img src="http://placekitten.com/100/200" />
</li>
<li>
<img src="http://placekitten.com/100/200" />
</li>
<li>
<img src="http://placekitten.com/100/200" />
</li>
<li>
<img src="http://placekitten.com/100/200" />
</li>
<li>
<img src="http://placekitten.com/100/200" />
</li>
<li>
<img src="http://placekitten.com/100/200" />
</li>
<li>
<img src="http://placekitten.com/100/200" />
</li>
<li>
<img src="http://placekitten.com/100/200" />
</li>
</ul>
</div>
<div id="sliderDiv">
<input id="slider" type="range" min="1" max='100' value="0" step="1">
</div>
Position: <span id="position"></span> %
I've got the following situation where I'd like the list on the right to use just the remaining space until it's passed the content on the left at which point it can take up the full width again.
I can get it done by hardcoding a margin-left: 50% for the first few <li> but this is inadequate since I don't know the text-wrapping div's dimensions.
.intro {
width: 50%;
float: left;
}
li {
display: block;
height: 50px;
border: 1px solid black;
}
<div class="intro">Some text and stuff and text and maybe some more text and donuts let's play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping</div>
<div class="list">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
I am assuming that you want the content of list items to be next to the floated content. You can accomplish this by using regular divs. Not sure as to why you are utilizing ul and li tags.
FAUX Solution:
Fiddle: http://jsfiddle.net/jebgerp8/.
HTML:
<div class="intro">
Some text and stuff and text and maybe some more text and donuts let's play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping
</div>
<div class = "li">
<img src = "http://placehold.it/50x50" />
</div>
<div class = "li">
<img src = "http://placehold.it/50x50/ff0000" />
</div>
<div class = "li">Another "list item"</div>
<div class = "li">Fourth "list item"</div>
<div class = "li">Last "list item"</div>
CSS:
.intro {
width: 50%;
float: left;
border: 2px dashed #bbb;
}
.li {
height: 50px;
margin: 2px 0;
}
.li:nth-last-of-type(-n + 3) {
border: 1px solid #000;
}
TRUE Adjustable Solution via Flexbox (requires modern browser).
Fiddle: http://jsfiddle.net/148y1b18/
CSS:
.intro {
width: 50%;
float: left;
border: 2px dashed #bbb;
}
.li {
height: 50px;
display: flex;
border: 1px solid #000;
}
.li + .li {
margin-top: 2px;
}
add this:
.list {
width:50%;
float:right;
}
Demonstration:
.intro {
width: 50%;
float: left;
}
.list {
width:50%;
float:right;
}
li {
display: block;
height: 50px;
border: 1px solid black;
}
<div class="intro">Some text and stuff and text and maybe some more text and donuts let's play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping</div>
<div class="list">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
I'm not sure what you were trying to do with the black border but if I have a little more information I could probably help out with that a bit more too.
Part of the problem you had with the list was that you left out your . in front of the li. Look at your css above. It was not taking on the elements that you had specified.
check out this js fiddle. I think it's what you are looking for, short of the border probably.
http://jsfiddle.net/j9pekyje/
<p class="intro">Some text and stuff and text and maybe some more text and donuts let's play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping</p>
<ul>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
</ul>
.intro {
width: 50%;
float: left;
}
.list {
width:50%;
float:right;
}
.li {
display: block;
height: 50px;
border: 1px solid black;
}
Just a heads up on this as well. You could potentially run into some issues with total being 100% with or without setting margin or padding because that is usually additive. Something to be aware of in the future. Hope this helps you.
I'm running into a weird glitch which only seems to happen in chrome and safari. It's hard to explain why this happens with sample code, but I'll try to illustrate what I'm doing with code, while providing a link to the actual page below.
First of all, I have an unordered list displayed inline-block, so it can be justified just like text. Each list item contains an svg in an image tag and a paragraph with a short description, both wrapped in a single anchor tag. Nothing special i guess, but here's the catch: in chrome and safari the browser renders a 1px by approximately 15px blue/blackish line between the paragraph and the image, and I have no idea why this is happening. Here's the code:
<div class="wrapper">
<div class="justified-list home-icons">
<ul>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
</ul>
<span class="stretcher"></span>
</div><!-- .justified-list -->
</div><!-- .wrapper -->
and here is the css (I'm using scss):
.wrapper {
width: 100%;
}
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}
Also, a codepen is provided here:
http://codepen.io/smelly586/pen/NPVVYd
If anyone has a clue on what's going on, or even better: has a possible fix for this, you have my gratitude.
Set your font-size on the element to 0. What you're seeing is the underline in the anchor element for whitespace in your HTML.
You could turn off the text-decoration: underline; that the browser renders by default for anchors, but let's assume that's not what you want to do.
Instead, the element with text will need to be reset to document root font-size (or whatever you want) using something like p { font-size: 1rem; }.
Example Codepen
So, accordingly, the SCSS/LESS would be:
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
a {
font-size: 0;
p { font-size: 1rem; }
}
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}
First of all, here are some images explaining what exactly I'm trying to do:
How it should be:
This is how it is right now:
This is the markup:
<div class="info">
<img src="http://placehold.it/40x40" class="img-rounded avatar">
<h5 class="name">John Doe</h5>
<time>2 days ago</time>
<a class="follow"><i class="fa fa-twitter"></i>Follow me</a>
<a class="like">112 likes</a>
</div>
CSS:
.info {
border:1px solid #E6E6E6;
padding-top:20px;
padding-bottom:20px;
}
img.avatar {
float:left;
padding-left:20px;
padding-right:20px;
}
h5.name {
margin:0;
}
span.date {
font-size:12px;
}
a.like {
float:right;
padding-right:20px;
}
Here's a jsbin example with what I'm trying to do.
Any suggestions on how can I align them as in the screenshot?
Instead of assigning various classes to hyperlinks, nest them in the block element.
I changed your code, and updated the jsbin, is this what you were seeking?
http://jsbin.com/lajugiciyi/1/edit
.info {
border: 1px solid #E6E6E6;
padding: 20px 0
}
.avatar {
float: left;
padding: 0 20px;
}
.name {
display: inline-block
}
.name h5 {
margin: 0;
padding: 3px 0 0;
}
.like {
float: right;
padding: 0 20px;
}
.follow {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
You want the follow/like buttons to be aligned with the name, right?
HTML:
<div class="info">
<img src="http://placehold.it/40x40" class="img-rounded avatar" />
<div>
<h5 class="name">John Doe</h5>
<a class="follow"><i class="fa fa-twitter"></i>Follow me</a>
<a class="like">112 likes</a>
</div>
<time>2 days ago</time>
</div>
CSS:
h5.name {
margin:0;
display:inline;
}
http://jsfiddle.net/1319Lw2r/1/
Add the following:
a.follow {
margin-left: 10%; /* adjust to your liking */
}
I would recommend using margin instead of padding where you have it in your example, as well.
For example, padding is pushing the text inside the <a> tag which makes the anchor wider than it needs. By using margin instead it pushes the anchor while keeping it's size constrained to the content. You can test this by putting a border around the <a> tag.
i'm trying to write a div box with headings and links below to it, but somehow i can't get the links to display next to eachother, i've tried using display:inline, but it did no effect, i've also tried float, position etc, but just can't get what i want without messing up.
my code is here: http://jsfiddle.net/dfc8gceg/2/
<div style="background:#E1ED9D; width: 25%;height:250px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<a href="">
<h4 style="background:blue; width:50%; color:#0e8dbc; text-align:center; margin:10% 0 0 0; ">Link1</h4>
</a>
<a href="">
<h4 style="background:orange; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link2</h4>
</a>
<a href="">
<h4 style="background:purple; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link3</h4>
</a>
<a href="">
<h4 style="background:red; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link4</h4>
</a>
</div>
Sorry for the repetition of code, it's because i can't use CSS or put code into head section, only body section of html due to my task requirement,
i would appreciate alot if someone can show me the answer without too much change on my code
I got rid of the h4 tags and used divs instead
http://jsfiddle.net/dfc8gceg/8/
<div style="background:#E1ED9D; width: 50%;height:150px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<a href="">
<div id="div1">hej</div>
</a>
<a href="">
<div id="div2">hej</div>
</a>
<a href="">
<div id="div3">hej</div>
</a>
<a href="">
<div id="div4">hej</div>
</a>
</div>
I also added some css to the jsfiddle
you should look more into how to use css and html
Hope this works out for you!
I made a JSFiddle, is this what you were aiming for?
http://jsfiddle.net/dfc8gceg/7/
Here is the HTML
<div id="container">
<h3>I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<h4>Link1</h4>
<h4>Link3</h4>
<h4>Link2</h4>
<h4>Link4</h4>
</div>
With accompanying CSS
#container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
h3 {
text-align: center;
margin:0;
}
a {
display: inline-block;
}
.link {
width: 50%;
color: #0e8dbc;
text-align: center;
display: inline-block;
float: left;
}
#link1 {
background: blue;
margin: 10% 0 0 0;
}
#link2 {
background: orange;
margin: 3% 0 0 0;
}
#link3 {
background: purple;
margin: 10% 0 0 0;
}
#link4 {
background: red;
margin: 3% 0 0 0;
}
I think I achieved what you were looking for.
Hope this helps! :D
PS: I'm a noob at Stack Overflow, did I format this correctly? It wanted the code in the answer so...
EDIT: I kept the H4 elements for you, but feel free to change them (I didn't want to change any of your code, I kept it all just made it neater)
A preferred method would be instead to use an unordered list (<ul><li></li></ul>), and then add css to the list, display: inline; to remove the default block level display. Alternatively, you can use display: block; float: left;, which you would need in order to give a width to the li.
Moreover, you should not be using inline CSS, but rather a stylesheet.
Like this:
CSS:
.container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
.container h3 {
text-align:center;
margin:0;
font-size: 14px;
font-family: arial;
font-weight: normal;
}
.list {
width: 100%;
padding: 15px 0 0 0;
margin: 0;
}
.list li {
style-type: none;
display: block;
float: left;
width: 50%;
margin: 15px 0 0 0;
padding: 10px 0;
text-align:center;
}
.list li a {
color:#0e8dbc;
}
#first-link {
background:blue;
}
#second-link {
background:orange;
}
#third-link {
background:purple;
}
#fourth-link {
background:red;
}
HTML
<div class="container">
<h3>I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<ul class="list">
<li id="first-link">Link1</li>
<li id="second-link">Link2</li>
</ul>
<ul class="list">
<li id="third-link">Link3</li>
<li id="fourth-link">Link4</li>
</ul>
</div>
Also, as above, you don't need the H4s because that is poor coding to put into a menu (what you have is essentially a menu). H4 is better used as a header tag. By instead defining css classes to the LI elements, there is no need for a specific html tag like h4.
EDIT: I improved the CSS code from what I had before. I changed the ID elements to classes (class is used if there will be more elements using the same class), and moved the link classes into the LI. I also changed the li classes to IDs because ID is to be used when it appears only one time on the page. Given the specificity of the IDs, these will likely not be used again. If they are, you should change it back to a class.
jsfiddle: http://jsfiddle.net/Lxyjjfx2/1/