Antworten auf deine Fragen:
Neues Thema erstellen

hilfe css: hintergründe und positionen

tina777

zielstreber

Hallöle
Ja ich schon wieder :D
flicke immer noch an meiner seite herum und hab mittlerweile einiges über css gelesen. Allerdings check ichs trotzdem nich so richtig. Meine Seite soll zum Schluss so aussehen: ( Die weissen Boxen sollen allerdings noch halb durchsichtig werden)

nun habe ich versucht, das ganze über ein hintergrundbild und darüberliegenden boxen zu verwirklichen... tüftel jetzt schon ne ewigkeit dran rum aber weiss einfsch net was ich falsch mache.
In meiner Datei habe ich jetzt mal versucht, den news- Kasten und den grossen in der mitte zu machen, das sieht jetzt so aus:
wunderschön zu erkennen dass ich nicht schnall wie man die elemente richtig positioniert und wie ich meine weissen (halbdurchsichtigen) Bildchen in die einzelnen Hintergründe bringen kann
CSS sieht so aus:
Code:
#hintergrund                                                         
{font-family:Verdana, Arial, sans-serif ;                            
                                                                     
background-image: url(hintergrund2.png);                             
margin-top: auto;                                                    
height: 800px;                                                       
background-repeat: no-repeat;                                        
}                                                                    
                                                                     
  p                                                                  
  {                                                                  
     color: #808080;                                                 
     background-color: transparent                                   
 }                                                                   
                                                                     
#haupttext                                                           
{                                                                    
    width: 520px;                                                    
    height: 500px;                                                   
    position:absolute;left:600px ; top: 300px;                       
    background-image: url(haupttext.png);                            
                                                                     
}                                                                    
#news {                                                              
        width:180px;                                                 
        height:250px;                                                
        position: absolute; left:100px; top: 500px;                  
        background-image: url(news.png);                             
                                                                     
                                                                     
float: left;                                                         
}
Ich weiss das das ziemlich albern für euch is, aber bin echt noch ganz am Anfang...:(
Danke für eure Hilfe!!!
 

cebito

undefined

AW: hilfe css: hintergründe und positionen

Ohne HTML ist eine CSS meist sinnfrei. Aber gleich mal zu position, so, wie es aussehen soll ist position absolut nicht erforderlich. Stell das mal online, dann kann man dir am besten helfen.
 

tina777

zielstreber

AW: hilfe css: hintergründe und positionen

den html-code???
HTML:
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">                                                                                                                                                                                                                       
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">                                                                                                                                                                                                                                                           
             <head>                                                                                                                                                                                                                                                                                                           
                 <title>acustica-recording</title>                                                                                                                                                                                                                                                                            
                     <meta content="cyanplus" name="author">                                                                                                                                                                                                                                                                  
                     <meta content="Tonstudio; live-recording; recording; aufnehmen; eigene songs aufnehemen; " name="keywords">                                                                                                                                                                                              
                                                                                                       
                                                                                                                                                                                                           name="description">                                                                                                                      
                     <meta content="xxxxxxxxxxxxxxxxxxxx" name="robots">                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                                              
                 <link media="screen" type="text/css" href="acustica_style.css" rel="stylesheet">                                                                                                                                                                                                                             
             </head>                                                                                                                                                                                                                                                                                                          
   <body>                                                                                                                                                                                                                                                                                                                     
                                                                                                                                                                                                                                                                                                                              
   <div id="hintergrund">                                                                                                                                                                                                                                                                                                     
                                                                                                                                                                                                                                                                                                                              
        <div id="haupttext"><p>Ox sendium sil conter perrid fir ponis consum inat, terbi                                                                                                                                                                                                                                      
        pere nonsum actantusses? Ideo, ubliist andius, mo hos consil vilinatquam dii sulium,                                                                                                                                                                                                                                  
        Catum opori senti, neque duc tum sente facereo nem det; Casdact ampriost vidi iae consus,                                                                                                                                                                                                                             
        con videnatum diem, comnerorisse ipte ium publintem, consil vivid con tabemneque tuam tu vid                                                                                                                                                                                                                          
        Casdam iam auctem tat nonsuam te tia sulut viur hilicupio, noSciemus hor.</p></div>                                                                                                                                                                                                                                   
                                                                                                                                                                                                                                                                                                                              
        <div id="logo"></div>                                                                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                                                                                              
        <div id="shop"></div>                                                                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                                                                                              
        <div id="navigation"></div>                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                              
        <div id="news"><p>nioj kjoli &ouml;powjcdf kcbfkc JDBM jcbskfho nkdjhwnxsmk jakdoadh                                                                                                                                                                                                                                  
        dabkbdkakd dbkja njabdkdjbka kkadbkjbakjbsdk kajdbkabjdnd kfhobrfut mx kjhsofhjndks cjnvskbvfk</p></div>                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                              
        <div id="artikel"></div>                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                              
        <div id="kontakt"></div>                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                              
        <div id="fusszeile"></div>                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                              
   </div>                                                                                                                                                                                                                                                                                                                     
                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                                                                                                              
   </body>                                                                                                                                                                                                                                                                                                                    
   </html>
 

cebito

undefined

AW: hilfe css: hintergründe und positionen

Wie ich bereits sagte, stell doch einen Testcase online. Es ist immer sehr müßig das erst nachzubauen, zudem verfügen wir nicht über deine verwendeten Bilder.
 

cebito

undefined

AW: hilfe css: hintergründe und positionen

Du kannst deine Seite bspw. bei einem Freehoster oder auf deinem Webspace in einen Extraordner bspw. "test" oder "entwurf" hochladen und dann den Link hier posten.
 

tina777

zielstreber

AW: hilfe css: hintergründe und positionen

das hab ich alles noch nicht aber ich werds mal versuchen, damit ihr euch irgendwie reinfinden könnt...
die anbieter sagen mir alle das ich ne domain brauch um was hochladen zu können, aber ich wurschtel mich mal irgendwie durch... was bringt es euch wenn ich das mach???dass ihr den code besser sehen könnt oder wie?
 
Zuletzt bearbeitet:

simonpicos

Mod | Forum

AW: hilfe css: hintergründe und positionen

das hab ich alles noch nicht aber ich werds mal versuchen, damit ihr euch irgendwie reinfinden könnt...
die anbieter sagen mir alle das ich ne domain brauch um was hochladen zu können, aber ich wurschtel mich mal irgendwie durch... was bringt es euch wenn ich das mach???dass ihr den code besser sehen könnt oder wie?

http://www.bplaced.net/

Hier bekommst du alles.. In 2 Minuten angemeldet, Domain nach Wunsch, alles kostenlos.. Dann noch mit Filezilla die Daten hochladen, fertig :)

