I'm trying to design a webpage using Asp.net and CSS in Visual Studio 2010. the problem is simple but i have no idea how to fix it. Im creating a header in my page, this header is a div, its linked to my stylesheet for coloring. I put an image in the div, and i added a label. Now after some time to put the image in the middle of the div and text under it, when i run the website, the Label leaves the div completely and sits outside. How do i fix this? and for future reference, what technique or method do i follow so that the webpage before running always looks the same after running? I've decided to create a stylesheet for every page and put all my styles in there.
Sorry, here it is.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="LoginStyleSheet.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="HeaderDiv">
<img alt="" class="Logo" longdesc="http://localhost:17260/MECIT_Logo.png"
src="MECIT_Logo.png" />
<asp:Label CssClass="Title" ID="WelcomeLabel" runat="server" Text="SSS">
</asp:label>
</div>
</form>
</body>
</html>
body
{
background-color:Gray;
}
.HeaderDiv
{
background-color: #0099FF;
height: 121px;
}
.Logo
{
position:absolute;
left:40%;
}
.Title
{
position:absolute;
left:38%;
bottom:83%;
font-size:xx-large;
font-family:Cambria;
font-weight:bold;
color:Navy;
width: 336px;
}
I don't understand why you are absolutely positioning the elements inside the container, all this can be handled with margins and alignment. Here is my suggestion:
Click here to view the fiddle
CSS:
body
{
background-color:Gray;
}
.HeaderDiv
{
background-color: #0099FF;
height: 121px;
text-align:center;
}
.Logo
{
margin:5 auto;
}
.Title
{
font-size:xx-large;
font-family:Cambria;
font-weight:bold;
color:Navy;
width: 336px;
}
HTML:
<div class="HeaderDiv">
<img alt="" class="Logo" longdesc="http://localhost:17260/MECIT_Logo.png"
src="http://www.mecit.edu.om/images/MECIT_Logo.png" /><br />
//Used a <span> for the Label, as I believe that is what it renders as
<span class="Title" id="WelcomeLabel">Some Title</span>
</div>
Related
I am putting in new code as I have been studying, Hopefully this is a clearer picture of what my goal is.
I want to go from a table based to a div setup, I have tried
<div class="image"></div>
with this CSS
div.image:before {
content:url(http://placehold.it/350x150);
}
But I am unsure of the placement of the text, also putting an image in the div as well as making sure the dimension is correct.
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Site</title>
<meta http-equiv="Content Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bgimg {
background-image: ('file:///C:/Location/somimg.jpg');
}
</style>
</head>
<body>
<img src="somimg.jpg" width="246" height="94" alt="sm pic'/>
<div class="bgimg">
</div>
<div class="mainsection">
</div>
</body>
</html>
CSS code:
td {
text-align: left;
vertical-align: top;
font-family:Tahoma;
font-weight: bold;
font-size:15px;
color: #E5E5E5;
}
.div-with-bg
{
width: 263px;
height: 94px;
background-image:url('smpic.jpg');
margin:0;
padding:0;
}
a {
text-decoration: underline;
color:#9D5FBB;
}
A:Hover {
color : #DBACF2;
text-decoration : underline;
}
h1 {
color: #9929bd;
font-weight: normal;
font-size: 20px;
font-family: Tahoma;
}
H3 {
color: #7F409E;
font-weight: bold;
font-size : 20px;
font-family:Tahoma;
}
My goal is to have the div's go out to the edge of the browsers as I have multiple tables that I would like to replace with div elements. I have viewed this setup in a browser and the div and image show up but not at the edge of the page.
I don't know if I understand what you're asking but I just copied your HTML in Sublime text, and did this for css:
div.image:before {
width: 263px;
height: 94px;
background-image:url('somepic.jpg');
content:url(http://placehold.it/350x150);
margin:0;
padding:0;
}
It works for me. I have the left div on the left and the right div next to it.
Also, I would the the style of the divs in the css file:
div.right {
float: "middle"
}
div.left {
float: "left";
}
And for the HTML:
<body>
<div class="image left">Left Div</div>
<div class="right"">Right Div</div>
</body>
And if you want to make your life easier just learn flexbox. The way i learned it was using this site.
.container{
display:flex;
}
<div class="container">
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
RIGHT
</div>
</div>
This is one way to do it.
However i think that you should change the question into how i can learn to design in the browser (e.g. https://hackernoon.com/css-box-model-45ecf4ac219e) or something like that.
MY PROBLEM is why it is showing different output[Hyperlink Named HOME]
in browser( going above the div part )
when compared to design page in visual studio!!!
please Help me, i Don't know much about HTML, LEARNING.....
***<%# Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="project.login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.back {
background-color:chocolate;
width:inherit;
height:65px
}
.images{width:426px;
height:65px;
}
.hyperlinks {position:relative;
float:right;
margin-top:-20px;
margin-left:10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="back">
<asp:Image ID="Image1" runat="server" CssClass="images" ImageUrl="~/images/images.jpg" />
<asp:HyperLink ID="HyperLink1" runat="server" CssClass="hyperlinks">Home</asp:HyperLink >
</div>
</form>
</body>
</html>***
The problem occurs only in Internet Explorer, and then only in compatibility mode. So apparently, the designer in Visual Studio emulates IE's compatibility mode.
If you boil the issue down to the minimum required to show it, you get this
.back {
background-color: chocolate;
height: 65px;
}
.images {
height: 100%;
}
.hyperlinks {
float: right;
margin-left: 10px;
}
<div class="back">
<img id="Image1" class="images" src="http://lorempixel.com/195/65" />
<a id="HyperLink1" class="hyperlinks">Home</a>
</div>
This puts the floating link in the top right corner of its parent in all standards compliant browsers. But switching IE to compatibility mode will put the link below the orange bar.
(If you then give the link a negative top margin, it moves up a bit, but that doesn't change the issue.)
Now a makeshift solution is to use CSS that is handled the same by all browsers, compatibility mode or not. Something like this, for instance.
.back {
background-color: chocolate;
height: 65px;
text-align: right;
}
.images {
height: 100%;
float: left;
}
.hyperlinks {
line-height: 110px;
margin-left: 10px;
}
<div class="back">
<img id="Image1" class="images" src="http://lorempixel.com/195/65" />
<a id="HyperLink1" class="hyperlinks">Home</a>
</div>
A more permanent solution would be to make sure that Visual Studio's designer would show things in standards compliance mode rather than compatibility mode. However, I haven't found a way yet to do that.
I'm trying to make a warning banner for a web page. I'm using a label inside a div inside a panel with some css styles declared on the page. I don't want to declare those styles on every page, so I moved them to my Site.css file, (which is used by the master page). The problem that when I do that, the css styles aren't applied. Everything on the master page is formatted correctly, but the controls declared in the content page are not.
Hear's what I've go on the content page:
<asp:Content ID="Content2" ContentPlaceHolderID="ErrorMessages" runat="server">
<asp:Panel ID="WarningBanner" runat="server" CssClass="warningPanel" Visible="true">
<div class="warningDiv">
<asp:Label ID="testLabel" runat="server" Text="test" CssClass="warningLabel"></asp:Label>
</div>
</asp:Panel>
<style>
.warningPanel {
margin: auto;
width: 1000px;
background-color: red;
border: 10px solid red;
}
.warningLabel {
display: block;
color: white;
font-size: large;
}
.warningDiv {
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</asp:Content>
and hear's what I've got on the master page:
<head runat="server">
...ext...
<link href="~/Content/Site.css" rel="stylesheet" />
...ext...
</head>
<body>
...ext...
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
<div/>
...ext...
<body/>
and this is what my Site.css file looks like:
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
}
.warningPanel {
margin: auto;
width: 1000px;
background-color: red;
border: 10px solid red;
}
.warningLabel {
display: block;
color: white;
font-size: large;
}
.warningDiv {
margin-left: auto;
margin-right: auto;
text-align: center;
}
...ext...
What am I doing wrong?
CSS files are often cached by browsers. When that happens, changes made to the styles will not show up in the HTML display.
You can clear your browser cache after changing the CSS contents to see the modified styles. Another way to do it, which also ensures that your clients will see the updated CSS without having to clear their browser cache, is to append a query string to the link:
<link href="~/Content/Site.css?version=2.5" rel="stylesheet" type="text/css" />
Every time the CSS file is modified, you set a new version number to force the updated CSS file to be downloaded.
There's nothing wrong with your code. You probably haven't specified the correct file path to your CSS file. Double check that. Also, you've got a typo:
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
<div/>
It should be:
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
</div>
With the code below $title1 and $title2 should be outside of the div and centered against the width of the page. It only does this because I have the "Y" there. If I remove the "Y" the text moves up and it's centered the address class. Obviously I can't keep the "Y" there but not sure why that changes things.
<html>
<head>
<title></title>
<style>
body { margin:12pt auto 12pt auto;width:568pt; }
.sseal { float:left; width:56.25pt; }
.address { float:left;text-align:center; margin:15px auto;width:450pt; }
.dseal { float:right; width:56.25pt;}
wrapper { margin:0px auto; }
.form_title { text-align:center;font-weight:bold;font-size:22pt; }
.header { font-weight:bold; }
.heading { font-size:16pt;font-weight:bold; }
.title1 { font-size:24pt;font-weight:bold;text-align:center; }
.title2 { font-size:22pt;font-weight:bold; font-style:oblique;text-align:center; }
table, th, td { padding:10px; }
hr { padding:0px;spacing:0px;margin:0px; }
.rightpaced { margin:45px; }
</style>
</head>
<body>
<div class="wrapper">
<div class="sseal"><img src="../image2.gif" height="75" width="75" border="0"></div>
<div class="clear:both;"></div>
<div class="address">
<font size=+1><b>
$companyname<br>
$address
</b></font>
</div>
<div class="clear:both;"></div>
<div class="dseal"><img src="../image2.gif" height="75" width="75" border="0"></div>
<div class="clear:both;"></div>
</div>
<div class="clear:both;"></div>
Y<br>
<div class="title1">$title1</div>
<p>
<div class="title2">$title2</div>
</body>
</html>
First of all, unless you have some limitation (browser-support, this is an assignment that has to be done this way), I'd suggest you use newer (CSS2 and CSS3) selectors and HTML tags (for instance, the <br /> is not used much anymore).
See W3Schools for more information on newer HTML and CSS. The site has excellent examples and tutorials as well.
EDIT: See this example of the layout you wanted (I think).
I am a motion media designer trying to incorporate some of my work for a client into a website for her Christmas gift. I am trying to resize a .swf to match the browser size, as the fixed size is really messing with my otherwise-resizing layout.
Every time I set the width/height of the .swf to "100%" or "auto", the movie gets cut off at the top and bottom under the div containers. When I change the size of the container to 100%, I get a long, thin movie. I've copied my code below, and I would really appreciate your help. Feel free to criticize anything else about my code, too--I'm a CSS virgin.
Thanks so much! :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
<title>Eat, Drink, and Be Mary</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css" media="screen">
body {
background:url('images/home.jpg');
background-repeat:no-repeat;
background-size:cover;
position:absolute;
}
html, body {
height:100%;
width:auto;
min-width:700;
}
body { margin:0; padding:0; overflow:hidden; }
.swfcontainer {
margin-top:3%;
width:100%;
height:30%;
margin-bottom:1px;
}
.swfcontainersmall {
margin-left:10%;
height:300px;
margin-right:10%;
}
.flashfile {
width:100%;
height:100%;
text-align:center;
margin:2;
padding:0;
overflow:hidden;
}
.textcontainer {
margin-bottom:3px;
margin-top:0;
margin-left:0;
width:100%;
margin-right:0;
}
.textcontainersmall {
margin-top:1px;
margin-bottom:1px;
margin-left:25%;
margin-right:25%;
}
#flashContent {
width:100%;
height:100%;
}
#wrap { min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top:-100px; /* negative value of footer height */
height:100px;
clear:both;
border-bottom:solid 4px #333;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body>
<div id="wrap">
<div id="main">
<div class="swfcontainer">
<div class="swfcontainersmall">
<div class="flashfile">
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="300" align= "middle">
<param name="SRC" value="EatDrinkAndBeMary.swf">
<param name="wmode" value="transparent" />
<param name="SCALE" value="noborder" />
<param name="BGCOLOR" value= />
<embed src="EatDrinkAndBeMary.swf" width="300" height="300" align="middle" scale="noborder" wmode="transparent" bgcolor="transparent"></embed>
</object>
</div>
</div>
</div>
</div>
<div class="textcontainer">
<div class="textcontainersmall">
<img src="Images/tasteful.png" alt="Eat, Drink, and Be Mary is a locally-owned catering favorite specializing in delicious appetizers and comforting American favorites for events big and small. We can provide your party with a full, friendly staff to complete your amazing experience." width="auto" height="auto" class="textcontainer" onload="MM_effectAppearFade(this, 3000, 0, 100, false)" />
</div>
</div>
</div>
<div id="footer">
<img src="Images/MenuBottom.gif" width="100%" height="100px" alt="MenuBottom" />
<div>
</body>
</html>
Thats simply a lot of code. to mutch for a stack overflow question i think.
If you want a reponsive flash object with css your should look here or for a shorter version here
CSS:
.embed-wrapper {
width: 100%;
max-width: YOURMAXWIDTHpx;
}
* html .arve-embed-container {
margin-bottom: 45px;
margin-bot\tom: 0;
}
.arve-embed-container {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}
.arce-embed-container div,
.arve-embed-container iframe,
.arve-embed-container object,
.arve-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
take that css and with this html
<div class="embed-wrapper">
<div class="arve-embed-container">
<object YOURSTUFF=HERE>
</object>
</div>
</div>
you sould get everything inside the embed-wrapper work resizeing automatically so 16:9 so u soudl get rid of most of your code and implement something like this
In the flash file
Set
Stage.scaleMode = "noScale";
html file
set object width 100%
Hope this can point you in the right direction. But as yunzen points an online example, where we can actually see the elements your are embedding would be great.
<html>
<head>
<style>
.menu li {
display: inline;
}
.menu {
float: left;
padding: 0;
border: solid;
}
img {
float: left;
width: 200px;
margin: 0 30px;
border: solid;
}
#header {
margin-left: 20%;
margin-right: 20%;
padding: 0 5%;
}
</style>
<title>
</title>
</head>
<body>
<div id="header">
<ul class="menu left">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
<img src="http://www.google.com/logos/2012/steno12-hp.jpg">
<ul class="menu right">
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</div>
</body>
</html>
You should take a look at http://fitvidsjs.com/. Sounds like it is what you need.