Archief - HTML/CSS: Div transparant maken

X1RON · 14 aug 2006

Yo,
Mn nonkel heeft aan me gevraagd een simpele website te maken voor zn bakkerij.
Kheb besloten een standaard template van dreamweaver te gebruiken, die werkt met divs, maar kwil da de afbeelding (van da brood) doorloopt in die linker divs (door die divs transparant te maken). Hier is een afbeelding om het wat duidelijker te maken:http://home.euphonynet.be/filip/Foto's/help.JPG
kan iemand mij helpen aub?

ps.-Ik ben een noob in css, en heb nog ni al te veel websites gemaakt dus let aub ni hoe die site eruit ziet, hij wordt zeker nog aangepast

dRIES1 · 14 aug 2006

voor da ge begint, hebt ge rechten om die foto te gebruiken?

X1RON · 14 aug 2006

dRIES1 zei:
voor da ge begint, hebt ge rechten om die foto te gebruiken?

neen, ma was toch van plan een zelfgemaakte foto te gebruiken (die de baas morgen gaat nemen)
mijn excuses, kzal em direct verwijderen

EDIT: moek't iets anders gebruiken voor voorbeeld?

Cakeman · 14 aug 2006

Code:

background-color:Transparent;

X1RON · 14 aug 2006

Cakeman zei:
Code:

background-color:Transparent;

jup, heb ik ook al gelezen op een andere site, maar ik snap niet juist waar ik da moet zetten

X1RON · 14 aug 2006

Code:

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#masthead{
	padding: 10px 0px 0px 0px;
	border-bottom: 1px solid #cccccc;
	width: 100%;
}

#navBar{
	float: left;
	width: 20%;
	margin: 0px;
	padding: 0px;
	background-color: #eeeeee;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}

#headlines{
  float:right;
	width: 20%;
	border-left: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding-right: 10px;
}

#content{
	float: left;
  width: 55%;
}

hier ergens bij?

Bram · 14 aug 2006

post ook eens u html, da is namelijk relatief hoe de div's zelf genoemd zijn

ma ik veronderstel da het wel bij #navBar zal moeten...

