Stylesheet setzt id nicht um

flobo182 · 20. Juni 2018

Liebe Community,

vielleicht bin ich in einem Thread völlig falsch unterwegs. Aber ich ersuche euch trotzdem um Hilfe.

Ich arbeite parallel zu Dreamweaver in Brackets für Mac und habe in meiner index.html einen Verweis zur styles2.css. In der HTML-Datei soll einfach ein Paragraph geschrieben werden und wird mit dem Attribut id="a" beschrieben. Dieses pflege ich in die CSS-Datei ein mit #a. Brackets färbt diese Bezeichnung allerdings rot ein und in der Live-Vorschau passiert nichts. Ich arbeite mich in das ganze Webdesign-Thema gerade erst ein und vielleicht habe ich etwas falsch verstanden, aber laut allen hilfreichen Seiten, wird das id-Attribut so umgesetzt.

Was ist der Fehler?

LG Flo

basti1012 · 20. Juni 2018

so ganz verstehen tue ich das nicht. Di bindest eine style.css über id="#a" ein ?

Css bindet normalerweise so ein

Code

<link type="text/css" rel="stylesheet" href="styles2.css" />

Zeig mal den Code dazu wovon du redes

flobo182 · 20. Juni 2018

Nein, ich gebe dem <p> Tag einfach nur eine id mit

Code

<p id="a">bla bla</p>

und klassifiziere diese dann im Stylesheet mit

Code

#a { 
    margin-top: 30px;
}

Da hab ich mich wohl nicht klar genug ausgedrückt, sorry...

basti1012 · 20. Juni 2018

ja ist ja richtig.Wenn du jetzt die Css so eingebunden wie ich geschrieben habe sollte es gehn. Oder wo hast du die Css angaben stehen ?

flobo182 · 20. Juni 2018

So gestaltet sich der "Kopf" meiner HTML-Datei:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BACK TO BASE X | HOME</title>
<link type="text/css" rel="stylesheet" href="styles2.css" />

Und dennoch ändern sich die Abstände nicht...

basti1012 · 20. Juni 2018

sieht gut aus. Stimmt der pfad zur css Datei ?

Wenn ja dann zeig mal den Css wo du den Link den Styls gibst und den HTML Teil.

Hast du das Schon Online und Link zur Seite?

flobo182 · 20. Juni 2018

Ich habe das eigentlich alles in einem Ordner. Also index und styles. Der Pfad müsste also passen.

Was meinst du genau? Die betreffenden Stellen in beiden Dateien hab ich ja bereits hier reingeposted. Ich habe auch bis jetzt nur etwas rumexperimentiert. Die Seite habe ich auch noch nicht online, da fehlt noch zu viel und die Ideen, die ich habe, lassen sich bisher nur geringfügig umsetzen. Ich kann dir die Dateien mal schicken oder was brauchst du noch?

basti1012 · 20. Juni 2018

Ich gehe mal von aus das du die css für dein style irgendwo nochmal überschrieben wird . Also das du zb an Anfang der Css den p eine rote farbe gibst und weiter unten dann eine blaue Farbe. Also ist es Blau ,weil die Css von oben nach unten gelesen wird.

Ist dein Code groß? wenn es nicht groß ist dann poste den Code der Css und von html.

m.scatello · 20. Juni 2018

Zitat von flobo182

Die Seite habe ich auch noch nicht online

Dann ändere das, zur Not bei einem Freehoster.

flobo182 · 21. Juni 2018

Zitat von basti1012

Ich gehe mal von aus das du die css für dein style irgendwo nochmal überschrieben wird . Also das du zb an Anfang der Css den p eine rote farbe gibst und weiter unten dann eine blaue Farbe. Also ist es Blau ,weil die Css von oben nach unten gelesen wird.

Ist dein Code groß? wenn es nicht groß ist dann poste den Code der Css und von html.

Und erneut haben wir aneinander vorbeigeschrieben haha

Mein CSS sieht auf der Seite, um die es geht so aus:

styles2.css

Mein Code ist nicht groß. Viel ist ja wie gesagt noch nicht passiert.

