I am very new to HTML and CSS. I am creating a page I will insert it into my Wordpress website thoughtprojekt.com. I tried every where else to achieve what I am trying to but couldn't.
There is a header that I coded is below which is fine.
p.h1{
padding-top:75px;
padding-bottom: 25px;
}
a.header{
text-transform: uppercase;
text-align: center;
font-weight: normal;
text-decoration: none;
display:block;
color: #000000;
font-size:50px;
font-family: 'Lato Light', sans-serif;
line-height:50px;
letter-spacing:15px;
}
</style>
</head>
<p class ="h1" align="center"> <body><a class="header" href="http://thoughtprojekt.com">Thought Projekt</font></a>
Now I want to place 64px x 64px (30 images) starting exactly in the center and right below "Thought Projekt". There should be only 5 images in a row with 6 rows in total. I have tried padding but as the images also have hyperlinks it leaves clickable blank spaces.
Can someone please guide me as to how should I start placing the images?
Thanks
You can use divs to set limits, for a row width.
And, for float the items, where you put the images...
Example
html
<div class="row">
<div class="image"><img src="#" alt="Image"/></div>
</div>
css
.row {
max-width: 340px;
}
.image{
width: 64px;
height: 64px;
float: left;
}
What I would suggest is that you need to make a whole div where all the images will go in. Withing that div, you will place 6 div's one below the other and within each div, you place each image next to each other.
The HTML code will look like this:
<head>
<link type="text/css" rel="stylesheet" href="images.css">
</head>
<body>
<div class="container">
<div class="row">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
</div>
<div class="row">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
</div>
<div class="row">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
</div>
<div class="row">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
</div>
<div class="row">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
</div>
<div class="row">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
<img src="your_image.png">
</div>
</div>
</body>
Then for CSS:
//This is the images.css file located in the same folder with html file
.container .row img{
float: left; //Each image will be next ot each other
width: 64px;
height: 64px;
}
.row{
display: block;
height: 64px;
}
.container{
width: 320px;
position: relative;
top: 50%;
transform: translateY(-50%);
margin: auto 0px;
float: right;
}
I believe this is what you are asking for. Hope it helps!
PS: Are you new to stackoverflow? Welcome! :)
Related
I'm trying to learn a bit more CSS/HTML to customize xaringan slides and could use some help.
I would like to place a number of GIF's in an image grid like the one shown here into a xaringan slide.
I know that normally one can display two images side-by-side by either using .pull-left[] & .pull-right[] or by defining sections with custom CSS like this:
.left-code {
color: #777;
width: 38%;
height: 92%;
float: left;
}
.right-plot {
width: 60%;
float: right;
padding-left: 1%;
}
Then one would put the images in a xaringan slide with R code like this:
.pull-left[
<img src=figure1.jpg>
]
.pull-right[
<img src=figure2.jpg>
]
For an image grid the custom CSS would be:
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create two equal columns that sits next to each other */
.column {
flex: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
However, it also includes HTML code that specifies all of the images so I'm not quite sure how to integrate the two in a xaringan slide.
<div class="row">
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
</div>
You can do this using the extension theme here.
This theme is included the later version of xaringan so you can specify in the YAML by css: "ninjutsu". The layout should look like below:
---
title: "Split to grid in `xaringan`"
output:
xaringan::moon_reader:
css: ["ninjutsu"]
---
class: split-four
.column[
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
]
.column[
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
]
.column[
other images
]
.column[
other images
]
I want the first image to stick to the top of the container and the following images should be below it... top:0; lets the image be..200px above the container and if I just say position:relative its always in the middle...;
<div class="container">
<div class="card_left">
<p style="font-size:1.6em; padding: 15px 0;"><b>Title</b></p>
<p style="font-size:1.2em;">Long text</p>
</div>
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/>
<img src="../res/images/artikel1bild.PNG"/>
</div>
Use display: block so there will be no other images in the same line and margin: auto for centering the image
img {
display: block;
margin: auto;
width: 200px;
}
<div>
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
</div>
Just add <br /> after each image if you want to stick to HTML:
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/><br />
<img src="../res/images/artikel1bild.PNG"/><br />
</div>
Or the better way would be to make a separate CSS file and set display: block; for your img tags:
img {
display: block;
}
Example: https://jsfiddle.net/nk8fbr76/
try this
img {
margin: 0, auto;width: 200px;display:inline-block;height:100px;
}
<div class="card_right">
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
</div>
I'm trying to centre two buttons but having no luck!
It also has a header image above the buttons within the HTML.
Here's my current HTML:
HTML:
<div>
<img src=".jpg" style="width:700px;display:block;margin-left:auto;margin-right:auto;" alt=""><div class="nav3" style="height:705px;">
<span class="icons"><a href="https://twitter.com/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</span>
<a href="https://www.amazon.co.uk/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</div>
I revised your code and separate it the inline style from your html code.
div {
text-align: center;
width: 700px;
}
div img{
width:700px;
margin-bottom: 20px;
}
.nav3 img {
width: 100px;
display: inline;
}
<div>
<img src="http://placehold.it/700x260" alt="">
<div class="nav3">
<img src="http://placehold.it/640x260" alt="">
<img src="http://placehold.it/640x260" alt="">
</div>
</div>
Currently, I set the width of div to width: 700px; and the place holder also contains the same width. Modify these width to suit your needs.
very new to HTML and CSS. Can't get my text to move under my images. I have 4 images and under them I want to be a paragraph of text. This is probably a dumb question so please excuse my ignorance. I cant get the text to move where I want(and the values in the CSS file, pixel wise, are wrong but I can't even get 3 of them to show up to try and adjust them as its under my navbar or the images?). The images show up, in the correct order and are formatted correctly.
Trying to get to look like this:
https://gyazo.com/c3de4fa6832107a8f16300cbacca47f8
Thanks in advance
Here is my CSS/HTML files:
.img {
position: relative;
float: left;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
.text2 {
position:relative;
left:200px;
top:400px:
}
.text3 {
position:absolute;
left:300px;
top:400px:
}
.text4 {
position:absolute;
left:400px;
top:400px:
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="about.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Title</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Links</li>
<li>LinkedIn</li>
<li>Github</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xx.jpg" class="img-circle img">
<div id="text1">
<p>TEXT UNDER PIC 1</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 2</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 3</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 4</p>
</div >
</div>
</body>
</html>
http://codepen.io/lostdino/pen/LpKKra
I wasn't sure if you wanted to keep your HTML structure or if it was open to revision so I just worked within the constraints your provided. What I did was remove your floats and instead use display: inline-block which will stack elements horizontally rather than vertically within their container. You can see I've also used [id*="text"] which will allow the capture of any elements with an id that contains 'text'. I'd suggest also moving away from pixels and go for a more responsive unit such as percentages or rem. If you think there is value in me showing you how I would approach this problem I'm more than happy to throw a quick example together for you. I hope this helps.
.img {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
[id*="text"] {
width: 250px;
display: inline-block;
}
With respect to the other answers assuming there is an image and caption relationship between the text and the images then a possible improvement to the solution would be as follows:
http://codepen.io/lostdino/pen/PPrryZ
.gallery img {
position:relative;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.gallery {
padding-top: 100px;
padding-left: 10px;
position:relative;
}
.gallery > figure {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
}
The HTML of the gallery restructured like so:
<div class="gallery">
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 1</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 2</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 3</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 4</figcaption>
</figure>
</div>
The reason your text isn't aligning as you'd wish is because <p> and <div> are block level elements by default, which means they'll fill space and start on new lines. To remedy this, you could change the display property to be inline.
That said, you're approaching this wrong, you're not grouping your image and the caption together. Your structure should be more along these lines:
<div class="container">
<!-- Image One -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Two -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Three -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
You would then set your desired widths on the .image-container class, and your image and captions will follow suite.
Your paragraphs are not nested in the proper order to achieve this. Make sure you place the paragraph tags within the div tag that contains the images.
Also, use the inspect element tool when you refresh your browser. In Google Chrome, go to View, Developer, and select Developer tools. A new window will appear at the bottom of the browser. When you hover over the font-end interface, the page will highlight your html nesting-structure.
Hope this helps, let me know if you have any more questions!
I have 6 images that I want to have at the bottom and one large image above them. I am trying to make an image gallery.
I have set margin-top to the 6 images. I have added the other image which I want larger for the preview image but it seems to be making the other images move down and some out of the div. I know this may have something to do with the images being floated? I am a bit confused on where to put the float I initially just floated the images but it didn't seem to need it I guess because they're inline.I may possibly need to put them in divs? Overall I'm just confused :/
Here is an image to make it clear what I want to achieve:
Here is my code:
HTML
<div class="mainInfo">
<div class="gallery">
<!-----this is the first image I want to be the large preview--->
<img src="../assets/images/gallery/gallery3.png" alt="">
<img src="../assets/images/gallery/gallery1.png" alt="">
<img src="../assets/images/gallery/gallery2.png" alt="">
<img src="../assets/images/gallery/gallery3.png" alt="">
<img src="../assets/images/gallery/gallery4.png" alt="">
<img src="../assets/images/gallery/gallery5.png" alt="">
<img src="../assets/images/gallery/gallery6.png" alt="">
</div>
<!--END OF MAIN INFO-->
</div>
CSS
.mainInfo {
height: 650px;
background-color:#FCFCFC;
color:#001D5D;
padding: 100px 0 0 30px;
/* .............Gallery section........... */
.gallery {
float: left;
}
.gallery img {
width:140px;
height:auto;
margin:365px 0 0 15px;
}
.displayImage img {
width:400px;
height: auto;
margin: 0 auto;
padding:10px 0 0 30px;
}
/* .............Gallery section END........... */
Organize
You need to organize your HTML for layout.
Try inserting your big image in a <div class="displayImage"></div> tag. Then you can control it easier with your CSS.
Use CSS to define constraints.
Let's try adding appropriate widths to your images and fixing the margins.
Updated CSS
.gallery {
float: left;
}
.gallery img {
width:80px;
height: 80px;
margin: 10px;
}
.displayImage {
text-align: center;
padding-bottom: 20px;
}
.displayImage img {
width: 400px;
height: auto;
margin: 0 auto;
}
Updated HTML
<div class="gallery">
<div class="displayImage">
<img src="http://images.summitpost.org/original/371959.JPG" alt="" class="displayImage">
</div>
<a href="#">
<img src="http://www.slowtrav.com/blog/chiocciola/IMG_1368.jpg" alt="">
</a>
<a href="#">
<img src="http://www.nyroute28.com/pics/Thurmond_mountain_fall.jpg" alt="">
</a>
<a href="#">
<img src="http://images.summitpost.org/original/134465.jpg" alt="">
</a>
<a href="#">
<img src="http://www.domnik.net/topoi/commons/AT/alps/05n_mountain.jpg" alt="">
</a>
<a href="#">
<img src="http://people.hsc.edu/faculty-staff/mhight/Fulbright_Images/ItalySept2007/Cassino01.jpg" alt="">
</a>
<a href="#">
<img src="http://www.nyroute28.com/pics/Thurmond_mountain_fall.jpg" alt="">
</a>
</div>
Just remember, HTML is your friend. Organize it to best parallel with your CSS. This is a small case that could still survive without less structured HTML, but it's a great practice to get started.
Here's a example of it all: http://codepen.io/anon/pen/LjgdF
Do something like this,then you can position first images as per your wish.
Something you will get in Fiddle
<div class="mainInfo">
<div class="gallery">
<div class="bigpic">
<img src="../assets/images/gallery/gallery3.png" alt="">
</div>
<img src="../assets/images/gallery/gallery1.png" alt="">
<img src="../assets/images/gallery/gallery2.png" alt="">
<img src="../assets/images/gallery/gallery3.png" alt="">
<img src="../assets/images/gallery/gallery4.png" alt="">
<img src="../assets/images/gallery/gallery5.png" alt="">
<img src="../assets/images/gallery/gallery6.png" alt="">
</div>
</div>