Erstellen einer Webseite - Brauche Hilfe

Jump to last post
  • Thread Starter Thread Starter
  • #21
Könnt ihr mir nochmal helfen?

Ich will die beiden Bilder bzw. Links nebeneinander haben und nicht untereinander, wie lässt sich das machen?

Das ist der Code

[src=html4strict]<!DOCTYPE html>
<head>
<title>Title</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div id="header">
<a href="index.html"><img class="logo" src="images/logo.png" width="95" height="95" alt=""></a>
<ul class="navigation">
<li>
<a href="index.html">1</a>
</li>
<li>
<a href="about.html">2</a>
</li>
<li>
<a href="angebot.html">3</a>
</li>
<li class="active">
<a href="referenzen.html">4</a>
</li>
<li class="last">
<a href="kontakt.html">5</a>
</li>
</ul>
</div>
<div id="body">
<div class="content">
<div>
<ul class="section">
<li>
<h2><a>Überschrift</a></h2><br>
<p>
<h2><a href="URL1" title="Title1">
<img alt="Title1" src="images/test.jpg" width="300" height="424" /></a></h2>
<p>Bild anlicken zum PDF Download</p>
</p>
<h2><a>Überschrift 2</a></h2><br>
<p>
<h2><a href="URL2" title="Title2">
<img alt="Title2" src="images/test.jpg" width="300" height="424" /></a></h2>
<p>Bild anlicken zum PDF Download</p>
</p>
</li>
</ul>
</div>
</div>
<!-- End of Content-->
</div>
<div id="footer">
<span class="contact"><a href="mailto:info@webseite.de" >info@webseite.de</a> | <a href="tel:+4912345678" >+49 (0)12345678</a></span>
<span class="footnote"> © 2021. Alle Rechte vorbehalten. </span> </div>
</div>
</body>
</html>[/src]

