Suche HTML-Tag: Leer und Größe in HTML definierbar (wie <img>)

[XInfinity]

Hi PSDler,

ich suche ein HTML-Tag, dem ich direkt in HTML eine feste Größe zuweisen kann (wie das <img>-Tag) und das auch leer sein kann.
Denn ich möchte diesem Tag über CSS einen Hintergrund zuweisen, den ich dann bei einem MouseOver ändern kann.
Für eine Navigationsleiste.

Ich hoffe, ihr könnt mir helfen, denn ich komm im Moment nicht weiter ...

lg XInfinity

 

[CrazyLopp]

AW: Suche HTML-Tag: Leer und Größe in HTML definierbar (wie <img>)

Irgendwie verstehe ich das nicht :uhm: aber egal

Du kannst im HTML mittelst style="" css Attribute verwenden, z.B.

<div style="width:980px;">
   Inhalt...
</div>

Jedoch kann man dies mittels einer id oder klasse auch sofort mit einer Css-Datei formatieren...

 

[XInfinity]

AW: Suche HTML-Tag: Leer und Größe in HTML definierbar (wie <img>)

Ersteinmal vielen Dank für deine Antwort.

Aber mit einem div-Tag habe ich das Problem, dass es mein ganzes Style zerschießt.
Also suche ich ein Platzhalter-Tag ...

Wenn es euch interessiert, hier könnt ihr euch meine Situation anschauen:

Ich habe im Moment in meinem Navigations-Div ein paar Bilder eingebunden, die mit float nebeneinander positioniert worden sind.
Da ich aber den Source-Link eines Bilder über CSS bei MouseOver nicht ändern kann, brauche ich etwas, das wie ein leeres img-Tag funktioniert und dem ich somit über CSS ein Hintergrund-Bild zuweisen kann, das sich dann bei MouseOver ändert.

Ich hoffe, ihr wisst jetzt, was ich meine.

lg XInfinity

 

[cebito]

AW: Suche HTML-Tag: Leer und Größe in HTML definierbar (wie <img>)

Ein leeres Tag für eine Navi, das dann bei Mouseover reagiert - seh ich keinen Sinn drin. Es sei denn, du erklärst es mal genauer, was du damit bezwecken willst. Größen im HTML (inline-Styles) festzulegen ist auch nicht das Gelbe vom Ei, wo du doch sowieso im CSS nen Hoverzustand definieren willst, dann kann die Größe des Elements auch dort festgelegt werden.

Im Übrigen lässt sich die Größe für alle Blockelemente bestimmen, solltest du ein Nicht-Blockelement benutzen, musst du für dieses explizit im CSS >>display:block;<< oder >>display:inline-block;<< notieren.

 

[Pixeltherapeutin]

AW: Suche HTML-Tag: Leer und Größe in HTML definierbar (wie <img>)

mach das navi doch als ungeordnete Liste aus deinen Links und in der CSS
die Links der Liste mit display:block, als Hintergrundbild das normale Button-Bild
und bei hover das "Hover-Button-Bild"

 

[CrazyLopp]

AW: Suche HTML-Tag: Leer und Größe in HTML definierbar (wie <img>)

Nur mal so als Beispiel wie man eine normale Navigation in einfachsten sinne erstellt...

<ul id="navi">
   <li><a href="#">Seite 1</a></li>
   <li><a href="#">Seite 1</a></li>
   <li><a href="#">Seite 1</a></li>
</ul>

So kannst du dann einfach das Hintergrundbild auf das a legen und auf das a wiederum mittels css ein hover - schwups aus fertig

 

[Pixeltherapeutin]

Oder so geht's auch, musst nur background-color:#FFF und #000
durch background-image: Pfad zu deinem Bild ersetzen. So ist nur Wechsel von schwarz auf weiß bei hover.

<div id="navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">WIP</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

#nav {
background-color: #000;
width: 960px;
padding: 0;
margin: 0;
float: left;
}
#nav ul {
background-color: transparent;
list-style-type: none;
}
#nav ul li {
padding: 0;
margin: 0;
float: left;
}
#nav ul li a{
background-color: #000;
color: #FFF;
display: block;
text-decoration: none;
height: 1%;
}
#nav a:hover, #nav a:focus {
background-color: #FFF;
color: #000;
}

Sorry, aber ich habe die Codewerkzeuge nicht mehr gefunden, da ist oben rechts nur
Rechtschreibprüfung, Verkleinern/-größern und Editor wechseln, aber sieht hier genau gleich aus... wo denn oben rechts?

 

[cebito]

AW: Suche HTML-Tag: Leer und Größe in HTML definierbar (wie <img>)

Sorry, aber ich habe die Codewerkzeuge nicht mehr gefunden, da ist oben rechts nur
Rechtschreibprüfung, Verkleinern/-größern und Editor wechseln, aber sieht hier genau gleich aus... wo denn oben rechts?

 

[owieortho]

AW: Suche HTML-Tag: Leer und Größe in HTML definierbar (wie <img>)

Ich habe zwar immer noch nicht genau verstanden, was Du damit exakt willst. Aber einen "Platzhalter" wäre so denkbar (und wegen IE mit JS):

div {
 width: 100px;
 height: 50px;
 background-color: #123456;
 }

<div onMouseover="this.style.backgroundColor='#345678';" onMouseout="this.style.backgroundColor='#123456'"></div>

 

[XInfinity]

AW: Suche HTML-Tag: Leer und Größe in HTML definierbar (wie <img>)

Vielen Dank für all eure Antworten.

Aber leider funktioniert nichts davon ...
Das Problem ist nämlich, wenn ich das ganze so mache, dann haben ja die a-Tags überhaupt keinen Inhalt, d. h. sie sind unendlich klein -> unsichtbar, also auch kein Hintergrund.
Deswegen möchte ich ja eine feste Größe schon im HTML-Code ohne Style-Einbindung definieren.
Somit weiß der Browser: "Aha, hier muss ich so viel Platz lassen" und danach kann diesem Platz dann ein Hintergrund (der im CSS definiert worden ist) zugewiesen werden.

Und das ist genau mein Problem ...

Habt ihr noch weitere Ideen?

lg XInfinity

P.S.: Achja, JavaScript möchte ich eigentlich nicht verwenden, da das doch zu viele Leute nicht aktiviert haben und die dann überhaupt keine Navi mehr hätten ...

 

[Shareef]

AW: Suche HTML-Tag: Leer und Größe in HTML definierbar (wie <img>)

Das Problem ist nämlich, wenn ich das ganze so mache, dann haben ja die a-Tags überhaupt keinen Inhalt, d. h. sie sind unendlich klein -> unsichtbar, also auch kein Hintergrund.
[...]

Deswegen wurde ja jetzt schon öfter erwähnt, dass du auch a-tags eine feste größe zuordnen kannst (wobei du hier beachten musst, dass du sie zuvor als "display:block;" definieren musst, da sie ja normal inline elemente sind - und damit ihre größe inhaltsbedingt ändern.)
Wenn sie nun dein Design zerschießen, musst du ihnen halt noch einen float zuweisen, damit sie schön nebeneinander angezeigt werden.

 

[XInfinity]

AW: Suche HTML-Tag: Leer und Größe in HTML definierbar (wie <img>)

Vielen Dank für deine Antwort.

Jetz weiß ich auch, was das Problem war:
Ich habe jedem Link eine ID gegeben, damit ich jedem Menüeintrag ein eigenes Bild zuweisen kann.
Aber leider hat der mir das nicht gefressen.
Jetzt wo ich alle über a anspreche funktionierts auch, aber leider hat dann jeder Menüpunkt das selbe Bild.

Wie kann ich denn jetzt jeden Link einzeln ansprechen?

EDIT: So jetzt gehts ... endlich ...
Und zwar mein Fehler war, dass ich id#home { ... } geschrieben habe, anstatt #home { ... }.
Keine Ahnung, warum es dann nicht mehr geht, aber jetzt passts ja.

Also nochmals vielen Dank an euch alle, ihr habt mir super geholfen!
Auch wenn ich zig Fehler reingebracht habe, und ich schon dachte, ihr könntet mir auch nicht helfen, obwohl ich schuld war ...
Ich war/bin wahrscheinlich einfach zu müde ...

lg XInfinity