I am making myself a homepage for my browser, and I'm trying to put 3 images with captions evenly spaced in a divider. It seems to work but the border for the outmost divider does not cover the images. What do I do? Here is the code.
/* Body: */
body {
background-color: #CCCCCC;
}
/* Title: */
#title {
color: #00FFFD;
text-align: center;
font-size: 1000%;
}
/* Main Border: */
#outer_div {
width: 100%;
}
#inner_div {
width: 80%;
margin: auto;
border: 10px groove #000;
}
#main {
border: 40px solid transparent;
}
/* Link Dividers */
.link {
width: 33%;
float: left;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Hub</title>
<link rel="stylesheet" type="text/css" href="css/hub.css" />
</head>
<body>
<div id="title"><u>Website Hub</u></div>
<div id="outer_div">
<div id="inner_div">
<div id="main">
<div id="row1">
<div class="link">
<a><img src="img/one.png" border="2px"></a>
<caption>One</caption>
</div>
<div class="link">
<a><img src="img/two.jpg" border="2px"></a>
<caption>Two</caption>
</div>
<div class="link">
<a><img src="img/three.jpg" border="2px"></a>
<caption>Three</caption>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You could always put the border declaration in the CSS instead...
.link {
width: 33%;
float: left;
text-align: center;
border: 2px solid #1f1f1f;
}
Or extend the declaration:
.link a img { border: 2px solid #1f1f1f; }
.link a { width: 100%; } // Will be inherited by the child element...
Related
I'm new to coding, this is my first week in my Fullstack course and we have some homework that I've been working on for a while now. I've managed to get my wireframe to look similar to the homework example (we're supposed to make it look the same) and I'm not sure where I'm going wrong with this html/css code.
Also, I'm not sure exactly how else to show what I am working on other than posting the majority of my css, so i apologize if I do this wrong.
:)
I've placed red borders around the content I'm attempting to align evenly on all sides. I've tried changing the padding, margins, float positions, width (all that I know that would adjust the box(es), but I still cannot seem to get the "aside" content to align with the rest of the wireframe objects.
`````HTML````
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
``` </div>
`````````external css```````````````````
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;}
article {
color:#777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color:#ebebeb;
background-color: #777;
}
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div.layout {
width: 495px;
}
/* left section */
.sect1 {
padding: 2%;
width: 100%;
}
/* right section */
div.aside1 {
margin-left: 100px;
border: solid red;
padding: 2%;
color: #777;
width: 200px;
height: 165px;
float: right;
font-size: 18px;
}
article {
color: #777;
font-size: 18px;
background-color: #ebebeb;
}
div.divCont {
border: solid red;
}
/* article box */
.art1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* h1,h2,h3 box */
.inside1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
/* para box */
p.para1 {
width: 60%;
color: #ebebeb;
background-color: #777;
}
<div class="layout">
<header class="main-head">
<p>header</p>
</header>
<link rel="stylesheet" href="style.css">
<nav>nav</nav>
<div class="divCont">
<div class="aside1">
<aside>aside</aside>
</div>
<div>
<div>
<article class="sect1">section
<p class="art1">article</p>
<div class="inside1">
<h3>h1, h2, h3</h3>
</div>
<div class="paraCont">
<p class="para1">p</p>
</div>
</article>
</div>
</div>
</div>
<footer>footer</footer>
</div>
this is what I'm trying to do - https://gyazo.com/6f27f40e4f3e75831b5e4728387ea11f
this is what I've done so far - https://gyazo.com/79299a16a0eb2208db98519005b3bf9d
This is just a quick edit. Also your link tag should be above in tag
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
margin: auto;
width: 50%;
background-color: #777;
text-align: center;
}
div {
border: 1px solid #000000;
}
.aside1 {
width: 49%;
float: left;
height: 165px;
}
.aside2 {
width: 49%;
float: right;
height: 165px;
}
article {
background-color:green;
padding: 20px;
margin: 5px
}
footer {
width: 100%;
}
</style>
</head>
<body>
<header class="main-head">
<p>header</p>
</header>
<nav>nav</nav>
<section class="divCont">
<div class="aside1">
<p>Section</p>
<article>
Article
<div style="background-color:white; margin: 5px;">
H1,h2,H3
</div>
<div style="background-color:yellow;margin: 5px; ">
p
</div>
</article>
</div>
<div class="aside2">
Aside
</div>
</section>
<footer> Footer </footer>
</body>
</html>
So I am new to coding and stuff and I am wondering why there is a space of the body in between the divs in this fiddle?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
The green part which is the body is showing in between the second navbar and the two text divs. Anyone know whats wrong cause I can't find it.
The h4 and the p elements have a margin set. You can see that using the "inspect" option right clicking the element in the browser.
its good to use:
* {margin:0;padding:0;}
this will remove every space in your document.
note: in html, document itself have default space. so by above CSS you can remove them easily.
it is a good practice to use above CSS in your every stylesheet files.
This happens because you have not reset the default margins of header elements.
Reset defaults using
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
At the top of your sheet.
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
Green is body color. Where is no element with background-color there is body color because nothing is overlapping it.
CSS boxmodel will be helpfull: https://www.w3schools.com/css/css_boxmodel.asp
Margin property is external part of an element.
Solved :
h3,h4,p{
margin:0;
}
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
you can specify (add to existing) the following css and the spaces will be removed.
.about-text {
overflow: hidden;
}
.collection {
overflow: hidden;
}
So I have multiple divs. Like this:
<div id="LeftContent"></div>
<div id="RightContent"></div>
And so on. My goal is to create a centered div after all that. When I try to, I end up with the div being in the empty spaces between the 'left' and 'right' divs. An answer with some CSS code would be most appreciated.
HTML5:
<!doctype html>
<html>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<head>
<meta charset="utf-8">
<title>OneClickLearn</title>
</head>
<body>
<aside>
<br>
<nav>
<ul>
<li>Home</li>
<hr>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn the Basics of Web Design</li>
<hr class="nav">
<li>Learn PHP</li>
<li>Learn JAVASCRIPT</li>
</ul>
</nav>
</aside>
<a id="nav-toggle" href="#" class="position"><span></span></a>
<main>
<header>
<div href="#" class="container">
<h1 class="title">OneClickLearn</h1>
</div>
</header>
</main>
<div class="header">
<div class="content">
<h1 class="large">Welcome To OneClickLearn</h1>
<hr class="hr">
<h2>A website for web developers everywhere</h2>
</div>
</div>
<div class="left">
<h1>What you can do with us</h1>
<h3>OneClickLearn offers several web design courses, as well as tools like Cascading Style Sheet libraries, and special colors to use for your website! Unlike some other coding websites, OneClickLearn is absolutely free!</h3>
<a class="abutton"><button>Learn More</button></a>
</div>
<div>
<div class="right">
<h1>CSS Libraries</h1>
<h3>What's a CSS Library? Simple. This tool is made for web developers who are advanced in website functionality, but maybe not so great in what we would call, 'the pretties'. A CSS library is all the tools in design you need-- waiting for you on the web.</h3>
<a class="abutton"><button>Learn More</button></a>
<a class="abutton"><button class="buttonop">Get Ocelot.css</button></a>
</div>
</div>
<div class="left">
<h1>Courses</h1>
<h3>All our courses (so far!) are based off of web design. With these courses, you learn the basics of HTML5, CSS3, and more languages coming soon. Also, you can learn our Cascading Style Sheet libraries' functions. If you have any reccomendations, just email us down below</h3>
<a class="abutton"><button>Email Us</button></a>
<a class="abutton"><button class="buttonop">Learn More</button></a>
</div>
<div class="div">
<h1>Having trouble with your website?</h1>
<h3>We'll see what we can do.</h3>
<button class="abutton">Contact Us</button>
</div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="js/nav.js"></script>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
.div {
clear: both;
margin: 0 auto;
height: 100px;
width: 600px;
text-align: center;
}
.greyback {
background-color: #4B4949;
}
.nav {
background-color: #bdc3c7;
}
.denied {
color: #bdc3c7;
}
.denied:hover {
cursor: not-allowed;
}
body {
size: 100%;
display: cover;
margin: 0;
padding: 0;
}
p a {
color: #27ae60;
text-decoration: none;
}
p a:hover {
color: #27ae60;
text-decoration: underline;
cursor: pointer;
}
.header {
color: white;
width: 100%;
height: 300px;
background-color: #2980b9;
}
.content {
margin-top: 70px;
padding-top: 60px;
text-align: center;
}
.large {
font-size: 40px;
}
.hr {
width: 100px;
}
.left {
margin: 20px;
float: left;
height: auto;
width: 50%;
color: #4B4949;
}
.right {
margin: 20px;
float: right;
height: auto;
width: 50%;
color: #4B4949;
}
a {
color: #2AABAD;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.side {
margin: 20px;
}
.img {
display: inline-block;
}
button {
background-color: #2980b9;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
button:hover {
background-color: #3498db;
cursor: pointer;
}
.abutton {
color: none;
text-decoration: none;
}
.buttonop {
background-color: #3498db;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
.buttonop:hover {
background-color: #2980b9;
cursor: pointer;
}
.main {
width: 100%;
text-align: center;
}
.main-content {
display: inline-block;
}
P.S. I am using float:left; and float:right; for the left and right divs :)
Thanks :) (If I need any elaboration please let me know)
I'm not 100% clear on what you are asking, but you could try something like the following:
Html
<div id="LeftContent"></div>
<div id="RightContent"></div>
<div id="CentredDiv"></div>
CSS
div {
border: 1px solid #f0f;
height: 50px;
box-sizing: border-box;
width: 400px;
}
#LeftContent,
#RightContent {
float: left;
}
#CentredDiv {
width: 800px;
clear: left;
}
Yeah, not totally sure what you want, but maybe something like this?
#CenteredContent {
clear: both;
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
}
What I understand from your question is that you need a centered div. You can do this to achieve centered div.
HTML:
<div class="centered-div">
Some Content
</div>
CSS:
.centered-div {
width: 400px;
min-height: 400px;
margin: 0 auto;
clear: both;
}
I hope that helps :)
I'm using html and css to make 3 boxes act as links, equally spaced apart. For some reason when I got the divs to be equally spaced, a line was created between all three, acting as a link to the div left of the line.
Why is the line there?
here is the code: (with some stuff taken out)
.divider{
text-align: center;
}
.image{
float:left;
}
#javatut, #frgames, #scratchtut{
display: inline-block;
zoom: 2.0;
background-color: #c0c0c0;
text-align: center;
padding: 10px;
width: 20%;
}
#javatut {
border: 2px solid #ff8300;
}
#frgames {
border: 2px solid #0000ff;
}
#scratchtut {
border: 2px solid #ff8300;
}
#container {
text-align: justify;
}
.stretch {
width: 100%;
display: inline-block;
}
<div id="container">
<a href="url">
<div id="javatut">
<!-- stuff in here -->
</div>
</a>
<a href="url">
<div id="frgames">
<!-- stuff in here -->
</div>
</a>
<a href="url">
<div id="scratchtut">
<!-- stuff in here -->
</div>
</a>
<span class="stretch"></span>
</div>
This line is caused by the browsers default styling of links as underlined. Just set text-decoration: none; on your links and the line will be invisible.
a {
text-decoration: none;
}
.divider {
text-align: center;
}
.image {
float: left;
}
#javatut,
#frgames,
#scratchtut {
display: inline-block;
zoom: 2.0;
background-color: #c0c0c0;
text-align: center;
padding: 10px;
width: 20%;
}
#javatut {
border: 2px solid #ff8300;
}
#frgames {
border: 2px solid #0000ff;
}
#scratchtut {
border: 2px solid #ff8300;
}
#container {
text-align: justify;
}
.stretch {
width: 100%;
display: inline-block;
}
<div id="container">
<a href="url">
<div id="javatut">
<!-- stuff in here -->
</div>
</a>
<a href="url">
<div id="frgames">
<!-- stuff in here -->
</div>
</a>
<a href="url">
<div id="scratchtut">
<!-- stuff in here -->
</div>
</a>
<span class="stretch"></span>
</div>
It's because text-decoration CSS property. Set to none, and it works.
#container a {
text-decoration: none;
}
Your markup is not right
Make your a tags inside the div, all your styles will work correctly
check this
.divider {
text-align: center;
}
.image {
float: left;
}
#javatut,
#frgames,
#scratchtut {
display: inline-block;
zoom: 2.0;
background-color: #c0c0c0;
text-align: center;
padding: 10px;
width: 20%;
}
#javatut {
border: 2px solid #ff8300;
}
#frgames {
border: 2px solid #0000ff;
}
#scratchtut {
border: 2px solid #ff8300;
}
#container {
text-align: justify;
}
.stretch {
width: 100%;
display: inline-block;
}
<div id="container">
<div id="javatut">
<a href="url">
</a>
</div>
<div id="frgames">
<!-- stuff in here -->
<a href="url">
</a>
</div>
<div id="scratchtut">
<!-- stuff in here -->
</div>
<span class="stretch"></span>
</div>
Hope this helps
You can also do using flexbox for this
I have a layouting problem while using this html/css coding.
Actually I want the symbols to be vertically aligned to the center of the div.
The second layout is displaying fine with float value set to left on child divs.
Whats wrong with the first layout. Any ideas?
Here is the code
<html>
<head>
<style type="text/css">
div, p {
margin:0;
padding:0;
}
div.wrapper {
background: #FFFFFF;
border-radius: 3px;
padding: 20px;
}
/* LAYOUT 1 STYLE */
div.list1 div {
display: inline-block;
}
div.thumb1 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol1 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
/* LAYOUT 2 STYLE */
div.list2 {
overflow: hidden;
}
div.list2 div {
float: left;
}
div.thumb2 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol2 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
</style>
</head>
<body>
<div class="wrapper" id="layout1">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list1">
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>=</p></div>
<div class="thumb1"></div>
</div>
</div>
<div class="wrapper" id="layout2">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list2">
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>=</p></div>
<div class="thumb2"></div>
</div>
</div>
</body>
</html>
Just give vertical-align:middle to your to mentioned below class
div.list1 div {
display: inline-block;
vertical-align: middle;
}
Demo