Weergave problemen afbeeldingen website

smftheprayer · 4 dec 2014

Beste Lezer,

Ik ben een beginner met HTML. Ik heb al een cursus gevolgt en zou nu graag een website willen maken.

Echter, ik kom niet verder.
Ik heb 3 verticale balken.

De linker voor een soundcloud feed.
Het midden voor het logo en de main content.
Rechts voor mijn facebook feed.

Nu wil ik onder men logo een menu.
Deze heb ik ge googled ( Zag mooie, gratis varianten online ).

Echter ik kom niet verder. Mijn probleem is namelijk:

Ik weet niet hoe ik ervoor kan zorgen dat mijn website goed wordt weergegeven op alle resolutie's.
Ik gebruik zelf 1366x768 daar werkt het wel en mijn collega heeft 1920x1080 daar werkt het niet.
Op moment van inzoomen tript de hele website.
daar bedoel ik mee plaatjes bewegen van hun plek.

Hier mijn codes:

HTML:

<!doctype html>
<html lang="en">
<head>

	<title>Prayers page</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>

	<div align="center"> 
		<img src="logo.png" width="650" height="250" />
	
	</div> 
	<div id="soundcloud">
		<p>
		<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/34019569&color=0066cc"></iframe>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/34019569&color=0066cc"></iframe>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/34019569&color=0066cc"></iframe>
		<p/>
</div>

	<div id="twitter"> 
	<p>
	
	 &nbsp;&nbsp;&nbsp;<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&width&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:590px;" allowTransparency="true"></iframe>

 <p/>
</div>


<div id="maincontent">
<ul class="menu">
  <li><a href="/home" class="active"><span>Home</span></a></li>
  <li><a href="/services"><span>Services</span></a></li>
  <li><a href="/about"><span>About</span></a></li>
  <li><a href="/contact"><span>Contact</span></a></li>
</ul>
</div>



</body>
</html>

Code:

body { background-color: Black;
}

#soundcloud {
    float: left;
	width: 325px; 
    height: 700px; 
    margin-top: -254px;
    margin-left: 10px;
    background-color: red;
	}
	
	#twitter{
    float: right;
	width: 325px; 
    height: 700px; 
    margin-top: -254px;
    margin-left: 10px;
    background-color: white;
	}

	#maincontent {
	float: right;
	width: 653px; 
    height: 100%; 
    min-height: 450px; 
	 background-color: orange;
	}

.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('topMenuImages.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}

bron · 5 dec 2014

Hi, werk in de breedte met percentages. De browser bekijkt een % als percentage van het bovenliggende element.
Je kunt ook met @media werken om bij bepaalde breedtes de layout te laten veranderen.
Hieronder heb ik een kort voorbeeld bijgevoegd dat in alle breedtes werkt vanaf 360px.

Code:

--- HTML ---

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Prayers page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mainwrapper">

<div class="mainmenu">
<ul class="menu">
<li><a href="/home" class="active"><span>Home</span></a></li>
<li><a href="/services"><span>Services</span></a></li>
<li><a href="/about"><span>About</span></a></li>
<li><a href="/contact"><span>Contact</span></a></li>
</ul>
</div>

<div class="soundcloud">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/34019569&color=0066cc"></iframe>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/34019569&color=0066cc"></iframe>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/34019569&color=0066cc"></iframe>
</div>

<div class="main">
<div class="logo">
<img src="logo.png" width="650" height="250" />
</div>
<div class="content">
<p>Hier staat de content</p>
</div>
</div>

<div class="twitter">
<iframe width="100%" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&width&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:590px;"></iframe>
</div>

</div>
</body>
</html>

--- CSS ---

/* algemeen */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: verdana,helvetica,sans-serif;
  font-size: 16px;
}
body {
  background-color: #000;
}

/* structuur */
.mainwrapper {
  width: 100%;
  min-width: 360px;
  max-width: 1280px;
  margin: 0 auto;  
}
.mainmenu {
  width: 98%;
  height: 32px;
  margin-left: 1%;
  margin-right: 1%;
}
.soundcloud {
  float: left;
  width: 28%;
  margin-left: 1%;
  margin-right: 1%;
  padding-top: 3px;
  background-color: #f00;
}
.main {
  float: left;
  width: 40%;
  margin-right: 1%;
  min-height: 450px; 
  background-color: #f60;
}
.twitter {
  float: left;
  width: 28%;
  margin-right: 1%;
  background-color: #fff;
}

/* linker kolom */
.soundcloud iframe {
  width: 100%;
  height: 166px;
}

/* middelste kolom */
.main .logo {
  width: 100%;
}
.main .logo img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.main .content {
  max-width: 100%;
  padding: 15px 20px;
  line-height: 1.4;
}

/* rechter kolom */
.twitter iframe {
  width: 100%;
}

/* main menu */
.menu, .menu li, .menu a, .menu span {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.menu {
  list-style: none;
  background: url('topmenuimages.png') repeat-x;
}
.menu li{
  float: left;
}
.menu li:hover {
  cursor: pointer;
}
.menu a {
  display: block;
  text-decoration: none;
  padding: 8px 15px;
}
.menu span {
  color: #fff;
}

/* main menu hover/active */
.menu li:hover span {
  color: #ff3;
}
.menu li a.active span,
.menu li:hover a.active span {
  color: #fa3;
}

Omdat ik geen plaatjes van het menu heb kan ik je daar niet mee helpen.

Suc6. Have fun.

Weergave problemen afbeeldingen website

smftheprayer

Nieuwe gebruiker

bron

Moderator

Nieuwste berichten

Wij waarderen jouw privacy