Author Topic: need quick html help (Read 1204 times)

espio100 · December 01, 2016, 01:01:20 PM

so I have a stuffty project that I have to finish tomorrow I totally didnt start on like 5 mins ago and I need to make like 2 columns so I use bootstrap to make them with col-sm-6 or whatever the forget but it doesnt want to go next to eachother, like it should
what do

Code: [Select]

<div class="body2 container">
	<div class="col-sm-6">
		send help
	</div>
	<div class="col-sm-6">
		more help please
	</div>
</div>

also site

Ad Bot · Advertisement

Willymcmilly · December 01, 2016, 01:17:03 PM

try putting them next to each other instead of under? i can't see the picture because muh family-friendly school wifi so i assume there are two containers that should be horizontally aligned?

espio100 · December 01, 2016, 01:17:58 PM

Quote from: Willymcmilly on December 01, 2016, 01:17:03 PM

try putting them next to each other instead of under? i can't see the picture so i assume there are two containers that should be horizontally aligned?

thats not how HTML works

Willymcmilly · December 01, 2016, 01:19:59 PM

well that's how it's worked for me but I've never really used containers so..

if you don't figure out by 3:40 i'll be able to help you better

espio100 · December 01, 2016, 01:21:48 PM

Tried a blank page

What the actual forget

Waru · December 01, 2016, 01:22:22 PM

add

Code: [Select]

display: inline-block to your css file under div

espio100 · December 01, 2016, 01:25:21 PM

That would work but I want bootstrap to work correctly

VerticalHorizon · December 01, 2016, 01:45:16 PM

Are you referencing Bootstrap and jQuery/jQuery UI? Bootstrap needs jQuery to work.

Gytyyhgfffff · December 01, 2016, 01:48:40 PM

bootstrap doesn't need jquery for the columns to work

i would suggest changing the 6 to a 5 and see how that works

VerticalHorizon · December 01, 2016, 01:53:40 PM

Quote from: Gytyyhgfffff on December 01, 2016, 01:48:40 PM

bootstrap doesn't need jquery for the columns to work

i would suggest changing the 6 to a 5 and see how that works

True, but 6 should work fine. Also make sure you have both the Bootstrap Javascript resource as well as the CSS:

https://www.bootstrapcdn.com/

espio100 · December 01, 2016, 01:54:20 PM

Quote from: VerticalHorizon on December 01, 2016, 01:45:16 PM

Are you referencing Bootstrap and jQuery/jQuery UI? Bootstrap needs jQuery to work.

I already have jquery imported

Quote from: Gytyyhgfffff on December 01, 2016, 01:48:40 PM

bootstrap doesn't need jquery for the columns to work

i would suggest changing the 6 to a 5 and see how that works

triad that, didnt work

VerticalHorizon · December 01, 2016, 01:55:09 PM

Quote from: espio100 on December 01, 2016, 01:54:20 PM

I already have jquery importedtriad that, didnt work

Check element inspector and see if something is overriding the default Bootstrap CSS.

espio100 · December 01, 2016, 02:02:49 PM

Quote from: VerticalHorizon on December 01, 2016, 01:55:09 PM

Check element inspector and see if something is overriding the default Bootstrap CSS.

No clue how to do that
im just gon post the entire code here

Code: [Select]

<!doctype=HTML>
<html>
<head>
	<head lang="nl-be">
	<title>Cultuurbeleving</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<link href="css/bootstrap.min.css" rel="stylesheet"/>
	<link href="css/stylesheet.css" rel="stylesheet"/>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</head>
<body>
	<!-- Navigation -->
	<div class="contrainer-fluid nav col-sm-12">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Info</a></li>
			<li><a href="#">Foto's</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<div class="shadow container col-sm-12">
		<div class="container col-sm-12 body">
			<h1>MODE MUSEUM</h1>
			<hr>
			<p>Welkom op mijn verslag van het <span class="important">Mode Museum</span>. Ik ben met Gilles in Antwerpen het Mode Museum gaan bezoeken, en om eerlijk te zijn was het een teleurstelling</p>
		</div>
		<div class="body2 container">
			<div class="col-sm-6">
				AAAAAAAAAAAAAHHHHHHHHHHHHHHHHHHHHHHHHHHHH
			</div>
			<div class="col-sm-6">
				RRRRRRRRRRRRRRRRRRRRRRRREEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
			</div>
		</div>
	</div>
</body>
</html>

Code: [Select]

html {
	font-family: sans-serif;
	margin-top: 10px;
}
body {
	background-color:#aaaaaa;
}
.important {
	color: #ffbf36;
	font-weight: bold;
}
.nav {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0;
	background-color: black;
	text-align: center;
	vertical-align: middle;
	list-style: none;
	text-transform: uppercase;
	font-size: 130%;
	text-decoration: none;
	letter-spacing: 0.2em;
	z-index: 100;
	box-shadow: none;
}
.nav:hover {
	box-shadow: 0px 7px 25px 0px rgba(0,0,0,0.75);
}
.nav li {
	display: inline;
}

.nav a {
	display: inline-block;
	padding: 15px;
}
.shadow {
	box-shadow: 0px 0px 50px 0px rgba(0,0,0,1);
}
.body {
	margin-top: 0px;
	padding-top: 100px;
	padding-bottom: 10px;
	text-align: center;
	background-color: #43aaf3;
}
.body h1 {
	font-size: 64px;
	padding-bottom: 25px;
}
.body hr {
	border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.body p {
	margin-left: 100px;
	margin-right: 100px;
	font-size: 18px;
}
.body2 {
	background-color: red;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

VerticalHorizon · December 01, 2016, 02:14:17 PM

Quote from: espio100 on December 01, 2016, 02:02:49 PM

Code: [Select]
<link href="css/bootstrap.min.css" rel="stylesheet"/> <script src="js/bootstrap.min.js"></script>

Try replacing these lines with:

Code: [Select]

	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

This works just fine for me. If it works for you too then your paths/filenames might be invalid.

espio100 · December 01, 2016, 03:11:42 PM

EDIT:
Okay it works-ish but it forgets up the width of the columns somehow. Like the container width used to be like 940px or something but now it takes up the entire screen (wich I dont want)
Also im getting overlapping text when I resize it too small
removing col-sm-12 works

MORE EDIT:
Redownloaded bootstrap. Apperently I didnt have all the files