• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Abstand zwischen boxen

P

picturesworld

Neues Mitglied
Hallo liebe community,

ich habe eine Frage zu einem vorhandenen Problem mit meinen kleinen galerieboxen.

Und zwar habe ich 4 kleine boxen nebeneinander. Das selbe noch zwei mal darunter.
Wie bekomme ich zwischen den boxen einen horizontalen abstand hin?
Hier mal die seite, um was es geht.
Ihr Homepagetitel

würde mich freuen einen tip zu bekommen. bei self-hatml habe ich bereits gesucht und bin eigentlich auf das "<br> und <p> gestoßen. klappt aber leider nicht.

Lg
picturesworld
 
das geht mit margin-bottom. gibst einfach den ersten 8 boxen die selbe klasse und setzt magrin-bottom auf meinetwegen 10px
 
Hallo mustang,

erstmal danke für deine reaktion auf menen Beitrag!

Nun zu meinem Anliegen. Für mich als mehr oder weniger Laie hört sich dass schon kompliziert an.
Wo muss ich dass ändern? Da steht recht viel in der css datei und ist sehr verwirrend :-/.

Daher lasse ich mal dieses css datei hier. Ich blick da leider garnicht durch. Wird auch die html-
datei benötigt? Ich habe meine internetseite bei npage. Un da ist das irgendwie getrennt.

LG PW

html, body, h1, h2, h3, h4 {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0;
}
a {
color: #464544;
}
a:hover {
color: #FFA405;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}

body {
background: #C89C52 url(http://i55.tinypic.com/sbhbv8.jpg) repeat-x;
text-align: center;
font: 11px arial, sans-serif;
color: #E5D19C;
padding: 20px 0 0 0;
}

/** layout **/
#wrapper {
text-align: left;
margin: auto;
width: 900px;
position: relative;
}

/** header **/
#header {
padding-top: 1px;
}
#header h1 {
font: 32px "Times new roman", serif;
font-weight: normal;
position: absolute;
left: 0;
top: 35px;
color: #F2CD91;
padding: 0 0 0 0.7em;
margin: -1em 0 0 0;
line-height: 1;
}
#nav-top {
margin-left: 503px;
}
#nav-top ul {
margin: 1em 0 0 0;
padding: 0;
height: 31px;
}
#nav-top li {
float: left;
background: #C19855 url( http://file1.npage.de/009238/11/bilder/tab_left.gif) no-repeat;
list-style: none;
text-align: center;
font: 18px "Times new roman", serif;
height: 31px;
line-height: 31px;
}
#nav-top li div {
background: top right url(http://file1.npage.de/009238/11/bilder/tab_right.gif) no-repeat;
}
#nav-top li#tab-faq {
width: 59px;
}
#nav-top li#tab-map {
width: 99px;
margin-left: 3px;
}
#nav-top a {
color: #443816;
text-decoration: none;
}
#nav-top a:hover {
color: #241D0A;
}

#nav {
padding-top: 326px;
background: url(http://i55.tinypic.com/snnmdc.jpg) no-repeat;
}
#nav ul {
margin: 0;
padding: 0;
height: 36px;
line-height: 36px;
border-left: 2px solid #9E9479;
background: bottom left url(http://file1.npage.de/009238/11/bilder/nav_lit.gif) repeat-x;
}
#nav li {
list-style: none;
float: left;
margin: 0;
padding: 0 10px;
}
#nav li.home {
background: bottom left url(http://file1.npage.de/009238/11/bilder/nav_drk.gif) repeat-x;
padding-left: 25px;
}
#nav a {
font: 16px "Times new roman", serif;
color: #FFE5C3;
text-decoration: none;
}
#nav a:hover {
color: #F2E7D6;
}

/** content **/

#content {
padding-left: 20px;
}
#content h2 {
font: 24px "Times new roman", serif;
color: #513408;
font-weight: normal;
border-left: 3px solid #615331;
padding: 1px 1px 1px 8px;
margin-top: 22px;
}
#content p {
margin-left: 11px;
line-height: 1.4;
}
#content a {
color: #8D692D;
font-weight: bold;
text-decoration: none;
}
#content a:hover {
color: #5B431A;
}

#content .left-col {
float: left;
width: 700px;

}
#content .right-col {
float: right;
width: 150px;
}

#content #welcome {
margin-right: 40px;
font-size:13px;
color: #3E341E;
/** Höhe des Haupttextfensters **/
height: 220px;
}
#content #welcome a{
color: #3E341E;
text-decoration:underline;

}
#content #welcome a:hover{
color: #DBBF77;
text-decoration:underline;
}
#gallery {
margin-top: 14px;
}
#gallery .box {
float: left;
width: 119px;
padding: 0 23px 2.3em 23px;
margin-right: 1px;
background: #615331;
position: relative;
}
#gallery .box h3 {
text-align: center;
line-height: 23px;
font: 23px "Times new roman", serif;
color: #fff;
height: 23px;
margin-bottom: 20px;
background: top center url(http://file1.npage.de/009238/11/bilder/tab_drk.gif) no-repeat;
}
#gallery .box p {
margin: 1em 0;
padding: 0;
line-height: 1.4;
}
#gallery .box .more {
height: 18px;
line-height: 18px;
background: #978040 top left url(http://file1.npage.de/009238/11/bilder/moretab_left_drk.gif) no-repeat;
position: absolute;
bottom: 0;
right: 0;
width: 3.2em;
padding-right: 4px;
margin-bottom: 0;
}
#gallery .box .more a {
color: #4C330D;
}
#gallery .box .more a:hover {
color: #291B06;
}
#gallery .box-lit {
background: #735220;
}
#gallery .box-lit h3 {
background: top center url(http://file1.npage.de/009238/11/bilder/tab_lit.gif) no-repeat;
}
#gallery .box-lit .more {
background: #B4A26D top left url(http://file1.npage.de/009238/11/bilder/moretab_left_lit.gif) no-repeat;
}

#content .right-col li, #content .right-col ul {
list-style: none;
margin: 0;
padding: 0;
}
#content .right-col li {
border-left: 1px solid #615331;
padding-left: 9px;
margin: 10px;
}
#content .right-col a {
font-size: 12px;
font-weight: normal;
color: #67450D;
}
#content .right-col a:hover {
color: #2C1D04;
}
/** later **/

#later {
color: #564929;
}
#later h2 {
font-size: 20px;
}
#later .right-col p {
font-size: 12px;
line-height: 1.7;
}

#later .box {
float: left;
width: 85px;

}
#later .box a{
text-decoration:underline;
}
#later #later-b1 {
padding-top: 67px;
margin-right: 4px;
}
#later #later-b2 {
width: 155px;
margin-right: 4px;
}
#later #later-b3 {
width: 114px;
margin-right: 6px;
}
#later #later-b4 {
padding-top: 67px;
width: 137px;
}

#footc {
height: 10px;
}
#footer {
background: #735220;
text-align: center;
color: #CFB472;
padding: 14px;
}
Zum Vergrößern anklicken....
 
in der css gibt einen teil, der so aussieht:

Code: 
#gallery .box {
  float: left;
  width: 119px;
  padding: 0 23px 2.3em 23px;
  margin-right: 1px;
  background: #615331;
  position: relative;
}

änder den mal in:

Code: 
#gallery .box {
  float: left;
  width: 119px;
  padding: 0 23px 2.3em 23px;
  margin-right: 1px;
  background: #615331;
  position: relative;
margin-bottom: 10px;
}

du kannst auch höhere werte als 10px verwenden. einfach mal ausprobieren, wie es gut aussieht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben