• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Foto am absolut oberen Rand andocken

M

mabu

Neues Mitglied
Hallo.
Ich bekomme zum Verrecken ein Foto nicht an den obersten Rand der Webseite, so dass da kein Zwischenraum mehr existiert.
Es geht konkret um das Bild "headerbild.jpg"
Auch eine eingebundene CSS mit dem Befehl:
.headerbild {
margin-top: 0; padding: 0;
width: 100%;
}
hat nicht den Erfolg gebracht!
Wer kann helfen?
DANKE!!!!

Quellcode:

<html><HEAD>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<meta name="generator" content="Autor">
<meta name="publisher" CONTENT="Autor">
<meta name="copyright" CONTENT="Autor">
<meta name="keywords" CONTENT="Schlüsselwörter">
<meta name="description" lang="de, ch, at" CONTENT="Inhaltsbeschreibung">
<meta name="page-topic" CONTENT="Sport">
<meta name="audience" CONTENT="Alle">
<meta name="robots" content="all">
<meta name="robots" CONTENT="INDEX,FOLLOW">
<meta name="Content-Language" Content="de, en, us">
<meta name="revisit-after" content="7 days">
<META http-equiv="Page-Enter" CONTENT="blendTrans(Duration=3)">
<META http-equiv="Page-Exit" content="RevealTrans(Duration=2,Transition=16)">
<link rel="shortcut icon" href="http://www.webseite.de/favicon.ico">
</style>
<br>
<title>Titel bla bla</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<table width="75%" height="100%" border="0" valign="top" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="25%"><table width="201" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"><table width="201" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"><table width="201" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"><table width="201" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"><a href="https://www.webseite4.com" target="_blank"><img src="images/banner4.jpg" alt="Beschreibung" width="200" height="48" border="0"></a></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
</tr>
<tr>
<td align="right"><a href="https://www.webseite3.com" target="_blank"><img src="images/banner3.jpg" alt="Beschreibung" width="200" height="48" border="0"></a></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
</tr>
<tr>
<td align="right"><a href="https://www.instagram.com/name" target="_blank"><img src="images/instagram.png" alt="Beschreibung" width="200" height="48" border="0"></a></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
</tr>
<tr>
<td align="right"><a href="https://www.webseite2.de" target="_blank"><img src="images/banner2.png" width="200" height="48" border="0"></a></td>
</tr>
<tr>
<td height="16" align="right">&nbsp;</td>
</tr>
</table>
</tr>
</table><a href="https://www.webseite.de" target="_blank"><img src="images/banner.png" width="200" height="48" border="0"></a></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="59%"> <div align="center">
<table background="images/headerbild.jpg" width="1000" border="0" valign="top" cellspacing="0" cellpadding="0" height="615" alt="Angabe"><br>
<tr></tr>
<tr>
<td align="center" valign="top">&nbsp;</td>
</tr>
</table>
<br>
</div>
</td>
<td width="59%">&nbsp;</td>
</tr>
<tr>
<td rowspan="42">&nbsp;</td>
<td>&nbsp;</td>
<td rowspan="42">&nbsp;</td>
</tr>
<tr>
<td align="center"><span class="Stil1"><strong>Name</strong></span></td>
</tr>
<tr>
<td align="center"><span class="Stil1">Ju-Jutsuka<br>
Longtrail Runner <br>
Taucher</span></td>
</tr>
<tr>
<td height="300">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<td>&nbsp;</td>
</tr>
<tr>
</table>
</body></html>
 
Zuletzt bearbeitet:
Hey @Sclero2004
lieben Dank!
Die Änderungen haben das Bild eine Zeile nach oben gebracht, aber noch kein finales Resultat!
In Sachen der Tabelle nehme ich gerne jeden Tipp und jede Hilfe an. Ich befürchte, ich komme da an meine Grenzen, da ich bis vorhin Flex- und Grid gar nicht kannte.
Ich möchte zentral ein Foto einbinden, ganz oben an den Rand der Browserseite, links daneben wie in meinen Tabellen Links mit Grafiken platzieren und unter dem obigen Foto, dann Kurzartikel mit je einem Foto platzieren.
Quasi ein Onepager.
Wie sähe sowas mit im Flex- und Gridlayout aus? Habe damit noch nie gearbeitet. Welche Vorteile bringt das Layout gegenüber Tabellen?
Herzlichen Dank!
 
Zuletzt bearbeitet:
HTML5 wäre toll.
HTML: 
<!DOCTYPE HTML>
Die richtige Zeichencodierung wäre auch nicht schlecht, sowie die Angaben zum viewport.
HTML: 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
und wie soll das gehen wenn Du die Formatierung mit css weglässt. (Sclero2004 war schneller)
 
CSS: 
header img.logo {
    flex: 3;
    min-width: 0;
    height: fit-content;
}
nav a img {
    height: 100%;
    width: 100%;
    min-height: 0;
    height: fit-content;
}
fit-content erledigt es.
Also, dass es nicht gestretcht wird.
oder
CSS: 
header img.logo {
    flex: 3;
    min-width: 0;
    object-fit: contain;
}
 
Vor content fehlt ein Punkt.
Vergib doch
CSS: 
 max-width: 1000px;

// und navi

max-width: 200px;
 
Was hat es mit dem Punkt vor content auf sich?
Vor nav und header steht ja auch keiner? Sorry, ich versuche die Funktion des Punktes zu verstehen, ich lerne noch.
nav und header sind nun super, stehen aber maximal voneinander entfernt. Ich mag beides zueinander im center der Seite platzieren.

Mit:
header {
display: flex;
flex-direction: row;
justify-content: center;
}

funktioniert es nicht. Habe justify-content hinzugefügt, aber es hat sich nichts geändert.
Und mein header Bild schließt immer noch nicht an den obersten Rand an, obwohl
body {
margin: 0;
gesetzt ist.
 
nav und header sind HTML Tags, content ist eine Klasse, da muss ein Punkt davor.
Bei einer ID muss eine Raute: # davor. Kannst du die Seite, die du hochgeladen hast mal aktualisieren, dann kann man sich das angucken.
 
Ich kann dir nicht ganz folgen.

Aktuell ist das meine CSS:
<style>
body {
margin: 0;
/* Elemente mit Flex anordnen: */
display: flex;
/* Elemente untereinander anordnen: */
flex-direction: column;
}

header {
display: flex;
/* Elemente nebeneinander anordnen: */
flex-direction: row;
justify-content: center;
}

nav {
/* Soll 1/4 des Platzes einnehmen: */
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}

nav a {
height: 50px;
display: inline-block;
margin: 20px 0;
}

nav a img {
/* Das Bild soll das a-Element vollständig ausfüllen : */
height: fit-content;
width: 100%;
min-height: 0;
max-width: 200px;
}

header img.logo {
/* Soll 3/4 des Platzes einnehmen: */
flex: 2;
min-width: 0;
height: fit-content;
max-width: 1000px;
}

main {
display: flex;
flex-direction: column;
}

main section {
padding: 2em;
}

section {
/* Elemente nebeneinander anordnen */
display: flex;
}

figure {
margin: 0;
/* Elemente untereinander anordnen */
display: flex;
flex-direction: column;
flex: 1;
}

figure img {
/* Das Bild soll sich responsiv verkleinern aber nicht
über seine natürliche Größe hinaus wachsen */
max-width: 100%;
}

section p {
flex-basis: 50%;
flex-grow: 1;
flex-shrink: 0;
}

.content {
display: grid;
grid-template-columns: 7em 1fr;
grid-template-rows: 2em 3em;
gap: 1em;
margin-bottom: 1em;
}

.content >img {
grid-row: 1 / 3;
width: 6em;
}
/* Ist das Browserfenster schmal? */
@media (max-width: 600px) {

/* Elemente im Header untereinander anordnen: */
header {
flex-direction: column;
}

}
</style>

Was kann raus?
Zudem denke ich, dass ich die CSS mal aufräumen könnte, also alles thematisch zusammenpacken, statt so verstreut. Vermutlich dem »alles auf einmal« geschuldet.
 
Zu Edit1:
"margin: 0 5%;" war ein guter Tipp, danke. Da lässt sich mit den Werten ja auch noch ein wenig spielen.
Dennoch orientieren sich die Container header und nav von der Außenseite und nicht vom center aus.
Ich möchte, dass beide im center mit einem kleinen Abstand zueinander angeordnet sind.
 
Danke @Sclero2004
Habe jetzt auch Edit 2 umgesetzt. Es fehlt nur, dass Header und Nav zusammen mittig ausgerichtet sind, wie es bei www.webseite.de ebenfalls über Tabellen gemacht ist.
Habe es mit »justify-content: center;« im header der css dann final geregelt. Das fehlte noch. Prima!! #freu

ABER: Schaue ich mir die Seite auf meinem Smartphone an, sind die Grafiken mit den Links (nav) komplett verschwunden, vermutlich von dem Header Bild verdeckt. Das bedeutet vermutlich, dass das header img sich auch kleiner runterregeln - der Mediumgröße entsprechend - muss. Wie regel ich das denn jetzt?

Jetzt muss ich das nur noch für die Container mit Bild und Text (secion p, figure img) mittig ausrichten.
Da habe ich es überall mit "justify-content: center;" versucht, es veränderte sich nur nichts.
 
Zuletzt bearbeitet:
Habe ich beides gemacht.
Nur jetzt ist das headerbild riesig und nav sehr klein und nach unten abgehauen!!
Und über ein kleiners Display (Smartphone) gibt es eine andere Darstellung:
nav komplett weg, vermutlich vom header img überdeckt und das header img ist nun wieder rechts angedockt!!

Mhh, mit jeder Lösung wird eine neue Baustelle aufgemacht! Ahhhhhh! :-)
 
