/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Layout align problem

Hi guys !

this is a ie7+ VS the world problem…

I have a align problem which is probably caused by a containing <div> but I cant figure out which one it is…or maybe this is not the problem at all ?

In the right part of the main area, which the backgroud is blue, I cant figure out why I cant align the “Connexion” button with the “Devenir Client” button, then why the textfield dosent have the same lenght in ie. Finnaly, I need help getting the “Devenir Client + obtenir un prix” text in the right area…

here is the URL : [URL=”http://beta.ricaiwa.ca/vfi/”]http://beta.ricaiwa.ca/vfi/[/URL]

[URL=”http://beta.ricaiwa.ca/vfi/style/core.css”]full CSS[/URL]

html

[CODE]
<div id=”column_right”>
<div id=”addPad10″>

<h3>Se Connecter</h3>
<form id=”simplyForm” action=””>
<fieldset>
<label for=”userID”>
Usager<br>
<input id=”userID” name=”userID” size=”20″ type=”text” value=”” />
</label>
<label for=”passW”>
<br>Mot de passe<br>
<input id=”passW” name=”passW” size=”20″ type=”password” value=”” />
</label>
<br><br><span class=”spanBtn”><input id=”btnConnect” type=”submit” value=”Connexion” /></span><br><br>
</fieldset>
</form>

<p>
Nous offrons &#224; nos clients une multitude d’outils en ligne pour facilliter la gestion de leur projets.
Contactez nous pour voir ce que nous pourions faire pour vous aider a r&#233;aliser votre projet.
</p>

<div class=”deve”>
<div id=”containDevenir”>
<div id=”txtDevenir”>
<p id=”pTxtDevenir”>Devenir Client <br><span>+ obtenir un prix</span></p>
</div>
</div>
</div>

</div>
</div>
[/CODE]

css

[CODE]
.core #column_right{width:30&#37;; float:left; background-color:#014067; overflow:hidden; }
.core #addPad10{padding-left:10px;padding-right:10px;}
div.spacer{clear:both; height:10px; display:block;}

/* ——————————
CUSTOM CLASSES
—————————— */
.spanBtn{ text-align:right; width:100%; float:right;}
.spanBtnPad{ text-align:right; width:100%; float:right; padding-right:10px;}
.core #btnConnect{
margin:0px;
background:transparent url(../img/base/btnConnect.png);
border:0px;
color:#cccccc;
font-size:18px;
cursor:pointer;
height:48px;
width:121px;
text-align:center;

}

.deve #containDevenir{
margin:0px;
border:0px;
height:86px;
width:170px;
cursor:pointer;
position:relative;
float:right;
background:transparent url(../img/base/devenir2.png) no-repeat;
padding-right:12px;
}
.deve #txtDevenir{
position:absolute;
padding-left:70px;
padding-top:10px;
height:100%;
width:100%;
overflow:hidden;
}
.deve #pTxtDevenir{font-size:14px;line-height:1.5;font-weight:bold;}
[/CODE]

Thanks for your help !!

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@WebWarriorJun 28.2009 — This should help remedy your problem. Read through my comments in CSS for explanations. I removed what I felt wasn't necessary (and what probably prevented it from working the way it should in the first place) from both CSS and HTML. Le me know if you have any questions, okay.

/*** CSS ***/

/* ------------------------------

CUSTOM CLASSES

------------------------------ *
/

/* You don't reallly need this */

/*.spanBtn{ text-align:right; width:100&#37;; float:right;}*/

/* I doubt that you need this one either. */

/*.spanBtnPad{ text-align:right; width:100%; float:right; padding-right:10px;}*/


/* Note: I removed .core because you did not provide that class here,

and I couldn't test it on my machine otherwise. *
/

#btnConnect{

margin:0px;

background:transparent url(../img/base/btnConnect.png);

border: 0px;

color:#cccccc;

font-size:18px;

cursor: pointer;

height:48px;

width:121px;

text-align:center;

/* Use this instead of .spanBtn */

display: block;

float: right;

margin-top: 10px;

}

/* The values for padding/margin/width are not "set in stone."

You may modify them to fit your project's needs. *
/

#txtDevenir

{

width: 170px;

height: 86px;

margin-bottom: 5px;

background:transparent url(images/devenir2.png) no-repeat left top;

float: right;

}

#txtDevenir p,

#txtDevenir span

{

float: right;

text-align: right;

margin: 0;

padding: 0;

}

#txtDevenir p

{

/* Play around with these values to get the padding you need */

padding-top: 25px;

padding-right: 5px;

}

#txtDevenir span

{

font-size: 14px; /* Change it to fit your project */

}

/* This will negate the need to use br tag.

Note: See my comments on that below (for label tags). *
/

#txtDevenir span

{

}

/* This should make both text and password fields same length */

#simplyForm input[type="text"],

#simplyForm input[type="password"]

{

width: 180px;

}

/* No need for br (newline) tag all over the place.

Simply adjust the labels' margin/padding properties if

you need more vertical/horizontal space. *
/

#simplyForm label

{

display: block;

}

#userID

{

margin-bottom: 5px; /* Create some vertical space */

}

/* This should vertically align your Connexion with

Devenir Client button *
/

#simplyForm fieldset

{

width: 100%;

border: 0;

padding: 0;

}

.deve #pTxtDevenir{font-size:14px;line-height:1.5;font-weight:bold;}
Copy linkTweet thisAlerts:
@WebWarriorJun 28.2009 — <!-- HTML -->

<div id="column_right">

<div id="addPad10">

<h3>Se Connecter</h3>
<form id="simplyForm" action="">
<fieldset>
<label for="userID">Usager</label>
<input id="userID" name="userID" size="20" type="text" value="" />

<label for="passW">Mot de passe</label>
<input id="passW" name="passW" size="20" type="password" value="" />

<input id="btnConnect" type="submit" value="Connexion" />
</fieldset>
</form>

<p>
Nous offrons à nos clients une multitude d'outils en ligne pour facilliter la gestion de leur projets.
Contactez nous pour voir ce que nous pourions faire pour vous aider a réaliser votre projet.
</p>
<div id="txtDevenir">
<p id="pTxtDevenir">Devenir Client<br><span>+ obtenir un prix</span></p>
</div>

</div>

</div>
Copy linkTweet thisAlerts:
@WebWarriorJun 28.2009 — Don't forget to change the path to directory of your image in txtDevenir. I changed it to match my machine's local directory path.
Copy linkTweet thisAlerts:
@rsgoldrsmoneyJun 28.2009 — [url=http://entirely.xevaa.com]entirely[/url] [url=http://sosimply.xevaa.com]sosimply[/url] [url=http://theabove.xevaa.com]theabove[/url] [url=http://infact.xevaa.com]infact[/url] [url=http://sabotaging.xevaa.com]sabotaging[/url]
Copy linkTweet thisAlerts:
@fitzybizzleauthorJun 28.2009 — Thanks a lot WebWarrior ! its alll good now
×

Success!

Help @fitzybizzle spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...