Beiträge von djheke

djheke

Ersatz für DIV

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Border-Radius</title>
<style>


.box{
 width: 100%;
 max-width: 600px;
 margin: auto;
 border: 5px solid #234d65;
 border-radius: 10px;
 padding:0;
 background:#fff;
}


.box img {
 width:100%;
 border-radius:5px 5px 0 0;
}


.box figcaption {
 padding:10px;
}
</style>
</head>
<body>
 <figure class="box">
   <img src="bild1.png" width="500" height="281" alt="bild1">
   <figcaption>Bilsbeschreibung</figcaption>
  </figure>


</body>
</html>

Alles anzeigen

djheke

Du könntest deine Textdatei als html-Datei speichern und im Stylebereich dieser Datei deine Formatierungen notieren.

djheke

Code

.col-300 {
    width:31.914893617021%
}


.col-140,.col-220,.col-300,.col-380,.col-460,.col-540,.col-60,.col-620,.col-700,.col-780,.col-860 {
    display:inline;
    margin-right:2.127659574468%
}

Trotzdem breiter als 100%. Bei 4 Container.
Abgesehen davon, dass width und margin-right mehr als 33.334% sind, was aus meiner Sicht schlicht falsch ist.

Egal, hier die Lösung (In der style.css eintragen).

Code

#widgets img {
 width:100%;
}

djheke

Na, wenn
.col-300

300px bzw 33% bedeutet, kann es nicht gehen. Denn 4 x 33% sind mehr als 100%. Also eine Klasse nehmen die 25% entsricht.

djheke

Ein Hinweis in der Datenschutzerklärung reicht doch völlig aus. Oder? Und wer keine Cookies mag, sollte diese generell ablehnen.

djheke

Jetzt, wo er sich für ein CMS entschieden hat, war seine Frage sowieso überflussig.

djheke

So geht's auch ohne leere Div's #links, #rechts

HTML

<!DOCTYPE html>
<html>


<head>
<title>Ren&eacute; Scheibel | Leidenschaftliche Fotografie</title>


    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
<style>




 body {
   margin:0;
   padding:0;
   background:url(background_wood.jpg);


}
 
#navigation {
 margin:70px 0 20px 0;
 background:#000;
 width:100%;
 float:left;;
 text-align:center;
}


#navigation ul {
 margin:0 auto;
 padding:0;
 list-style:none;
 display:table;
 width:705px;
 background:url(bg_nav.jpg) top center;
}


#navigation ul li {
 margin:0;
 padding:0;
 float:left;  
}


#navigation a {
 display:block;
 width:135px;
 padding-top:20px;
 background:#000;
 margin-left:5px;
 color:#fff;
 text-decoration:none;
 text-align:right;
}


#navigation li:nth-child(5) a {
 margin-right:5px;
}


#content {
 margin:0 auto;
 clear:both;
 width:700px;
 background:#fff;
 min-height:300px;
 border:1px solid #000;
}
</style>


</head>




<body>




<div id="navigation">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT ME</a></li>
<li><a href="#">EQUIPMENT</a></li>
<li><a href="#">STORY</a></li>
<li><a href="#">GALLERY</a></li>
</ul>
</div>
<div id="content">
</div>




</body>
</html>

Alles anzeigen

djheke

Link zur Seite ist immer hilfreich. Ich gehe auch davon aus, dass das Problem irgendwo im Dokument liegt.

djheke

War nur ein Beispiel.

djheke

file_get_conents ist nur ein Beispiel. Der Inhalt kann auch direkt in einer Variablen geschroeben werden.
Mit preg_match hole ich nur den Inhalt vom ersten <pre>..</pre> Element der Seite.
Mit str_replace werden die Zeilenumbrüche durch <br> ersetzt und in $final gespeichert.
Tja, wer kein Javascript nutzt kann auch keine Fremdinhalte einbinden. Oder es wird eine Alternative angeboten.

djheke

Hm, nun ist er eingeschnappt. trtzdem mal eine Möglichkeit.

PHP

<?php
$inhalt=file_get_contents("http://www.gipspferd.de/CSS-Anleitungen/Navigation-horizontal-zentrieren");
preg_match("#<pre>(.*?)</pre>#s",$inhalt,$matches);
$final=str_replace("\n","<br>",$matches[1],$final);
?>
document.write('<?php echo $final;?>');

Aufruf aus einer Seite.

HTML

<!Doctype Html>
<html>


<head>
<meta charset="utf-8">
<title>Inhalte einbinden</title>


<style>
div {
 background:#eee;
 border:1px solid #000;
 padding:20px;
 overflow:auto;
}
</style>
 
 
</head>
<body>
<div>
 <script src="http://gipspferd.de/forumhilfe/inhalte-einbinden-lassen/inhalt.php" type="text/javascript"></script>
</div>
</body>
</html>

Alles anzeigen

djheke

Dann nimm einfach PHP, wenn vorhanden. ist relativ einfach umzusetzen.

djheke

Hier noch was Sinnfreies

HTML

<!Doctype Html>
<html>


<head>
<meta charset="utf-8">
<title>Sinnfreie CSS3 Spielerei</title>


<style>


nav {
 margin:0;
 padding:0;
 width:300px;
 height:300px;
 border:1px solid #000;
 float:left;
 position:relative;
 overflow:hidden;
}
ul {
 margin:0;
 padding:0;
 list-style:none;
 width:500px;
 height: 500px;
 background-color:#2EFEF7;
 transform:rotate(45deg);
 position:absolute;
 left:-100px;
 top:-100px;
}


li {
 list-style:none;
 width:250px;
 height:250px;
 float:left;
}


a {
 width:250px;
 height:250px;
 display:block;
 text-align:center;
 color:#ada;
}


a:hover {
 background:rgba(200,200,200,.5);
}


li:nth-child(1) b {
 float:left;
transform-origin:25%;
 transform:rotate(-45deg);
 position:relative;
 left:140px;
 top:150px;
 color:#000;
}


li:nth-child(2) b {
 float:left;
transform-origin:25%;
 transform:rotate(45deg);
 position:relative;
 left:60px;
 top:140px;
 color:#fff;
}


li:nth-child(4) b {
 float:left;
transform-origin:25%;
 transform:rotate(-45deg);
 position:relative;
 left:60px;
 top:90px;
 color:#000;
}


li:nth-child(3) b {
 float:left;
transform-origin:25%;
 transform:rotate(-135deg);
 position:relative;
 left:140px;
 top:80px;
 color:#fff;
}
li:nth-child(1) {
 background:yellow;
}
li:nth-child(2) {
 background:red;
}
li:nth-child(3) {
 background:blue;
}
li:nth-child(4) {
 background:orange;
}
</style>
 
 
</head>
<body>
<nav>
  <ul>
    <li><a href="#"><b>HOME</b></a></li>
    <li><a href="#"><b>ABOUT</b></a></li>
    <li><a href="#"><b>BLOG</b></a></li>
    <li><a href="#"><b>GALLERY</b></a></li>
    </ul>
</nav>
</body>
</html>

Alles anzeigen

djheke

Ein display:block für img ist völlig ausreichend.

djheke

Versuch es mal so.
<h1>Mein Name<span style="display:block;">photography</span></h1>
Sollten die Abstände zu groß ein, dann passe die Außen- und Innenabstäde an(margin,padding)-

djheke

Zitat von visitor

Hallo zusammen

Gibt es Möglichkeiten "verschwommene Inhalte" (z.B. Text) auf Websites sichtbar zu machen?

Danke und Gruss

visitor

Ja, nimm ein Putztuch und reiniege dein Display.

djheke

Wenn ich es richtig vestanden haben sollte, dann reicht es doch so.

Code

.serie {
 width: 80%; 
 margin: 0 auto;
 background:#eee;
}


img {
 display:block;
 margin:10px auto;
}

Alles anzeigen

Code