Doch, glaube ich dir und ich weiß, dass es eine vollkommen andere Welt ist.
Ich glaube an Flex and Grid, steige nur nicht so ganz dadurch!!
Habe es umgesetzt, aber es hat sich über Desktop und Smartphone nicht viel verändert.
Das ist es, was es für mich so schwierig macht. Arbeiten im Blindflug ohne Sicht auf Verbesserung!

Die verletzte Version war noch die Beste bislang. :-)
 
Das musste ich auch gerade feststellen, als ich unterwegs die Seite aktualisiert habe. Das reichte, um die Veränderung zu zeigen. nav und header Bild sind auf dem Smartphone zentriert, auf dem Desktop Bildschrim in der Mitte zwischen linksbündig und Mitte. Spinnt da meine Desktopansicht oder gibt es dafür noch einen Trick.
Danke für den Hinweis zum HTML-Inspektor, probiere ich mal aus.
Mit den Tabellen war das eben schon im Entwurf des html-Bearbeitungsprogramms (Dreamweaver etc.) sichtbar. Aber das mit dem Inspektor ist ja schon mal eine tolle Hilfe.
 
Ne, alles schick. Ich meinte eher, dass nav und header (in schwarz eingekreist) nicht im "center" (zwischen den beiden senkrechten schwarze Striche) liegen. Ist aber nur über Desktop so.1687111197742.png
 
Entschuldige, wenn ich mich zuvor unglücklich ausgedrückt habe.

Richtig, Nav und Header Bild sollen so zusammen (mit der aktuellen Ausrichtung zueinander) horizontal zentriert sein.
Losgelöst davon, soll dann der Content unten drunter sich ebenfalls zentrieren, unabhängig von Nav und Header (muss sich also nicht bündig an den Beginn eines der oben horizontal zentrierten zwei Container anpassen).
 
@Sclero2004
Super toll übrigens, wie sich der Main Content anpasst, wenn man den Browser am Desktop Rechner klein oder groß zieht.
Es scheint alles links mit einem Abstand zum äußeren Rand des Browsers angeordnet zu sein. Können wir das zentrieren, so dass sich alles nach außen zu beiden Seiten gleichmäßig anpasst, sollte der Bildschirm größer gezogen werden?
 
Hallo Ulrich,
das ist richtig und das ist mir bekannt. Ich habe ja keine style Tags drin. Deswegen bin ich ja so verwundert.
Evtl. telefonieren wir, wenn das möglich ist. Sorry für den Umstand.
Die Testversion ist auf https://www.testseite.de zu finden.
 
Zuletzt bearbeitet:
mabu schrieb:
Evtl. telefonieren wir
Zum Vergrößern anklicken....
Und was ist dann mit diesem Thread? Und wenn ich das mal sagen darf, finde ich das ganz schön unverschämt.

Das Foto ist an den Rändern teilweise sehr verpixelt, das sollte du mit einem Grafikprogramm glätten.
 
Zuletzt bearbeitet:
@msi , es geht darum, dass sich das hier ohne nennenswerte Fortschritte zieht wie Kakao. Das liest sich seitenweise in der Menge niemand mehr durch. Und wer dazu Fragen hat, kann im Thread Beteiligte anschreiben oder hier im Thread konkrete Fragen dazu stellen. Es soll hier ja um zielführend Lösungen gehen.
 
Sclero2004 schrieb:
AnyDesk könnte eine gute Sache sein. Weiteres per PN.
Zum Vergrößern anklicken....
Sorry, aber so etwas verstehe ich nicht. Wozu ist denn ein Forum da? Und wenn es jemand in einem Forum, in dem man kostenlose Hilfe bekommt, zu lange dauert, dann bieten sich Dienstleister an, die kann man anrufen und denen Mails schreiben, kosten dann allerdings.
Aber auf persönliche Schulung zu gehen, ist mir echt eine Nummer zu hoch.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben