border um link

[czc]

hallo!

ich habe eine vorgabe, wo ich die div's nicht verändern darf. nur die css.
wie kann ich es mit css umsetzen, um mit folgenden code:

<div id="main">
  <div id="navigation">
    <a href="#">Homepage</a>
    <a href="#">Products</a>
    <a href="#">Hot Deals</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
    <a href="#">Imprint</a>  </div>
<div id="content">

das bild zu erreichen:

https://www.ssl-id.de/visual-communication01.de/upload_disposition/auszug.jpg

mein bisheriges css:

#main{
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: red;
    padding-right: 1px;
	background-color: #b6b6b6;
	width: 200px;
	height: 80px;
	position: relative;
    left: 0%;
	top: 20%;
}

#navigation{
    border-bottom-width: 1px;
	border-bottom-style: solid;
    border-bottom-color: #FFFFFF;
	padding-bottom:1px;
    text-transform: lowercase;
	text-align: right;
	letter-spacing: 0.4pt;
	text-transform: uppercase;
	position: relative;
	left: 30%;
	width: 100px;
	height: 50px;
}

ich bekomme einfach die horizontalen striche nicht hin!

hilfe!!

 

[dkdenz]

Du musst die Links selbst ansprechen.
Mit display:block, entsprechendem padding oder width und border...

 

[czc]

o.k. super! ich danke dir!! und was wenn ich mehrere links im docu habe und diese sollen von all dem nichts abbekommen.

<div id="headBreadcrumb">
    <span class="breadcrumbComment">You are Here: </span><a href="#"><<Homepage</a><span class="breadcrumbSpacer"> | </span><a href="#"><<Products</a><span class="breadcrumbSpacer"> | </span><a href="#"><<Digital Compact Cameras</a>
  </div>
</div>


<div id="main">
  <div id="navigation">
    <a href="#">Homepage</a>
    <a href="#">Products</a>
    <a href="#">Hot Deals</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
    <a href="#">Imprint</a>
  </div>

der obere teil soll nicht berührt werden. es dürfen aber auch keinerlei veränderungen am html erfolgen .. nur per css und keine hintergrundbilder

 

[anna55]

Du kannst die Links gezielt ansprechen:
CSS 4 You - The Finest in Stylesheets: Workshop CSS: Teil 3 - Selektoren I

Edit: Wenn Du beide Gruppen bearbeiten willst, sonst halt anpassen

#navigation a {
color:red;
}
#headBreadcrumb a {
color:green;
}

 

[czc]

yo .. super ... klappt prima ;-) !! ich freue mich ... danke

 

[czc]

habe es nun soweit:

https://www.ssl-id.de/visual-communication01.de/upload_disposition/screenshot_2.jpg

und aussehen sollte es so:

https://www.ssl-id.de/visual-communication01.de/upload_disposition/auszug.jpg

ich wollte das ganze per height vertikal strecken. damit klappt es leider nicht genau. entweder drüber oder drunter. der linktext muss auch etwas weiter nach links und rechtsbündig bleiben. hat außerdem noch wer eine ahnung welche schriftart dieses sein könnte.

hier noch einmal der html-code:

<div id="main">
  <div id="navigation">
    <a href="#">Homepage</a>
    <a href="#">Products</a>
    <a href="#">Hot Deals</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
    <a href="#">Imprint</a>
  </div>
</div>

und das css:

#main{
	background-color: #d6d6d6;
	width: 160px;
	height: 119px;
	position: relative;
    left: 0%;
	top: 9%;
}

#navigation a { /* all vertical links */

	display: block;
	
	color: #990000;
	
	border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #990000;
    padding-right: 1px;
	
	border-bottom-width: 1px;
	border-bottom-style: solid;
    border-bottom-color: #FFFFFF;
	padding-bottom:1px;
	
	font-family: Helvetica;
	font-size: 7.5pt;
	font-weight: bolder;
	text-decoration: none;
	text-align: right;
	text-transform: uppercase;
	letter-spacing: 2pt;
	
	vertical-align: middle;
	
	position: relative;
	left: 0%;
	vertical-align: middle;
	width: 158px;
	height: 17px;
}

 

[anna55]

Warum auch immer Du nicht das HTML verändern kannst. Navis sind von Haus aus Listen und nicht einfach nur Divs.
Hast Du das so ähnlich gedacht

#main{
	width: 150px;
	height: 119px;
	position: relative;
	left: 0%;
	top: 9%;
	background:#FFFFFF;
}

#navigation a { /* all vertical links */
	line-height: 16px;
	display: block;
	color: #990000;
	background-color: #d6d6d6;
	font-family: Verdana;
	font-size: 10px;
	font-weight: bolder;
	text-decoration: none;
	text-align: right;
	text-transform: uppercase;
	letter-spacing: 1pt;
	position: relative;
	padding: 3px 8px 1px 0;
	margin-bottom:1px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #990000;
	width: 148px;
	height: 18px;
}

 

[czc]

nicht nur so ähnlich .. das ist der pull. geil!!

is ein test. muss danach vorgehen, wie sie es wünschen.

aber danke für deine mühe ;-) super lieb