Beiträge von djheke

djheke

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Logo</title>
<style>


* {
 margin:0;
 padding:0;
 text-decoration:none;
 box-sizing:border-box;
}
header {
 padding:50px 0 55px 0;
 background: linear-gradient(0deg, #000 33%,#333 100%);
}


header a {
 display:block;
 width:500px;
 height:90px
}
header img {
 width:100%;
 display:block;
}
</style> 
</head>
<body>
<header>
<a href="http://bo0m-gaming.com/ts3/createServer.php"><img src="http://bo0m-gaming.com/ts3/images/logo.png" alt="Logo"></a>
</header>
</body>
</html>

Alles anzeigen

djheke

#menu ul ul a, #menu ul li#current ul a {width: 280px;text-align: center;margin: 0;background: none;}
ul#topmenu li a {text-transform: uppercase;text-decoration: none;display: block;padding: 5px 10px;font-size: 14px;text-align:center}

djheke

Beschäftige Dich doch erst mit HTML5/CSS3. Weil, Dein HTML sieht schlimm aus. Hier mal ein Beispiel(Geht bestimmt noch besser)

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style>


* {
 margin:0;
 padding:0;
 text-decoration:none;
 box-sizing:border-box;
}




header {
 display:flex;
 background:#ead;
}


header img {
 flex-basis:100px;
}


header h1 {
 padding:17.5px;
}


nav {
 display:flex;
 background:#add;
}


nav a {
 flex:1;
 padding:10px;
} 


nav .en {
 text-align:right;
}
main {
 display:flex;
 background:#dea;
}


figure {
 margin:10px;
 padding:10px;
 border:1px solid #000;
 flex:1;
}


figure img {
 width:100%;
}


footer {
 padding:10px;
 background:#333;
 color:#fff;
}
</style> 
</head>
<body>
<header>
<img src="logo.png" alt="logo">
<h1>Meine Homepage</h1>
</header>


<nav>
<a href="start.html">Startseite</a>         
<a href="s2.html">seite2</a> 
<a href="s3.html">seite3</a> 
<a class="en" href="referenzen-eng.html"><img src="en.gif" alt="flag-gb"> </a> 
</nav>


<main>


<figure>
 <a href="#"><img src="bild1.jpg" alt="bild1"></a>
   <figcaption>TEXt bla bla</figcaption>
</figure>


<figure>
 <a href="#"><img src="bild1.jpg" alt="bild1"></a>
   <figcaption>TEXt bla bla</figcaption>
</figure>


<figure>
 <a href="#"><img src="bild1.jpg" alt="bild1"></a>
   <figcaption>TEXt bla bla</figcaption>
</figure>




<figure>
 <a href="#"><img src="bild1.jpg" alt="bild1"></a>
   <figcaption>TEXt bla bla</figcaption>
</figure>


</main>


<footer>Ende</footer>
</body>
</html>

Alles anzeigen

djheke

Code

.firstrow {
    width: 50%;
    float: left;
 }

djheke

copy/past geht doch gut und schnell.
beschreibung.pdf

djheke

Wenn du Text markierst, dann musst du diesen erst in einer Datei speichern und dann ausdrucken.

djheke

Na ja, wenn man die Mediaqueries richtig anwendet, sollte auch auf Smartphones nichts springen. Aber das sollte im Einzelfall entschieden werden.
irgendetwas ist ja immer.;-)

djheke

Also, damit die Seite nicht springt, würde ich width/height angeben. Somit weiß der Browser wie viel Platz er reservieren muss, bis die vollständige Seite geladen ist.

djheke

Na dein A-Element musst du zum Blockelement befördern.

nav a {
display:block;
}

HTML

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
<title>navi</title>
<style>
nav {
    background-color: rgba(0, 0, 0, 0.4);
    overflow:hidden;
}


nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
    text-transform: uppercase;
}


nav ul li {
    float: left;
}


nav a {
    padding: 24px 10px 24px 10px;
    border-left: 2px solid black;
    transition: 200ms;
    text-decoration: none;
    font-weight: 600;
    color: white
    display:block;
}


nav li:nth-of-type(1) a {
    border-left: none;
}


nav ul li:hover a {
    background-color: rgba(0, 0, 0, 0.6);
    border-left-color: orangered;;
}


</style>
</head> 
<body>
   <!-- Navigation -->
    <nav>
        <!-- Logo -->
        <img src="BILD" alt="Logo">








        <!-- Menü -->
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Über mich</a></li>
            <li><a href="#">Projekte</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</body>