[src=css]/** Website template by freewebsitetemplates.com **/
body {
margin:0;
padding:0;
background:url("../images/pattern.jpg");
line-height:25px;
}
a {
outline:0;
}
img {
border:0;
}
#page {
width:100%;
}
#page #header {
width:960px;
height:210px;
margin:0 auto;
text-align:center;
position:relative;
}
#page #header img.logo {
position:absolute;
left:25px;
top:40px;
}
#page #header img.logor {
position:absolute;
left:767px;
top:40px;
}
#page #header span {
position:absolute;
left:767px;
top:70px;
}
#page #header span h3 {
font-family:Arial;
color:#252823;
font-size:16px;
font-weight:normal;
margin:0;
height:37px;
}
#page #header span h2 {
color:#252823;
font-family:Arial;
font-size:20px;
margin:0;
text-shadow:0 0px 0 #ccc;
}
#page #header ul.navigation {
list-style-type:none;
margin:190px 0 0 0;
padding:1px 0 3px 0;
display:inline-block;
background:transparent url("../images/bg-menu-body.png");
background-repeat:repeat-x;
background-position:center;
height:38px;
line-height:44px;
border-style:solid;
border-top:none;
border-bottom:none;
border-color:#ffffff;
border-width:1px;
-moz-border-radius:10px;
border-radius:10px;
}
#page #header ul.navigation li {
float:left;
height:40px;
padding:0;
margin:0;
}
#page #header ul.navigation li.first:hover {
-moz-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
}
#page #header ul.navigation li.last:hover {
-moz-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
}
#page #header ul.navigation li a {
display:block;
text-decoration:none;
padding:0 20px;
font-family:Arial;
color:#646b60;
font-size:15px;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 1px 0 #ffffff;
}
#page #header ul.navigation li:hover {
background:transparent url("../images/bg-menu-li.png");
background-repeat:repeat-x;
}
#page #header ul.navigation li:hover a {
background:transparent url("../images/bg-menu-arrow-selected.png");
background-repeat:no-repeat;
background-position:top center;
color:#fff9ae;
text-shadow:1px 0 1px #787b5a;
}
#page #header ul.navigation li.active {
background:transparent url("../images/bg-menu-li.png");
background-repeat:repeat-x;
}
#page #header ul.navigation li.active a {
background:transparent url("../images/bg-menu-arrow-selected.png");
background-repeat:no-repeat;
background-position:top center;
color:#fff9ae;
text-shadow:1px 0 1px #787b5a;
}
#page #header ul.navigation li.first.active {
display:inline-block;
-moz-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
}
#page #header ul.navigation li.last.active {
display:inline-block;
-moz-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
}
#page #body {
width:960px;
margin:0 auto;
background:transparent url("../images/bg-featured-top-shadow.png");
background-repeat:no-repeat;
background-position:top center;
padding-top:9px;
}
#page #body #content {
width:960px;
margin:0 auto;
padding:0;
}
#page #body #content div#featured {
width:900px;
border-style:solid;
border-color:#fff799;
border-width:2px;
border-top:none;
border-right:none;
border-left:none;
background-color:#ffffff;
padding:50px 30px 30px 30px;
overflow:hidden;
}
#page #body #content div#featured h2,h3,h4,h5,h6 {
margin:0;
}
#page #body #content div#featured h2 {
font-family:Arial;
font-size:22px;
color:#3d4c33;
margin-top:20px;
width:460px;
}
#page #body #content div#featured h2 a {
text-decoration:none;
font-family:Arial;
font-size:21px;
color:#3d4c33;
line-height:43px;
font-weight:normal;
text-align:center;
letter-spacing:1px;
display:block;
}
#page #body #content div#featured h2 a span {
font-family:Arial;
font-size:31px;
color:#3d4c33;
letter-spacing: 2px;
}
#page #body #content div#featured a.readmore {
background:url("../images/interface.png") no-repeat scroll 0 -101px transparent;
display:block;
height:51px;
width:462px;
line-height:48px;
text-align:center;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:22px;
color:#533a10;
text-shadow:0 1px 0 #ffffff;
text-transform:uppercase;
}
#page #body #content div#featured a.readmore:hover {
background:url("../images/interface.png") no-repeat scroll 0 0 transparent;
}
#page #body #content div#featured a img {
float:right;
margin:0 10px;
}
#page #body #content div#featured p {
font-family:Arial;
font-size:14px;
color:#2e3b25;
line-height:30px;
text-align:justify;
width:460px;
}
#page #body #content div#featured p a {
font-family:Arial;
font-size:14px;
color:#2e3b25;
}
#page #body #content div#featured p a:hover {
font-family:Arial;
font-size:14px;
text-decoration:none;
}
#page #body #content div.articles {
width:960px;
height:237px;
background:transparent url("../images/bg-brown-round-bottom.png");
background-repeat:no-repeat;
background-position:bottom center;
padding-bottom:7px;
}
#page #body #content div.articles div {
background-color:#35271f;
width:940px;
height:237px;
padding:0 10px;
}
#page #body #content div.articles div h2, h3,h4,h5,h6 {
margin:0;
height:50px;
line-height:50px;
font-family:Arial;
font-size:22px;
color:#ffffff;
font-weight:normal;
text-transform:uppercase;
text-align:center;
}
#page #body #content div.articles div h2 {
background:url("../images/border-horizontal.jpg");
background-repeat:repeat-x;
background-position:bottom center;
margin-bottom:7px;
}
#page #body #content div.articles div ul {
list-style-type:none;
margin:0;
padding:0;
}
#page #body #content div.articles div ul li {
float:left;
width:280px;
padding:0 15px;
background:url("../images/border-vertical.jpg");
background-repeat:repeat-y;
background-position:left;
}
#page #body #content div.articles div ul li.first {
background-image:none;
}
#page #body #content div.articles div ul li h2,h3,h4,h5,h6 {
font-family:Arial;
font-size:18px;
font-weight:normal;
color:#c2c2c1;
background:none;
text-transform:none;
text-align:left;
}
#page #body #content div.articles div ul li h2 a {
text-decoration:none;
font-family:Arial;
font-size:18px;
font-weight:normal;
color:#c2c2c1;
}
#page #body #content div.articles div ul li h2 a:hover {
text-decoration:none;
font-family:Arial;
font-size:18px;
font-weight:normal;
color:#ffffff;
}
#page #body #content div.articles div ul li p {
font-family:Arial;
font-size:14px;
color:#726c66;
margin-top:0;
letter-spacing: 1px;
}
#page #body #content div.articles div ul li p a {
color:#726c66;
}
#page #body #content div.articles div ul li p a:hover {
color:#ffffff;
}
#page #body #content div.connect {
margin-top:40px;
height:60px;
width:960px;
background:url("../images/border.jpg");
background-repeat:repeat-x;
background-position:top;
}
#page #body #content div.connect div {
height:60px;
line-height:60px;
width:940px;
padding:0 10px;
background:url("../images/border.jpg");
background-repeat:repeat-x;
background-position:bottom;
}
#page #body #content div.connect div a.twitter {
background:url("../images/twitter-update.png");
background-repeat:repeat-x;
background-position:center center;
height:23px;
width:192px;
display:block;
text-decoration:none;
float:left;
margin:18px 20px 0 0;
}
#page #body #content div.connect div p {
font-family:Arial;
font-size:14px;
font-weight:normal;
color:#252823;
text-align:justify;
}
#page #body #content div.connect div p a {
font-family:Arial;
font-size:14px;
color:#252823;
}
#page #body #content div.connect div p a:hover {
font-family:Arial;
font-size:14px;
color:#033842;
}
#page #body #content div.connect div p a.user {
font-family:Arial;
font-size:14px;
color:#252823;
text-decoration:none;
}
#page #body #content div.connect div p a.user:hover {
color:#033842;
text-decoration:underline;
}
#page #body #content div.section {
width:960px;
margin-top:40px;
overflow:hidden;
}
#page #body #content div.section ul {
list-style-type:none;
margin:0;
padding:0;
}
#page #body #content div.section ul li.first {
width:610px;
height:300px;
float:left;
margin-right:40px;
background:url("../images/border.jpg");
background-repeat:repeat-x;
background-position:bottom;
}
#page #body #content div.section ul li.first h2 {
height:60px;
line-height:60px;
font-family:Helvetica;
font-size:24px;
color:#252823;
background:url("../images/border.jpg");
background-repeat:repeat-x;
background-position:bottom;
}
#page #body #content div.section ul li.first ul {
list-style-type:none;
margin:0;
padding:20px 0;
}
#page #body #content div.section ul li.first ul li a img {
float:left;
margin:0 10px 10px 0;
}
#page #body #content div.section ul li.first ul li p {
font-family:Arial;
font-size:14px;
color:#252823;
margin-top:0;
letter-spacing: 1px;
text-align:justify;
}
#page #body #content div.section ul li.first ul li p a {
font-family:Arial;
font-size:14px;
color:#343831;
}
#page #body #content div.section ul li.first ul li p a:hover {
color:#033842;
}
#page #body #content div.section ul li.first ul li p a.readmore {
text-decoration:none;
}
#page #body #content div.section ul li.first ul li p a.readmore:hover {
color:#033842;
}
#page #body #content div.section ul li.first ul li h2 {
font-family:Arial;
font-size:14px;
color:#252823;
background-image:none;
line-height:25px;
margin-bottom:0;
height:auto;
margin-top:0;
}
#page #body #content div.section ul li.first ul li h2 a {
font-family:Arial;
font-size:14px;
color:#252823;
text-decoration:none;
background-image:none;
font-weight:bold;
text-transform:uppercase;
line-height:25px;
}
#page #body #content div.section ul li.last {
height:300px;
width:310px;
float:left;
background:url("../images/border.jpg");
background-repeat:repeat-x;
background-position:bottom;
}
#page #body #content div.section ul li.last h2 {
height:60px;
line-height:60px;
font-family:Helvetica;
font-size:24px;
color:#252823;
background:url("../images/border.jpg");
background-repeat:repeat-x;
background-position:bottom;
}
#page #body #content div.section ul li.last ul {
list-style-type:none;
margin:0;
padding:20px 0;
}
#page #body #content div.section ul li.last ul li {
height:70px;
background-image:none;
margin:0;
}
#page #body #content div.section ul li.last ul li h2 {
background-image:none;
float:left;
height:20px;
line-height:20px;
margin:0;
text-align:center;
width:20px;
font-family:Arial;
font-size:12px;
color:#343831;
}
#page #body #content div.section ul li.last ul li h2 span {
float:left;
margin:0;
font-family:Arial;
font-size:22px;
font-weight:bold;
}
#page #body #content div.section ul li.last ul li span {
float:left;
height:auto;
margin:0;
}
#page #body #content div.section ul li.last ul li p {
float:right;
width:260px;
margin:0;
font-family:Arial;
font-size:14px;
}
#page #body #content div.section ul li.last ul li a {
float:right;
width:260px;
margin:0;
font-family:Arial;
font-size:14px;
text-decoration:none;
color:#252823;
}
#page #body #content div.section ul li.last ul li a:hover {
color:#033842;
text-decoration:underline;
}
#page #body div.content {
background:url("../images/bg-bottom-inner-content.png");
background-repeat:repeat-x;
background-position:bottom center;
padding-bottom:7px;
width:960px;
}
#page #body div.content div {
background-color:#ffffff;
overflow:hidden;
padding:80px 30px;
}
#page #body div.content div h1,h2,h3,h4,h5,h6 {
margin:0;
padding:0;
}
#page #body div.content div ul.section {
list-style-type:none;
margin:0;
padding:0;
}
#page #body div.content div ul.section li {
margin-bottom:30px;
}
#page #body div.content div ul.section li h2 {
font-family:Arial;
font-size:20px;
color:#252823;
font-weight:normal;
}
#page #body div.content div ul.section li h4 {
font-family:Arial;
font-size:14px;
color:#252823;
font-weight:normal;
margin:0;
padding:0;
height:35px;
text-transform:uppercase;
}
#page #body div.content div ul.section li h3 {
font-family:Arial;
font-size:14px;
color:#252823;
font-weight:normal;
margin:0;
padding:0;
height:35px;
}
#page #body div.content div ul.section li h2 a {
font-family:Arial;
font-size:20px;
color:#252823;
text-decoration:none;
font-weight:normal;
text-transform:uppercase;
}
#page #body div.content div ul.section li h2 a:hover {
color:#252823;
}
#page #body div.content div ul.section li p {
font-family:Arial;
font-size:14px;
color:#252823;
margin:10px 0 10px 0;
line-height:30px;
text-align:justify;
letter-spacing: 1px;
}
#page #body div.content div ul.section li p a {
font-family:Arial;
font-size:14px;
color:#252823;
margin:0 0 10px 0;
}
#page #body div.content div ul.section li p a:hover {
font-family:Arial;
font-size:14px;
color:#033842;
margin:0 0 10px 0;
}
#page #body div.content div ul.section li h5 {
margin:0;
height:35px;
}
#page #body div.content div ul.section li h5 a {
font-family:Arial;
font-size:16px;
color:#252823;
text-decoration:none;
text-transform:uppercase;
font-weight:normal;
}
#page #body div.content div ul.section li h5 a:hover {
font-family:Arial;
font-size:16px;
color:#252823;
text-decoration:none;
text-transform:uppercase;
font-weight:normal;
}
#page #body div.content div ul.section li h5 a span {
font-family:Arial;
font-size:16px;
color:#252823;
text-decoration:none;
text-transform:uppercase;
font-weight:normal;
}
#page #body div.content div ul.details {
list-style-type:none;
margin:0;
padding:0;
}
#page #body div.content div ul.details li {
margin-bottom:30px;
}
#page #body div.content div ul.details li h2 {
font-family:Arial;
font-size:16px;
color:#343831;
font-weight:bold;
text-transform:uppercase;
}
#page #body div.content div ul.details li h3 {
font-family:Arial;
font-size:14px;
color:#252823;
font-weight:normal;
margin:0;
height:40px;
letter-spacing:1px;
}
#page #body div.content div ul.details li span {
display:block;
font-family:Arial;
font-size:14px;
color:#252823;
letter-spacing:1px;
}
#page #body div.content div div {
width:630px;
float:left;
padding:0;
margin:0 30px 0 0;
}
#page #body div.content div div ul.section li p {
margin-bottom:40px;
color: #252823;
font-family: Arial;
font-size: 14px;
letter-spacing: 1px;
line-height: 30px;
text-align: justify;
}
#page #body div.content div div ul {
}
#page #body div.content div div.aside {
width:210px;
float:left;
}
#page #body div.content div div.aside h2 {
font-family:Arial;
font-size:14px;
color:#343831;
font-weight:normal;
text-transform:uppercase;
}
#page #body div.content div div.aside ul {
margin:10px 0 30px 0;
padding:0 0 0 18px;
color:#343831;
}
#page #body div.content div div.aside ul li a {
text-decoration:none;
font-family:Arial;
font-size:14px;
color:#252823;
letter-spacing:1px;
}
#page #body div.content div div.aside ul li a:hover {
text-decoration:none;
font-family:Arial;
font-size:14px;
color:#033842;
text-decoration:underline;
}
#page #footer {
width:960px;
margin:0 auto;
padding:30px 0;
height:50px;
line-height:50px;
}
#page #footer ul.connect {
margin:0;
padding:0;
list-style-type:none;
}
#page #footer ul.connect li {
float:left;
}
#page #footer ul.connect li a {
text-decoration:none;
display:block;
margin-right:10px;
}
#page #footer ul.connect li a.facebook {
background:url("../images/icon.png") no-repeat scroll 0 -97px transparent;
width:47px;
height:47px;
}
#page #footer ul.connect li a.facebook:hover {
background:url("../images/icon.png") no-repeat scroll 0 0 transparent;
}
#page #footer ul.connect li a.twitter {
background:url("../images/icon.png") no-repeat scroll 0 -485px transparent;
width:47px;
height:47px;
}
#page #footer ul.connect li a.twitter:hover {
background:url("../images/icon.png") no-repeat scroll 0 -388px transparent;
}
#page #footer ul.connect li a.googleplus {
background:url("../images/icon.png") no-repeat scroll 0 -291px transparent;
width:47px;
height:47px;
}
#page #footer ul.connect li a.googleplus:hover {
background:url("../images/icon.png") no-repeat scroll 0 -194px transparent;
}
#page #footer span.footnote {
float:right;
font-family:Arial;
font-size:14px;
color:#383f33;
}
#page #footer span.contact {
float:left;
font-family:Arial;
font-size:20px;
color:#383f33;
}
#page #footer span.footnote a {
text-decoration:none;
font-family:Arial;
font-size:14px;
color:#383f33;
}
#page #footer span.footnote a:hover {
color:#ffffff;
}[/src]

