zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden CSS Anfänger Probleme

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.07.2016, 18:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.07.2016
Beiträge: 2
hadischvo befindet sich auf einem aufstrebenden Ast
Standard CSS Anfänger Probleme

Hallo Leute,

ich bin neu dabei und sag schon mal vor ab danke. Ich muss gleich zu Anfang erst mal gestehen, dass ich zum ersten Mal seit 7-8 Jahren wieder versuche eine Homepage zu bauen. Dementsprechend greife ich noch auf veraltete Methoden wie Tabellen etc. zurück. Ich versuche allerdings soviel wie möglich mit modular und mit css zu bauen. Leider habe ich Zeitdruck und keine Zeit mich erst mal ein paar Wochen hin zu setzen und css vernünftig zu lernen, daher bediene ich mich vieler Codeschnipsel die ich mir dann zurechtbiege.

Ich arbeite in einer Baumschule und wer Leute aus der Branche kennt, weiß dass es der Branche im allgemeinen sehr schlecht geht. Unsere aktuelle Homepage (www.heinje.com) ist einfach nur peinlich, daher dachte ich mir schlimmer kann es nicht werden Leider ist kein Budget dafür vorgesehen, daher dachte ich mir ich mache das mal selbst. (work in Progress Lehei GmbH - Heinje & Hohnholz Baumschulen - Rhododendron)

Jetzt stehe ich allerdings vor einem Problem dass ich gerade nicht gelöst bekomme und hoffe auf einen Tip.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.07.2016, 18:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.07.2016
Beiträge: 2
hadischvo befindet sich auf einem aufstrebenden Ast
Standard Problem

1.Problem:
Ich habe mir ein css Schnipsel für ein Menu mit Untermenus zurechtgebastelt und möchte über das Bild darunter einen Text legen. Wenn ich dies mache, verschwindet aber das Untermenu hinter dem Bild.

URL Problem: Lehei GmbH - Heinje & Hohnholz Baumschulen - Rhododendron

2.Problem:
Des Weiteren würde ich mir wünschen, dass der Obermenupunkt im onmouseover look bleibt wenn der Mauszeiger aufs untermenu wandert.

style css:

@charset "utf-8";
/* CSS Document */

* {
margin: 0px;
padding: 0px;
border: none;
}

html, body{
font: 100% Arial, Helvetica, sans-serif;
font-size:14px;
height:100%;
padding:0;
margin:0;
border:none;
table { border-collapse:collapse
}
}

input, textarea {
background-color :#F7F7F7;
border:solid 1px;
padding: 2px;
margin: 0px;
}

h1 {
font: 100% Arial, Helvetica, sans-serif;
font-size:18px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
color:#a9074d;
}

h2 {
font: 100% Arial, Helvetica, sans-serif;
font-size:100%;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
color:#a9074d;
}



#header {
font: 100% Arial, Helvetica, sans-serif;
color:#a9074d;
padding:0;
margin:0;
border:none;
align:center;
}


#footer {
font: 100% Arial, Helvetica, sans-serif;
color:#FFF;
padding:0;
margin:0;
border:none;
font-size:12px;
font-weight:bold;
align:center;
}
#footer a:link,
#footer a:visited {
color:#FFF;
text-decoration: none;
}
#footer a:hover {
color:#FFF;
text-decoration:underline;
}

#contentsitemap {
font: 100% Arial, Helvetica, sans-serif;
color:#000;
align:center;
}
#contentsitemap a:link,
#contentsitemap a:visited {
color:#000;
text-decoration: none;
}

#contentsitemap a:hover {
color:#a9074d;
text-decoration:underline;
}

#content {
font: 100% Arial, Helvetica, sans-serif;
color:#000;
align:center;
}
#content a:link,
#content a:visited {
color:#a9074d;
text-decoration: none;
}
#content a:hover {
color:#a9074d;
text-decoration:underline;
}


<!--
#contentteam {
font: 85% Arial, Helvetica, sans-serif;
color:#000;
}
#contentteam a:link,
#contentteam a:visited {
color:#a9074d;
text-decoration: none;
}
#contentteam a:hover {
color:#a9074d;
text-decoration:underline;
}


