I'm trying to create the following design:
This is my code so far.
<section class="frontpagearticle">
<figure class="frontpagearticlefigure">
<img class="frontpagearticleimg" />
</figure>
<header>
<h2 class="frontpagearticleh2">MyHeader</h2><time class="frontpagearticletime">pubtime</time>
</header>
<p class="frontpagearticletext">Lorem....</p>
Read more...
</section>
I'm having problems creating my css, so ex. pubtime would be align to the right, while MyHeader would be left align.
The image is always going to be the same size.
height: 140px;
width: 250px;
Something like this? My attempt at making it, as simple as I could :)
Related
I am new to coding and it is very ugly and disorganized but i am trying to pass the last test on a freecodecamp project. https://codepen.io/thomas-nurney/pen/PoZjXyw?editors=1100
<img id="boardpic" src="https://live.staticflickr.com/7845/46438012904_068fcdaf8b_b.jpg" max-width="100%" width="200" height="200" style=width:100%; border="0" alt="Surfboard shaping"/><fig-caption>Patience is the key to smoothing out the rough edges while shaping a surfboard.</figcaption>
Any help would be appreciated. I've tried adding the max-width property to several elements but am not getting past the test.
Try this:
<img id="boardpic" src="https://live.staticflickr.com/7845/46438012904_068fcdaf8b_b.jpg" style="width:100%;height:200px;max-width:100%" alt="Surfboard shaping"/>
The height and width need units like 'px','%' etc
And style values have to be in double qoutes like style="...."
try these code snippets I solve it all for you
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<style>
#media only screen and (max-width:700px){
}
</style>
<nav id="navbar" style="position:fixed;">
<li>projects</li>
</nav>
<a id="profile-link" href="https://github.com" target="_blank">github</a>
<section id="welcome-section" style="height:100vh;overflow:auto;">
<h1> hi</h1>
</section>
<section id="projects">
<div class="project-tile">
</div>
</section>
<!--
Hello Camper!
For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding!
- The freeCodeCamp Team
-->
New here, I am making a web page for a school project and am having trouble getting the layout the way I want. was wondering if someone could point me in the right direction.
I am creating a layout. The top of the page is the navigation, then I have one main large image with some content over lay, and under that I have an image with content overlayed on the left and the right, then at the bottom the footer. * or thats what I would like anyway.
I have tried putting the images each in a but I can only get them to either be in a column or stacked. As I would like the first image under the header with navigation to be a wider picture , then two smaller ones each half the width of the main wider image if that makes sense..
I have searched online and the only things that looks similar to what I'm trying to accomplish are pay for templates.
<section>
<div class="container">
<img src="thebean.jpg" />
</div>
</section>
<section>
<div class="container">
<img src="rooftops.jpg" />
<div id="topleft"></div>
</div>
</section>
<section>
<div class="container">
<img src="thebean.jpg" />
<div id="topright"></div>
</div>
</section>
I'm not really sure if i got your question right without a figure that help me figure out the layout you are looking for.
Give a look at this picture and tell me if i got it right or not!
Layout testing
Here is the simple code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title>Testing</title>
</head>
<body>
<div id="largerPanel">
<img src="https://i.pinimg.com/originals/aa/49/54/aa4954451f16847cb657e68e5f46538a.jpg">
</div>
<div id="floatPanel" class="halfPanel">
<img src="https://i.ytimg.com/vi/fB8MYCGFqC0/maxresdefault.jpg">
</div>
<div class="halfPanel">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8nIMQ30DM-OKazFBcLM4m9kq3_fzph-eBoiax6M88O5nncGyB">
</div>
</body>
</html>
Test.css
body{
width: 100%;
height : 100%;
}
.halfPanel{
width:50%;
height: 20%;
}
.halfPanel img{
width:100%;
height:100%;
}
#floatPanel{
float:right;
}
#largerPanel{
width: 100%;
height: 20%;
}
#largerPanel img{
width: 100%;
height: 100%;
}
If i got it wrong please post a simple paint image with some boxes that show the layout you want, i will be happy to help you through this!
Apologies for my lack of terminology, I'm brand new to CSS. Currently modifying the main CSS for my webpage based off of HTML5 UP's Multiverse template.
I'm trying to set up a division for "film," "other media," and "commercial." I've updated the main.css file to account for sections #main, #other-media, and #commercial.
However, the subsequent added sections (other media & commercial) don't match the first section (film or #main). I'm not sure why this is the case since I just copy-and-pasted the code for each division but changed the division ID names, and if I'm supposed to adjust another part of the main.css?
Thank you so much for any and all help!
In your #main section the images are background-images of the a tags, which have background-size cover, in the section #other-media the images are regular images ( i.e. img tags). You should make them all background-images (with the same settings) to get the same result.
Addition after comment:
Your code for the <article> elements in the #main section are a tags with a background-image that has background-size: cover, plus an h2 and a p element:
<article class="thumb">
<a class="image" style="background-image: url("images-art/thumbs/07.jpg"); cursor: pointer; outline: 0px none;"><img src="images-art/thumbs/07.jpg" alt="" style="display: none;"></a>
<h2>...</h2>
<p>....</p>
</article>
And here's the code for an <article> in the #other-media section: An img tag inside an a tag, plus an h2 and a p element:
<article class="thumb">
<a href="images-art/fulls/03.jpg" class="image">
<img src="images-art/thumbs/03.jpg" alt="">
</a>
<h2>...</h2>
<p>....</p>
</article>
SO the difference is the handling of the image: Once as a background-image which fills the article element, and once as an img tag...
I'm currently trying to design a web page. I don't have much experience with HTML and are therefore finding it difficult to get my page looking how i'd planned. I would like to have four square images, two top with two directly below but im struggling to align these. I've tried to research this but all i seem to be able to find are examples with text wrap.
any help appreciated, thanks.
Are your images of the same size ?
Without more information on what you want/have on your page, it's kind of hard to know what you need.
But here's an simple example : http://codepen.io/cecileledoux/pen/mWJyGV
<section>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
</section>
<section>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
</section>
section{
margin-bottom: 20px;
text-align: center;
}
figure{
display: inline-block;
}
A client asked me to fix their image grid CSS. While I thought they just screwed around to much with the HTML for it to function properly it seems the problem is a bit more technical then I initially thought.
Because I cannot think of the right keywords google isn't much help either.
My problem is this:
the banners are png's. And as you might figure, the bottom 3x1 banner should align to the bottom of the other 3x1 banner.
This isn't really a problem if I'm working with columns (in this case 2), but I that's not the case. Since sometimes an image takes on a width of multiple columns, there is no clear line in between.
HTML:
<div class="page-banners grid-container">
<div class="grid12-6 banner">
<img src="3x1.png" />
</div>
<div class="grid12-6 banner">
<img src="3x2.png" />
</div>
<div class="grid12-6 banner">
<img src="3x1.png" />
</div>
</div>
CSS:
.grid12-6 {
width: 48%;
}
.grid12-1, .grid12-2, .grid12-3, .grid12-4, .grid12-5, .grid12-6, .grid12-7, .grid12-8, .grid12-9, .grid12-10, .grid12-11, .grid12-12, .grid-full, .grid-col2-sidebar, .grid-col2-main {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
}
Changing
float:left;
to
display:inline-block;
doesn't do the trick, it just makes the first 3x1 banner vertically align to the baseline of 3x2.
The answer is probably fairly simple. But I've spend way to much time staring at it.
Below is an example (made in excel) for the page could 'look' like if all the images were inserted. Each color as a placeholder for a banner.
Basically, this is what I want, but without the javascript.
http://desandro.github.io/masonry/demos/basic-multi-column.html
It should be enough to put the images together into one column, havent tried it
<div class="page-banners grid-container">
<div class="grid12-6 banner">
<img src="3x1.png" />
<img src="3x1.png" />
</div>
<div class="grid12-6 banner">
<img src="3x2.png" />
</div>
</div>
you might need to adjust the space between them
It's hard to say as you are not giving us the real example of use but try setting the height on the banners as the lowest heigt and the inages will overflow naturaly like so:
.banner{height:100px}
http://fiddle.jshell.net/gndLuqqy/