Aber mach dir keine Sorgen, ich hab am Anfang auch Monate gebraucht, bis ich das raushatte :D
 
D

dirtdiver2010

Guest

AW: hilfe css: hintergründe und positionen

was bringt es euch wenn ich das mach???dass ihr den code besser sehen könnt oder wie?

Dann sehen wir wie das alles aussieht direkt am Bildschirm. Wenn du uns nur deinen Code postest dann können wir das zwar nachbauen, werden aber nie zu deinem Ergebnis kommen da wir deine Bilder nicht besitzen die du in die Seite einbaust.

Zudem ist es wesentlich angenehmer wenn man bei der Fehlersuche/Hilfestellung z.B ein Tool wie Firebug einsetzen kann.
 

manfred_hst

Nicht mehr ganz neu hier

AW: hilfe css: hintergründe und positionen

hallo tina777,
versuche doch mal background-image: url(transparent.png), vielleicht geht das.
 

Gwanun

Nicht mehr ganz neu hier

AW: hilfe css: hintergründe und positionen

Hallo Tina,

also da reicht alleine CSS nicht aus, du must dir ein paar "DIV"-Container anlegen, diese dann mit den entsprechenden "padding", "margin" und "float" Einstellungen positionieren. Dabei stehen die Namen der DIV Container im HTML Text und in der CSS Datei, in der CSS Datei kannst du dann jedem DIV Container eine Hintergrundgrafik zuweisen, in deinem Fall ein weißes Rechtek 20% tranzparenz (oder weniger) als PNG oder JPG Datei.
Vieleicht konnte ich dir etwas weiterhelfen,

Gruß

Gwanun
 

Myhar

Hat es drauf

AW: hilfe css: hintergründe und positionen

Wie cebito schon sagte, brauchst du kein position:absolute für dieses Layout. Du kannst im CSS dem body deine Hintergrundgrafik zuweisen und den Rest dann mit einem dreispaltigem Layout umsetzen.
HTML:
body {background: url(hintergrund2.png) left top no-repeat;}
Das ist die Grundlage, auf der du aufbauen kannst. Und nimm bitte keine png für weiße Hintergründe, das kann man auch mit CSS lösen. Auch die transparenz lässt sich heute mittels CSS umsetzen (und nicht moderne Browser sehen dann eben eine weiße Fläche, was aber nicht so schlimm ist)
 

Walter75

Nicht mehr ganz neu hier

AW: hilfe css: hintergründe und positionen

Bringen würde es was wenn Du Deine Dateien(Ordner usw) packst und zB. bei o.ä. wie schon gesagt hochlädst und den Link postest. Dann können wir sie uns herunterladen und ansehen, den Code verändern, anpassen usw. und die Dateien gleichermaßen wieder hochladen und den Link posten.
 

simonpicos

Mod | Forum

AW: hilfe css: hintergründe und positionen

Bringen würde es was wenn Du Deine Dateien(Ordner usw) packst und zB. bei o.ä. wie schon gesagt hochlädst und den Link postest. Dann können wir sie uns herunterladen und ansehen, den Code verändern, anpassen usw. und die Dateien gleichermaßen wieder hochladen und den Link posten.

Was bringt uns das? Muss man erst alle Dateien runterladen, warscheinlich erst mal auf den verzögerten download warten, (gegebenenfalls entzippen), bla bla bla...

Die Dateien einfach, wie schon genannt bei bplaced, o.Ä. hochladen und Link posten
 

tina777

zielstreber

AW: hilfe css: hintergründe und positionen

hi leute,
sorry dass ich so lange weg war- danke für dir ratschläge. leider komm ich mit dem hochladen echt noch nicht zurecht, in dem fall werde ich das ganze vielleicht nochmal posten wenn ich geschnallt hab wie das geht^^ hab mir bis jetzt eig noch keine gedanken über das hochladen gemacht, die domain auf die die seite soll gibts ja schon, aber da is bisher ein 1und1 Template drauf, welches ich später-sollte es irgendwann mal zu der seite kommen-weg machen will und dafür meine seite einsetzen mag..ob und wie das klappt muss ich allerdings erstmal testen :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.527
Neuestes Mitglied
Christian Eidelloth
Oben