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

Frage Text weiter runter

G

Geltos

Mitglied
Wie auf folgendem Bild zu erkennen ist:

IhbYf9c2.jpeg


habe ich versucht eine art portfolio zu machen.
div boxen sehen so aus:
Code: 
<div style="background-image: url('http://'); width: 420px; float: left; height: 236px; margin: 30px; font-size: 70px;">City</div>
<div style="background-image: url('http://'); width: 420px; float: right; height: 236px; margin: 30px; font-size: 70px;">Wedding</div>

allerdings sieht das schrecklich aus dass der text einfach oben herumhängt. er sollte immer möglichst unten am bildrand stehen. ich habe es schon mit <p style="bottom: 0px>City</p> probiert, aber das hat nichts geholfen...

hat vielleicht jemand eine idee?
 
Werbung:
Hallo,

das p-Element anstatt des div-Elements ist schon mal ein guter Weg. Text sollte nie direkt innerhalb von div-Elementen stehen.

Probier mal das folgende Beispiel aus, das sollte direkt funktionieren:

Code: 
<p style="background-color: black; color: white; background-image: url(http://lorempixel.com/400/236/city); font-size: 70px; text-align: center; width: 400px; height: 236px; padding-top: 150px; margin: 15px;">City</p>
<p style="background-color: black; color: white; background-image: url(http://lorempixel.com/400/236/nature); font-size: 70px; text-align: center; width: 400px; height: 236px; padding-top: 150px; margin: 15px;">Landscape</p>

Gruss

MrMurphy
 
Werbung:
Hallo,

dann stimmt entweder dein genannten CSS nicht oder es greifen CSS-Anweisungen, die du uns hier vorenthälst. Ohne Link zur Seite kann man halt nur raten.

In diesem Fall scheint das Hintergrundbild kleiner als das p-Element zu sein.

Und du musst natürlich die Positionsangaben für das ehemalige div-Element auf das p-Element übertragen.

Gruss

MrMurphy
 
So sollte es klappen.
Code: 
p {
background:url(
http://www.metzlerp.com/wp-content/uploads/2015/04/DSC05530-420x280.jpg) no-repeat;
width:420px;
text-align:center;
padding:100px 0;
font-size:70px;
color:#fff;
}
 
Werbung:
Doch, es funktioniert. Du machst es nur falsch.

Aber hier eine adere Lösung.
Code: 
<!DOCTYPE html>
<html
><head>
<meta charset="UTF-8">
<title>Vertikal zentrieren mit :after oder :before</title>
<style>

.flickr {
margin:10px 6px;
display:inline-block;
text-align:center;
font-size:70px;
color:#fff;
}

.flickr:before {
content:"";
height:100%;
display:inline-block;
vertical-align:middle;
}

.flickr.h_280 {
width:420px;
height:280px;
}

.flickr.h_236 {
width:420px;
height:236px;
}
</style>
</head>

<body>
<p class="flickr" style="background:url(http://www.metzlerp.com/wp-content/uploads/2015/04/MG_0977-Bearbeitet1-420x236.jpg) no-repeat center #000;">City</p>
<p class="flickr" style="background:url(http://www.metzlerp.com/wp-content/uploads/2015/04/DSC05530-420x280.jpg) no-repeat center #000;">Landscape</p>
<p class="flickr" style="background:url(http://www.metzlerp.com/wp-content/uploads/2015/04/MG_09761-420x236.jpg) no-repeat center #000;">Animalsport</p>
<p class="flickr" style="background:url(http://www.metzlerp.com/wp-content/uploads/2015/04/MG_5257-420x280.jpg) no-repeat center #000;">Sport</p>
</body></html>

Du solltest dich aber auch einig werden.:)
 
Zuletzt bearbeitet:
Werbung:
Tabelle, muss das sein?
CSS
Code: 
#page-container .flickr {
 margin:0;
 padding:0;
 float:left;
 width:100%;
 list-style-type:none;
}

#page-container .flickr li {
 margin:0;
 padding-bottom:20px;
 display:inline-block;
 width:32%;
 list-style-type:none;
 color:#B99128;
}

#page-container .flickr a {
 display:block;
 margin-top:20px;
 padding:10px;
}