</html>

Alles anzeigen

djheke

Nimm doch einfach den modifizierten Code von mir und alles ist gut. Reicht für den Anfang völlig aus.

djheke

Zitat von dadscho

Hey danke für die Antwort Eigentlich ist es absicht, dass die <li> in einem <a> steckt, sieht besser aus.
Wie kann ich das umgehen ohne die li's mit den a's zu tauschen?

Was sieht besser aus?

HTML

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
<title>navi</title>
<style>
nav {
    background-color: rgba(0, 0, 0, 0.4);
    height: 66px;
}




nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
    text-transform: uppercase;
}




nav ul li {
    float: left;
    padding: 24px 10px 24px 10px;
    border-left: 2px solid black;
    transition: 200ms;
}








nav li:nth-of-type(1) {
    border-left: none;
}




nav ul li:hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: orangered;
    border-left: 2px solid orangered;
}




nav ul a {
    text-decoration: none;
    font-weight: 600;
    color: white;
}
</style>
</head> 
<body>
   <!-- Navigation -->
    <nav>
        <!-- Logo -->
        <img src="BILD" alt="Logo">




        <!-- Menü -->
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Über mich</a></li>
            <li><a href="#">Projekte</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</body>
</html>

Alles anzeigen

djheke

Opacity wird ihm auch nich weiter helfen.

djheke

Was soll denn im Header für eine Farbe(Bild) angezeigt werden? Bei Transparent kommt die Hintergrundfarbe des umschließenden Container zum tragen.

djheke

Das sich die Überschrift aus dem Header bewegt, liegt zum Einen daran, dass die Außen und Innenabstände nicht auf Null gesetzt sind und dein Header eine feste Höhe hat.

Hier mal eine Korrektur mit der Schriftgröße 40px

Code

header {
 padding:10px;
 background:#0c9;
 width:100%;
 position:fixed;
}


header h1 {
 margin:0;
 padding:0;
 font-size:40px;
}
main {
 display:flex;
 padding-top:64px; /* 4 Pixel für die Ober- und Unterzüge*/
 box-sizing:border-box;
 min-height:100%;
}

Alles anzeigen

Was meinst Du mit Schrift direkt unter das obere Ende der Seite ohne den Abstand?

djheke

Na, hab ich dir doch hier #11 geschrieben, wie gas geht

djheke

Weil mit :target die URL manipuliert wird und mit :checked nicht. Prinzipell geht es aber auch mit :target. Nebenbei bemerkt, ist das gewünschte Vorhaben aus meiner Sicht sowieso Sinnfrei. Und wenn er es unbedingt haben möchte, wäre wohl JQuery die bessere Wahl

djheke

Na zeigt doch mal, was du schon hast.

djheke

Dein Footer musst du unterhalb des schließenden Main-Tag einfügen.

Code

</main>
<footer<h3>Mein Footer</h3></footer>
</body>

CSS

Code

footer {
 padding:10px;
 background:#ada;
}

Da du ja Inhalte auf deine Seiten haben wirst, solltset du die min-height:100% Angabe im main Selektorblock löschen.

Übrigens im Chrome, Opera und Chromium funktioniert alles ohne Präfixe. Allerdings unter Linux.

djheke

Ja für Windows den Notepad++. Normalerweise reicht auch ein normaler Texteditor aus.

djheke

Sorry, hätte ich wohl drauf achten sollen, die Präfixe zu benutzen. Wobei der Fehler wohl woanders liegen sollte.

Beiträge von djheke

PHP Image Verschieben

Anfängerfrage - Schrift in Main Menu mittig positionieren

in CSS eine klasse als ausnahme bei a:focus angeben

Galerie - Viel Whitespace bei Bilder in einer Galerie

Ebay - Artikelbeschreibung nicht vollständig ausdruckbar

Ebay - Artikelbeschreibung nicht vollständig ausdruckbar

bootstrap & img-responsive - Angabe der Bildgröße über size/width ja oder nein?

bootstrap & img-responsive - Angabe der Bildgröße über size/width ja oder nein?

Navigation :first-child problem

Navigation :first-child problem

Navigation :first-child problem

Bootstrap Header will nicht transparent werden

Bootstrap Header will nicht transparent werden

Erste eigene Website

Erste eigene Website

Div Slide Interaktion

css / html div-position

Erste eigene Website

Erste eigene Website

Erste eigene Website