<b>REGISTER</b>

GFX-Sector - HTML, CSS


 
GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » Balken an den Seiten des Design » Hello Guest [Login|Register]
Last Post | First Unread Post Print Page | Recommend to a Friend | Add Thread to Favorites

HTML, CSS
Einfache Scriptsprachen und deren Layout mit HTML und CSS
Pages (2): [1] 2 next » Post New Thread Post Reply

Balken an den Seiten des Design

     Deutsche Version  English version
Author
Post « Previous Thread | Next Thread »

Sire Sire is a male
Pfadfinder


Avatar von Sire

Registration Date: 14.01.2007
Posts: 689
Location: Velbert
Program: Adobe Photoshop CS 4

Spacer
Balken an den Seiten des Design

Balken an den Seiten des Design

       
Moinsen zusammen,

ich habe jetzt mal ein Design gemacht und das auch gecodet mit externer stylesheet und divs..

So alles steht perfekt und klappt gut nur jetzt weiß ich nicht wie ich die Balken die an den Seite von dem Design sind da noch rein bekomme..

So sieht es Live bis jetzt aus:

Live Demo ohne Balken

Und so sollte es aussehen:

Bild vom Design mit Balken

Wenn ihr den code braucht dann sagt bescheid

Mit freundlichen Grüßen
Sire
Balken an den Seiten des Design 21.05.2008 22:06 Sire is offline Homepage of Sire Search for Posts by Sire

izak.stern izak.stern is a male
Ohnefiltergrafiker


izak.stern hat kein Avatar

Registration Date: 18.02.2008
Posts: 478

Spacer
      

packst in den wrapper noch 2 divs border_left und border_right, lässt die left bzw right floaten und gibst ihnen die "balken" als background-image..
Balken an den Seiten des Design 22.05.2008 04:32 izak.stern is offline Homepage of izak.stern Search for Posts by izak.stern

Sire Sire is a male
Pfadfinder


Avatar von Sire

Registration Date: 14.01.2007
Posts: 689
Location: Velbert
Program: Adobe Photoshop CS 4

Thread Starter Thread Started by Sire
Spacer
      

Mhh klappt nicht ich habe jetzt:

Index.html

code: 
1:
2:
3:
4:

<div id="wrapper">
<div id="boarder_left"></div>
<div id="boarder_right"></div>
</div>


Und in meiner style.css steht:

code: 
1:
2:
3:
4:
5:

#boarder_left{
background-image:url(images/links.jpg);
background-repeat:repeat-y; 
float:left;       
}


Leider passiert garnichts wenn ich das dann aktualisiere...
Balken an den Seiten des Design 22.05.2008 10:37 Sire is offline Homepage of Sire Search for Posts by Sire

izak.stern izak.stern is a male
Ohnefiltergrafiker


izak.stern hat kein Avatar

Registration Date: 18.02.2008
Posts: 478

Spacer
      

in der css fehlt noch border_right und in der html musste schon den content bereich noch mit drinne lassen... änder mal den code und lad ihn unter o.g. adresse hoch...
Balken an den Seiten des Design 22.05.2008 13:06 izak.stern is offline Homepage of izak.stern Search for Posts by izak.stern

Sire Sire is a male
Pfadfinder


Avatar von Sire

Registration Date: 14.01.2007
Posts: 689
Location: Velbert
Program: Adobe Photoshop CS 4

Thread Starter Thread Started by Sire
Spacer
      

Also ich habe alles geändert wie gesagt (Hoffe ich)

Portfolio Live

Die Stylesheet sieht wie folgt aus...

code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:

body{
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
	background-color:#626262;
	font-family:Arial;
	font-size:12px;
}

img{
	border:0px;
}

a{
	outline:none;
	padding:7px;
}


#wrapper{
	height:100%;
	width:600px;
	margin:auto;
}

#navi{
	width:559px;
	height:22px;
	background-image:url(images/navi.jpg);
	
	
		
}

#content{
	width:559px;
	min-height:300px;
	background-color:#e0e0e0;
}

*html{
	height:300px;
}

#content p{
	margin:0px;
	padding:10px;
}


#footer{
	width:559px;
	height:20px;
	background-image:url(images/balken_unten.jpg);
	text-align:center;
	font-size:10px;
}

#boarder_left{
	background-image:url(images/links.jpg);
	background-repeat:repeat-y;
	float:left;
}

