Beiträge von Johnny6er

Johnny6er

Zitat von Gastl

Wovon du redest, weißt wahrscheinlich nur du. Selbstgespräche?

Da du anscheinend die Bedeutung des Wortes "schlicht" nicht verstehst, hier ein Kleiner Auszug aus dem Duden:

Zitat

auf das Nötigste, das Wesentliche beschränkt, sich beschränkend; in keiner Weise aufwendig, ohne Zierrat oder überflüssiges Beiwerk; einfach und bescheiden

Johnny6er

Also ich persönlich finde diese schlichten Design sehr angenehm. Am besten nur mit zwei Farben arbeiten. Wichtig finde ich: Sollte trotzdem modern aussehen.

Und ich persönlich würde nicht nach der 1024px Schiene arbeiten, man will ja schließlich auffallen.

Johnny6er

Zitat von MrMurphy

Hallo

Dann hast du einen zusätzlichen seitlichen Abstand bei den Bildern. Die Ursache ist aus deinen Quelltextschnipseln leider nicht ersichtlich.

Die üblichen Verdächtigen sind padding, border, margin, display: inline-block u.s.w.

Gruss

MrMurphy

Alles anzeigen

Ok danke, hab mir den Code noch mal genauer angeschaut, aber finde den Fehler irgendwie leider nicht.

CSS

Code

#Header {	text-align:center;
	height: 423px;
	background-image: url(images/test01.png);
	background-repeat: repeat-x;
}




#Navigation li {
    display: inline-block;
    padding-top: 200px;
    width: 140px;
    }




#Navigation {
    text-align: center;
    font-family: Calibri;
    font-size: 130%;
    letter-spacing: 4px;
    overflow: hidden;
    }
#Main {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    font-family: Calibri;
    font-size: 90%;
    letter-spacing: 1px;
    }
#Bilder {
    max-width:60%;
    margin: auto;
    overflow: hidden;
}




#Bilder img {
    border: 5px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    float: left;
    width:24%;
    margin-right:1%;
}




#Footer {
    position: relative;
	bottom:0px; left:0px; right:0px;
	background-image: url(images/test4.png);
    background-repeat: repeat-x;
    text-align:center;
	padding:0px;
	height:150px;
}

Alles anzeigen

HTML

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test Homepage</title>
    <meta name="keywords" content="Groß, usw">
    <meta name="description" content="Beispieltext.">
    <link href="style.css" type="text/css" rel="stylesheet">
    </head>

<body>
	<div id="Header">
</div> 

    <div id="Navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">Referenzen</a></li>    
    <li><a href="#">Service</a></li>
    <li><a href="#">Kontakt</a></li>    
</div>

    <div id="Main">
    <a>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum</a>
</div>

    <div id="Bilder">
    <a href="#"><img class="position" src="images/test.jpg"></a>
    <a href="#"><img class="position" src="images/test.jpg"></a>
    <a href="#"><img class="position" src="images/test.jpg"></a>
    <a href="#"><img class="position" src="images/test.jpg"></a>
</div>




	<div id="Footer">
	<a>Hier könnte ein Urheberrechts-Hinweis stehen...</a>
</div>

















    </body>
















































</html>

Alles anzeigen

Johnny6er

Hab es immer noch nicht geschafft die Variante von MrMurphy zu testen, werden es denke ich mal heute Nacht mal testen.

Zitat von djheke
Versuch's mal so. Sollte ausreichen.
Code
#Bilder {
 max-width:70%;
 margin:0 auto;
 overflow:hidden;
}


#Bilder img {
 float:left;
 width:24%;
 margin-right:1%;
}
Alles anzeigen

Deinen Code habe ich aber mal kurz eingefügt, fast alles richtig, er zentriert die Bilder so wie ich das haben möchte. Nur das Problem, dass er mir das letzte Bild in die nächste Reihe setzt.

Johnny6er

Ich hab deinen Code noch nicht ausprobiert, überlege gerade wie ich den bei mir einbaue.

Aber hab dir mal ein Foto gemacht:

"margin- left" und "margin-right" steht auf "Auto", dies zieht mir die Bilder enorm weit auseinander. Normalerweise sollen die Bilder ziemlich eng aneinander. Gibt es eigentlich eine Möglichkeit, beim verkleinern des Browserfensters das verschieben der Bilder zu verhindern?

Johnny6er

Zitat von MrMurphy

Hallo

Fragen kannst du gerne. Es ist nur schwierig dir zu helfen wenn wichtige Informationen von dir fehlen. Wenn du Fragen zu Bildern hast brauchen wir auch einen Link zu den Bildern.

Gruss

MrMurphy

Ok das tut mir natürlich leid, ich hoffe mit dem Bild verstehst du was ich meine, oder wolltest du ein anderes Foto?

Die beiden Zahlen 1 und 2 (in rot markiert), habe ich mit Photoshop gescliced, d.h. dies sind die Bilder, welche ich dann mit "repeat-x" von links nach rechts wiederholen möchte.

