Hi, ich bevorzuge learning by doing! Ja, unterstützt es!
Beiträge von Anevay
-
-
Guten Morgen,
ich muss euch leider mal wieder um Rat bitten:
Ich habe das Problem dass wenn ich meinen Browser verkleinere bzw. meine Seite ( http://aiyana4u.de ) auf dem Handy betrachten möchte, der untere letzte Bereich des html codes nicht mehr angezeigt wird.
Habe bereits wie verrückt nach Lösungen gesucht, vergebens!
Könnte Sich jemand erbarmen und sich den Quelltext anschauen um mit weiterzuhelfen?
Herzliche Grüße!
-
Hi,
also habe bereits einige Fortschritte gemacht jedoch hat sich anscheinend irgendwo ein fehler eingeschlichen.
Hier mal der code an sich:
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="layout.css">
<title></title>
</head>
<body><script type="text/javascript">
var xmlHttpObject = false;
if (typeof XMLHttpRequest != 'undefined')
{
xmlHttpObject = new XMLHttpRequest();
}
if (!xmlHttpObject)
{
try
{
xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlHttpObject = null;
}
}
}{
xmlHttpObject.open('get','hallo.txt');
xmlHttpObject.onreadystatechange = handleContent;
xmlHttpObject.send(null);
return false;
}function handleContent()
{
if (xmlHttpObject.readyState == 4)
{
document.getElementById('main').innerHTML = xmlHttpObject.responseText;
}
}
</script><div id="container">
<div id="main">
<h1>Mockup Design 0.1</h1></div>
<div id="sidebar">
<div id="button1">
<a data-site="Startseite" href="">Startseite</a>
</div><div id="button2">
<a data-site="AIYANA" href="" onclick="loadContent();">AIYANA</a>
</div><div id="button3">
<a data-site="ANEVAY" href="">ANEVAY</a>
</div><div id="button4">
<a data-site="Partner" href="">Partner</a>
</div><div id="button5">
<a data-site="Unternehmen" href="">Unternehmen</a>
</div><div id="button6">
<a data-site="Community" href="">Community</a>
</div><div id="button7">
<a data-site="Registrieren" href="">Registrieren</a>
</div><div id="button8">
<a data-site="Login" href="">Login</a>
</div></div>
</div><footer><a>Stand:07.09.2016</a></footer>
</body>
</html>
ich bin schier am verzweifeln^^
- - - Aktualisiert - - -
Wie bereits erwähnt möchte ich mit Klick eines Links z.B. auf Unternehmen, dass sich im div main, der inhalt ändert bzw. sich die Unternehmen.html öffnet, dies ohne erneutes laden der kompletten Seite
-
Danke,
könntest du evtl noch etwas genauer werden?
Das würde mir einiges an Zeit schenken
Liebe Grüße
Anevay
-
Hi,
ich habe folgende Frage:
Wie kann ich per Klick eines Links, den Inhalt eines Div-Elements ändern, ohne dass sich die Seite komplett neulädt (verschiedene html Seiten)
Hier einmal meine Seite:
Herzliche Grüße
Anevay
-
Hi,
vielen lieben Dank! Der Tipp mit flexboxen hat mich enorm weitergebracht!
Jetzt habe ich jedoch ein neues Problem:
ich habe folgendes Layout erstellt: http://www.apenimon.org
jetzt möchte ich dass wenn ich einen link auswähle, sich der inhalt im main container ändert, jedoch ohne dass sich die Seite aktualisiert?
Gibt es hierfür Lösungsansätze?
html:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="layout.css">
<title></title>
</head>
<body>
<div id="container"><div id="main">
<h1>Mockup Design 0.1</h1>
</div><div id="sidebar">
<div id="button1">
<a href=""><a href="#">Startseite</a>
</div><div id="button2">
<a href=""><a href="#">AIYANA</a>
</div><div id="button3">
<a href=""><a href="#">ANEVAY</a>
</div><div id="button4">
<a href=""><a href="#">Partner</a>
</div><div id="button5">
<a href=""><a href="#">Unternehmen</a>
</div><div id="button6">
<a href=""><a href="#">Community</a>
</div><div id="button7">
<a href=""><a href="#">Registrieren</a>
</div><div id="button8">
<a href=""><a href="#">Login</a>
</div></div>
</div><footer><a>Stand:07.09.2016</a></footer>
</body></html>
CSS:
body {
background-color:#1F2525;
font-family:Arial;
margin: 0;
padding: 0;
border: 0;
}#container{
display:flex;}
#main{
order:1;
flex:80%;
height:700px;
background-color:white;
}#sidebar{
order:2;
width:150px;
background-color:gray;
text-align:center;
}#button1 {
overflow: hidden;
}
#button1 a {
display: block;
height: 18px;
width:150px;}
#button2 {
overflow: hidden;}
#button2 a {
display: block;
height: 18px;
width:150px;}
#button3 {
overflow: hidden;
}
#button3 a {
display: block;
height: 18px;
width:150px;}
#button4 {
overflow: hidden;}
#button4 a {
display: block;
height: 18px;
width:150px;}
#button5 {
overflow: hidden;
}
#button5 a {
display: block;
height: 18px;
width:150px;}
#button6 {
overflow: hidden;}
#button6 a {
display: block;
height: 18px;
width:150px;}
#button7 {
overflow: hidden;
}
#button7 a {
display: block;
height: 18px;
width:150px;}
#button8 {
overflow: hidden;}
#button8 a {
display: block;
height: 18px;
width:150px;}
footer{
background-color:#1F2525;
color:white;
text-align:center;}
Herzliche Grüße
-
Einen Guten Morgen Euch allen
Es geht um folgendes:
1.Ich habe in einer Divbox eine weitere Divbox, meine Frage lautet nun wie kann ich diese mittig zentrieren, so dass ich wenn sich der Browser verschiebt die zentrierte Divbox(text321/322) fest verankert ist und sich nicht frei mit bewegt?
2.Wie plane ich mein Layout am effektivsten bezüglich der breiten und Höhengestaltung, mit Pixel, Prozent oder Em Angaben?
Hier einmal der Quelltext:
<!DOCTYPE html>
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/layout.css" />
<title></title>
</head>
<body>
<div id="fundament"><div id="header">
<h1>Test</h1>
</div><div id="navigation">
</div><div id="text1">
</div>
<div id="text2">
<div id="text21">
<h3>Gewissenhaft</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet
</div><div id="text22">
<h3>Leistungsstark</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet
</div><div id="text23">
<h3>Individuell</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet
</div></div>
<div id="text3">
<div id="text31">
<h3>test</h3>
</div>
<div id="text32">
<div id="text321">
<h3>test</h3>
</div>
<div id="text322">
<h3>test</h3>
</div>
</div>
</div><div id="footer">
</div>
</div>
</body>
</html>CSS:
body
{
background-color:white;
font-size:100%;
margin:0em;
padding:0em;
width:100%;
height:100%;
font-family:Arial;
}#fundament {
width:100%;
height:100%}
/*Kopfbereich*/
#header {
width:100%;
height:150px;
background-color:white;}
/*Navigation*/
#navigation {
width:100%;
height:30px;
font-size:1.2em;
color:dimgrey;
text-align:right;
background-color:#144C4D;}
/*Erster Haupttextbereich*/
#text1 {
width:100%;
height:550px;
background-color:white;}
#text2 {
width:100%;
height:480px;
background-color:#144C4D;
text-align: center;
}#text21 {
width:20%;
height:30%;
background-color:white;
position:absolute;
top:840px;
left:40%;
border-radius: 20px;}
#text22 {
width:20%;
height:30%;
background-color:white;
position:absolute;
top:840px;
left:100px;
border-radius: 20px;
}#text23 {
width:20%;
height:30%;
background-color:white;
position:absolute;
top:840px;
right:100px;
border-radius: 20px;
}#text3 {
width:100%;
height:650px;
background-color:white;
text-align: center;
}#text31 {
width:40%;
height:45%;
background-color:#144C4D;
position:absolute;
top:1340px;
left:100px;
border-radius: 20px;}
#text32 {
width:40%;
height:45%;
background-color:#144C4D;
position:absolute;
top:1340px;
right:100px;
border-radius: 20px;}
#text321 {
width:80%;
height:155px;
background-color:white;
position:absolute;
bottom:40px;
right:80px;
border-radius: 20px;}
#text322 {
width:80%;
height:155px;
background-color:white;
position:absolute;
top:40px;
right:80px;
border-radius: 20px;}
/*Endleiste*/
#footer {
width:100%;
height:100px;
background-color:dimgrey;}
Herzliche Grüße
Anevay