[COLOR=#000080]<section>[/COLOR]   

[COLOR=#000080]<p >[/COLOR]Skatepark[COLOR=#000080]</p>[/COLOR]                    
[COLOR=#800080]<img src=[COLOR=#0000FF]"pix/Lena_960x640.jpg"[/COLOR]>[/COLOR]     

[COLOR=#000080]</section>[/COLOR]     


               
[COLOR=#000080]<section>[/COLOR]    

[COLOR=#000080]<p>[/COLOR]Anna[COLOR=#000080]</p>[/COLOR]                    
[COLOR=#800080]<img src=[COLOR=#0000FF]"pix/Anna_DSC05796_rgb_1_3.jpg"[/COLOR]>[/COLOR]            
[COLOR=#800080]<img src=[COLOR=#0000FF]"pix/Anna_DSC05905_rgb_1_2.jpg"[/COLOR]>[/COLOR]            
[COLOR=#800080]<img src=[COLOR=#0000FF]"pix/Anna_DSC05940_rgb_1_4.jpg"[/COLOR]>[/COLOR]  

[COLOR=#000080]</section>[/COLOR]       
[COLOR=#000080]</div>[/COLOR]

Alles anzeigen

Oder betwas besser.

Code

.serie {
 width: 80%; 
 margin: 0 auto;
 background:#eee;
}


.hoch img {
 display:block;
 height:50%; /*  max 100% */
 max-width:100%;
 margin:10px auto;
}


.quer img {
 display:block;
 width:50%; /*  max 100% */
 margin:10px auto;
}

Alles anzeigen

Code

[COLOR=#000080]<section>[/COLOR]   

[COLOR=#000080]<p >[/COLOR]Skatepark[COLOR=#000080]</p>[/COLOR]                    
[COLOR=#800080]<figure class="quer"><img src=[COLOR=#0000FF]"pix/Lena_960x640.jpg"[/COLOR]>[/COLOR] </figure>    
 [COLOR=#000080]</section>[/COLOR]  
<section>
<p>Anna</p>
[COLOR=#800080]<figure class="hoch"><img src=[COLOR=#0000FF]"pix/Anna_DSC05796_rgb_1_3.jpg"[/COLOR]>[/COLOR][COLOR=#800080]</figure>[/COLOR]            
[COLOR=#800080][COLOR=#800080]<figure[/COLOR][/COLOR][COLOR=#800080][COLOR=#800080][COLOR=#800080] class="quer"[/COLOR]>[/COLOR]<img src=[COLOR=#0000FF]"pix/Anna_DSC05905_rgb_1_2.jpg"[/COLOR]>[/COLOR][COLOR=#800080]</figure>[/COLOR]            
[COLOR=#800080][COLOR=#800080]<figure[/COLOR][/COLOR][COLOR=#800080][COLOR=#800080][COLOR=#800080] class="hoch"[/COLOR]>[/COLOR]<img src=[COLOR=#0000FF]"pix/Anna_DSC05940_rgb_1_4.jpg"[/COLOR]>[/COLOR][COLOR=#800080]</figure>[/COLOR]  
</section>

Alles anzeigen

djheke

Na dann versuch doch mal dein thumbnail-content in post-content zu packen. Aber oberhalb von dein Berwertungs-Div und die Überschrift kommt gleich darunter. Bei thumpnail musst du display:block entfernen, oder durch display:inline-block ersetzen und ein unteren Außenabstand notieren. Hab's probiert und klappt.

djheke

Dann platzier doch dein Bewertungs-DIV neben <div class="post-thumbnail header">...</div>.

Code

.post-thumbnail {
    position: relative;
    width: 50%;
    margin: 0px 0px 0px 60px;
    float: left;
}


/* Div Bewertung inline Style*/
Element {
    border-style: solid;
    border-width: 3px;
    border-color: #1E73BE;
    background-color: #C0D3E2;
    text-align: center;
    padding: 5px 20px 0px;
    float: right;
 }


/h2 Überschrift inline-Style*/
Element {
    text-align: justify;
    clear: both;
}

Alles anzeigen

Sollte funktionieren.

djheke

Danke für dein Hinweis sysop. Ich kannte das bisher nur bei Systemanweisungen. Aber man lernt ja nie aus.

Beiträge von djheke

border um 2 divs

Hilfe bei HTML / CSS

Hilfe bei Wordpress Widget Ausrichtung

Hilfe bei Wordpress Widget Ausrichtung

Schablone für Cookie-Hinweise

DIV statt Tabelle, für horizontale Navigationsleiste

DIV statt Tabelle, für horizontale Navigationsleiste

Seite auf Fenstergröße begrenzen

Objekt von eigener Webseite zur Verfügung stellen

Objekt von eigener Webseite zur Verfügung stellen

Objekt von eigener Webseite zur Verfügung stellen

Objekt von eigener Webseite zur Verfügung stellen

Float bei geometrischen Formen

Liste funktioniert nicht <li>

HTML/CSS-Titel meiner Website

blurred content auf Websites sichtbar machen

Bilder zentrieren, wo liegt der Fehler???

div-Element positionieren

div-Element positionieren

Verschiedene Apostrophe bei SELECT GREATEST