PHWinfo banniere

Titres
PORTAIL ANNUAIRE ARTICLES COMPARATEUR HÉBERGEURS DEVIS FORUMS RÉDUCTEUR D'URL
Précédent   PHWinfo > Autres forums > Forum Graphisme & Infographie > macromedia.dreamweaver > Cant get images div boxes side by side
 
S'inscrire FAQ Membres Recherche Messages du jour Marquer les forums comme lus
 
Cant get images div boxes side by side

Réponse
 
LinkBack Outils de la discussion
Vieux 15/06/2008, 19h08   #1
willbell
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Cant get images div boxes side by side
I am new to Dreamweaver. I am following Dreamweaver for Dummies. The problem
is that I have set up a page with a "container" div that is centered. Inside
is a "top" div, inside the "top" div are to divs, "topleft" and "topright".
The "topright" div style sheet formats the text correctly, and the box
formatting puts it to the right, but I can't get it to be at the top of the
"top" div so that "topright" and "topleft" are side by side, line up at the top.

What stupid thing am I missing here?

Here's the code (sorry its long)




<!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>Untitled Document</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;
i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
#container {
width: 790px;
margin-right: auto;
margin-left: auto;
}
#top {
width: 789px;
}
#topLeft {
width: 392px;
}
#topRight {
float: right;
width: 300px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0077CC;
}
#container #navSideBar {
width: 146px;
}
-->
</style>
</head>

<body
onload="MM_preloadImages('images-bwsc/BWSCI-1-b_04.jpg','images-bwsc/BWSCI-1-b_0
5.jpg','images-bwsc/BWSCI-1-b_06.jpg','images-bwsc/BWSCI-1-b_07.jpg','images-bws
c/BWSCI-1-b_09.jpg','images-bwsc/BWSCI-1-b_10.jpg','images-bwsc/BWSCI-1-b_11.jpg
','images-bwsc/BWSCI-1-b_12.jpg')">
<div id="container">Content for id "container" Goes Here
<div id="top">
<div id="topLeft"><span class="top"><img
src="images-bwsc/BWSCI-1-a_01.jpg" alt="Best Western South Coast Inn logo"
width="392" height="145" /> </span></div>
<div id="topRight">FAQs<img src="images-bwsc/ico-arrow-topnav.gif"
alt="Arrow points upper right" width="11" height="11" /> Contact Us<img
src="images-bwsc/ico-arrow-topnav.gif" alt="Arrow points upper right"
width="11" height="11" /> Travel Card<img
src="images-bwsc/ico-arrow-topnav.gif" alt="Arrow points upper right"
width="11" height="11" /> BestWestern.com<img
src="images-bwsc/ico-arrow-topnav.gif" alt="Arrow points upper right"
width="11" height="11" /></div>
<div id="topRightLower"> <img src="images-bwsc/BWSCI-1-c_03.jpg" alt="Home
button" width="76" height="69" /><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('HotelRollOver','','imag es-bwsc/BWSCI-1-b_04.jpg',1)">
<img src="images-bwsc/BWSCI-1-a_04.jpg" alt="Hotel button" name="HotelRollOver"
width="68" height="69" border="0" id="HotelRollOver" /></a><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('RatesRollOver','','imag es-bwsc/BWSCI-1-b_05.jpg',1)">
<img src="images-bwsc/BWSCI-1-a_05.jpg" alt="Rates and Reservations button"
name="RatesRollOver" width="159" height="69" border="0" id="RatesRollOver"
/></a><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('ContactUsRollOver','',' images-bwsc/BWSCI-1-b_06.jpg',
1)"><img src="images-bwsc/BWSCI-1-a_06.jpg" alt="Contact Us button"
name="ContactUsRollOver" width="94" height="69" border="0"
id="ContactUsRollOver" /></a></div>
</div>
  Réponse avec citation
Vieux 15/06/2008, 20h02   #2
TC2112
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Cant get images div boxes side by side
Hello,

Floated element needs to come before the element they will be next to in the
code.
So, the topright div needs to come before the topleft div.