#menu {
font-size:14px;
position:absolute;
height:30;
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:125px;
text-align:center;
}
.topmenu ul{
display:none;
}
.topmenu a{
padding:6px 0px;
border:0px;
border-collapse:collapse;
color:#a9074d;
font-weight:bold;
text-decoration:none;
margin:0;
}
.submenu a{
padding:7px 0px;
border:1px solid:#FFF;
border-collapse:collapse;
color:#a9074d;
font-weight:bold;
text-decoration:none;
margin:0;
}
.submenu a{
font-size:12px;
width:125px;
position:relative;
clear:both; /* special IE6 */
color:white;
background-color:#a9074d
}
#menu a:hover, .topmenu.on a {
color:white;
background-color:#a9074d !important;
}
.topmenu:hover ul {
display:block;
z-index:500;
}

.bildmittext {
width: 1000px;
position: relative;
border: 0px;
}

.bildmittext img {
display: block;
}
.bildmittext span {

position: absolute;
bottom: 0;
width: 100%;
color:#FFFFFF;
font-weight:bold;
font-size:60px;
font-color: hsla(0, 0%, 100%, 0.5);
position: absolute;
padding-bottom:0;
padding-right:20px;
width: 100%;
text-align: right;
line-height: 1,5em;
text-shadow: 1px 1px 1px black,
1px -1px 1px black,
-1px 1px 1px black,
-1px -1px 1px black;
opacity: 0.75;
}

Navi:

<div id="menu">
<ul>

<li class="topmenu">
<a href="index.php">Home</a>
</li>

<li class="topmenu">
<a href="unternehmen.php">Unternehmen</a>
</li>

<li class="topmenu">
<a href="produktion.php">Produktion</a>
<ul>
<li class="submenu"><a href="labor.php">Labor</a></li>
<li class="submenu"><a href="jungpflanzen.php">Jungpflanzen</a></li>
<li class="submenu"><a href="container.php">Containerfläche</a></li>
<li class="submenu"><a href="freiland.php">Freiland</a></li>
</ul>
</li>

<li class="topmenu">
<a href="sortiment.php">Sortiment</a>
<ul>
<li class="submenu"><a href="hybriden.php">Rhododendron Hybriden</a></li>
<li class="submenu"><a href="yakushimanum.php">Rhododendron yakushimanum</a></li>
<li class="submenu"><a href="zwergformen.php">Rhododendron Zwergformen</a></li>
<li class="submenu"><a href="azalea.php">Knap-Hill Azaleen</a></li>
<li class="submenu"><a href="kalmia.php">Kalmia</a></li>
<li class="submenu"><a href="syringa.php">Syringa</a></li>
<li class="submenu"><a href="pieris.php">Pieris</a></li>
</ul>
</li>

<li class="topmenu">
<a href="marketing.php">Marketing</a>
<ul>
<li class="submenu"><a href="">folgt</a></li>
</ul>
</li>

<li class="topmenu">
<a href="service">Service</a>
<ul>
<li class="submenu"><a href="service_galabau.php">Service für den Garten- und Landschaftsbau</a></li>
<li class="submenu"><a href="gestaltung.php">Gestaltungsideen mit Rhododendron</a></li>
<li class="submenu"><a href="pflege.php">Rhododendron pflanzen & Pflege</a></li>
</ul>

<li class="topmenu">
<a href="kontakt.php">Kontakt</a>
<ul>
<li class="submenu"><a href="kontakt.php">Kontaktformular</a></li>
<li class="submenu"><a href="anfahrt.php">Anfahrt</a></li>
<li class="submenu"><a href="team.php">unser Team</a></li>
</ul>

<li class="topmenu">
<a href="impressum.php">Impressum</a>
</li>

</ul>
</div>


Quelltext Problem Nr.1 (Untermenu verschwindet hinter Bild mit Text)

Beispiel URL: Lehei GmbH - Heinje & Hohnholz Baumschulen - Rhododendron

