HTML hjälp

2014-01-31, 18:19 #1

Medlem

Reg: Sep 2010

Inlägg: 194

Hej.
Jag håller på och lär mig lite HTML och CSS och som ni nog redan förstår så har jag fastnat.
Mitt projekt är att göra en hemsida med videos på en utav sidorna.
Detta är hur långt jag kommit hit tills:
http://gyazo.com/3065db5a221328037910b598e06473d6

Det jag nu vill är att allt ska vara i ett "packet", text och videon i ett. Tex i en "<div>" och sen är det bara klistra in en efter en.
Men när jag försöker göra detta så hamnar hela h*lvetet i mitten hela tiden eller att det blir utspritt och så okontrollerat som på bilden ovan...

För att detaljera lite till så ni förstår vad jag vill.
Jag vill ha som någon slags template för videos och bilder som är bredvid varandra.
Fråga om ni inte förstår vad jag menar...

Så här ser min kod ut.
CSS:

HTML:

Jag har också Googlat i snart 2 timmar efter detta, hitta heller inget på YouTube som kan hjälpa mig.
Jag hoppas någon där ute är kunnig nog och kan förklara lite detaljerat för mig, det vore kanon!

- Zoump.

Citera

2014-01-31, 18:30 #2

Medlem

Reg: Feb 2012

Inlägg: 2 214

Citat:

Ursprungligen postat av Zoump

text

Försöker du få oss att ladda ner virus eller? Filen "GyazoSetup.exe" laddas ner för mig..

Citera

2014-01-31, 18:33 #3

Medlem

Reg: Sep 2010

Inlägg: 194

Citat:

Ursprungligen postat av xtrftw1337

Försöker du få oss att ladda ner virus eller? Filen "GyazoSetup.exe" laddas ner för mig..

Gyazo är ett prnt scrn program och är inte något virus...
Du måste nog ha tryckt på något då den frågar när du surfar in på sidan om du vill ha det programmet.

Citera

2014-02-01, 05:19 #4

Medlem

Reg: Mar 2012

Inlägg: 1 414

Du verkar inte riktigt greppat hur det funkar med hur HTML och CSS funkar tillsammans. Gå igenom grunderna igen.

Hur som helst är det svårt att hjälpa dig utan en klar bild av hur det ska se ut i slutändan, men jag gav det ett försök...
Skrev nästan om allt som du skrivit redan dock. Så du kanske vill gå igenom det hela och se hur jag löst det och ta de saker som du tycker är vettiga.

CSS:

Kod:

@charset "utf-8";
/* CSS Document */

/******RESETS******/
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		background: transparent;
		border: 0;
		margin: 0;
		padding: 0;
		vertical-align: baseline;
		text-decoration:none;
	}

/*** MÄRK ATT JAG TAGIT BORT "." FRAMFÖR MÅNGA SELECTORS, "." BETYDER CLASS, NÄR DU SKA HITTA ETT ELEMENT SOM INTE ÄR EN CLASS SÅ KAN DU INTE HA DET FRAMFÖR ***/
body,html {
	font-family: Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	background-color:#A6A6A6;
}

#sitewrapper{
	width:1280px;
	margin:auto;
}
/*** HEADER ***/
#header{
	color:#E6E1E2;
	width:100%;
	background-color: slateGrey;
	margin-bottom:2px;
	text-align:center;
}
	#header #navigation a{
		color:#FFF;
		text-decoration:none;
		margin-bottom:10px;
		padding:5px;
	}
	#header #navigation a:hover {
		background-color:#9E9E9E;
	}

/*** MAIN CONTENT ***/
#content {
	background-color:#3B3A3A;
	color:#FFF;
	width:1105px;
	float:left;
	border:1px solid #666;
}
	.acontent {
		background-color:#3B3A3A;
		color:#FFF;
		width:1105px;
		float:left;
		text-align:left;
		border:solid #666;
		border-width:1 1px
	}

	#content h1{
		float:left;
		margin:10px;
		font:bold 1.5em verdana;
	}
	#content .post{
		width:100%;
		float:left;
	}
	#content .post h2{
		margin:0 10px;
	}
	#content .post p{
		margin:0 10px;
	}
	.video{
		float:left;
		margin:10px;
		width:355px;
		height:200px;
	}

/*** SIDEBAR ***/
#sidebar {
	width:160px;
	float:right;
	background-color:#3B3A3A;
	font-size:12px;
	border:1px solid #666;
	color:#FFF;
	text-align:center;
}
	#sidebar ul li{
		margin:10px 0;
	}
	#sidebar ul li a{
		color:#E6E1E2;
		text-decoration:underline;
	}

HTML:

HTML-kod:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testing site | Example</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="sitewrapper"> <!-- ÄNDRADE TILL IDs PÅ DE FLESTA STÄLLEN, CLASS SKA BARA ANVÄNDAS IFALL DU SKA ÅTERANVÄNDA ELEMENTET -->
	<div id="header">
		<h1>Welcome...</h1>

		<div id="navigation">
			<a href="index.html">Home</a> &middot; 
			<a href="about.html">About</a> &middot; 
			<a href="videos.html">Videos</a> &middot; 
			<a href="#">Pictures</a> &middot; 
			<a href="contact.html">Contact</a>
		</div>

	</div><!--Header end tag-->

	<div id="content">
		<h1>
			Free movies
		</h1>

		<div class="post"> <!-- START PÅ DIN REPEATABLE -->
		<h2>Namn</h2>
			<p>
				Handlar om Oskar Matzerath som bor i Danzig på 20- och 30-talet. Han är en mycket ovanlig pojke. Han föds med en vuxens intellekt och när han fyller tre år beslutar han sig för att inte
			</p>
			<iframe class="video" src="http://vk.com/video_ext.php?oid=236012824&id=167338303&hash=bd06b19d05720afe&hd=1" frameborder="0"></iframe>
		</div> <!-- SLUT PÅ REPEATABLE, NU KAN DU KÖRA COPY/PASTE PÅ DETTA SÅ MÅNGA GÅNGER DU VILL INOM CONTENT -->

	</div><!--Content end tag-->

	<div id="sidebar">
		<h3>Downloads:</h3>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
		</ul>
		<br>
		<i>Download now.<br>
		Last uppdated was: <br>28-01-2014</i>
	</div><!--Sidebar end tag-->

</div><!--Wrap end tag-->
</body>
</html>

PS: Mycket skräprader kan ligga kvar, kom just hem från krogen och huvudet är rätt tungt just nu. Kollar nog in imorgon igen och ser om du behöver mer hjälp.

Citera

2014-02-14, 09:25 #5

Medlem

Reg: Okt 2008

Inlägg: 81

Lånar denna tråden, finns inte direkt någon mening med att starta en ny..

Har en liten fråga..

När man går in på en sida kommer man ju så klart till huvudsidan.
ex. "www.hemsida.se"

Går jag sedan vidare på sidan blir det "www.hemsida.se/lankar" beroende på vilken länk man går till..

Finns det något sätt så att man kan göra att den alltid visar "www.hemsida.se" och inte /lankar eller var man nu befinner sig?

Vill med andra ord att det alltid ska stå "www.hemsida.se"

Tack på förhand.

__________________
Senast redigerad av JakenNanne 2014-02-14 kl. 09:27.

Citera

2014-02-14, 09:42 #6

Medlem

Reg: Jun 2011

Inlägg: 185

Citat:

Ursprungligen postat av JakenNanne

Lånar denna tråden, finns inte direkt någon mening med att starta en ny..

Har en liten fråga..

När man går in på en sida kommer man ju så klart till huvudsidan.
ex. "www.hemsida.se"

Går jag sedan vidare på sidan blir det "www.hemsida.se/lankar" beroende på vilken länk man går till..

Finns det något sätt så att man kan göra att den alltid visar "www.hemsida.se" och inte /lankar eller var man nu befinner sig?

Vill med andra ord att det alltid ska stå "www.hemsida.se"

Tack på förhand.

AJAX fungerar

Citera

2014-02-14, 10:07 #7

Medlem

Reg: Okt 2008

Inlägg: 81

Citat:

Ursprungligen postat av lakkshooo

AJAX fungerar

Tackar, ska prova att implementera det.

Citera

2014-02-14, 10:07 #8

Moderator

Reg: Sep 2010

Inlägg: 3 911

Citat:

Ursprungligen postat av JakenNanne

Finns det något sätt så att man kan göra att den alltid visar "www.hemsida.se" och inte /lankar eller var man nu befinner sig?

Vill med andra ord att det alltid ska stå "www.hemsida.se"

Det är en dålig idé. Du förstör möjligheten för folk att bokmärka specifika sidor, eller skicka en länk till en speciellt intressant del av din site till sina vänner.

Citera

2014-02-14, 10:29 #9

Medlem

Reg: Okt 2008

Inlägg: 81

Citat:

Ursprungligen postat av vhe

Det är en dålig idé. Du förstör möjligheten för folk att bokmärka specifika sidor, eller skicka en länk till en speciellt intressant del av din site till sina vänner.

Jo, jag noterade det också.

Får fundera lite på det hela och väga för och nackdelar.
Troligtvis skrotar jag projektet just nu

Citera

HTML hjälp

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in