<div id="top">
<div id="topRight">FAQs<img src="images-bwsc/ico-arrow-topnav.gif"
alt="Arrow points upper right" width="11" height="11" /> Contact Us<img
src="images-bwsc/ico-arrow-topnav.gif" alt="Arrow points upper right"
width="11" height="11" /> Travel Card<img
src="images-bwsc/ico-arrow-topnav.gif" alt="Arrow points upper right"
width="11" height="11" /> BestWestern.com<img
src="images-bwsc/ico-arrow-topnav.gif" alt="Arrow points upper right"
width="11" height="11" /></div>
<div id="topLeft"><span class="top"><img
src="images-bwsc/BWSCI-1-a_01.jpg" alt="Best Western South Coast Inn logo"
width="392" height="145" /> </span></div>

Take care,
Tim


"willbell" <willbell@silcom.com> wrote in message
news:g33lq3$ghi$1@forums.macromedia.com...
>I am new to Dreamweaver. I am following Dreamweaver for Dummies. The
>problem
> is that I have set up a page with a "container" div that is centered.
> Inside
> is a "top" div, inside the "top" div are to divs, "topleft" and
> "topright".
> The "topright" div style sheet formats the text correctly, and the box
> formatting puts it to the right, but I can't get it to be at the top of
> the
> "top" div so that "topright" and "topleft" are side by side, line up at
> the top.
>
> What stupid thing am I missing here?
>
> Here's the code (sorry its long)
>
>
>
>
> <!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>Untitled Document</title>
> <script type="text/javascript">
> <!--
> function MM_swapImgRestore() { //v3.0
> var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
> x.src=x.oSrc;
> }
> function MM_preloadImages() { //v3.0
> var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
> var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
> i<a.length;
> i++)
> if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image;
> d.MM_p[j++].src=a[i];}}
> }
>
> function MM_findObj(n, d) { //v4.01
> var p,i,x; if(!d) d=document;
> if((p=n.indexOf("?"))>0&&parent.frames.length) {
> d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
> if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
> x=d.forms[i][n];
> for(i=0;!x&&d.layers&&i<d.layers.length;i++)
> x=MM_findObj(n,d.layers[i].document);
> if(!x && d.getElementById) x=d.getElementById(n); return x;
> }
>
> function MM_swapImage() { //v3.0
> var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
> for(i=0;i<(a.length-2);i+=3)
> if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
> x.oSrc=x.src; x.src=a[i+2];}
> }
> //-->
> </script>
> <script src="Scripts/AC_RunActiveContent.js"
> type="text/javascript"></script>
> <style type="text/css">
> <!--
> #container {
> width: 790px;
> margin-right: auto;
> margin-left: auto;
> }
> #top {
> width: 789px;
> }
> #topLeft {
> width: 392px;
> }
> #topRight {
> float: right;
> width: 300px;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 10px;
> color: #0077CC;
> }
> #container #navSideBar {
> width: 146px;
> }
> -->
> </style>
> </head>
>
> <body
> onload="MM_preloadImages('images-bwsc/BWSCI-1-b_04.jpg','images-bwsc/BWSCI-1-b_0
> 5.jpg','images-bwsc/BWSCI-1-b_06.jpg','images-bwsc/BWSCI-1-b_07.jpg','images-bws
> c/BWSCI-1-b_09.jpg','images-bwsc/BWSCI-1-b_10.jpg','images-bwsc/BWSCI-1-b_11.jpg
> ','images-bwsc/BWSCI-1-b_12.jpg')">
> <div id="container">Content for id "container" Goes Here
> <div id="top">
> <div id="topLeft"><span class="top"><img
> src="images-bwsc/BWSCI-1-a_01.jpg" alt="Best Western South Coast Inn logo"
> width="392" height="145" /> </span></div>
> <div id="topRight">FAQs<img src="images-bwsc/ico-arrow-topnav.gif"
> alt="Arrow points upper right" width="11" height="11" /> Contact Us<img
> src="images-bwsc/ico-arrow-topnav.gif" alt="Arrow points upper right"
> width="11" height="11" /> Travel Card<img
> src="images-bwsc/ico-arrow-topnav.gif" alt="Arrow points upper right"
> width="11" height="11" /> BestWestern.com<img
> src="images-bwsc/ico-arrow-topnav.gif" alt="Arrow points upper right"
> width="11" height="11" /></div>
> <div id="topRightLower"> <img src="images-bwsc/BWSCI-1-c_03.jpg"
> alt="Home
> button" width="76" height="69" /><a href="#"
> onmouseout="MM_swapImgRestore()"
> onmouseover="MM_swapImage('HotelRollOver','','imag es-bwsc/BWSCI-1-b_04.jpg',1)">
> <img src="images-bwsc/BWSCI-1-a_04.jpg" alt="Hotel button"
> name="HotelRollOver"
> width="68" height="69" border="0" id="HotelRollOver" /></a><a href="#"
> onmouseout="MM_swapImgRestore()"
> onmouseover="MM_swapImage('RatesRollOver','','imag es-bwsc/BWSCI-1-b_05.jpg',1)">
> <img src="images-bwsc/BWSCI-1-a_05.jpg" alt="Rates and Reservations
> button"
> name="RatesRollOver" width="159" height="69" border="0" id="RatesRollOver"
> /></a><a href="#" onmouseout="MM_swapImgRestore()"
> onmouseover="MM_swapImage('ContactUsRollOver','',' images-bwsc/BWSCI-1-b_06.jpg',
> 1)"><img src="images-bwsc/BWSCI-1-a_06.jpg" alt="Contact Us button"
> name="ContactUsRollOver" width="94" height="69" border="0"
> id="ContactUsRollOver" /></a></div>
> </div>
>
  Réponse avec citation
Vieux 15/06/2008, 22h27   #3
willbell
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Cant get images div boxes side by side
Thanks for that.

One other problem, how do I get the div box to be the same size as the image box?
  Réponse avec citation
Vieux 15/06/2008, 22h27   #4
willbell
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Cant get images div boxes side by side
Thanks for that.

One other problem, how do I get the div box to be the same size as the image box?
  Réponse avec citation
Vieux 16/06/2008, 01h25   #5
TC2112
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Cant get images div boxes side by side
Give it the same width and height as the image.

width: 392px;
height: 145px;

Take care,
Tim

"willbell" <willbell@silcom.com> wrote in message
news:g341f4$rvr$1@forums.macromedia.com...
> Thanks for that.
>
> One other problem, how do I get the div box to be the same size as the
> image box?
  Réponse avec citation
Vieux 16/06/2008, 02h09   #6
willbell
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Cant get images div boxes side by side
I did. If I make the div box the same size as the picture then the picture
bleeds off the bottom of the box by about 20 pixels. This is a weird problem.
There is space, like white space, above and below the images in each div box.
I can get everything lined up by changing the top margins a pixel or so and
checking in a browser over and over again until they are all lined up, but the
pictures in DW layout screen is all uneven. Why?
  Réponse avec citation
Vieux 16/06/2008, 02h20   #7
TC2112
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Cant get images div boxes side by side
It's really hard to tell without see the code, including the images.
Can you post a link to the page?

Thanks,
Tim


"willbell" <willbell@silcom.com> wrote in message
news:g34egk$bh6$1@forums.macromedia.com...
>I did. If I make the div box the same size as the picture then the picture
> bleeds off the bottom of the box by about 20 pixels. This is a weird
> problem.
> There is space, like white space, above and below the images in each div
> box.
> I can get everything lined up by changing the top margins a pixel or so
> and
> checking in a browser over and over again until they are all lined up, but
> the
> pictures in DW layout screen is all uneven. Why?
>
>
>
>
  Réponse avec citation
Réponse

« Discussion précédente | Discussion suivante »

Outils de la discussion

Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages
Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


Fuseau horaire GMT +1. Il est actuellement 12h05.

PHWinfo - Forum spécialisé en hébergement - Guide Hébergeur - Guide Hébergement - Archives

Édité par : vBulletin® version 3.7.3
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC5 Tous droits réservés.
Version française #16 par l'association vBulletin francophone
PHWinfo est un site Éducation Sans Frontières ©2000-2008
Ad Management by RedTyger
©Tous droits réservés par les parties respectives
Page generated in 0,20465 seconds with 15 queries