#boarder_right{
	background-image:url(images/rechts.jpg);
	background-repeat:repeat-y;
	float:right;
}


Hoffe du kannst damit was anfangen..
Balken an den Seiten des Design 22.05.2008 13:18 Sire is offline Homepage of Sire Search for Posts by Sire

izak.stern izak.stern is a male
Ohnefiltergrafiker


izak.stern hat kein Avatar

Registration Date: 18.02.2008
Posts: 478

Spacer
      

großes Grinsen großes Grinsen großes Grinsen

haste dir den code ma angeguckt?

code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:

		<div id="border_left">
		</div>

		<div id="boarder_right">
		</div>
		<div id="header">


so geht das natuerlich nich...

pack border, nav und footer noch in nen div 'main'

=>

code: 
1:
2:
3:
4:
5:
6:
7:
8:

<div id="wrapper">
		<div id="border_left"></div>
                <div id="main">header, nav, footer</div>
		<div id="boarder_right"></div>
</div>


Balken an den Seiten des Design 22.05.2008 13:30 izak.stern is offline Homepage of izak.stern Search for Posts by izak.stern

Sire Sire is a male
Pfadfinder


Avatar von Sire

Registration Date: 14.01.2007
Posts: 689
Location: Velbert
Program: Adobe Photoshop CS 4

Thread Starter Thread Started by Sire
Spacer
      

Ich hoffe ich habe dich richtig verstanden ich habe den code mal verschoben habe auch die Seite Aktualisiert..

o.G Adresse aufrufen
Balken an den Seiten des Design 22.05.2008 13:43 Sire is offline Homepage of Sire Search for Posts by Sire

Mero Mero is a male
The Dreadworks Project

Spender


Avatar von Mero

Registration Date: 12.11.2006
Posts: 3,294
Location: Weserbergland
Program: Photoshop, Illustrator, Notepad++
Deviantart: dreadworks

Spacer

Balken-an-den-Seiten-des-Design

       

du musst diesen divs natürlich noch eine breite und höhe zuweisen, denn sonst haben sie faktisch die ausmaße 100% in die breite und äääähh ~20px (?) in die höhe... und im moment quetscht dein "wrapper" die boarder auf 0px breite zam.


.
The Dreadworks Project

And in my darkest moment, fetal and weeping
The moon tells me a secret - my confidant
As full and bright as I am
This light is not my own and
A million light reflections pass over me
Balken an den Seiten des Design 22.05.2008 16:02 Mero is offline Homepage of Mero Search for Posts by Mero

Sire Sire is a male
Pfadfinder


Avatar von Sire

Registration Date: 14.01.2007
Posts: 689
Location: Velbert
Program: Adobe Photoshop CS 4

Thread Starter Thread Started by Sire
Spacer
      

Habe den jetzt mal eine Höhe und Breite gegeben:

code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

#boarder_left{
	width:14px;
	height:100%;
	background-image:url(images/links.jpg);
	background-repeat:repeat-y;
	float:left;
}

#boarder_right{
	width:13px;	
	height:100%;
	background-image:url(images/rechts.jpg);
	background-repeat:repeat-y;
	float:right;
}


Müsste ja jetzt richtig sein oder? da passiert nur leider nichts
Balken an den Seiten des Design 22.05.2008 16:21 Sire is offline Homepage of Sire Search for Posts by Sire

Mero Mero is a male
The Dreadworks Project

Spender


Avatar von Mero

Registration Date: 12.11.2006
Posts: 3,294
Location: Weserbergland
Program: Photoshop, Illustrator, Notepad++
Deviantart: dreadworks

Spacer

Balken-an-den-Seiten-des-Design

       

du musst den wrapper dann natürlich auch um 27px (also 627px) vergrößern.


.
The Dreadworks Project

And in my darkest moment, fetal and weeping
The moon tells me a secret - my confidant
As full and bright as I am
This light is not my own and
A million light reflections pass over me
Balken an den Seiten des Design 22.05.2008 17:03 Mero is offline Homepage of Mero Search for Posts by Mero

Sire Sire is a male
Pfadfinder


Avatar von Sire

Registration Date: 14.01.2007
Posts: 689
Location: Velbert
Program: Adobe Photoshop CS 4

Thread Starter Thread Started by Sire
Spacer
      