und so sieht es aus

You do not have permission to view link please Anmelden or Registrieren


Ich möchte es aber so nebeneinander

You do not have permission to view link please Anmelden or Registrieren


Was muss ich machen?
 
Sei doch so lieb und stell und bei so was mal codepen.io o.ä. zur Verfügung.

Sind das Übungsaufgaben für dich oder machen wir hier eigentlich deine Arbeit?

Auch falls das Übungsaufgaben sind, feste Pixelangaben sinds heutzutage eher nicht mehr so (mach das Ding mal an nem Smartphone auf).
Ein kleines css framework würde dir viel Arbeit abnehmen und auch das Problem mit der Bilderanordnung für alle Endgeräte lösen.
Das z.B.:
You do not have permission to view link please Anmelden or Registrieren


Eine Liste mit gängigen css frameworks findest du z.B. hier falls du was bestimmtes oder einfach nur Inspiration suchst:
You do not have permission to view link please Anmelden or Registrieren
 
Frameworks sind die Pest, da blickt man nämlich hinterher garnich mehr durch.

Was Du suchst ist entweder float oder die passende von mehreren display-Eigenschaften, die das lösen.
 
Naja so lightweight frameworks sind ja oft modular aufgebaut.
Der Lerneffekt ist natürlich größer wenn mans selbst macht.