Zitat von m.scatello

Dann ändere das, zur Not bei einem Freehoster.

Was wäre denn deine Empfehlung für einen Freehoster? Hab mal fix gegoogled, aber tausend Ergebnisse bekommen, aus denen ich nicht so recht schlau werde, weil das Angebot einfach zu groß ist...

m.scatello · 21. Juni 2018

Zitat von flobo182

Was wäre denn deine Empfehlung für einen Freehoster?

Zum Testen würde ich bplaced nehmen

basti1012 · 21. Juni 2018

Ich kriege deinen Link nicht auf.Da dein Code ja nicht groß ist dann poste ihn Komplett .Css und Html und wenn da js auch ist dann das auch,weil irgendwo muß ja was sein das die Styls nicht angenommen werden

Stef · 21. Juni 2018

Hey,

flobo182 : Bitte füge deinen Code in die entsprechenden Code Tags (</>) direkt hier im Forum ein! Vielen Dank.

Grüße,

Stef

flobo182 · 21. Juni 2018

Also gut, nicht erschrecken, ist kein Meisterwerk...

HTML:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BACK TO BASE X | HOME</title>
<link type="text/css" rel="stylesheet" href="styles2.css" />
    <!--GOOGLE FONTS (https://fonts.google.com/)-->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
</head>

<body>
    <header>
        <nav>
             <ul>
                <li><a href="#">SHOP</a></li>
                <li><a href="#">OUR STORY</a></li>
                <li><a href="#">CONTACT</a></li>
              </ul>
        </nav>
        <div class="header">
            <a href="index1.html"><img src="images/logo-only.png" alt="logo" /></a>
        <h1>BACK TO BASE X</h1>
        </div>
    </header>
    <main>
        
        <p id="a">WE ARE BTBX!
        <hr>
            Ein prasselnder Gesangsregen, harmonisch sprühende Gitarrenklänge, tiefpumpende Basstöne und            ein explodierender Donner von Schlägen auf ein Drumset...
        </p>
    
    </main>
    
    
    
    <footer>
        
    </footer>

</body>
</html>

Alles anzeigen

Und CSS:

Code

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

.header img {
    float: left;
    width: 100px;
    height: 100px;
}

.header h1 {
    position: relative;
    top: 30px;
    left: 10px;
    color: #006738;
    font-family: raleway; sans-serif
    
#a {
    margin-top: 50px;
    }
    
body {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

nav {
    float: right;
    padding-right: 20px;    
}

nav ul li {
    list-style-type: none;
    padding-left: 20px;
    text-align: right;
}

nav ul li a {
    text-decoration: none;
    color: #2BA273;
}

Alles anzeigen

olaf2500 · 21. Juni 2018

Dir fehlt eine Klammer zu } vor #a, also .header h1 wird nicht geschlossen

basti1012 · 21. Juni 2018

siehst du und schon kann ich dir sagen das in der Css ene Klammer fehlt und deshalb nicht geht.

und das

Code

font-family: raleway; sans-serif

solltest du auch noch bearbeiten

flobo182 · 21. Juni 2018

Oh Mann, wie peinlich, haha ich danke euch allen ganz herzlich. Hätte ich auch selbst drauf kommen können, wenn ich die Augen aufgemacht hätte!! Ich freue mich über die schnelle und freundliche Hilfe und hoffe, dass ich von euch malm wieder Unterstützung bekomme. Sollte ich euch im Hinblick auf Grafik und Videoproduktion helfen können, sagt Bescheid. Da bin ich nämlich nicht so grün hinter den Ohren :b

basti1012 · 21. Juni 2018

Kann passieren.Das ist jeden schon mal passiert das irgendwo eine Klammer fehlt oder zu viel gesetzt wurde. Auch Kommas und co werden oft mal vergessen oder zu viel gesetzt.

Hast du im Browser keine Fehlerkonsole ?

Weil die hätte dir wahrscheinlich ein Fehler gemeldet mit den du den Fehler gefunden hättest.

Stylesheet setzt id nicht um

Jetzt mitmachen!

Teilen

Tags