Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

CSS Layout ändern

Mitglied: mike7050

mike7050 (Level 2) - Jetzt verbinden

09.05.2012 um 16:24 Uhr, 5241 Aufrufe, 1 Kommentar

Hallo,

habe folgendes Problem:

unter http://www.sguhl.info/test/index.htm habe ich eine Galerie wofür ich gerne das Layout ändern möchte.

Aus dieser Quelle habe ich das jetzige Layout und die Dateien etc.: http://leandrovieira.com/projects/jquery/lightbox/

Ich möchte nun das es so aussieht: http://www.ofd.niedersachsen.de/portal/live.php?navigation_id=17543& ...

Mein Quelltext der CSS sieht so aus s.u. wo müssten denn die Änderungen vorgenommen werden?

/**
*/
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #666666;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #666666;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}

Die index.htm sieht so aus:

<!DOCTYPE html PUBLIC " -W3CDTD XHTML 1. 1EN" "http:www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml;>"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery lightBox plugin</title>

<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />

<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->

<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
</head>

<body>

<h2 id="example">Example</h2>
<p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>
<div id="gallery">
<ul>
<li>
<a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
<img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
</a>
<li>
<a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
<img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
</a>
</li>
</ul>
</div>

</body>
</html>

Vielleicht kann mir ja jemand helfen bitte !

Gruß
Mike
Mitglied: -ahog-
10.05.2012 um 08:15 Uhr
Nimm doch lieber ein passendes Layout / Script und ändern die Größe, bevor du hier alles umschreibst...
z.B. http://www.tn3gallery.com/ oder http://coffeescripter.com/code/ad-gallery/#ad-image-0
Bitte warten ..
Ähnliche Inhalte
HTML

CSS 3 - "viewport" Kein gültiges CSS?

gelöst Frage von ukodusHTML2 Kommentare

Hey Leute, gerade hab ich den Code (@viewport { }) durch den CSS-Überprüfer ) durchgejagt und er entgegnete: "Einlese-Fehler ...

CSS

CSS Problem

gelöst Frage von michi1983CSS2 Kommentare

Hallo Admins, eventuell kann mir ja hier einer weiterhelfen, ich stehe offenbar auf der Leitung. Auf folgender Website (die ...

CSS

Hilfe bei CSS

gelöst Frage von emeriksCSS8 Kommentare

Hi, vorne weg: Bin in HTML und CSS nicht so die Leuchte. Ich will bloß ein paar Reports erstellen ...

Webentwicklung

Webprogrammierung mit schickem Layout

Frage von MasterSchlumpfWebentwicklung3 Kommentare

Hallo zusammen, ich bin gerade dabei mich in das Thema Webprogrammierung einzuarbeiten. Womit bzw. wie erstellt man diese schicken, ...

Neue Wissensbeiträge
Humor (lol)
IoT-Gefahr: Smartes Aquarium leckt!
Information von Lochkartenstanzer vor 2 TagenHumor (lol)3 Kommentare

Moin, Die IoT-Manie hat weitere Opfer gefunden. Ein Casino-Leck durch ein smartes Aquarium: Allerdings haben sie kein Wasser, sondern ...

Router & Routing

Alte Fritzbox 7270 mit VPN und SIP-Telefonie hinter O2 Homebox 6641 als "Modem"

Erfahrungsbericht von the-buccaneer vor 3 TagenRouter & Routing3 Kommentare

Nun war es soweit: Auch O2 hat mich mit VOIP zwangsbeglückt. Heute am Privatanschluss, in 2 Wochen ist das ...

Sicherheit

Ungepatchte Remote Code Execution-Lücke in LG NAS

Information von kgborn vor 3 TagenSicherheit

Nutzt wer LG NAS-Einheiten? In den NAS-Einheiten der LG Network Storage-Einheiten gibt es eine sehr unschöne Schwachstelle, die einen ...

Windows Update

Neue Version KB4099950 NIC Einstellungen gehen verloren

Information von sabines vor 4 TagenWindows Update2 Kommentare

Es ist eine neue Version des KB4099950 verfügbar, die das Problem mit den verlorenen Netzwerkeinstellungen lösen soll. Das Datum ...

Heiß diskutierte Inhalte
Netzwerkmanagement
Netzwerkmanagment im Haus mit Switch, Panel und pfsense
gelöst Frage von CorraggiounoNetzwerkmanagement19 Kommentare

hi zusammen, wir sind gerade dabei das ganze Haus bzw. die einzelnen Zimmer mit netzwerkdosen zu versorgen. Vom Keller ...

Netzwerkgrundlagen
VLAN - Offene Fragen
Frage von KnettenbrechNetzwerkgrundlagen17 Kommentare

Hallo zusammen, ich befasse mich derzeit mit dem Thema VLAN. Hierzu habe ich schon einige Guides gelesen, einschließlich des ...

Google Android
Empfehlung: Android Ortungsapp
gelöst Frage von certifiedit.netGoogle Android13 Kommentare

Guten Morgen, grundsätzlich vorweg, ich wollte mich eben schlau machen, bzgl einer Ortungsapp, welche Androidbasiert einem anderen Androidsmartphone mitteilt, ...

Router & Routing
VPN hinter zweiter Fritzbox nutzen im Nachbarhaus
gelöst Frage von georg2204Router & Routing11 Kommentare

Hallo zusammen, ich blicke hier leider nicht mehr so ganz durch. In Haus 1 steht eine Fritzbox 7390, diese ...