HTML - Leisten verscheiben / tauschen

edike10

Hallo!

Ich bin neu im Forum ich möchte mich kurz vorstellen:
Mein Name ist Eduard, ich komme aus Hannover und werde innerhalb der nächsten zwei bis drei Wochen ein Unternehmen gründen.

Aktuell arbeite ich noch an dem Webshop. Da ich jedoch nur HTML / CSS Grundkenntnisse aus der Berufsschule habe (was allerding schon ein paar Jahre her ist) und das Budget für einen ordentlichen Webdesginer fehlt, habe ich mich für ein Baukastensystem entschieden.

Meine Frage:
Auf folgender Webseite http://tinyurl.com/peg52xx möchte ich wie im angehängten Screenshot die Plätze der beiden Leisten tauschen.
Ich bekomme es einfach nicht hin. Kann sich bitte jemand den Quellcode ansehen und mir ein paar Lösungsansätze geben?

Generell würde ich gerne Stellungnahmen und Verbesserungsvorschläge zur Webseite hören. Die Seite ist noch etwas leer und das "gewisse Etwas" fehlt. Vielleicht kann ein erfahrener Webdesigner mir ein paar Tipps geben?

Vielen Dank für jeden Hinweis

Grevas

Da musst du wohl den Baukastenanbieter fragen. Mit dem header sieht das nicht nach einer Option aus. Ich bezweifle, dass du Quelltext direkt ändern kannst.

edike10

Zitat von Grevas

Da musst du wohl den Baukastenanbieter fragen. Mit dem header sieht das nicht nach einer Option aus. Ich bezweifle, dass du Quelltext direkt ändern kannst.

Doch, ich habe vollständigen Zugriff auf den Quelltext, kann alles bearbeiten und habe auch schon diverse Sachen geändert.
Bräuchte nur den Lösungsansatz, was genau ich im Quelltext andern muss.

Grevas

Einfach die 2x Divs miteinander vertauschen (inklusive Inhalt)
div.navigation.container & div.topnav

So als Tipp, schau dir die Entwicklertools von Firefox/Chrome an.
Ziel Html:

Code

<header><div class="navigation container">
        <div class="align">
          <ul class="burger">
            <img src="http://assets.webshopapp.com/el-note/hamburger.png?1" alt="Menu" height="32" width="32">
          </ul>
          <div class="vertical logo">
            <a href="http://www.el-note.de/" title="EL-NOTE">
              <img src="http://assets.webshopapp.com/el-note/logo.png?12" alt="EL-NOTE">
            </a>
          </div>
          <nav class="nonbounce desktop vertical">
            <form action="http://www.el-note.de/search/" method="get" id="formSearch">
              <input name="q" autocomplete="off" value="" type="text">
              <span onclick="$('#formSearch').submit();" title="Suchen" class="glyphicon glyphicon-search"></span>
            </form>            
            <ul>
              <li class="item home active">
                <a class="itemLink" href="http://www.el-note.de/">Startseite</a>
              </li>
                            <li class="item sub">
                <a class="itemLink" href="http://www.el-note.de/notebooks/" title="Notebooks">Notebooks</a>
                                <span class="glyphicon glyphicon-play"></span>
                <ul class="subnav">
                                    <li class="subitem">
                    <a class="subitemLink" href="http://www.el-note.de/notebooks/einsteiger-notebooks/" title="EINSTEIGER-NOTEBOOKS">EINSTEIGER-NOTEBOOKS</a>
                                      </li>
                                    <li class="subitem">
                    <a class="subitemLink" href="http://www.el-note.de/notebooks/nach-hersteller/" title="Nach HERSTELLER">Nach HERSTELLER</a>
                                        <ul class="subnav">
                                            <li class="subitem">
                        <a class="subitemLink" href="http://www.el-note.de/notebooks/nach-hersteller/hp/" title="HP">HP</a>
                      </li>
                                            <li class="subitem">
                        <a class="subitemLink" href="http://www.el-note.de/notebooks/nach-hersteller/lenovo/" title="LENOVO">LENOVO</a>
                      </li>
                                          </ul>
                                      </li>
                                  </ul>
                              </li>
                            <li class="item">
                <a class="itemLink" href="http://www.el-note.de/kontakt/" title="KONTAKT">KONTAKT</a>
                              </li>
                            <li class="item">
                <a class="itemLink" href="http://www.el-note.de/warum-gebraucht/" title="Warum Gebraucht?">Warum Gebraucht?</a>
                              </li>
                                                      </ul>
            <span class="glyphicon glyphicon-remove"></span>  
          </nav>
        </div>
      </div>
      <div class="topnav">
        <div class="container">
                    <div class="right">
            <a href="http://www.el-note.de/cart/" title="Ihr Warenkorb" class="cart"> 
              <span class="glyphicon glyphicon-shopping-cart"></span>
              0 Artikel - €0,00
            </a>
            <a href="https://el-note.webshopapp.com/account/?sid=a833948954d8b6d25056136c364d05351e90aec5227bdab5" title="Mein Konto" class="my-account">
              <span class="glyphicon glyphicon-user"></span>
                            Mein Konto / Kundenkonto anlegen
                          </a>
          </div>
        </div>
      </div>

    </header>

Alles anzeigen

Css:

Code

header, .topnav {
  border-bottom: none;
}

synaptic

grevas, hör auf wissen zu verbreiten

djheke

Ihr habt euch wohl lieb!?

Aber, ja es geht auch besser mit css.

Grevas

Zitat von djheke

Ihr habt euch wohl lieb!?

Aber, ja es geht auch besser mit css.

Ohne Markup zu ändern? Das was der Threadersteller wollte wohl kaum. Über positions das umzubiegen ist wohl zumindest kaum besser

Zitat von synaptic

grevas, hör auf wissen zu verbreiten

Okay okay, dann klugscheisse ich halt mal

Tags