Mhh habe ich gemacht ändert sich nichts ausser das sich das Design verschiebt...
Balken an den Seiten des Design 22.05.2008 17:05 Sire is offline Homepage of Sire Search for Posts by Sire

izak.stern izak.stern is a male
Ohnefiltergrafiker


izak.stern hat kein Avatar

Registration Date: 18.02.2008
Posts: 478

Spacer
      

ich hoffe damit kannst du endlich was anfangen, ansonsten weiß ich auch nicht wie ich dir helfen könnte, außer ich codes dir gleich selber...

code: 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:

<html>
<head>
<style>
#box {

	margin: 0 auto;
	width: 800px;
	min-height: 500px;

}

#left, #right {

	width: 50px;
	height: 100%;
	background-color: #0000ff;
	line-height:18px;
	
}

#left {

	float:left;
	
}

#right {

	float:right;
	
}

#center {

	float:left;
	width: 700px;
	height: 100%;
	
}
</style>
</head>
<body>
<div id="box">
	<div id="left">left</div>
	<div id="center">center</div>
	<div id="right">right</div>
</div>
</body>
</html>


Balken an den Seiten des Design 22.05.2008 19:12 izak.stern is offline Homepage of izak.stern Search for Posts by izak.stern

Sire Sire is a male
Pfadfinder


Avatar von Sire

Registration Date: 14.01.2007
Posts: 689
Location: Velbert
Program: Adobe Photoshop CS 4

Thread Starter Thread Started by Sire
Spacer
      

Puhh sorry ich kann das nicht verstehen an einem anderen Beispiel..

Es wäre schön wenn du das mit meinem Beispiel mal machen könntest und mir erklären kannst was du gemacht hast..

dann verstehe ich das besser
Balken an den Seiten des Design 22.05.2008 19:20 Sire is offline Homepage of Sire Search for Posts by Sire

izak.stern izak.stern is a male
Ohnefiltergrafiker


izak.stern hat kein Avatar

Registration Date: 18.02.2008
Posts: 478

Spacer
      

oh mann!!!

speicher den code doch ma als html...

dann siehste, dass der schonma die form hat die du wünscht...

pack doch in center einfach nur noch header content und footer rein, fertig...

das wars von mir...
Balken an den Seiten des Design 22.05.2008 19:37 izak.stern is offline Homepage of izak.stern Search for Posts by izak.stern

Sire Sire is a male
Pfadfinder


Avatar von Sire

Registration Date: 14.01.2007
Posts: 689
Location: Velbert
Program: Adobe Photoshop CS 4

Thread Starter Thread Started by Sire
Spacer
      

naja ich bekomme jetzt schonmal den Balken hin das man den überhaupt sieht..

nur fließt der jetzt nicht an edm Design vorbei ^^
Balken an den Seiten des Design 22.05.2008 20:19 Sire is offline Homepage of Sire Search for Posts by Sire
 
Spacer
   
GFX-Sector
unregistered


hat kein Avatar


Spacer

Have you enjoyed this topic?

If you were enjoying this post and if you keen on reading more interesting stuff then do not hesitate to complete the free sign up.

After the free registration you will gain access to all areas and you will be able to communicate with other artists from all over the world.

In addition you will benefit from our Photoshop and coding section as well as from our huge (hundreds of gigabytes) free resource section where you can find everything you will need to be a successful (web) designer/artist.

Sign up now and enjoy the advantages as a registered member.

(This website will be ad-free after a complete free sign up.)
New Post 23.05.2008 21:00  
Pages (2): [1] 2 next » Tree Structure | Board Structure
Post New Thread Post Reply
GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » Balken an den Seiten des Design

Similar topics to Balken an den Seiten des Design
Thread
WBB3 Design (Forum: Archiv für Anfragen)
[Leicht] Lemon Green Webdesign (Forum: Webdesign/Interface)
*Modern Design* (Forum: Designs)
Virus Graphics wbb2 Forendesign (Forum: Designs)
Wohndesign und Dekoblogs (Forum: Smalltalk)

 
Heutige TOP 10 Suchbegriffe:
Marlboro Kkk Cro Wallpaper Wbblite Style Kostenlos Ab 21 Jahren Kroos Wallpaper Bf3 Kollegah Wallpaper Kasachstan Wallpaper Gasmaske Schriftarten
Balken an den Seiten des Design : HTML, CSS (Permalink)
  Sectorbereich   Forenbereich   Battlesection