in advance i appreciate all help i can get since im new to HTML and CSS, i want to center the 3 images, but i cant center them, im sure its something silly but i cant figure it out. i added an image so you can see what the layout is.
body {
font-family: Arial, Verdana, sans-serif;
color: #000;
font-weight: bold;
margin: 0;
}
#wrapper {
width: 100%;
}
#logo {
float: left;
}
#navigation {
clear: both;
background-color: #14171a;
width: 100%;
height: 70px;
box-shadow: 0px 5px 3px #000;
}
#navigation ul li {
display: inline;
margin-left: 50px;
}
#navigation ul li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
#navigation ul {
width: 570px;
padding-top: 20px;
margin: 0px auto 0px auto;
}
#midcontent {
}
h1 {
margin: 0px auto 0px auto;
margin-top: 50px;
padding: 10px 0px 10px 10px;
color: #fff;
background-color: #6ac045;
font-size: 170%;
border-radius: 8px;
width: 400px;
}
#midcontent article {
}
figure {
float: left;
width: 300px;
}
figure img {
display: inline-block;
width: 300px;
height: 244px;
}
figcaption {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Electronix CR</title>
<link rel="stylesheet" type="text/css" href="CSS/Electronix.css">
</head>
<body>
<div id="wrapper">
<header id="logo">
<img src="images/Electronix.png">
</header>
<nav id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<h1>What can we fix for you today</h1>
<section id="midcontent">
<article class="content">
<figure><img src="images/Diagnostic.jpg" alt="Helianthus" />
<figcaption>Siagnostic</figcaption>
</figure>
<figure><img src="images/LCD.jpg" alt="Passiflora" />
<figcaption>LCD Replacement</figcaption>
</figure>
<figure><img src="images/Battery.jpg" alt="Nyctocalos" />
<figcaption>Battery Replacement</figcaption>
</figure>
</article>
</section>
</div>
</body>
</html>
have you attempted to remedy the issue using the BootStrap framework? Using the grid you will be able to place the images in columns and rows based on the size you desire. BootStrap works in a grid of 12. So you would require something along the lines of
<div class = row>
<div class = col-md-4>
<insert image here or content here>
</div>
</div>
You may also need to add this to your images:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
essentially you would repeat the process as needed. each image with "col-md-4" as 4*3=12. It may require additional adjustments, but bootstrap will do almost all the heavy lifting. Below is a link to BootStrap and it's documentation. Good luck friend.
http://getbootstrap.com/
Related
This question already has an answer here:
How do i create and link another webpage with Visual Studio Code?
(1 answer)
Closed 2 years ago.
I'm talking specifically about the part that says <p>Questions? Ask them here</p>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 57%;
}
body, html {
margin: 0;
padding: 0:
}
header {
width: 100%;
height: 70px;
background-color: #00264d;
}
h1 {
position: absolute;
padding: 3px;
float: left;
margin-left: 2%;
margin-top: 10px;
font-family: Arial;
color: #ffffff;
}
ul {
width: auto;
float: right;
margin-top: 8px;
}
li {
display: inline-block;
padding: 15px 30px;
}
a {
text-align: center;
color: #ffffff;
text-decoration: none;
font-family: Arial;
font-size: 1.2vw;
}
a:hover {
color: #F0c330;
transition: 0.5s;
}
img {
width: 100;
margin-top: -16px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="SitNumber360Styling.css">
<title>Sit Number</title>
<link rel="shortcut icon" href="SitNumberLogo.png">
</head>
<header>
<div class="wrap">
<h1>Sit Number</h1>
<nav>
<ul>
<li>Chairs</li>
<li>Cushions & Pillows</li>
<li>Accessories</li>
<li>Support</li>
</ul>
</nav>
</div>
</header>
<body>
<p>Questions? Ask them here</p>
<div>
<img src="transparentchair.png" alt="Product Picture" class="center">
</div>
</body>
</html>
You might try nesting the elements such as;
<p>Questions? Ask them here</p>
newbie to HTML & CSS here with only 2 weeks learning under my belt. I'm trying to replicate the Google web page and although I have managed to center the "Google" logo and the searchbar underneath it, i've done it using margin-top and margin-left properties. I did try margin: 0 auto; with some other properties but could not get anything to work. The times when I did manage to center the logo using different properties, it wasn't fully central on the page. Basically what i'm saying is that the way i've done it works, but I know it isn't the most efficient way of making these two elements central on the page and it certainly doesn't represent a responsive webpage.
Would anyone mind having a look at the code i've pasted below and offer advice on the best way to go about this? I've included the whole HTML and CSS code, incase anyone wishes to load the site in Notepad etc. Many thanks in advance!
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="logo.jpg" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main img {
margin-left: 536px;
margin-top: 182px;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin-left: 390px;
margin-right: 375px;
margin-top: 21px;
height: 46px;
width: 585px;
}
To center an image you can use text-align:center; on the parent element. For the searchbar you can use margin:0 auto; as long as the search bar has a defined width:
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main {
padding-top:182px;
text-align:center;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin:21px auto 0;
height: 46px;
width: 585px;
}
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
For the searchbar you should be using an input rather than a p(paragraph). Another tip is that instead of defining margin-top, margin-right, margin-bottom, margin-left, you can use the shorthand margin. The first value is the top margin, next is right margin, then bottom, then left.
If you want the top/bottom and right/left margins to be the same, respectively, you can define 2 values(first being top and bottom and second being right and left). If you want to define a different top and bottom margin but use the same margin for left/right you can define 3 values(first being top, second being right/left and third being bottom).
For example:
margin-top:20px;
margin-right:50px;
margin-bottom:20px;
margin-left:50px;
can be written as
margin:20px 50px;
Or the following:
margin-top:50px;
margin-right:100px;
margin-bottom:20px;
margin-left:100px;
can be written as:
margin:50px 100px 20px;
Same thing goes for padding.
you can't use pixels to set margin!
you have to set margin of the main class to 50% of page height and width like this:
(to resolve problems change percent of size and margin to fit 100%)
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main {
padding-top:50%;
padding-left:50%;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin:21px auto 0;
height: 46px;
width: 585px;
}
img{
margin-left:50%;
}
html , body{
height:100%;
width:100%;
}
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
I'm just getting started on HTML5 and CSS3 (working through The Odin Project) and the first project is to duplicate the Google homepage. I was able to get everything set up, but it seems like my CSS is somehow preventing my header links from acting like links. You can't click on them and the hover effects don't work.
They work fine on my footer and my nav text-decoration is applied, so I'm not sure what's making it act like it's not a link. I've only tested it in Chrome, so I'm not even worried about compatability issues yet. Am I doing the HTML5 wrong? Or is it some kind of weird rule like you can't use hover effects with inline-block or something? I'm not familiar enough with it yet to have learned all those nuances yet...
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li>+Mara</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="images/options.png" width="35px"></li>
<li><img src="images/bell.png" width="35px"></li>
<li><img src="images/plus.png" width="35px"></li>
<li><img src="images/photo.jpg" width="40px" class="rounded_img"></li>
</ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>
<center><form action="#" method="post" name="google_search_form">
<input type="search" name="googlesearch" class="search"><br/><br/>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
<ul>
<span class="left"><li>Advertising</li></span>
<span class="left"><li>Business</li></span>
<span class="left"><li>About</li></span>
<span class="right"><li>Settings</li></span>
<span class="right"><li>Terms</li></span>
<span class="right"><li>Privacy</li></span>
</ul>
</footer>
</body>
</html>
And the CSS:
.container{
position: relative;
vertical-align: middle;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 270px;
clear: right;
}
.search {
width: 650px;
height: 35px;
margin-top: 40px;
font-size: 27px;
background: url('images/voice.gif') 97% 50% no-repeat;
opacity:0.6;
background-size: 17px;
border: blue solid 1px;
}
.button {
font-family: Helvetica, Roboto, sans-serif;
font-weight: bold;
color: black;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
border-radius: 2px;
width: 140px;
height: 40px;
}
nav {
width: 600px;
height: 30px;
font-size: 1em;
font-family: Helvetica, Roboto, sans-serif;
font-weight: lighter;
text-align: center;
position: relative;
float: right;
}
nav ul {
height: auto;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.atext {
text-decoration: none;
color: black;
}
.atext: hover {
text-decoration: underline;
background-color: yellow;
}
.aicon {
opacity: 0.6;
}
.aicon:hover {
opacity: 1.0;
}
footer {
width: 102%;
height: 40px;
left: -20px;
right: -20px;
font-size: 1em;
font-family: Arial, sans-serif;
position: absolute;
bottom: 0;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
}
footer ul {
height: auto;
padding: 0;
margin: 0;
}
footer li {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
footer li a {
text-decoration: none;
color: gray;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.rounded_img {
border-radius: 20px;
}
Any help will be greatly appreciated. Thanks!
Oh, and I haven't even started on JavaScript yet, so I'd like to avoid JavaScript if possible!
Here is a fiddle: http://jsfiddle.net/Lvfmwhvu/
The problem is your container element, if you remove the position relative it will work, but not sure if it will be maintained in the same position, but you can check it and modify your css accordingly:
.container{
vertical-align: middle;
}
Hope this helps.
Your main container isn't clearing the floated navbar. Because it falls later in your document, it has a higher layer index and covers the navbar. Try this:
.container {
...
clear: both;
}
Demo
I'm very new to all of this and am trying to build this website, but the main image on the page is not centering. I've tried all sorts of centering things but they don't work. Also, the width percentage is ignored too.
I've readjusted margin/padding to 0. don't know what it could be.
css for the picture:
#pictures img{
width:"70%";
margin: 0 auto;
padding-bottom: 80px;
padding-top: 20px;
}
and the html div that has to do with it:
<div id="pictures">
<img src="img/homepage.png" alt="HomePage"></div>
FULL HTML
<!DOCTTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jacobs Bookeeping</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style-no-grid.css" type="text/css" media="screen">
</head>
<body>
<div class="container clearfix">
<div id="main">
<div id="header">
<img src="img/logo.png" alt="Jacobs Bookkeeping Logo" width="248">
</div>
<div id="twitter">
<img src="img/twitter.jpg" alt="Twitter">
</div>
<div id="facebook">
<img src="img/facebook.jpg" alt="Facebook">
</div>
<ul class="nav">
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
<li class="last">Resources</li>
</ul>
<div id="pictures">
<img src="img/homepage.png" alt="HomePage">
</div>
</div>
</div>
<div id="copyright">
<p>K. RONI JACOBS, <em>KEEPER OF THE BOOKS</em> — EMAIL JACOBS BOOKKEEPING — CALL 206.861.5664 — © 2013 JACOBS BOOKEEPING    </p>
</div>
</body>
</html>
FULL CSS
html {
margin: 0px;
padding: 0px;
}
body {
font-family:'Futura', sans-serif;
color: #FFFFFF;
font-size: 13;
margin: 0px;
padding: 0px;
}
#main {
border-top: 10px solid #EAE1C9;
border-right: 10px solid #EAE1C9;
border-left: 10px solid #EAE1C9;
padding-bottom: 20px;
background: url('../img/bg-jacobs.jpg') repeat;
background-color:#96B9BF;
}
a {
color: #FFFFFF;
text-decoration: none;
}
#facebook img{
float: right;
padding: 45px 5px 10px 10px;
position: static;
}
#twitter img{
float: right;
padding: 45px 50px 20px 0px;
position: static;
}
#header img {
padding: 40px 0px 0px 40px;
float: left;
position: static;
}
ul.nav {
margin-top: 45px;
list-style: none;
text-transform: uppercase;
float: right;
position: relative;
}
ul.nav li {
margin: 0px 50px 0px 60px;
display: inline;
}
ul.nav li a {
color: #FFFFFF;
}
#pictures img{
width:"80%";
margin: 0 auto;
padding-bottom: 80px;
padding-top: 20px;
display: block;
text-align: center;
}
#copyright {
text-align: right;
background: #867131;
border-top: 10px solid #EAE1C9;
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
font-size: 10px;
letter-spacing: 2px;
color: white;
}
.container{
width: auto;
margin: 0 auto;
}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
Put display: block; on it. By default, images are inline.
To center inline —default for image— or inline-block elements, just center it as text. This means, you will need to use text-algin on the parent element:
div#pictures {
text-align: center;
}
The other solution is the one from #One Trick Pony, and display the image as a block element and just then apply the automatic margin.
#pictures img{
display:block;
}
Add this code then i will be centered
i know this is an old post, but wanted to share how i solved the same problem.
My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto and display: block work properly. Hope it may help someone in the future.
You have two options:
Remove img from #pictures and then put the image inside that div.
Add the #pictures to the image Tag in html (inline style).
You might remove the display tag in #pictures.
Good luck with that.
I have a series of images I would like to display horizontally on my website, using CSS and divs. I've looked at several posts about how to display images horizontally already and I wasn't able to get any of them to work.
Here's the code from the page I'm referring to:
<head>
<link rel=StyleSheet href="style.css" type="text/css" media=screen>
<style>
div.imageBox {
float: left;
margin-right: 10px;
}
div.imageBox p {
text-align: center;
}
</style>
</head>
<body>
<?php include 'header.php'; ?>
<div id="content">
<div id="container">
<div class="imageBox">
<img src="image" width="800" height ="600">
</div>
<div class="imageBox">
<img src="image" width="600" height ="450">
</div>
<div class="imageBox">
<img src="image" width="800" height ="450">
</div>
</div>
</div>
</body>
and here's the code for the style sheet:
body{
font-family: helvetica, arial, sans-serfif;
font-size: 14px;}
div#menu {
display: inline;
text-align: center;
width: auto;
top: 20px;
margin-left: 10%;
margin-right: 10%;
background: transparent;
height: 10px;
position: fixed;
}
div#menu ul {
margin: 0;
display: block;
}
div#menu ul li {
padding-right: 55px;
display: inline;
}
div#content {
padding-top: 40px;
text-align: center;
}
div#container{
float: left;
display: inline;
height: 800px;
width: 0px;
}
a:link {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #000;
}
Is there perhaps an easier way for me to do this?
Thanks for your help!
Try to change
div#container{
float: left;
display: inline;
height: 800px;
width: 0px;
}
into
div#container{
float: left;
display: inline;
height: 800px;
white-space: nowrap;
}
add:
div.imageBox {
float: left;
margin-right: 10px;
display:inline;
}
You're using divs which are block elements when you should be using something inline.
Images will align next to each other. If you need the divs, you can give them the style display: inline to make them behave in the same way. You can also use float: left, but that will make things harder in most cases.
You can apply styles like margins and borders to images too, so you may not need the divs. Although I'm not sure how you want it to look exactly.
Here is the example: http://jsfiddle.net/hobobne/d5sYM/
<html>
<head>
<style>
img {width: 100px; height: 100px;}
.imageBox {display: inline-block; border: 1px solid grey; background: silver; padding: 4px; text-align: center; font-size: 10px;}
</style>
</head>
<body>
<div class="imageBox">
<img src="http://screenshots.en.softonic.com/en/scrn/80000/80669/easter-icons-5.jpg"><br>
Image 1
</div>
<div class="imageBox">
<img src="http://l-userpic.livejournal.com/82523298/2181918"><br>
Image 2
</div>
<div class="imageBox">
<img src="http://www.jellymuffin.com/icons/emo/images/30.jpg"><br>
Image 3
</div>
</body>
</html>