|
please don't post the same question multiple times. See the thread just below.
|
|
|
|
|
How grouping is done using rdlc?Please help me
|
|
|
|
|
I am new to Web Design.
I have a set of div tags as shown below.
My problem is the asp.net login control is not displayed at the center of the division.
What should I do inorder to make it centered.
The ASp.net design view displays the login control centered in the div but when I run the page in a browser it aligns to left. What to do?
Here is the markup
<div id="hd" style="position: relative; text-align: center; background-color: gray; width: 100%; height: 500px; top: 0px; left: 0px;">
<div id="c">
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
<asp:Login ID="Login1" runat="server" Style="position: relative">
</asp:Login>
</asp:Panel> I am the header</div>
</div>
|
|
|
|
|
for center DIV You must use Abosolute position instead of relative position
in your case
.Panel1 {
position:absolute;
width:125px;
height:50px;
left:50%;
top:50%;
margin-left:-62.5px;
margin-top:25px;
}
and use this class
|
|
|
|
|
Be cautious when using absolute positioning. It is outside the normal flow of the document.
modified 1-Aug-19 21:02pm.
|
|
|
|
|
Can you please explain your point?
|
|
|
|
|
|
I am not using absolute position frequently, but in Gjm's case I used this position for center div in the page, If you know other that this solution then please post it
|
|
|
|
|
If the code you and Gjm then uses works, then that is all that matters. Other ways to centre a div include margin-right : auto and margin-left : auto when using the CSS box model. As I said above, I'm not criticizing the code you used.
Shall we leave it at that ???
modified 1-Aug-19 21:02pm.
|
|
|
|
|
My friend, margin-right : auto and margin-left : auto is working but only on on horizontal center not vertical center on the page , if you want both side center (center on the page on any resolution) then this css rule is useless, You can try it and get result
|
|
|
|
|
|
Try this
<div id="hd" style="display:table;vertical-align:middle;position: relative; text-align: center; background-color: gray; width: 100%; height: 500px; top: 0px; left: 0px;">
<div id="c" style="display:table-cell;vertical-align:middle;text-align:center;position:relative;top:225px;">
<div style="width:125px;height:50px;">
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
<asp:Login ID="Login1" runat="server" Style="position: relative">
</asp:Login>
</asp:Panel> I am the header
</div>
</div>
</div>
|
|
|
|
|
My friend, you made the fatal mistake of thinking all browsers are fairly standards-compliant. 
|
|
|
|
|
I have a slight issue, tried everything to make this work, half the time I can get the background to be 100% transparent so you don't see it and have the other child elements opaque, but all I want is the background to be 50% transparent so the main background is showing through it.
First, here is an image of one of the pages. I want the black border to be semi transparent (50%) but everything else inside this area to appear as it is 100% opaque (that is all child elements inside the body_wrapper): http://img697.imageshack.us/img697/8008/webpage.jpg[^]
Here is the code in my CSS file that controls the DIV tag (the "background: #000000;" is the black background code that I wanted to have semi transparent:
.body_wrapper {
padding: 0 20px 20px;
background: #000000;
-webkit-border-radius: 5px;
_display: inline;
}
The only thing is that I can't modify anything on my HTML pages as I have too many and have to do all this with my CSS file. I have been looking all over and tried a few things but nothing seems to work, can anyone help?
In the end we're all just the same
|
|
|
|
|
Give this a try. Replace the .body_child with whatever class name you have used. The wrapper should give you 50% opacity (transparency) and the transparency removed for the child.
.body_wrapper {
padding: 0 20px 20px;
-webkit-border-radius: 5px;
_display: inline;
background-color: #000000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-webkit-opacity:0.5;
opacity: 0.5;
}
.body_child {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;
-webkit-opacity: 1.0;
}
modified 1-Aug-19 21:02pm.
|
|
|
|
|
Hi Richard,
that seems like a great solution, but I came across a snag, not to do with the code you posted (it would work fine) but more to myself, a small problem that I created meaning I can't use that code. All the code for child elements inside the body_wrapper are on my webpages, not my CSS and now I have over 300 webpages and can't go in and put the code in the CSS file as it would take to long to put the code there and remove the code from each page 
I had an idea though but couldn't find a solution that uses a CSS file only. I have a background image I wanted to use instead of this:
background-color: #000000;
Now I wanted the whole image to be 50% transparent like what I wanted to do before I realised my screw up. I have looked about and only found ways of making parts of the image transparent when you insert them on a webpage, but is is possible to make the whole image semi transparent? This would solve my issue then as the image would be transparent and I wouldn't have to modify any more code to fix the parent/child transparecy issue.
Thanks
David McCormick
In the end we're all just the same
|
|
|
|
|
David,
You might be able to do something like
.body_wrapper {
background-image:url(path_to/image_name.jpg);
height:100%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-webkit-opacity:0.5;
opacity: 0.5;
}
Because of CSS inheritance rules http://www.w3.org/TR/CSS2/cascade.html[^], the above might not do what you want
modified 1-Aug-19 21:02pm.
|
|
|
|
|
As an alternative, instead of editing file by file the code within those 300 pages, you could use Notepad++ [^] and do similar to this [^]or you may be able to do a similar thing with Windows Grep [^]. That's just a thought for you ...
modified 1-Aug-19 21:02pm.
|
|
|
|
|
Try this:
.body_wrapper
{
background-color: rgba(0,0,0,0.5);
}
It will work in browsers that support CSS3, which is becoming more common. Don't know about earlier IE's in particular though, I'm sorry to say.
The above code simply sets the div to have a semi-transparent background (approx. 50% black). It's called ARGB.
HTH.
modified on Saturday, August 7, 2010 3:11 AM
|
|
|
|
|
Thanks all got it  . I tried the rgba(0,0,0,0.5); and it worked, but not on IE so I thought and then did this and now it works in IE:
.Body_Wrapper<br />
{<br />
background-color: rgba(0,0,0,0.5);<br />
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);<br />
zoom: 1; <br />
} <br />
In the end we're all just the same
|
|
|
|
|
Glad to help. 
Posted from SPARTA!!!!!!!!!! 2.0.
Don't forget to rate my post if it helped!
|
|
|
|
|
|
|
However, IE being the default broswer that a lot use, I would like the transparacy to work well in it, I use google analytics and more people view my current site in IE than in other browsers, and if the text doesn't look smooth and normal on it, its not really going to help much, its not so much important that the website doesn't look 100% in other browsers as I can say this on my home page.
In the end we're all just the same
|
|
|
|
|
All I can say mate, is good luck.
IE is a bitch to design for. End of story.
Until IE9 is mainstream, IE is going to be the most hated browser for web designers. Trust me, not-so-smooth text seriously is the least of your worries. People aren't going to immediately leave because of it.
Posted from SPARTA!!!!!!!!!! 2.0.
Don't forget to rate my post if it helped!
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
