shapes in CSS

veneue · 4. September 2014

Hallo zusammen,

ich bastle wieder etwas rum an meiner Webseite, jedoch bekomme ich das Problem mit dem position nicht in den Griff.

Ich habe drei parallelogramm erstellt unter dem header Bereich. Nun möchte ich das sie genau in der Mitte FIX im Header Bereich bleiben und etwas Abstand einander.

Viele Grüße
veneue

.para
{
width:290px;
height:30px;
background: yellow;
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
float:right;
position:absolute;
top:250px;
left:450px;

}

.para1
{
width:290px;
height:30px;
background: red;
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
float:right;
position:absolute;
top:450px;
left:750px;

}

.para2
{
width:290px;
height:30px;
background: darkblue;
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
position:absolute;
top:250px;
left:1080px;
}

wolf · 4. September 2014

Bist lang genug hier um zu wissen wie man Code ordentlich postet oder?
Den eigenen Code lesbar im Forum präsentieren

Weiterhin
Wie erstelle ich korrekt einen neuen Beitrag im CSS & CSS3 Forum - bitte vor dem Erstellen eines neuen Themas lesen!

Sorry aber das setzte ich für Hilfe vorraus. nh?

veneue · 5. September 2014

Hallo Wolf,

ja du hast recht, war gestern in Eile!

Gruß
veneue

wolf · 5. September 2014

dann verbessere es doch bitte?

veneue · 5. September 2014

Hi, hoffe das passt jetzt so

CSS

.para{				width:290px;				height:30px;				background: yellow;				transform: skew(-20deg);				-webkit-transform: skew(-20deg);				float:right;				position:absolute;				top:250px;				left:450px;								}	
.para1{				width:290px;				height:30px;				background: red;				transform: skew(-20deg);				-webkit-transform: skew(-20deg);				float:right;				position:absolute;				top:250px;				left:750px;								}	
.para2{				width:290px;				height:30px;				background: darkblue;				transform: skew(-20deg);				-webkit-transform: skew(-20deg);				position:absolute;				top:250px;				left:1050px;				}

wolf · 5. September 2014

Also, wenn du mit browserkürzeln wie (-webkit- , -moz- ) usw arbeitetst, dann kommt der eigentliche befehl ohne kürzel ganz am ende!
Der übersichtlichkeit halber würde ich nach dem : ein leerzeichen lassen!
Und irgendwas stimmt da bei dir noch nicht

Wofür zur hölle float + position absolute?

veneue · 5. September 2014

Hallo Wolf,

das was nicht stimmt ist mir klar! Habe noch keine Antwort gefunden, ich möchte das das Paralellogramm mittig ausgerichtet wird wie der h1 o. h2 bereich! Egal ob man das Fenster minimiert oder vergrößert!

Und mit float wollte ich die zwei anderen shapes nebeneinander setzen!

Viele Grüße
veneue

wolf · 5. September 2014

Du machst es dir viel zu schwer.
http://jsfiddle.net/t6z3tjte/1/

HTML

<div id="wrap">
    <div class="para" id="p1"></div>
    <div class="para" id="p2"></div>
    <div class="para" id="p3"></div>
</div>

CSS

.para{
    width: calc(33.3% - 10px);
    height: 30px;
    -webkit-transform: skew(-20deg);
    transform: skew(-20deg);
    margin: 0 5px;
    background-color: rgba(0,0,0, 1);
    float: left;
}
#p1{
    background-color: rgba(255,0,0, .5);
}
#p2{
    background-color: rgba(0,255,0, .5);
}
#p3{
    background-color: rgba(0,0,255, .5);
}
#wrap{
    margin: auto;
    width: 90%;
}

Alles anzeigen

veneue · 5. September 2014

Hallo Wolf,

super vielen Dank, ich habe noch eine Frage? Auf meiner Webseite werden durch den validator viele Fehler gelesen, wegen dem </br>, soll ich da lieber <li> benutzen?

Viele Grüße
veneue

lauras · 5. September 2014

Du solltest

HTML

<br><!-- oder --> 
<br />

verwenden,

HTML

</br>

ist falsch.

HTML

<li>

ist ausschließlich für Listenpunkte innerhalb von

HTML

<ol><!-- oder --> 
<ul>

veneue · 8. September 2014

Hallo lauras,

vielen Danke werde es gleich umsetzen und vielen Dank für die Unterstützung.

Grüße
veneue
Hallo zusammen,

ich habe noch eine Frage wegen den Meta-Daten.

Wenn ich meine Webseite durch den validator Jage bekomme ich ca. 18 Fehler hautsächlich zu meinen Meta-Daten.

No space between attributes/ Keyword date is not registered. zum Beispiel, habt ihr irgendwelche Tipps vielleicht.

Viele Grüße
veneue

wolf · 8. September 2014

Das was flasch ist ändern?

veneue · 8. September 2014

Hallo Wolf,

habe ich zum Teil gemacht, kann ich die Fehlermeldungen not registered ignorieren?

Gruß
veneue

The Scout · 8. September 2014

not registered heißt einfach, dass diese Metadaten nicht zum W3C Standard gehören. Meist sind das solche, die von Drittanbietern gestellt werden (ich glaube die Google Site ID ist sowas).

Im Zweifel sind es einfach unnötige Daten, die mitgesendet werden, ansonsten weiß das W3C nichts damit anzufangen, eventuelle Robots oder Spiders dafür schon.
Also, musst du wissen, ob etwas evtl. Unnötiges drin lassen willst.

veneue · 8. September 2014

Hallo Scout,

habe nun alle Fehlerhaften meta daten rausgenommen, werde weiterhin testen ob es irgendwelche Auswirkungen auf das SEO hat :-). Vielen Dank

Gruß
veneue

shapes in CSS

Jetzt mitmachen!

Teilen