<div id="header" align="center">
<table width="1000" border="0" align="center" valign="top">
<tr>
<td height="118"><?php
include ("header.php");
?></div></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td height="30" valign="top"><?php
include ("navi2.php");
?></td>
</tr>
<tr>
<td height="300" bgcolor="#a9074d" align="center" valign="center"><div class="bildmittext"><img src="IMG/header_unternehmen.jpg" width="998" height="298" /><span>Home</span></div></td>
</tr>
</table>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.07.2016, 08:06
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.650
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zuerst einmal würde ich versuchen sauberer zu arbeiten und den Code so weit wie möglich valide halten:
https://validator.w3.org/check?verbo...m%2Findex2.php
W3C CSS Validator results for http://www.heinje1798.com/index2.php (CSS level 2.1)

Als Doctype ist heute eigentlich nur HTML5 zu empfehlen. Alle anderen sind veraltet und vor allem XHTML macht keinen Sinn.

Eine Tabelle als Layoutelement ist auch nicht mehr up-to-date und in deinem Fall auch einfach zu vermeiden.

Dann tendierst du zu häufig dazu Größenangaben zu verwenden. HTML soll sich an den Darstellungsbereich anpassen, daher sollte man Größenanagben vermeiden oder relative benutzen.

Bei dir kommt noch dazu. dass du diese Angaben extrem im HTML Code vermischst, was du auf keinen Fall machen soltest. Alles was zum Layout gehört, gehört in den CSS Code und nicht in ein HTML Attribut.

Zitat:
Zitat von hadischvo Beitrag anzeigen
1.Problem:
Ich habe mir ein css Schnipsel für ein Menu mit Untermenus zurechtgebastelt und möchte über das Bild darunter einen Text legen. Wenn ich dies mache, verschwindet aber das Untermenu hinter dem Bild.
Das liegt auch an dem zuviel an CSS.

Ich frag mich wenn ich sowas sehe, immer wie so was entwickelt wird?
Du musst doch bemerkt haben, als das Untermenü plötzlich nicht mehr sichtbar war?
Und was du dann verändert hast?

Konkret sind die CSS Angaben der Klasse .bildmittetext komplett überflüssig, ich würde sogar sagen das ganze Element ist es.

Zitat:
Zitat von hadischvo Beitrag anzeigen
2.Problem:
Des Weiteren würde ich mir wünschen, dass der Obermenupunkt im onmouseover look bleibt wenn der Mauszeiger aufs untermenu wandert.
Das liegt daran, dass die Maus aus dem Element verschwindet, wenn es auf das Unermenu geht.

Ich würde mir aber Gedanken machen, ob sowas wirklich nötig ist?

Es sieht nicht so aus, als ob die Seite jemals viel Inhalt haben wird und je mehr Menüpunkte um so weniger ist auf den einzelnen Seiten. Dann sind so zappelnde Seitenelemente weder schön noch unbedingt benutzfreundlich.

Technisch gesehen ist die alte Seite besser: https://validator.w3.org/check?verbo...FProdukte.html
Wobei dort viele Element absolut positioniert sind, was auch nicht empfehlenswert ist. Aber wenn ich mir den Inhalt anschaue wäre es schon ausreichend optisch ein paar Ausbesserungen zu machen und vielleicht etwas mehr Wert auf die Fotos zu legen, ihr verkauft ja auch was für's Auge.

Also wenn du wirklich wenig Zeit und Wissen hast, wäre ein Überarbeitung des alten Codes vermutlich Effektiver, als den komplett neu zu bauen.
Mit Zitat antworten
Antwort

Stichwörter
css div class block

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
2 Probleme mit meinem CSS Design leibnitz CSS 15 08.05.2008 10:01
Probleme mit CSS heiska CSS 1 13.03.2008 12:49
CSS Probleme mit Imageflow Toe CSS 3 06.03.2008 11:59
CSS Layout: Probleme mit Mac IE und Safari daedalus CSS 16 13.06.2007 14:21
CSS Design Probleme Hawklan CSS 5 12.08.2004 11:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:59 Uhr.