Wie man sieht, ist ein Bereich im Header etwas dunkler, dies soll der Bereich sein, wo die Navigation drauf kommt, aber bei meiner momentanen Methode, funktioniert das nicht.

Johnny6er

Hallo zusammen,

ich habe schon einiges im Internet gefunden, aber nichts hat mich wirklich weiter gebracht. Ich möchte gerne ein Image ganz oben (auch Header) wiederholen lassen (repeat-x). Diesen Hintergrund habe ich mit Photoshop erstellt und die unteren ca. 50 px sind als Navigationshintergrund gedacht. Mittlerweile habe ich es zwar geschafft die beiden Backgrounds für Header und Footer anzeigen zu lassen, aber nicht optimal, es bestehen kleine weisse Balken zu "left", "right" and "top". Wenn ich "position: fixed" eingebe und "left", "right" and "top" auf "0px" setzte, verschwindet zwar der Rand, aber der Hintergrund passt sich nicht mehr der Länge des Inhaltes an. Zudem bekomme ich es nicht hin, die Navi auf diese "Header" zu ziehen.
Ich würde auch gerne eine kleine auflistung mit Links im Footer erstellen, aber daran bin ich komplett gescheitert.

Hier mal der Code:

HTML

HTML

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8">
    <title>Homepage Neu</title>
    <meta name="keywords" content="Lustig, Video, Test, use">
    <meta name="description" content="Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.">
    <link href="style.css" type="text/css" rel="stylesheet">
    </head>

<body>
    <div id="Header">
</div> 

    <div id="Navigation">
    <li><a href="#">Test</a></li>
    <li><a href="#">Test2</a></li>    
    <li><a href="#">Test3</a></li>
    <li><a href="#">Test4</a></li>    
</div>

    <div id="Main">
    <a>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie.         Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein          unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um       ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.</a>
</div>

    <div id="Bilder">
    <a href="#"><img class="position" src="images/Beispiel%201.jpg"></a>
    <a href="#"><img class="position" src="images/Beispiel2.jpg"></a>
    <a href="#"><img class="position" src="images/Beispiel3.jpg"></a>
    <a href="#"><img class="position" src="images/Beispiel4.jpg"></a>
</div>




    <div id="Footer">
    <a>Hier könnte ein Urheberrechts-Hinweis stehen...</a>
</div>

Alles anzeigen

CSS

Code

#Header {    text-align:center;
    height: 423px;
    background-image: url(images/Test01.png);
    background-repeat: repeat-x;
}




#Navigation li {
    display: inline-block;
    padding-top: 200px;
    width: 150px;
    }




#Navigation {
    text-align: center;
    font-family: Calibri;
    font-size: 130%;
    letter-spacing: 4px;
    }
#Main {
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    font-family: Calibri;
    font-size: 90%;
    letter-spacing: 1px;
    }
#Bilder img{    
    border: 5px solid rgba(0, 0, 0, 0.12);    
    border-radius: 4px;    
    display: inline-block;    
    margin-top: 10px;    
    }




img.position {
    margin-left: 100px;
    margin-right: auto;
    }   
#Footer {
    position: fixed;
    bottom:0px; left:0px; right:0px;
    background-image: url(images/Test04.png);
    background-repeat: repeat-x;
    text-align:center;
    padding:0px;
    height:150px;
}

Alles anzeigen

Ich hoffe es ist kein Problem, wenn ich so viel Frage, es gibt ja leider Foren, in denen das nicht wirklich gern gesehen wird, aber möchte halt gerne weiter kommen und dazu lernen.

Johnny6er

Hier bekommst du den ganzen Code 8):

HTML

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8">
    <title>Homepage Neu</title>
    <meta name="keywords" content="Lustig, Video, Test, use">
    <meta name="description" content="Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.">
    <link href="style.css" type="text/css" rel="stylesheet">
    </head>

<body>
    <div id="Header">
</div> 

    <div id="Navigation">
    <li><a href="#">Test</a></li>
    <li><a href="#">Test2</a></li>    
    <li><a href="#">Test3</a></li>
    <li><a href="#">Test4</a></li>    
</div>

    <div id="Main">
    <a>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie.         Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein          unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um       ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.</a>
</div>

    <div id="Bilder">
    <a href="#"><img class="position" src="images/Beispiel%201.jpg"></a>
    <a href="#"><img class="position" src="images/Beispiel2.jpg"></a>
    <a href="#"><img class="position" src="images/Beispiel3.jpg"></a>
    <a href="#"><img class="position" src="images/Beispiel4.jpg"></a>
</div>




    <div id="Footer">
    <a>Hier könnte ein Urheberrechts-Hinweis stehen...</a>
</div>

Alles anzeigen

Code

#Header {    text-align:center;
    height: 423px;
    background-image: url(images/Test01.png);
    background-repeat: repeat-x;
}




#Navigation li {
    display: inline-block;
    padding-top: 200px;
    width: 150px;
    }




#Navigation {
    text-align: center;
    font-family: Calibri;
    font-size: 130%;
    letter-spacing: 4px;
    }
#Main {
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    font-family: Calibri;
    font-size: 90%;
    letter-spacing: 1px;
    }
#Bilder img{    
    border: 5px solid rgba(0, 0, 0, 0.12);    
    border-radius: 4px;    
    display: inline-block;    
    margin-top: 10px;    
    }




img.position {
    margin-left: 100px;
    margin-right: auto;
    }   
#Footer {
    position: relative;
    bottom:0px; left:0px; right:0px;
    background-image: url(images/Test04.png);
    background-repeat: repeat-x;
    text-align:center;
    padding:0px;
    height:150px;
}

Alles anzeigen

Ich hoffe du kannst mir anhand des Codes vielleicht genauer helfen.

Johnny6er

Dabei geht es um ein einzelnen Bild, ich habe aber vier Bilder nebeneinander.:?

EDIT: Hab es ausprobiert. Wenn ich "display: block" verwende, werden alle Bilder zentriert, aber untereinander angeordnet.
Ich möchte die Anordnung aber nebeneinander, deshalb benutze ich "display: inline-block". Bei dieser Anordnung funktioniert aber die Zentrierung irgendwie nicht.

Johnny6er

Hallo zusammen, ich möchte gerne, dass die 4 Bilder zentriert auf der Homepage angezeigt werden. Alles funktioniert, bis auf diese blöde Zentrierung. Ich hoffe mir kann jemand helfen. Die Bilder sollen aber bitte nebeneinander stehen bleiben.

HTML

<div id="Bilder">    
<a href="#"><img src="images/Beispiel%201.jpg"></a>    
<a href="#"><img src="images/Beispiel2.jpg"></a>    
<a href="#"><img src="images/Beispiel3.jpg"></a>    
<a href="#"><img src="images/Beispiel4.jpg"></a></div>

HTML

#Bilder img{    
border: 5px solid rgba(0, 0, 0, 0.12);    
border-radius: 4px;    
display: inline-block;    
margin-top: 10px;    
max-width: 70%;    
margin: auto;}

MFG

Johnny6er

In Photoshop bin ich fit, hab einige Design auf meinem PC, mir fehlt lediglich die Code-Umsetzung.

Johnny6er

Hab ein bisschen am Code geändert, funktioniert super, so wie gewollt.
Eine Frage nur, habt ihr vielleicht ein paar gute Tutorials oder ähnliches?

Johnny6er

Ist doch ganz einfach. Die Homepage ist im Aufbau und damit keine leere Seite angezeigt wird, wollte ich das Logo in die Mitte setzen. Darunter steht "Bald für sie erreichbar".

Johnny6er

Hallo zusammen,
anhand meiner Anzahl an Beiträgen erkennt man, dass ich neu zugestoßen bin und hoffentlich hier guten Rat für Hilfestellungen und Problemlösungen bekomme.
Ich hoffe, dass ihr mir ein bisschen unter die Arme greifen könnt. Ich versuche mich an einer eigenen Homepage, vor etlichen Jahren habe ich so etwas schon mal gemacht, aber leider alles wieder weg.

Mein erstes Problem:

HTML

<!doctype html> 
html> 
<head> 
<meta charset="utf-8"> 
<title>Name der Homepage</title> 
</head> 
<style type="text/css"> 
html, body { 
background:url(images/Hintergrund.gif); 
} 
#Logo { 
margin:0 auto; 
width:825; 
height:150; 
} 
</style> 
<img id="Logo" src="images/logo.png" /> 
</html>

Alles anzeigen

Ich wollte, dass der Hintergrund sich unendlich wiederholt, dies hat auch soweit funktioniert. Das Logo wird auch angezeigt, aber nicht an der Position, an der ich es gerne hätte.
Ich wollte es nämlich senkrecht und horizontal mittig ausrichten, aber ich weiß einfach nicht, wie ich dies umsetzen soll. Könnte mir dabei jemand behilflich sein?`
Ich habe irgendwas von Tabellen gehört, aber da steige ich leider noch nicht so ganz durch, wäre schön wenn mir dies jemand erklären könnte, oder mir hilfreiche Tutorials zusendet.

Mit freundlichen Grüßen
Johnny

Beiträge von Johnny6er

Design – Eure Meinung ist gefragt!

Design – Eure Meinung ist gefragt!

Bilder Block zentrieren

Bilder Block zentrieren

Bilder Block zentrieren

Header/Footer Hintergrund

Header/Footer Hintergrund

Bilder Block zentrieren

Bilder Block zentrieren

Bilder Block zentrieren

CSS HTMl Einstieg / Logo Position

CSS HTMl Einstieg / Logo Position

CSS HTMl Einstieg / Logo Position

CSS HTMl Einstieg / Logo Position