Hier z.B. behielte man den Überblick noch gut, oder man pickt sich das raus was man braucht (halt nicht alle columns aber mai das sind jetzt keine megabyte :unknown:):
You do not have permission to view link please Anmelden or Registrieren

You do not have permission to view link please Anmelden or Registrieren
 
Ich denke das Problem ist oft das die Gefahr groß ist das man sich eben denkt "Das Framework kümmert sich schon um alles".
Ohne geprüft zu haben was das Framework tatsächlich macht (nicht nur auf css bezogen, viel schlimmer ist das bei js oder php etc.) Ob sich das Framework dann wirklich auch um sichere Zugriffe kümmert oder nur um "einfache".

Alles in allem sollte man sich damit nur die Arbeit erleichtern und nicht für jedes Projekt das Rad neu erfinden. Trotzdem aber verstehen können was gerade in solchen einfachen css-files genau steht und was es macht.

Wenn ich mir da die .css Datei von div. "Enterprise-Level Webanwendungen" anschaue... gut die werden zu 99% nur im LAN betrieben... aber da liefen dann 2-5MB css-Files mit drin und dafür zahlt man leider auch noch viel Geld.
 
Ja deswegen hab ich bewusst kein Bootstrap oder so empfohlen :)
Wobei man sich letzteres mittlerweile auch modular zusammenstellen kann.
Bin auch kein Fan von so Bloatware
 
  • Thread Starter Thread Starter
  • #27