#page-container .flickr img {
 margin-bottom:20px;
 width:100%;
 display:block;
}

#page-container .flickr a:hover {
 background:#333;
 box-shadow:0px 0px 15px #000;
}

HTML
Code: 
<ul class="flickr">
<li><a href="http://www.metzlerp.com/hochzeit/"><img src="FOTOGRAFIE%20-%20PATRICK%20METZLER-Dateien/wedding.jpg" alt="" height="169" width="300">Hochzeit</a></li>
<li><a href="http://www.metzlerp.com/business/"><img src="FOTOGRAFIE%20-%20PATRICK%20METZLER-Dateien/business.jpg" alt="" height="169" width="300">Business</a></li>
<li><a href="http://www.metzlerp.com/paare/"><img src="FOTOGRAFIE%20-%20PATRICK%20METZLER-Dateien/couples.jpg" alt="" height="169" width="300">Paare</a></li>
<li><a href="http://www.metzlerp.com/stadt/"><img src="FOTOGRAFIE%20-%20PATRICK%20METZLER-Dateien/city.jpg" alt="" height="169" width="300">Stadt</a></li>
<li><a href="http://www.metzlerp.com/natur/"><img src="FOTOGRAFIE%20-%20PATRICK%20METZLER-Dateien/landscape.jpg" alt="" height="169" width="300">Natur</a></li>
<li><a href="http://www.metzlerp.com/sport/"><img src="FOTOGRAFIE%20-%20PATRICK%20METZLER-Dateien/sport.jpg" alt="" height="169" width="300">Sport</a></li>
<li><a href="http://www.metzlerp.com/kinder/"><img src="FOTOGRAFIE%20-%20PATRICK%20METZLER-Dateien/newborn.jpg" alt="" height="169" width="300">Babys & Kinder</a></li>
</ul>
 
Zuletzt bearbeitet:
auch das sieht völlig falsch aus:
aSykwtWX.jpeg


spricht ja eigentlich nichts dagegen es jetzt einfach in der tabelle zu lassen, immerhin funktioniert es
 
Werbung:
aber was genau hatte ich denn dann falsch gemacht, ich habe es doch nur kopiert und angepasst?
ich habe jetzt noch mal deinen quelltext kopiert und es hat funktioniert, vielen dank dafür!
nun sehen ja alle 3 möglichkeiten (liste, figur und tabelle) genau gleich aus. weshalb wird denn die tabelle eher kritisch betrachtet während figuren oder listen "anerkannter" sind?
 
Hallo

aber was genau hatte ich denn dann falsch gemacht
Zum Vergrößern anklicken....

Du hast nichts falsch gemacht. Das Problem hatte ich bereits angedeutet

oder es greifen CSS-Anweisungen
Zum Vergrößern anklicken....

Genau das ist hier der Fall. Auf deiner Webseite gibt es CSS-Anweisungen, die es bei uns nicht gibt und die unsere Lösungen "zerstören". Das können zum Beispiel line-height-Angaben, aber auch andere Angaben sein.

weshalb wird denn die tabelle eher kritisch betrachtet
Zum Vergrößern anklicken....

In HTML gibt es eine vorgegebene Semantik, die mit HTML5 noch einmal konkretisiert wurde.

Die Semantik ist für alle nicht optisch sichtbaren "Besucher" wichtig, damit sie die Seite richtig lesen können. Zum Beispiel Suchmaschinen und Screenreader. Deshalb sollte bereits beim Erstellen einer Webseite auf die korrekte Semantik berücksichtigt werden.

Außerdem können Tabellen auf responsive Webseiten meist nicht flexibel angepasst werden. Als Folge ist die Darstellung auf Smartphones oder Tablets miserabel.

Gruss

MrMurphy
 
ah ok, ich verstehe.
ich habe ja ein vorhandenes wordpress design genommen und dann manuell versucht allen schnickschnack rauszulöschen den ich nicht haben wollte. gäbe es denn eine möglichkeit nun einfach z.b. den quellcode von meinem jetzigen design zu kopieren damit wirklich gar kein "trash" von dem originalen design übrig bleibt?
wobei das vermutlich sehr schwer wird da die wordpress seiten ja immer aus vielen einzelteilen zusammengebaut werden (header, page, style, footer, function usw.)
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben