• 0

Problem with DW CS5 here...

Asked by Glassed Silver,

 Share

Question

Grand Master

Glassed Silver

Posted
Posted

Heya guys,

I decided to start the real deal - coding in DW CS5, as since I got a copy lying around I thought I'd give it a try even though usually web coding gives me the creeps...

But actually, I like how I'm starting to feel comfortable about it, with the help of tutorials from youtube etc...

There is one problem though:

I want to align an image and a text within a div or table to appear on the bottom right of it...

Here's what I've got so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Falk Meyer Photography</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#flag {
	position:absolute;
	left:1096px;
	top:61px;
	width:117px;
	height:13px;
	z-index:1;
}
</style>
</head>

<body>
<div id="head">
 <div id="logo">
	<table width="100%" border="0">
 	<tr>
 	<td width="83%"><img src="site graphics/fmlogo.jpg" width="125" height="83" alt="Falk Meyer Photography Logo" /><img src="site graphics/fmlogo_textonly.gif" width="373" height="83" alt="Falk Meyer Photography Header Text" /></td>
 	<td width="17%"><p><img src="site graphics/de_flag.gif" width="15" height="10" alt="de" /> switch to German</p></td>
 	</tr>
	</table>
 </div>
</div>
</body>
</html>

I want de_flag.gif and " switch to German" to appear bottom aligned.

I currently chose to have a two row table, because I didn't know how to put a div in a div.

Maybe that route would solve my problem as well, div in div...?

The weird thing is...

Although I have selected "bottom" alignment in DW, it won't align it that way -> see attachment

It's totally driving me nuts, I feel like sitting in front of a candy bar, easy to grab, but something sits in between and won't let me get it! :blink:

A friend of mine also had to pass on this one...

In case you need the layout.css:

@charset "UTF-8";
* {
	margin: 0px;
	background-color: #000;
	color: #CCC;
}

#head {
	margin-right: auto;
	margin-left: auto;
	height: 83px;
	width: 1000px;
}
#flag {
	top: auto;
	right: auto;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 11px;
	width: auto;
}

#head #logo { }

a img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

Glassed Silver:mac

post-58560-1292266060817.png

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Grand Master

Cupcakes

Posted
Posted

Couple things:

1.) You're using a stylesheet; All of your CSS should be added to stylesheet.css. There is no reason to have inline code at this stage.

2.) Tables are for tabular data. You're already utilizing divs, so keep on with it, nix tables*

3.) It's not a Dreamweaver problem, just your code.

* It's pretty simple to include a "div in a div." 

 <div id="head" class="clearfix">
 <div id="logo"><img src="site graphics/fmlogo.jpg" width="125" height="83" alt="Falk Meyer Photography Logo" /><img src="site graphics/fmlogo_textonly.gif" width="373" height="83" alt="Falk Meyer Photography Header Text" /></div>
 <p class="lang"><img src="site graphics/de_flag.gif" width="15" height="10" alt="de" /> switch to German</p>
</div>


 #logo {
   width: 425px;
   height: ##px;
   float: left; 
 }
 .lang {
   float: right;
   margin: 10px 0 0 0; /* top right bottom left - adjust top to your needs*/
 }
 .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

PS - If you're going to teach yourself HTML/CSS, don't rely on DW's WYSIWYG or anything generated from it. Also:

http://css-tricks.com

http://w3schools.com/default.asp

http://www.alistapart.com/

http://www.csszengarden.com/

http://net.tutsplus.com/category/tutorials/html-css-techniques/

http://webdesign.tutsplus.com/

Link to comment
Share on other sites
  • 0
Grand Master

Glassed Silver

Posted
  • Author
Posted

Couple things:

1.) You're using a stylesheet; All of your CSS should be added to stylesheet.css. There is no reason to have inline code at this stage.

2.) Tables are for tabular data. You're already utilizing divs, so keep on with it, nix tables*

3.) It's not a Dreamweaver problem, just your code.

* It's pretty simple to include a "div in a div." 

 <div id="head" class="clearfix">
 <div id="logo"><img src="site graphics/fmlogo.jpg" width="125" height="83" alt="Falk Meyer Photography Logo" /><img src="site graphics/fmlogo_textonly.gif" width="373" height="83" alt="Falk Meyer Photography Header Text" /></div>
 <p class="lang"><img src="site graphics/de_flag.gif" width="15" height="10" alt="de" /> switch to German</p>
</div>


 #logo {
 width: 425px;
 height: ##px;
 float: left; 
 }
 .lang {
 float: right;
 margin: 10px 0 0 0; /* top right bottom left - adjust top to your needs*/
 }
 .clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

PS - If you're going to teach yourself HTML/CSS, don't rely on DW's WYSIWYG or anything generated from it. Also:

http://css-tricks.com

http://w3schools.com/default.asp

http://www.alistapart.com/

http://www.csszengarden.com/

http://net.tutsplus....css-techniques/

http://webdesign.tutsplus.com/

Thanks a ton, will try it now...

So you mean I shall include that code in a css file and call the code in the html from there, as it is repetitive?

On problem though:

My link "switch to [language]" would have to be a variable link.

Meaning link target would have to go along these lines:

http://www.domain.com/{current site name}.de (.de=calls German document of it, using the .htaccess method here so the server will serve whichever file the browser prefers, but here, I want to call the file directly, because the user choses so)

Glassed Silver:mac

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.