Jaja, ich weiss, ich kanns nicht lassen, immerhin ist das ein alter Thread von mir, kein neuer, aber ich brauche da noch Hilfe.

You do not have permission to view link please Anmelden or Registrieren


ist erstmal soweit fertig.

Ich habe aber diese Zeile:

[src=html4strict]<head>
<title>Über - lauermann consult</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href="css/style.css" rel="stylesheet" type="text/css">[/src]

und die Favicon.ico liegt im Hauptordner

You do not have permission to view link please Anmelden or Registrieren
#

aber es taucht kein favicon auf!?

Was ist falsch?
 
Browsercache löschen.

Und die Blockabsätze auf der Seite sind hoffentlich ein Scherz.
 
Nee wird keins angezeigt. Lösch mal den Code, denn der ist eigentlich unnötig, denn Browser ziehen sich das Favicon automatisch, wenn es im Hauptordner liegt. Und dort ist es ja:
You do not have permission to view link please Anmelden or Registrieren
 
  • Thread Starter Thread Starter
  • #31
Jau Danke, klappt ohne den Code, das Ico hat nur keine Transparenz, muss ich eben machen.
 
Jepp, nun wird es angezeigt. Weniger ist manchmal mehr.
 
  • Thread Starter Thread Starter
  • #33
Hm, kann ich gerade OOTB mit W!0 dem _Ico die Tranparenz machen. Keine Grafiktool gerade vorhanden. oder kennt ihr einen online Ico Converter/Editor?

Edit: ok habe ich

Edit2 : Nein doch nicht :(
 
Zuletzt bearbeitet:
Ehrlich? Sieht scheiße aus.

Die 80er rufen gerade an und wollen ihren Style zurück.
 
Steev schrieb:
Kritik ist willkommen, [...]
Zum Vergrößern anklicken....

Was mir nicht gefällt, der ":hover" Style der Navigation, helles Gelb auf weißem Untergrund. Ich würde den "text-shadow" rausnehmen oder zumindest die Farbe für den Hover auf ein mittleres Grau oder etwas ähnlichem setzen. Mich persönlich stört der Blocksatz jetzt nicht unbedingt - aber ist auch irgendwie ne Glaubensfrage.

Edit: Ach ja, und die Farbe der Kontakt-Email und Telefon im Footer würde ich auch stylen, ähnlich wie die Navigation zum Beispiel. Das wirkt wie ein Fremdkörper in dem Blau.
 
Habs bisher nur am Smartphone gesehen und die Blockabsätze sehen übel aus.

Ist aber Geschmackssache und kommt auch auf die Größe des Displays an. Für mich geht das gar nicht. Wobei mich aber auch die ganze Seite nicht annähernd anspricht. Da ist vieles falsch umgesetzt.

Wenn ich bei "über mich" auf das Foto klicke werde ich zum Beispiel auf die Hauptseite geleitet. Sieht für mich zusammengeklickt aus.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben