Beiträge von webdesignversuch

webdesignversuch

Hallo werte Designer!

"div id="navigation"" (blauer Hintergrund) macht zwei Probleme.
Verstehe den Abstand vor dem ersten Button (Home) nicht und bei "position: relative" reagiert right-Position wie links. Pickt nie bei "right:0px;" am rechten Rand (müsste vom "div id="wrapper"" kommen)
Bitte um Hilfe!
Danke!

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">


<title>Artist Marina Marina</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>


<body>


<div id="wrapper">


    <div id="puffer"></div>


    <div id="logo">
        <img src="fotos/logo.jpg" alt=""/>
    </div>


    <div id="navigation">
        <ul id="navi">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Thema 1</a></li>
            <li><a href="#">Thema 2</a></li>
            <li><a href="#">Termine</a></li>
            <li><a href="#">AGB</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </div>


    


    <div id="fotos">
        <div class="image-set">
            <a class="example-image-link, gal" href="fotos/foto_1o.jpg" data-lightbox="example-set" data-title="Wild flowers. 42cm x 31cm "><img class="example-image" src="fotos/foto_1m.jpg" alt="Foto1"></a>
            <a class="example-image-link, gal" href="fotos/foto_2o.jpg" data-lightbox="example-set" data-title="Summer harmony. 74xm x 57cm"><img class="example-image" src="fotos/foto_2m.jpg" alt="Foto2"></a>
            <a class="example-image-link, gal" href="fotos/foto_3o.jpg" data-lightbox="example-set" data-title="Lonely tree. 104cm x 79cm"><img class="example-image" src="fotos/foto_3m.jpg" alt="Foto3"></a>
            <a class="example-image-link, gal" href="fotos/foto_4o.jpg" data-lightbox="example-set" data-title="Landscape. 42cm x 31cm"><img class="example-image" src="fotos/foto_4m.jpg" alt="Foto1"></a>
        </div>   
    </div>


</div>

    <script src="css/lightbox-plus-jquery.js"></script>
</body>
</html>

Alles anzeigen

Zitat

* {
margin: 0;
padding: 0;
}

html {
font-size: 100%;
}

body {
background-color: #000000;
color: #FFFFFF;
}

#wrapper {
width: 70%;
margin-left: auto;
margin-right: auto;
}

#puffer {
height: 1.5rem;
width: 100%;
}

#logo {
width: 150px;
height: 112px;
}

#navigation {
background-color: blue;
width: 50rem;
/* height: 1.3rem; */
position: relative;
/* bottom: 0px; */
right: 0px;
}

.loeschen {
clear: both;
}

#navi {
text-align: right; /* Die Menüleiste wird zentriert */
}

#navi li {
list-style-type: none; /* Entfernen der Punkte der Listenelemente */
width: 6rem; /* Breite der Listenelemente */
text-align: center; /* Text wird im Block zentriert */
display: inline-block; /* Damit sich die Menüs wie Inline-Elemente verhalten können, für horizontale Menüs */
border-radius: 10px; /* Abrunden der Schaltflächen */
}

#navi li a {
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none; /* Unterstrich der Links wird weggenommen */
font-weight: bold; /* In Fettschrift */
display: block; /* Damit nicht nur der Text anklickbar ist, sondern die ganze Fläche = Schaltfläche */
}

#navi li:hover {
background-color: #DBDCDC;
}

#navi a:hover {
color: #000000;
}

.loeschen {
clear: both;
}

#fotos {
background-color: red;
width: 100%;
height: 20rem;
margin-top: 1rem;
}

.gal {
width: 23%; /* Dieser Kern wird mit 35% fürs Bild links reserviert */
float: left;
min-width: 200px;
margin: 0 1% 0 1%;
}

.gal img { /* Das Bild umfasst den kompletten Platz des Platzhalters */
width: 100%;
height: auto;
border: 4px solid #FFFFFF;
}

Alles anzeigen

webdesignversuch

Hab grad was gefunden. Wenn ich
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
im head eingebe, funktioniert es endlich.

webdesignversuch

Ich hab eine kleine Prüfung bald. Und uns wurde gesagt wir sollen es mit rem machen.
Aber so im Grunde genommen: Warum verkleinert sich meine Schrift trotzdem nicht?

webdesignversuch

Wenn ich das Browserfenster verkleire, sollte sich die Schriftgröße mitverändern, also kleiner werden. Beim Bild klappt es super, aber der Text will nicht.

webdesignversuch

Guten Abend!

Leider will und will sich die Schriftgröße nicht responsive verhalten.
Bevor ich weiter mache, muss ich dieses Problem im Griff haben.

Es geht einfach um den Text neben dem Bild.
id dafür ist home2, verpackt im div home0

Wo liegt der Fehler??
DANKE!

HTML

<!doctype html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Orbitron:500" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>xxx</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>


<body id="s_home">


    <div id="laender">                                        <!-- Länder-Auswahl, links oben -->
        <a href="index.html">DE</a>
        <a href="index_en.html">EN</a>
    </div>

     <div id="navigation">
        <ul id="nav">
            <li id="s1"><a href="s_home.html">Home</a></li>
            <li id="s2"><a href="s_person.html">Über mich</a></li>
            <li id="s3"><a href="s_vita.html">Vita</a></li>
            <li id="s4"><a href="s_showreel.html">Showreel</a></li>
            <li id="s5"><a href="s_galerie.html">Galerie</a></li>
            <li id="s6"><a href="s_news.html">News</a></li>
            <li id="s7"><a href="s_kontakt.html">Kontakt</a></li>            
        </ul>
    </div>


    <div id="home0">
        <div id="home1"><img src="fotos/schau_0.jpg" alt=""/></div>
        <div id="home2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
         natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
         quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus 
         ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum 
          semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem 
          ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean </div>
    </div>

    <div id="loeschen"></div>


</body>
</html>

Alles anzeigen

Code

/* CSS Document */
@import url("normalize.css");
@import url("font-awesome.min.css");


* {
    margin: 0;
    padding: 0;
}


html {
    font-size: 100%;
    font-family: Arial;
}


                                            /* Die Hintergrundfarbe. Jede Seite hat eigene id; kann daher extra angesteuert werden */
#start, #s_home, #s_person, #s_vita, #s_showreel, #s_galerie, #s_news, #s_kontakt {
    background-color: #871416;
    color: white;
}


a {                                            /* Allgemein alle Links ohne Unterstrich und alle weiß */
    text-decoration: none;    
    color: white;
}


#laender {                                    /* Die Sprachauswahl links oben platziert */
    background-color: black;                /* Wird aus dem Elementenfluss mit p:abs rausgenommen, verbleibt daher in der Menüzeile */
    position: absolute; 
    top: 0px;                                
    left: 0px;
}


#name {                                        /* div für den Namen */
    margin-top: 10rem;
/*    background-color: yellow;  */
}


#name p {                                    /* Text steht in einem p-tag */
    font-size: 3rem;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
}


#jobs {                                        /* div für die Jobarten */
    width: 13rem;
/*    background-color: red;  */
    margin: 8rem auto 0 auto;
}


#jobs p {                                    /* Dazugehöriger Text steht in einem p-tag */
    font-size: 1.5rem;
    font-family: 'Orbitron', sans-serif;
}


#navigation {                                /* Navigation steht als Erstes ganz oben, auf jeder Seite gleich */
    background-color: black;      
    width: 100%;
}


#nav {
    text-align: center;                 /* Die Menüleiste wird zentriert */
}


#nav li {
    list-style-type: none;              /* Entfernen der Punkte der Listenelemente */
    width: 8rem;                        /* Breite der Listenelemente */
    padding: 0px 5px 0px 5px; 
    text-align: center;                 /* Text wird im Block zentriert */
    display: inline-block;              /* Damit sich die Menüs wie Inline-Elemente verhalten können, für horizontale Menüs */
}


#nav li a {
    font-size: 1.2rem;
    color: #FFFFFF;
    text-decoration: none;              /* Unterstrich der Links wird weggenommen */
    font-weight: bold;                  /* In Fettschrift */
    display: block;                     /* Damit nicht nur der Text anklickbar ist, sondern die ganze Fläche = Schaltfläche */
}


#nav li:hover {
    background-color: #B85456;
}


                                        /* Der Kern der Seite, beeinhalten p-img-tag und p-Absatz-tag */
#home0 {                                    /* Den Kern zentriere ich auf 60% der Fensterbreite */
    width: 60%;                            
    margin: 5rem auto 0 auto;
}


#home1 {
    width: 35%;                            /* Dieser Kern wird mit 35% fürs Bild links reserviert */
    padding-right: 5%;                    /* Abstand zwischen Bild und umfließenden Text */
    float: left;
}


#home1 img {                            /* Das Bild umfasst den kompletten Platz des Platzhalters */
    width: 100%;
    height: auto;    
}


#home2 {
    font-size: 1.0rem;
}




#loeschen {
    clear: both;    
}








/* Damit die aktuelle Seite extra gekennzeichnet ist */


                                           /* Aktuelle Seite wird extra gekennzeichnet */
nav a:hover,                            /* body-id und die dazugehörige id im li-tag im nav-tag */
#s_home #s1 a,
#s_person #s2 a,
#s_vita #s3 a,
#s_showreel #s4 a,
#s_galerie #s5 a,
#s_news #s6 a,
#s_kontakt #s7 a {
    background-color: #B85456;
}


                                        /* Aktuelle Seite wird extra gekennzeichnet */
nav a:hover,                            /* body-id und die dazugehörige id im li-tag im nav-tag */
#d_home #d1 a,
#d_person #d2 a,
#d_vita #d3 a,
#d_auszuege #d4 a,
#d_news #d5 a,
#d_kontakt #d6 a {
    background-color: #B85456;
}

Alles anzeigen

Beiträge von webdesignversuch

div des Menüs reagiert nicht auf position

Schriftgröße will sich nicht responsive verhalten

Schriftgröße will sich nicht responsive verhalten

Schriftgröße will sich nicht responsive verhalten

Schriftgröße will sich nicht responsive verhalten