Forum Mjukvara Programmering och digitalt skapande Tråd

HTML & CSS image problem

1
Skriv svar
Permalänk
Medlem
●

HTML & CSS image problem

Hejsan!

Jag har sökt google och här på Sweclockers men vet inte riktigt vad jag ska söka på och får inte fram det jag söker. Finns det någon tråd så får någon gärna peka mig rätt.

Ska börja med att säga att jag är nybörjare på detta med HTML & CSS, men har grundkunskaperna!

Problemet jag har är att jag gjort en design i photoshop jag är nöjd över och villl använda.
Ska väll nämna att det inte är första gången jag gjort så här och jag vet hur man utformar det mesta i CSS osv.

Men till problemet.

Det jag vill göra är att få IMAGE ligga placerade intill maincontent.

Jag har försökt att lägga till en image i HTML koden för att sedan bestämma vart det ska ligga med hjälp av CSS, men när jag byter mellan upplösningar så flyttas den. Jag vill såklart att den ska ligga på samma ställa hela tiden, det vill säga intill maincontent area.

HTML koden ser ut så här:

<body>

<div id="page-wrap">   <?--- maincontent
<div id="left"><img src="images/left.png" width="162" height="839"></div>

CSS koden ser ut så här:

#page-wrap { width: 800px; height: 1200px; margin: 30px auto 10px; background: white; } <?--- maincontent

#left { position: absolute; top: 100px; left: 250px; }

Jag har även testat med att lägga bilden som background i CSS men det funkar inte då jag redan har en annan background.

Hoppas att jag förklarade så ni förstod vad jag menade!
Är det något som är oklart så skriv gärna det!

Tacksam för svar!

MVH/ SpaarkX

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag skulle gjort enligt följande.

Gör en container så pass stor att image delen intill samt textdelen du har kommer få plats.

Det vill säga 162px + antal pixlar det element där texten finns är bred.

#page-wrap {width: dinbreddpx; height: 1200px; margin: 30px auto 10px; background: white;}
#maincontent {width: dinbredd-162px(bilden); height: 1200px;} (kan behövas lägga till en float: right; på slutet)
#left {width: 162px; height: 839px; float: left;}

Placera i HTML koden ditt left element samt det som innehåller texten inuti den nu tillräckligt stora containerna(#page-wrap).
<html>
<head>
</head>

<body>
<div id="page-wrap">
<div id="maincontainer">
</div>
<div id="left">
</div>
</div>

<body>

</html>

Det borde fungera, slängde ihop det väldigt fort så finns ingen garanti på att jag gjort rätt, finns säkerligen minst ett fel men du kanske kan klura ut något själv baserat på den kod jag skrev, lycka till

Edit: Testade koden, blev så här:

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack för snabbt svar, men jag får inte till det riktigt som jag vill.

Ska tilläga att maincontent i detta fall är page-wrap.... Var lite snabb när jag gjorde paint bilden.

Kan säga att det som ska ligga utanför är en genomskinlig brush som jag gjort i photoshop som ska ligga jäms med page-wrap.
Hänger du med vad jag menar?

EDIT:
Så här blev mitt resultat :

som ni ser så vill jag ha "brushen" (rosen) utanför.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

Det ser ut som att blomman är en bakgrundsbild och inte ett tillägg till sidans innehåll. Jag skulle därför valt att använda background-image för det.

Ungefär såhär:

<style>
#page{
	width: 900px;
	margin: 0 auto;
	background-color: #fff;
	background-image: url("bild.filformat"); /* Din bild */
	background-repeat: no-repeat;
	padding-left: 120px; /* Bildens vidd + hur långt ifrån innehållet du vill ha den,
		Du kan ju positionera lite som du vill så klart */
}
</style>

<div id="page">
<h1>Hemsida</h1>
<p>Lite text</p>
</div>

Kanske lite övertydligt med kommentarerna men du förstår nog, du kan ju ändra lite hur du vill.

Visa signatur

Cat funeral! Cat funeral!
>>> 112383 <<<

Redigera
Citera flera Citera
Permalänk
Medlem
●

Alltså jag måste vara lite dum i huvudet nu :/
Det blir inte alls som jag tänkte mig :S

Ber om ursäkt om jag är trög eller går er på nerverna

Här kommer all kod så ni vet hur jag skrivit allt:

HTML:

<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8' />
	
	<title>House </title>
	
	<link rel='stylesheet' href='css/style.css' />
	
	<[if IE="IE"]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<[endif]>

	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
	<script src='js/example.js'></script>
</head>

<body>

<div id="page-wrap">
			  
		
			<div id="left"><img src="images/left.png" width="162" height="839"></div>
<header>
			<div id="logo"></div>
			
			<h1>Radio</h1>
			
			<h1>BLA</h1>
		</header>
		
		<div id="main-content">
		
			<nav>
				<ul>
					<li><a href="#">home</a></li>
					<li><a href="#">schedule</a></li>
					<li><a href="#">blog</a></li>
					<li><a href="#">about</a></li>
					<li><a href="#">contact</a></li>
				</ul>
			</nav>
			
			<h2>news</h2>
massa text massa textmassa textmassa textmassa textmassa textmassa text
massa textmassa text

massa textmassa text


			<h2>login</h2>
			
		</div> <!-- END main-content -->
	</div> <!-- END page-wrap -->	
</body>

</html>

CSS:

* { margin: 0; padding: 0; }
html { background: black url(../images/bg.png); }
body { font: 14px/1.4 Georgia, serif; }

article, aside, figure, footer, header, nav, section { display: block; }

#page-wrap { 
	width: 800px;
	height: 1200px; 
	margin: 30px auto 10px; 
	background: white; 
	}
#left {
	width: 162px;
	height: 839px;
	float: left; 
	}
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Massy har ju gett dig en lösning som gör precis det du vill göra.
Här är den med lite av ditt innehåll inklistrat:
CSS:

#page-wrap {width: 800px; height: 1200px; margin: 30px auto 10px; background: white; }
#maincontainer {width: 638px; height: 1200px; float: right; }
#left {width: 162px; height: 839px; float: left; }

HTML

<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8' />
	
	<link rel='stylesheet' href='css/style.css' />
</head>

<body>
<div id="page-wrap">
<div id="maincontainer">
<header>
			<div id="logo"></div>
			
			<h1>Radio</h1>
			
			<h1>BLA</h1>
		</header>
		
		<div id="main-content">
		
			<nav>
				<ul>
					<li><a href="#">home</a></li>
					<li><a href="#">schedule</a></li>
					<li><a href="#">blog</a></li>
					<li><a href="#">about</a></li>
					<li><a href="#">contact</a></li>
				</ul>
			</nav>
			
			<h2>news</h2>
massa text massa textmassa textmassa textmassa textmassa textmassa text
massa textmassa text

massa textmassa text


			<h2>login</h2>
		</div>
</div>
<div id="left">
</div>
</div>

<body>

</html>
Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag måste varit dum i huvudet när jag jorde detta från början.

Jag löste allt genom att använda margin-top: och margin-left: så allt hamna på rätt plats!
Vet ej om detta är den bästa lösningen men det funkar mellan olika upplösningar iallafall !

Tack iallafall för all hjälp!

Det var skönt att hitta tillbaka till detta forum efter en tids frånvaro!

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara