I am trying to validate my code as follows:
<ul class="work">
<li>
<img src="images/work_1.png" alt="Work 1 Logo" /> <h4>Lorem ipsum doler sit amet consectetur adipiscing elit.</h4> Work 1
</li>
<li>
<img src="images/work_2.png" alt="Work 2 Logo" /> <h4>Lorem ipsum doler sit amet consectetur adipiscing elit.</h4> Work 2
</li>
<li>
<img src="images/work_3.png" alt="Work 3 Logo" /> <h4>Lorem ipsum doler sit amet consectetur adipiscing elit.</h4> Work 3
</li>
</ul>
The problem I am facing, of course, is that block-level elements (h4) should not be inside inline elements (a). Is there any XHTML 1.0 Strict valid way which will allow me to see the same effect that I see right now with this code?
The unique aesthetic benefit I get by having the (h4) within the (a) is the fact that there are two different text styles both being affected by the same anchor. It actually looks quite good on my page!
Change your h4 to span and give them the same styles.
<ul class="work">
<li>
<a href="work1.html"> <img src="images/work_1.png" alt="Work 1 Logo" />
<span>Lorem ipsum doler sit amet consectetur adipiscing elit.</span>
Work 1</a>
</li>
etc.
Related
So I have this code for my assignment but I can't figure out how to make the image goes to the side of the text. It keeps going to the right corner. Can someone help me out please? I just started to learn CSS. Thank you in advance.
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
<img src="cy.png" alt="IMG">
Make a table
<table>
<tr>
<td>
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
</td>
<td>
<img src="cy.png" alt="IMG">
</td>
</table>
Could you clarify, are you trying to get it to go to the right side of text?
Typically, the align property of the img tag is what you want, and you usually want it before the thing you are trying to align it with.
I also recommend sharing a jsFiddle so that people can play with the code.
<img src="https://images.pexels.com/photos/13728847/pexels-photo-13728847.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="IMG" align="right">
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><be>
https://jsfiddle.net/f1e7b6d8/
Nice to see you are started journey of css.
There is X ways to solve your problem with the help of css.
Float
Flexbox
Grid
Position
So for a beginner I would like to solve your problem with the help of float.
if you can not understand my code then you can take reference of any website to learn about css float property.
-------------CSS FILE-------------
.content {
float: right;
}
.image {
float: left;
}
.clear {
clear: both;
}
------------- HTML File -------------
<div class="content">
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
</div>
<div class="image">
<img
src="your_image_path"
alt="IMG">
</div>
<div class="clear"></div>
</body>
You have many ways to make this by CSS
you can use Float , FlexBox , Grid, Position
You can keep your HTML as it's but with a simple modification to put your img tag under the text
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<img src="cy.png" alt="IMG">
<button class="but1">Example</button>
<button class="but2">Example</button><br>
In you CSS file you can use
.txt {
float: left;
}
.img {
float: right;
}
button {
clear: both;
}
Hope this fix your issue.
I have an amp carousel with some hide/show content at the bottom. I am using amp-bind to dynamically hide and show some extra content as well as adjust the height value of the carousel itself so that the content can be seen.
The markup is something like this, but with a couple more slides with similar content:
<amp-carousel
[height]="visible ? 720 : 550"
height="550"
width="400"
layout="responsive"
type="slides">
<div class="carousel__slide">
<p>Text content here</p>
<button [text]="visible ? 'See Less' : 'See More'"
on="tap:AMP.setState({visible: !visible})">See More</button>
<ul [class]="visible ? 'show' : 'hide'" class="hide">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>
</div>
</amp-carousel>
With that mark I get the following error:
amp-bind: Default value for [height] does not match first expression result (550). This can result in unexpected behavior after the next state change.
I tried adding a default value for height before the carousel but that didn't seem to help
<amp-state id="props">
<script type="application/json">
{
"height": "550"
}
</script>
</amp-state>
I tried passing it both a number and string, with brackets and without but none of it seems to work
You're missing single quotes '. Try this:
<amp-carousel
[height]="visible ? '720' : '550'"
height="550"
width="400"
layout="responsive"
type="slides">
<div class="carousel__slide">
<p>Text content here</p>
<button [text]="visible ? 'See Less' : 'See More'"
on="tap:AMP.setState({visible: !visible})">See More</button>
<ul [class]="visible ? 'show' : 'hide'" class="hide">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>
</div>
</amp-carousel>
After discussing with the AMP team, they informed me that's it's actually a bug with the validation in developer mode
Bug has been filed here: https://github.com/ampproject/amphtml/issues/12028
using FOUNDATION 6.
Have 3 columns, each has:
image (always same size)
title (varies in length )
text (varies in length )
button
How can I have them all align horizontally throughout the colums?
This is current situation:
current situation
What I need:
enter image description here
Current code for this section:
<div class="row small-up-1 medium-up-3 large-up-3 " data-equalizer="prodMain" >
<div class="column" data-equalizer-watch="prodMain" >
<img class="thumbnail" src="http://img1.10bestmedia.com/Images/Photos/96123/captiva-beach-captiva_54_990x660_201404211817.jpg" />
<h5>Lorem ipsum ipsum ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
ABOUT THE LOREM
</div>
<div class="column" data-equalizer-watch="prodMain">
<img class="thumbnail" src="http://img1.10bestmedia.com/Images/Photos/96123/captiva-beach-captiva_54_990x660_201404211817.jpg" />
<h5>Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
ABOUT THE LOREM Y
</div>
<div class="column" data-equalizer-watch="prodMain">
<img class="thumbnail" src="http://img1.10bestmedia.com/Images/Photos/96123/captiva-beach-captiva_54_990x660_201404211817.jpg" />
<h5>Lorem ipsum & Lorem ipsum </h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
ABOUT OUR LOREM
</div>
</div><!--/ -->
If you want to use jquery you could try including a class like same-height to your html, then testing with jquery
HTML (add the extra class name same-height)
<div class="row small-up-1 medium-up-3 large-up-3 same-height" data-equalizer="prodMain" >
Javascript
$(function() {
function getLargest(elements) {
largest = 0;
$(elements).each(function(i, obj) {
if($(this).height() > largest) {
largest = $(this).height();
}
});
return largest;
}
function setHeights(elements, largest) {
$(elements).each(function(i, obj) {
$(this).height(largest);
});
}
var largest = getLargest('.same-height h5');
setHeights('.same-height h5', largest);
var largest = getLargest('.same-height p');
setHeights('.same-height p', largest);
});
Works fine but if you want to resize the browser or limit to certain screen sizers you would need extra code.
Right now I have two divs using "one-half columns" class.
As you can see here, the bottom card on the left side is still aligned with the one on the bottom right.
I want Pinterest kind of style like this, but I do not know how because they are in different rows.
here is my html code.
<div class="container">
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Stealth Rats</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p>
</div>
</div>
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p>
</div>
</div>
</div>
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
Thanks in advance!
You can't do it in plain css unless you work with columns instead of rows (and that breaks content importance).
What you want is Masonry or another javascript alternative.
Also, your html has errors, you cannot use the same id more than once. Change it to class='cards' and if you want to use masonry you have to put every card inside the same div, so in this case, inside the same row.
Then you can call it
$('.row').masonry({
itemSelector: '.cards',
columnWidth: 200 //this is an example.
});
Since masonry is responsive, you can forget about skeleton for this part.
I am trying to set up a section of a website to have a column of text, a long vertical picture, and another column of text on the other side of the picture. I have been able to achieve the look I want but only by using a negative top margin(not shown in this example).
The code I have tried is here
http://www.bootply.com/3hKEyWGlJp
You don't need the extra row since a new row will create a new block below the previous row. It's how CSS grids work (Bootstrap in your example). Just put the content of step 1/2 in left column, div in center column and step 3/4 content in right column.
<div class="row">
<div class="col-md-3 col-md-offset-1">
<p class="lead text-left">Step 1: asdf asdf asdf </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at..</p>
<p class="lead">Step 2: Lorem ipsum dolor sit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at</p>
</div>
<div class="col-md-3">
<div class="phone"></div>
</div>
<div class="col-md-3">
<p class="lead text-left">Step 3:Lorem ipsum dolor sit</p>
<p>Start typing your address & we will give you a list of options to choose from.</p>
<p class="lead">Step 4: Lorem ipsum dolor sit</p>
<p>dsadsdad sddasd saddsd dasdsada sdasds d ds ads dadsd dasd sada sdasdsdd sads dadsdda sdsada sdasdsd</p>
</div>
</div>
Example: http://www.bootply.com/rCr1B4wiKD