I am attempting to implement three images horizontally into a HTML website. However when i format it using CSS nothing is happening, I am very confused as it should theoretically work. I would greatly appreciate if anyone could help me out, thank you.
HTML page image part:
</p>
<div class="row">
<div class="column">
<img src="gosportSunset.jpg" alt="Sunset" style="width:33%">
</div>
<div class="column">
<img src="gosport.jpg" alt="Gosport" style="width:33%">
</div>
<div class="column">
<img src="gosportRace.jpg" alt="Race" style="width:33%">
</div>
</div>
</p>
CSS image formatting part:
/* Three image containers */
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
If the grid is not working try to add box-sizing: border-box; in .column
.column {
float: left;
width: 33.33%;
padding: 5px;
box-sizing:border-box; // important
}
Instead of using div structure you can try something with ul & li, also make use of "column-count" property using which you can define the number of columns you want in a horizontal row.
Refer link for more understanding about "column-count" property:
https://www.w3schools.com/cssref/css3_pr_column-count.asp
<!DOCTYPE html>
<html>
<head>
<style>
ul {
column-count: 3;
list-style: none;
}
</style>
</head>
<body>
<div class="row">
<ul>
<li>
<img src="gosportSunset.jpg" alt="Sunset "/>
</li>
<li>
<img src="gosport.jpg" alt="Gosport" />
</li>
<li>
<img src="gosportRace.jpg" alt="Race" />
</li>
</ul>
</div>
</body>
</html>
Related
I'm working on making an e-commerce website. For the footer, I want to place the e-commerce's brand name on the top left, and the social media icon links on the top right.
The layout I want as follows:
However, the footer currently looks like this:
Here is what I have coded.
.footer-top {
display: inline-block;
width: 100%;
}
.title {
float: left;
}
.social {
float: right;
}
<div class="footer-top">
<div class="name">
<h1><span class="bigger">XXXX</span></h1>
</div>
<div class="social">
<!--Social media icons-->
</div>
</div>
What is my error?
You can use display:flex; to style navbar. Copy these code and paste in your CSS instead of code you have provided.
.footer-top {
display:flex;
justify-content:space-between;
align-items:center;
}
<div class="footer-top">
<div class="name">
<h1><span class="bigger">XXXX</span></h1>
</div>
<div class="social">
<!--Social media icons-->
fb
insta
</div>
</div>
The reason why your layout wasn't what you expected is because you had .name in html but .title in css. Correct the class name and floats will work as well. Also there is no need to have display: inline-block and width: 100%. <div> is a block by default and occupies 100% of width.
That being said, with flex it is easier to align content vertically.
.title {
float: left;
}
.social {
float: right;
}
<div class="footer-top">
<div class="title">
<h1><span class="bigger">XXXX</span></h1>
</div>
<div class="social">
<!--Social media icons-->
icon
icon
</div>
</div>
I'm going to re-ask this question in a more simple way:
I am using the following code from W3school, but I need to change the images to 50% which creates a huge gap between the columns. Is there a way to align the left column to the right so that the images are close together?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
</div>
</body>
</html>
So I think I "fixed" your issue with flexbox but I would suggest reordering your code structure. You can see the fix below. Also, I wrote an article on CSS references that you should check out. There are several links that I use almost daily when designing UI. Heres the link...
https://medium.com/#hunter.campbell843/css-references-for-new-developers-and-old-6e3dbead437f
.column {
float: left;
display: flex; //These are the only
justify-content: center; //things i added
width: 50%;
padding: 5px;
background-color: aqua;
}
I am new to html,css and am currently working on a page.
I am unable to align the menu at the right bottom side.It is clashing with my 3 pictures in the middle. Also logo at the bottom left keeps changing when ever I make changes to the images at the centre. Kindly go through the code and let me know.
body {
margin: 0;
padding: 0;
}
.background{
position: relative;
}
.background .text {
position: absolute;
top: 300px;
left: 300px;
width: 300px;
}
.logo {
position:absolute;
left: 10px;
bottom: 10px;
}
#bottomnav ul {
list-style: none;
display: inline-block;
width: 100%;
position: absolute;
right:0px;
bottom:0px;
}
#bottomnav ul li {
width: 0%;
float: right ;
text-align:right;
}
.images{
width:250;
height:250;
display:inline;
float:right;
border:2px solid #FFF;
margin-top:300px;
}
<body>
<div class="background">
<img src="images/landing_page.png"/>
<div class="text">
<h1>welcome</h1>
<p>office</p>
<p>ink</p>
</div>
<div class="logo"> <img src="images/logo_03.png"/> </div>
<div class="images">
<img src="images/top1.jpg" width="400" style="float:right"/>
<img src="images/top2.jpg"width="400" style="float:right"/>
<img src="images/top3.jpg" width="400" style="float:right"/>
</div>
<div id="bottomnav">
<ul>
<li>Home</li>
<li>About </li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
Divi,
check out clearfix.
http://nicolasgallagher.com/micro-clearfix-hack/
You will need to apply the fix to the image parent container (.images).
Also you are using a lot of absolute positing, when it is not necessarily needed.
You could float the logo left and image container right, while applying an explicit width to each.
Also why do you have .images set to 250 width, and images are 400 width?
I am unsure if this is the answer you're looking for, but this solution solves the problem you were having regarding the menu not showing up on the bottom right hand side (I think is what you were trying to achieve with some of your css): http://jsfiddle.net/swm53ran/72/
I reorganized the structure of your html a little bit because you said the logo should be at the bottom (I'm assuming below the other larger pictures).
<div class="background">
<img src="images/landing_page.png"/>
<div class="text">
<h1>welcome</h1>
<p>office</p>
<p>ink</p>
</div>
<div class="images">
<img src="images/top1.jpg" width="400" style="display:inline-block;"/>
<img src="images/top2.jpg"width="400" style="display:inline-block;"/>
<img src="images/top3.jpg" width="400" style="display:inline-block;"/>
</div>
<div class="logo"> <img src="images/logo_03.png"/> </div>
<div id="bottomnav">
<ul>
<li>Home</li>
<li>About </li>
<li>Contact Us</li>
</ul>
</div>
</div>
heres the css:
#bottomnav {
display:inline-block;
float:right;
}
#bottomnav ul {
list-style: none;
}
#bottomnav ul li {
display: inline-block;
}
Useful tip: when dealing with css, less is more, try to be concise in your styles so that you dont have to write over styles with other styles and force your way around the DOM.
hope this helps/gets you pointed in the right direction.
I'm trying to lay the header of my page out so that it looks like this:
I would like to avoid using tables if posible. I'm html and css beginer co I cannot get it working :(.
This is my best try till now:
Html:
<div class="rightAlign" >
<div class="notificationArea">
<img src="../bigHeaderImage.png" />
</div>
<div>
<div>
<img src="../smallImage.png" />Some info<br/>
Other info
</div>
<div>
<div class="ignoreRightAlign">
<a href="#" >Menu1</a>
<a href="#" >Menu2</a>
</div>
<a href="#" >Menu3</a>
</div>
</div>
</div>
CSS:
.rightAlign
{
clear: both;
text-align: right;
}
.ignoreRightAlign
{
float: left;
}
It does not work as desired of cause: Menu line is not on the bottom aligned to bottom of "Big header picture".
Thank you for any help, ideas and advices
To get your menu to line up with the bottom of your big image though you need to absolutely position the menu items within a relative parent. I've simplified it a bit, but here are the necessary pieces to make it happen:
<html>
<head>
<title>test</title>
<style type="text/css" media="screen">
.right
{
float: right;
}
.header
{
position: relative;
}
.menu
{
position: absolute;
bottom: 0;
right: 0;
left: 250px;
}
.info p
{
float: right;
}
.rightHeader
{
float: right;
}
</style>
</head>
<body>
<div class="header">
<img src="bigimage.png" />
<div class="rightHeader">
<div class="info">
<img src="smallimage.png" /><p>Some info <br /> Other info</p>
</div>
<div class="menu">
Menu 3
Menu 1
Menu 2
</div>
</div>
</div>
</body>
</html>
W3 visual formatting model is also a great read for learning how CSS layouts work.
Also:
Have you tried CSS "position"?
.smallPicture
{
position: absolute; //Or relative (among other options)
right: 15px; //Or whatever it needs to be
top: 0; // Can be in ##px or ##em or %
}
So I have created a slider for a homepage, that slides some images with a title and teaser text using jQuery. Everything works fine, and I went to check IE and found that IE 6 and 7 kills my slider css completely. I can't figure out why, but for some reason I can't hide the non active slides with overflow: hidden; I've tried tweaking the css back and forth, but haven't been able to figure out what's causing the problem.
I've recreated the problem in a more isolated html page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da" dir="ltr">
<head>
<style>
body {
width: 900px;
}
.column-1 {
width: 500px;
float: left;
}
.column-2 {
width: 200px;
float: left;
}
.column-3 {
width: 200px;
float: left;
}
ul {
width: 2000px;
left: -499px;
position: relative;
}
li {
list-style: none;
display: block;
float: left;
}
.item-list {
overflow: hidden;
width: 499px;
}
</style>
</head>
<body>
<div class="column-1">
<div class="item-list clearfix">
<ul>
<li class="first">
<div class="node-slide">
<img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
<div class="infobox">
<h4>Title 1</h4>
<p>Teaser 1</p>
</div>
</div>
</li>
<li>
<div class="slide">
<img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
<div class="infobox">
<h4>Title 2</h4>
<p>Teaser 2</p>
</div>
</div>
</li>
<li class="last">
<div class="slide">
<img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
<div class="infobox">
<h4>Title 3</h4>
<p>Teaser 3</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="column-2">
...
</div>
<div class="column-3">
...
</div>
</body>
</html>
I've tracked down that it is the
ul {
position: relative;
}
on the ul element that is causing the overflow: hidden not to work, but why that is, I don't know. Also this is needed to make the slider javascript work using the left attribute on the ul to slide it. Any ideas as to how you can fix this is most welcome.
It is a well-known bug in IE6 and IE7. To solve it, you need to add position:relative to the container. Since in your case body is the container, I'd suggest you add a div directly under the body and give it position:relative. It should solve your problem.
This problem is apparently a known bug for IE 6 + 7, which was fixed in IE8.
To avoid this, in this case you can replace:
ul {
left: -499px;
position: relative;
}
with:
ul {
margin-left: -499px;
}
This however gave some problems with the background I used on the infobox div, but nothing I couldn't solve with a few style hacks.