X1RON · 14 aug 2006

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Danny's Kramikske</title>
<link rel="stylesheet" href="3col_leftNav.css" type="text/css">
<style type="text/css">
<!--
body {
	background-image: url();
	background-color: #FFFFFF;
}
body,td,th {
	color: #000000;
}
.style1 {color: #000000}
a:link {
	color: #F5E084;
}
.style2 {color: #F5E084}
a:visited {
	color: #CFBD70;
}
a:hover {
	color: #CFBD70;
}
a:active {
	color: #CFBD70;
}
.style3 {color: #F5BC85}
-->
</style></head>
<body> 
<div id="masthead"> 
  <h1 class="style2" id="siteName">Danny's Kramikske </h1> 
  <div id="globalNav"> 
    <a href="#">Home</a> | <a href="#">Historiek</a> | <a href="#">Over Danny </a> | <a href="#">Producten</a> | 
  <a href="#">Gastenboek</a> | <a href="#" class="style1">Contacteer ons </a> | </div> 
  <h2 class="style3" id="pageName">Home</h2> 
  <div id="breadCrumb"> 
  </div> 
</div> 
<div id="navBar"> 
  <div id="search">  </div> 
  <div id="sectionLinks"> 
    <h3>Section Links</h3> 
    <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Historiek</a></li> 
      <li><a href="#">Over Danny </a></li> 
      <li><a href="#">Producten</a></li> 
      <li><a href="#">Gastenboek</a></li> 
      <li><a href="#">Contacteer ons </a></li> 
    </ul> 
  </div> 
  <div class="relatedLinks"> 
    <h3>Related Link Category</h3> 
    <ul> 
      <li><a href="#">Related Link</a></li> 
      <li><a href="#">Related Link</a></li> 
      <li><a href="#">Related Link</a></li> 
      <li><a href="#">Related Link</a></li> 
      <li><a href="#">Related Link</a></li> 
      <li><a href="#">Related Link</a></li> 
    </ul> 
  </div> 
  <div class="relatedLinks"></div> 
</div> 
<!--end navBar div --> 
<!--end headlines --> 
<div id="content"> 
  <div class="feature"> 
    <h3>Welkom<br>
    </h3> 
  </div> 
  <div class="story"> 
    <h3 align="left"><span class="feature"><img src="Kramikske.gif" alt="" width="173" height="232"></span></h3> 
  Welkom op de website van de bakkerij Danny's Kramikske. </div> 
  <div class="story"></div> 
</div> 
<!--end content --> 
<div id="siteInfo">  <a href="#">Contacteer ons </a><a href="#"></a> | &copy;2006 Webmaster: Schraepen Philippe (<a href="mailto:[email protected]">e-mail</a>)</div> 
<br> 
</body>
</html>

Zero Grav · 14 aug 2006

Zoals width, border-left, .. moet dat geplaatst worden in die div die ge transparant wilt, als ge dus #content transparant wilt wordt het:

#content {
float: left;
width: 55%;
background-color: transparant;
}

En die site ziet er wel vrij onbruikbaar uit op die screenshot.. Zeker dat je hiermee wilt verdergaan?

X1RON · 14 aug 2006

Zero Grav zei:
Zoals width, border-left, .. moet dat geplaatst worden in die div die ge transparant wilt, als ge dus #content transparant wilt wordt het:

#content {
float: left;
width: 55%;
background-color: transparant;
}

En die site ziet er wel vrij onbruikbaar uit op die screenshot.. Zeker dat je hiermee wilt verdergaan?

ik heb bij elk content die background-color: transparant; gezet, maar het werkt niet:
http://home.euphonynet.be/filip/Foto's/help.JPG
(tijdelijk een foto van mezelf gebruikt tot ik een fansoenlijke heb)

tuurlijk wil ik er nog mee verder gaan, het steekt niet op een paar weken, en 'tmoet maar heel simpel zijn, kon het juist zo goed in frontpage doen, maar ik wil ondertussen ook weer wat ervaring met Dreamweaver opdoen

alst echt nie gaat laat het dan maar, dan gebruik ik wel gewoon 1 kleur als achtergrond (of heeft nog iemand een aanrader?)

X1RON · 14 aug 2006

nja kheb nu gewoon grijs genomen, en tkomt redelijk mooi uit, thx anyway

Quilombo · 14 aug 2006

nogal logisch dat dat niks verandert,
backgroundcolor is standaard al transparant ..

dus het ligt aan iets anders

eeeeeecht geen zin om der naar te kijken, 't is trouwens bij mij al van mei geleden dat ik nog iets in xhtml/css heb gemaakt, in t nieuwe schooljaar terug eens wat maken

X1RON · 15 aug 2006

Allemaal bedankt, maar kheb gewone kleuren genomen, komt veel mooier uit dan een foto als achtergrond.
Kga toch is een boek kope voor css, is wel handig.

grtzzz

Zero Grav · 15 aug 2006

Hmm, ik vind een boek nogal overdreven voor css (behalve dan als je css zen garden of iets dergelijke koopt terwijl je css al vrij goed kent) aangezien dit eigenlijk echt maar een kleine taal is, je bereikt enorm veel met heel weinig.

op www.w3schools.com wordt de techniek van css al helemaal uitgelegd en op http://users.skynet.be/fa018641/formularium_css.pdf kunt ge de meestgebruikte css-tags wel terugvinden. (Maar geen (voornamelijk) div-oriënted tags zoals float ed.)

Quilombo · 16 aug 2006

idd eerst w3schools
dan eventueel nog paar andere tuto's

en dan die site met de vele bugs, staat zeker in sticky, maar naam schiet me niet te binnen

X1RON · 16 aug 2006

Zero Grav zei:
Hmm, ik vind een boek nogal overdreven voor css (behalve dan als je css zen garden of iets dergelijke koopt terwijl je css al vrij goed kent) aangezien dit eigenlijk echt maar een kleine taal is, je bereikt enorm veel met heel weinig.

op www.w3schools.com wordt de techniek van css al helemaal uitgelegd en op http://users.skynet.be/fa018641/formularium_css.pdf kunt ge de meestgebruikte css-tags wel terugvinden. (Maar geen (voornamelijk) div-oriënted tags zoals float ed.)

aah bedankt

Xerionth · 18 aug 2006

Indien je toch nog moest zoeken op de transparantie dan moet je onderstaande code is gebruiken

Code:

	filter:				alpha(opacity=80);
	-moz-opacity:		.80;
	opacity:		.80;

Door de waarde te veranderen, verandert de doorzichtigheid vanzelfsprekend ook

Archief - HTML/CSS: Div transparant maken

X1RON

Legacy Member

dRIES1

Legacy Member

X1RON

Legacy Member

Cakeman

Legacy Member

X1RON

Legacy Member

X1RON

Legacy Member

Bram

Legacy Member

X1RON

Legacy Member

Zero Grav

Legacy Member

X1RON

Legacy Member

X1RON

Legacy Member

Quilombo

Legacy Member

X1RON

Legacy Member

Zero Grav

Legacy Member

Quilombo

Legacy Member

X1RON

Legacy Member

Xerionth

Legacy Member