I am working on making my own website in my spare time. I want to have three columns of text running down the page, however I cannot get rid of the blank space above the center column of text. Also, I am having trouble wrapping the text on the right column(when I add more text) and so have resorted to making seperate p tags which leave undesirable space between text.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first webpage</title>
<style>
.outer {
width: 1410px;
color: navy;
background-color: pink;
border: 2px solid darkblue;
padding: 5px;
}
.b {
text-align: left;
float: left;
}
.n {
text-align: right;
float: right:
}
.c {
margin-left: 505px;
margin-right: 505px;
}
.s {
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<h1 class="s">Thank you for visiting my webpage!</h1>
</div>
<nav class="b">
<h1>My Favorite Websites</h1>
<ul>
<li>YouTube</li>
<li>Google</li>
<li>Reddit</li>
<li>Gamebuino</li>
<li>Netflix</li>
<li>Twitch</li>
<li>Amazon</li>
<li>Ebay</li>
</ul>
</nav>
<article class="n">
<h1>ABC</h1>
<p>123</p>
<p>do re mi</p>
<p>xyz</p>
<p>easy as</p>
<p>456</p>
<p>hello world</p>
</article>
<article class="c">
<h2>The Official Homepage of Ian Witkowski</h2>
<dl>
<dt><h3>Ian Witkowski</h3></dt>
<dd>A cool dude</dd>
</dl>
<p>Reasons Ian is cool;</p>
<ul>
<li>He is nice</li>
<li>He rides bikes</li>
<li>He likes computers</li>
<li>He can code his own website</li>
</ul>
<p>Here is a link for my arbitrary code test page;</p>
<ul>
<li>Ian2</li>
</ul>
</article>
</body>
</html>
You simply have a typo:
.n {
text-align: right;
float: right: /* <- */
}
You need to notate a semicolon here ;.
In general make sure, that your markup and CSS is vaild.
.outer {
width: 1410px;
color: navy;
background-color: pink;
border: 2px solid darkblue;
padding: 5px;
}
.b {
text-align: left;
float: left;
}
.n {
text-align: right;
float: right;
}
.c {
margin-left: 505px;
margin-right: 505px;
}
<div class="outer">
<h1 class="s">Thank you for visiting my webpage!</h1>
</div>
<nav class="b">
<h1>My Favorite Websites</h1>
<ul>
<li>YouTube</li>
<li>Google</li>
<li>Reddit</li>
<li>Gamebuino</li>
<li>Netflix</li>
<li>Twitch</li>
<li>Amazon</li>
<li>Ebay</li>
</ul>
</nav>
<article class="n">
<h1>ABC</h1>
<p>123</p>
<p>do re mi</p>
<p>xyz</p>
<p>easy as</p>
<p>456</p>
<p>hello world</p>
</article>
<article class="c">
<h2>The Official Homepage of Ian Witkowski</h2>
<dl>
<dt><h3>Ian Witkowski</h3></dt>
<dd>A cool dude</dd>
</dl>
<p>Reasons Ian is cool;</p>
<ul>
<li>He is nice</li>
<li>He rides bikes</li>
<li>He likes computers</li>
<li>He can code his own website</li>
</ul>
<p>Here is a link for my arbitrary code test page;</p>
<ul>
<li>Ian2</li>
</ul>
</article>
Related
div class container is used to wrap all other items of the web page, I want to align this container centrally but can't seem to figure out why it isn't working.
edit: I would like the container itself center on the viewpoint and then I want to individually align the items within their own containers.
edit 2: I have figured it out, thanks for everyone's responses. I changed the HTML selector to the body, then changed the display to flex and finally justify-self to align-items.
* {
margin: 0;
padding: 0;
}
html {
display: block;
flex-direction: column;
width: 100%;
justify-self: center;
}
h1 {
text-align: center;
}
.sub {
position: absolute;
}
.container {
width: 50%;
border: 2px black solid;
box-sizing: border-box;
display: inline-flex;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<link href='style.css' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Notable|Work+Sans&display=swap" rel="stylesheet">
</head>
<h1 id='main_title'>Website Style Specification - 1</h1>
<body>
<div class='container' id='color_container'>
<h2 class='sub'>Colours</h2>
<div class='color_box' id='color_one'>
<p>Coal</p>
<p>#252525</p>
<p>Background Colour</p>
</div>
<div class='color_box' id='color_two'>
<p>Blood</p>
<p>#ff0000</p>
<p>Text colour</p>
</div>
<div class='color_box' id='color_three'>
<p>Crimson</p>
<p>#af0404</p>
<p>Borders ad foreground colouring</p>
</div>
<div class='color_box' id='color_four'>
<p>Slate</p>
<p>#414141</p>
<p>Element background</p>
</div>
</div>
<div class='container' id='font_container'>
<h2 class='sub'>Fonts</h2>
<div class='font_box' id='font_1'>
<h3>Notable</h3>
<p class='normal'>This is how the text will display on the website.</p>
<p class='italic'>This is how the text will display on the website.</p>
<p class='bold'>This is how the text will display on the website.</p>
</div>
<div class='font_box' id='font_2'>
<h3>WorkSans-Regular</h3>
<p class='normal'>This is how the text will display on the website.</p>
<p class='italic'>This is how the text will display on the website.</p>
<p class='bold'>This is how the text will display on the website.</p>
</div>
</div>
<div class='container' id='text_styles'>
<h2 class='sub'>Text styles</h2>
<div class='text_box' id='text_1'>
<h3 id='sub_headings'>This is a sub heading</h3>
<ul>
<li>HTML: h2</li>
<li>font family: Notable</li>
<li>Font weight: 28px</li>
<li>Text decoration: underline</li>
</ul>
</div>
<div class='text_box' id='text_2'>
<p id='text'>
<ul>
<li>HTML: p</li>
<li>font family: Work sans</li>
<li>font weight: 18px</li>
</ul>
</p>
</div>
</div>
</body>
<footer></footer>
</html>
Are you looking for something like this?
Give the parent element of container display: flex and justify-content: center; and let flexbox do its magic. This will center the child elements on the X-Axis
* {
margin: 0;
padding: 0;
}
html {
display: block;
flex-direction: column;
width: 100%;
}
body{
width: 100%;
display: flex;
justify-content: center;
color: black;
}
h1 {
text-align: center;
}
.sub {
position: absolute;
}
.container {
width: 50%;
border: 2px black solid;
box-sizing: border-box;
text-align: center;
}
<html>
<body>
<div class="container">
HELLO IM THE CONTAINER
</div>
</body>
</html>
EDIT: I was able to fix this problem by switching to a float based layout. Not sure if there is a solution to the problem using an inline-block based grid. (I suppose I could use the position:relative or absolute, but that seems to be a bad idea.) Here's my Codepen: https://codepen.io/mattgwater/pen/yXBqoe (It works if full-screen) Ehsan's answer demonstrates how to basically do this layout too and probably is a better example of good code.
I am trying to build a website based on the template in the picture here. https://assets.themuse.com/uploaded/attachments/14846.png?v=None
However, if I have an image in the left column it causes all the text in the right column to go below the image. How can I fix this problem?
Here is my Codepen: https://codepen.io/mattgwater/pen/yXBqoe?editors=1100#0
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="/Fonts/myFontsWebfontsKit/MyFontsWebfontsKit.css">
<link rel="stylesheet" href="/main.css">
</head>
<body>
<nav>
<div class="col left">
<div>
<h1 class="title">MATT GOLDWATER</h1>
</div>
</div><!--
--><div class="col right">
</div>
</nav>
<div class="nav-content-separator"></div>
<section>
<div class="col left">
<img class="profilepic" src="https://res.cloudinary.com/dyr8j9g6m/image/upload/v1496375439/my-headshot_bxpjqk.png" alt="Matt Goldwater">
<!--<p>yo</p>-->
</div><!--
--><div class="col right">
<p class="about">I want this sentence to be aligned with the top of the image.</p>
</div>
</section>
</body>
</html>
My CSS (I also have normalize CSS)
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.title {
color: #6fc3c3;
/*font-family: FuturaDCD-Lig;*/
font-weight: bold;
font-size: 32px;
text-align: center;
letter-spacing: .05em;
}
.col {
width: 50%;
display: inline-block;
/*white-space: nowrap;*/
}
.left {
padding-left: 10%;
}
.profilepic {
padding-top: 7%;
height: 450px;
margin: 0 auto;
display: block;
}
.nav-content-separator {
border: 1px solid #e8e8e8;
}
.about {
font-family: Avenir;
}
I changed your code,use wrapper and float and other Properties.
#wrapper {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.title {
color: #6fc3c3;
float: left;
}
.right {
float: right;
}
.left {
float: left;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
margin-right: 1%;
}
li a {
color: #ccc;
text-decoration: none;
}
.col {
width: 50%;
box-sizing: border-box;
}
nav {
border-bottom: #ccc solid 1px;
overflow: auto;
}
.profilepic {
max-width: 410px;
width: 100%;
}
<div id="wrapper">
<nav>
<div class="col title"><h2>KRISTA GRAY</h2></div>
<div class="col right">
<ul>
<li>About</li>
<li>Services</li>
<li>Journal</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="container">
<div class="col left">
<img class="profilepic" src="https://cdn.shopify.com/s/files/1/1424/5850/products/Circular_Stickers_CG_1024x1024.jpg?v=1486690726" alt="Me">
</div>
<div class="right col">
<h4>Lorem Ipsum: common examples</h4>
<p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found in the original.
</p>
</div>
</div>
</div>
Few modifications in your code:
Give image max-width:100% so that image stay within the parent. Remove display:block from image style.
Add white-space:nowrap in the section style so that the whitespace is ignored. We need to ignore whitespace because .left and .right are set to width:50% and hence even a pixel of whitespace will break the layout.
Demo: http://jsfiddle.net/GCu2D/1952/
.profilepic {
padding-top: 7%;
max-width: 100%;
margin: 0 auto;
display: inline;
}
section {
white-space: nowrap;
}
See your col class have width of 50% and then you are also adding padding-left of 10%. So it is going more than 100%. Play with the col width, make it 40% and it should work.
HTML/CSS, i created a website with a navigation bar but for some reason when i click the submenu links, some work and some dont. For example on my page if you hover over input, it gives you 3 dropdowns and if you click "add business" and then click "add category" it wont work(it won't redirect you to the "add category pg")
Here is the link to the website:http://output.jsbin.com/rebokab
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2017 by njp98 (http://jsbin.com/rebokab/25/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width">
<title>Homepage</title>
<style id="jsbin-css">
body {
background-color: White;
}
.intro-header{
background-image:
url('http://www.corporatelivewire.com/images/deals/1320/2021321577.jpg')
}
.site-heading{
color:white;
font-weight:bold;
font-family:copperplate;
text-align: center;
}
.subheading{
color:white;
font-size:30px;
font-weight:bold;
font-family:copperplate;
text-align:center;
}
.Course{
text-align: center;
}
.PD{
text-align: center;
}
.ERD{
text-align: center;
}
.LINKS{
text-align: center;
}
p{
font-weight:bold;
}
.container{
text-align: center;
}
.navigation {
background: blue;
}
.navigation ul {
float: left;
list-style: none;
}
.navigation ul a {
color: black;
text-decoration: none;
font-weight: bold;
font-size: 18px;
padding: 0 15px;
line-height: 32px;
}
.navigation ul li {
float: left;
position: relative; /* optional but safe */
}
.navigation ul li:hover {
background: #666;
}
.navigation ul li:hover a {
color: #ddd;
text-decoration: underline;
}
.navigation ul ul {
position: absolute;
background: #000;
display: none;
}
.navigation ul ul li {
float: none; /* optional but safe */
width: 250px;
}
.navigation ul li:hover > ul {
display: block;
}
.navigation ul ul ul {
display:none;
left: 100%;
background: #333;
top: 0
}
#media screen and (max-width: 780px) {
.navigation ul li {
float: none;
}
.navigation ul ul {
z-index: 1
}
.navigation ul ul ul {
left: 25%;
top: 100%;
/* width: 200px; */
}
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Navigation -->
<nav class="row navigation">
<ul>
<li>
Home
</li>
<li>
Input
<ul>
<li>
Add Business
</li>
<li>
Add Category
</li>
<li>
Add Transaction
</li>
</ul>
</li>
<li>Output
<ul>
<li>Output 1</li>
<li>output 2</li>
<li>Output 3</li>
</ul>
</li>
</ul>
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header">
<div class="container">
`enter code here` <div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Database Technologies</h1>
<hr class="small">
<span class="subheading">Expense Database</span>
</div>
</div>
</div>
</div>
</header>
<div class="Course">
<h1>Course Information</h1>
<p>Database Technologies</p>
<p>Semester: Spring 2017</p>
<h3>Group Information</h3>
<p>Nish Patel, Netid: njp98</p>
<p>Jason Ma, Netid: jcm322 </p>
<p>Jonathan, Chandy Netid: jc1518</p>
</div>
<div class="PD">
<h2>Project Description</h2>
<p>
Creating an Expense Database to allow an individuals
to track their consumer purchasing history in a manner
that reports may be generated and analysis may be performed.
</p>
</div>
<div class="ERD">
<h2>ERD Diagram</h2>
<p>Click on the link to view ERD diagram,
ERD Diagram
</p>
</div>
<div class="LINKS">
<h2>Description of Links</h2>
<h3>Input</h3>
<p>The input page will allow users to add a business transaction. For example users may eneter a businesses information, such as name,address,phone number,
etc. also what type of store is it(food,retail,gas,etc.)</p>
<h3>Output</h3>
<p>The output page will allow users to search for a certain business or category of businesses. Also will allow user to search for customer information.</p>
<h3>Mix</h3>
<p>This page is a mix of both input and outpages in which users can enter information into the databse and also get results of the database.</p>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<p class="copyright text-muted">Copyright © Database Technologies 2017</p>
<p class="copyright text-muted">Nish Patel | Jason Ma | Jonathan Chandy</p>
</div>
</div>
</div>
</footer>
<script src="http://static.jsbin.com/js/render/edit.js?3.41.10"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1656750-34', 'auto');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
Change :
<li>Add Business</li>
to
<li>Add Business</li>
and the other links like this...
body {
background-color: White;
}
.intro-header{
background-image:
url('http://www.corporatelivewire.com/images/deals/1320/2021321577.jpg')
}
.site-heading{
color:white;
font-weight:bold;
font-family:copperplate;
text-align: center;
}
.subheading{
color:white;
font-size:30px;
font-weight:bold;
font-family:copperplate;
text-align:center;
}
.Course{
text-align: center;
}
.PD{
text-align: center;
}
.ERD{
text-align: center;
}
.LINKS{
text-align: center;
}
p{
font-weight:bold;
}
.container{
text-align: center;
}
.navigation {
background: blue;
}
.navigation ul {
float: left;
list-style: none;
}
.navigation ul a {
color: black;
text-decoration: none;
font-weight: bold;
font-size: 18px;
padding: 0 15px;
line-height: 32px;
}
.navigation ul li {
float: left;
position: relative; /* optional but safe */
}
.navigation ul li:hover {
background: #666;
}
.navigation ul li:hover a {
color: #ddd;
text-decoration: underline;
}
.navigation ul ul {
position: absolute;
background: #000;
display: none;
}
.navigation ul ul li {
float: none; /* optional but safe */
width: 250px;
}
.navigation ul li:hover > ul {
display: block;
}
.navigation ul ul ul {
display:none;
left: 100%;
background: #333;
top: 0
}
#media screen and (max-width: 780px) {
.navigation ul li {
float: none;
}
.navigation ul ul {
z-index: 1
}
.navigation ul ul ul {
left: 25%;
top: 100%;
/* width: 200px; */
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2017 by njp98 (http://jsbin.com/rebokab/25/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width">
<title>Homepage</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Navigation -->
<nav class="row navigation">
<ul>
<li>
Home
</li>
<li>
Input
<ul>
<li>
Add Business
</li>
<li>
Add Category
</li>
<li>
Add Transaction
</li>
</ul>
</li>
<li>Output
<ul>
<li>Output 1</li>
<li>output 2</li>
<li>Output 3</li>
</ul>
</li>
</ul>
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header">
<div class="container">
`enter code here` <div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Database Technologies</h1>
<hr class="small">
<span class="subheading">Expense Database</span>
</div>
</div>
</div>
</div>
</header>
<div class="Course">
<h1>Course Information</h1>
<p>Database Technologies</p>
<p>Semester: Spring 2017</p>
<h3>Group Information</h3>
<p>Nish Patel, Netid: njp98</p>
<p>Jason Ma, Netid: jcm322 </p>
<p>Jonathan, Chandy Netid: jc1518</p>
</div>
<div class="PD">
<h2>Project Description</h2>
<p>
Creating an Expense Database to allow an individuals
to track their consumer purchasing history in a manner
that reports may be generated and analysis may be performed.
</p>
</div>
<div class="ERD">
<h2>ERD Diagram</h2>
<p>Click on the link to view ERD diagram,
ERD Diagram
</p>
</div>
<div class="LINKS">
<h2>Description of Links</h2>
<h3>Input</h3>
<p>The input page will allow users to add a business transaction. For example users may eneter a businesses information, such as name,address,phone number,
etc. also what type of store is it(food,retail,gas,etc.)</p>
<h3>Output</h3>
<p>The output page will allow users to search for a certain business or category of businesses. Also will allow user to search for customer information.</p>
<h3>Mix</h3>
<p>This page is a mix of both input and outpages in which users can enter information into the databse and also get results of the database.</p>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<p class="copyright text-muted">Copyright © Database Technologies 2017</p>
<p class="copyright text-muted">Nish Patel | Jason Ma | Jonathan Chandy</p>
</div>
</div>
</div>
</footer>
<script src="http://static.jsbin.com/js/render/edit.js?3.41.10"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1656750-34', 'auto');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
I have seen your website.. Its working.. but problem is that.. your add_category page and add_business page links are not properly set. From your home page every page is accessible, but from other pages its not accessing, so make sure on other pages you added proper links to every other page your are redirecting from there.
When I hover over the li, theres a gap to the left and I can't find anything in developer console that explains it.
.custom-nav>li {
padding: 1.5em 1em;
border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
padding: 1.5em 1em;
}
.custom-nav>li:hover {
background: #777;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
Bootstrap makes the list items inline elements, and inline elements are sensitive to white space. Just remove the white space between them:
.custom-nav>li {
padding: 1.5em 1em;
border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
padding: 1.5em 1em;
}
.custom-nav>li:hover {
background: #777;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav">
<li>Link</li><li>Link</li><li>Link</li>
</ul>
</div>
</div>
</div>
You can also use HTML comments to occupy the white space instead:
<li>Link</li><!--
--><li>Link</li><!--
--><li>Link</li>
Line break between inline elements creates a whitespace. There are several ways to fight it: to set font-size of parent to 0px, to remove line breaks, to comment
line breaks like that:
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav"><!--
--><li>Link</li><!--
--><li>Link</li><!--
--><li>Link</li><!--
--></ul>
</div>
</div>
</div>
Fiddle demo
I would suggest you to add these CSS options (and then go further with editing CSS):
.list-inline > li {
display: block;
float: left;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
I want to do the following:
The biggest Box is a div containing two imgs separated by a small space and with two small block of texts exactly beneath each one.
The problem is that I have been trying (not kidding) for at least 5 hours.
Here is my code:
CSS:
#divPictures {
width: 960px;
position: relative;
float: left;
top: 520px;
left: 200px;
background: url("../imgs/bg-body.jpg");
margin: 0 0 0 -5px;
}
#divPictures img {
margin: 0 0 0 10px;
}
HTML:
<div id="divPictures">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE</p>
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
EDIT:
I can't post images but is a block containing two images one next to the other and text beneath.
Something like this? Quick example, you can obviously add in extra CSS, or float both left and pad/margin etc...
#divPictures{
width: 100%;
background: url("../imgs/bg-body.jpg");
}
.left{
width: 45%;
float:left;
}
.right{
width: 45%;
float:right;
}
.left img, .right img{
margin: 0 0 0 10px;
}
HTML:
<div id="divPictures">
<div class="left">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE</p>
</div>
<div class="right">
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
</div>
Make new divs for images and use css atribute display: inline-block to tell interpreter that you want your divs in a line.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
div#pic
{
display: inline-block;
width: 200px;
background: url("../imgs/bg-body.jpg");
margin: 5px 0 0 -5px;
}
div#pic img
{
margin: 0 0 0 10px;
}
</style>
</head>
<!-- HTML -->
<body>
<div id="divPictures">
<div id="pic">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE"</p>
</div>
<div id="pic">
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
</div>
</body>
</html>
This is the simplest way... When i get stuck I delete it and start over. I think you would have benefitted from starting over...
CSS
<style>
.caption{
text-align: center;
}
li{
background: #ccd2cd;
float: left;
margin:5px;
list-style: none;
padding:5px;
}
</style>
HTML
<ul>
<li>
<img src="http://omarhabash.com/img/feature1.jpg" alt="">
<div class="caption">caption2</div>
</li>
<li>
<img src="http://omarhabash.com/img/feature1.jpg" alt="">
<div class="caption">caption2</div>
</li>
</ul>
if you dont want to use (li) list then just replace those with div classes and rename the style also to the same.
the way i have it here is a good start to a grid if thats what you are aiming for.
http://jsfiddle.net/Mz6aF/