[HTML] Runde Box

Dieses Thema im Forum "Programmieren allgemein" wurde erstellt von countryking, 07.11.2008.

  1. #1 countryking, 07.11.2008
    countryking

    countryking Mitglied

    Dabei seit:
    27.09.2008
    Beiträge:
    43
    Zustimmungen:
    0
    Hellooow,

    auch wenn das nicht unbedingt ein HTML Forum ist, vielleicht kann mir ja doch jemand helfen.

    Ich versuche schon seit geraumer Zeit einen abgerundetes Rechteck zu basteln.

    So zB :
    -als Kontentbox : http://www.centos.org/docs/5/html/yum/sn-managing-packages.html
    oder
    -als Menu-/Infobox (links oben, "unser Service"):
    http://www.trade-a-game.de/


    Ich habe es mit Tabellen versucht, bei der ich in die oberste Zeile einfach eine große (oder 2 kleine) abgerundete Grafik/en eingefügt habe. Allerdings konnte ich die Grafik nicht so platzieren, dass es nach was aussah.


    In erster Linie solls natürlich gut aussehen, wenn es aber noch einen etwas professionelleren Code beinhaltet, wäre es natürlich noch besser ;)

    Vielleicht kann mir dabei jemand helfen?


    Danke
     
  2. Anzeige

    Schau dir mal diese Kategorie an. Dort findest du bestimmt etwas.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren
  3. foexle

    foexle Kaiser

    Dabei seit:
    02.05.2007
    Beiträge:
    1.104
    Zustimmungen:
    0
    Ort:
    Saarbrücken
  4. sinn3r

    sinn3r Law & Order
    Moderator

    Dabei seit:
    28.12.2006
    Beiträge:
    2.764
    Zustimmungen:
    0
    Ort:
    Wentorf
    Wenn du dir den HTML-Code der Seite anschaust, siehst du ziemlich genau wie die das gemacht haben bzw. es gibt genug Tutorials fuer "runde" Ecken im Internet.

    Schau mal hier.
     
  5. #4 supersucker, 07.11.2008
    supersucker

    supersucker Foren Gott

    Dabei seit:
    21.02.2005
    Beiträge:
    3.873
    Zustimmungen:
    0
    Kurztipp noch:

    Lass bloß diesen Quatsch mit "Ich verwende Tabellen für Seitenlayout und Positionierung".

    Schreibe semantisches HTML. (noch besser natürlich XHTML)

    In deinem Fall: div-Tags + CSS zur Positionierung.
     
  6. #5 countryking, 07.11.2008
    countryking

    countryking Mitglied

    Dabei seit:
    27.09.2008
    Beiträge:
    43
    Zustimmungen:
    0
    Hallo,

    das Bsp. hab ich auch gefunden. Hast du das allerdings mal versucht umzusetzen?
    Nichts von einem Rechteck, oder seinen Ecken zu sehen ;)
     
  7. foexle

    foexle Kaiser

    Dabei seit:
    02.05.2007
    Beiträge:
    1.104
    Zustimmungen:
    0
    Ort:
    Saarbrücken
    du musst natürlich die pfadangaben auch anpassen zu den images und diese müssen vorhanden sein !
     
  8. #7 countryking, 07.11.2008
    countryking

    countryking Mitglied

    Dabei seit:
    27.09.2008
    Beiträge:
    43
    Zustimmungen:
    0
    Danke für die zahlreichen Antworten.
    Damit lässt sich bestimmt was schickes basteln ;)


    Tschüß'
     
  9. Anzeige

    Vielleicht findest du HIER Antworten.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren
  10. #8 c0re, 07.11.2008
    Zuletzt bearbeitet: 07.11.2008
    c0re

    c0re Debian Guy

    Dabei seit:
    09.02.2008
    Beiträge:
    79
    Zustimmungen:
    0
    Ort:
    Köln
    Hallo,

    Du könntest "-moz-border-radius" Verwenden allerdings spielt hier der Internet Explorer nicht mit.

    Code:
    <html>
    
    <head>
    
    <title>Runde Ecken</title>
    
    <style type="text/css">
    
    body {
    	margin: 0;
    }
    
    div#main {
    	position: relative; margin: 0 auto;
    	width: 50%; height: 50%;
    	margin-top: 15%;
    	-moz-border-radius: 10px;
    	border: 1px solid #000;
    }
    
    div#main p {
    	text-align: jusitfy;
    	width: 50%;
    	margin: 25% auto;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="main">
    <p>Ich bin ein Layer mit Runden Ecken. 
    Ich funktioniere aber leider nicht im Internet Explorer.</p>
    </div>
    
    </body>
    
    
    </html>
    
     
  11. #9 sim4000, 07.11.2008
    sim4000

    sim4000 Lebende Foren Legende

    Dabei seit:
    12.04.2006
    Beiträge:
    1.933
    Zustimmungen:
    0
    Ort:
    In meinem Zimmer
    Und dazu ist diese Option alles andere als W3C Konform.
    Einfach wie oben beschrieben Hintergrundbild mit Runden Ecken.

    Hab das bei mir mit zwei divs gemacht.
    Code:
    <div class='boxtitle_left'>Menu</div>
    <div class='boxcontent_left'>
       <p>blablabla<br>
            blablabla<br></p>
    </div>
    Und dann im CSS
    Code:
       div.boxtitle_left { background-image:url('../img/layout/box_top.png'); height:27px; width:187px; color:white; font-size:13px;
                      padding:2px 0px 0px 10px; float:left; }
       div.boxtitle_left[class] { width:178px; }
       div.boxcontent_left { background-color:#e5e5e5; background-image:url('../img/layout/box_bottom.png'); background-position:bottom;
                        background-repeat:no-repeat; padding:0px 0px 10px 5px; width:187px; float:left; margin:0px 0px 15px 0px; }
       div.boxcontent_left[class] { width:183px; }
    
    Sieht dann so aus, wie bei www.sim4000.de auf der linken Seite.
     
Thema:

[HTML] Runde Box

Die Seite wird geladen...

[HTML] Runde Box - Ähnliche Themen

  1. Python Softwareentwickler (Hintergrundentwicklung und Datenanalyse)

    Python Softwareentwickler (Hintergrundentwicklung und Datenanalyse): Stelle : Software-Entwickler Anzahl : 3 Standort : Manila(Die Philippinen) Dezhong Investment LTD. Unser internationales...
  2. Owncloud-Gründer Karlitschek verlässt sein Unternehmen

    Owncloud-Gründer Karlitschek verlässt sein Unternehmen: Frank Karlitschek, Entwickler von Owncloud und Gründer der Firma Owncloud Inc. verlässt mit sofortiger Wirkung sein eigenes Unternehmen...
  3. Projekt LibreELEC gegründet

    Projekt LibreELEC gegründet: Die meisten Entwickler der Multimedia-Distribution OpenELEC haben anscheinend das Projekt verlassen und LibreELEC ins Leben gerufen. Grund für den...
  4. Linux Foundation gründet FD.io-Projekt

    Linux Foundation gründet FD.io-Projekt: Schneller Datentransfer ist der Fokus des Fast Data (FD.io)-Projekts, das mehrere Firmen unter dem Dach der Linux Foundation gegründet haben....
  5. Debian-Gründer Ian Murdock verstorben

    Debian-Gründer Ian Murdock verstorben: Ian Murdock verstarb am 28. Dezember im Alter von 42 Jahren. Er war eine der einflussreichsten Persönlichkeiten im Umfeld freier Software....