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).
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.
I want to change the colours of divs separately but don't want to use the following css.
The syntax I am using is as follows:
HTML:
<div id="wrapper"><div><div><div><div><div><div><div>
</div></div></div></div></div></div></div></div>
CSS:
div>div>div {background-color:yellow;}
div>div>div>div {background-color:green;}
div>div>div>div>div {background-color:indigo;}
div>div>div>div>div>div {background-color:violet;}
div>div>div>div>div>div>div {background-color:chocolate;}
div>div>div>div>div>div>div>div {background-color:brown;}
Your best/only easy solution is using Classes or Id's and attaching them to your CSS sheet (as per Daniel's answer).
HTML:
<div id="wrapper" class="ClassDiv1">
<div class="ClassDiv2">
<div class="ClassDiv3">
<div class="ClassDiv4">
<div class="ClassDiv5">
<div class="ClassDiv6">
<div class="ClassDiv7">
<div class="ClassDiv8">
CSS:
.ClassDiv1{background-color:yellow;}
.ClassDiv2{background-color:green;}
.ClassDiv3{background-color:indigo;}
etc.
If you want 1 color for 2 div tags you can just do this in your style:
.ClassDiv1 .ClassDiv2{background-color:brown;}
But seriously, rather go to W3Schools and learn a bit on CSS as it will help you a LOT!
Use a naming convention.
.innerDiv1{
background-color:yellow;
}
.innerDiv2{
background-color:green;
}
.innerDiv3{
background-color:indigo;
}
.innerDiv4{
background-color:violet;
}
.innerDiv5{
background-color:chocolate;
}
.innerDiv6{
background-color:brown;
}
or you can use a pre-processor like LESS and nested inside each other
.innerDiv{
background-color:yellow;
div{
background-color:green;
div{
background-color:indigo;
div{
background-color:violet;
div{
background-color:chocolate;
div{
background-color:brown;
}
}
}
}
}
}
I would go with classes:
.bg-yellow { background-color: yellow; }
...
.bg-brown { background-color: brown; }
HTML:
<div id="wrapper">
<div class="bg-yellow"><div><div><div><div><div><div class="bg-brown">
</div></div></div></div></div></div></div>
</div>
Using this solution makes it easier to identify the color of the element when inspecting the HTML.
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>
My site looks like this:
I've coloured the central info bit red, so you can see. It's too far down the page! I can't work out why.
Here's the css (well, actually scss, but you get the idea) for that section:
#searchresult {
.left {
background-color:yellow;
float:left;
margin-right:0.5em;
}
.center {
background-color:red;
#activity {
float:right;
}
}
.right {
background-color:green;
float:right;
width:145px;
margin-left: 1em;
.info, .email {
#include minimal-btn();
a {
padding: 3px 0 0 28px;
}
}
}
}
(If you haven't seen it before, scss is a cool thing that compiles down to css. It works just as you'd think it would.)
Here's the html:
<ItemTemplate>
<div id="searchresult" class="box group">
<div class="left">
<img id="imgLogo" runat="server" alt="Logo" src=""/>
</div>
<div class="right">
<asp:Panel ID="pnlEmail" runat="server">
<div class="minimal email"><asp:HyperLink ID="lnkEmail" runat="server">Email this business</asp:HyperLink></div>
</asp:Panel>
<asp:Panel ID="pnlMicrosite" runat="server">
<div class="minimal info"><asp:HyperLink ID="lnkMicrosite" runat="server">Full company info</asp:HyperLink></div>
</asp:Panel>
<asp:Panel ID="pnlRecommends" runat="server" CssClass="recommends">
<span>Recommends: <strong><asp:Literal ID="litRecommends" runat="server"></asp:Literal></strong></span>
</asp:Panel>
</div>
<div class="center">
<span id="activity">Activity: <asp:Literal ID="litCompanyActivity" runat="server"></asp:Literal></span>
<h3><asp:Literal ID="litCompanyName" runat="server"></asp:Literal></h3>
<em><asp:Literal ID="litCompanyLocation" runat="server"></asp:Literal></em>
</div>
</div>
</ItemTemplate>
I'm pretty new to web design. Css isn't very intuitive for me, and I can't work out what is going on here. In the guide I was following This problem didn't seem to arise.
This is causing the problem:
<h3><asp:Literal ID="litCompanyName" runat="server"></asp:Literal></h3>
specifically, the default margin-top on the h3.
You can remove the margin-top, if that's what you want:
h3 {
margin-top: 0
}
Or, you can set overflow: hidden on .center to prevent collapsing margins, which is the source of your "alignment problem".
I am trying to align a text Email and textbox for it on top of an image at a specific location. I want the position to be fixed, no matter what size the screen is. Here is my html code:
<html>
<head>
<style type="text/css">
#container {
background-color:blue;
}
#content {
background: url('images/orange.jpg') no-repeat center top;
}
#c_main {
color: yellow;
}
#c_email {
position:absolute;
top:200px;
left:410px;
color: #FFFFFF;
font-size: 15px;
}
#c_emailbox1 {
position:absolute;
top:200px;
left:480px;
}
#c_emailbox2 {
position:absolute;
top:200px;
left:620px;
color: white;
font-size: 12px;
}
input {
border:0;
}
.email_textbox1 {
width:130px;
background-image:url('images/text_bg.jpg');
background-repeat:no-repeat;
}
.email_textbox2 {
color: #FFFFFF;
font-size: 11px;
width:130px;
background-image:url('images/text_bg.jpg');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="container">
<div id="content" style="height:1000px;left:0px;border:1px solid red;position:relative" >
<div style="height:100px;width:200px;border:1px solid red;position:absolute;top:250px;left:0px">
<h4> CREATE A USERNAME AND PASSWORD </h4>
</div>
<div id="c_email">
Email
</div>
<div id="c_emailbox1">
<input type="textbox" id="email1" border="0" class="email_textbox1">
</div>
<div id="c_emailbox2">
<input type="text" id ="email" value="Confirm Email Address" class="email_textbox2" onfocus="if
(this.value==this.defaultValue) this.value='';">
</div>
</div>
</div>
</body>
</html>
I cannot get it to align relative to the image. The text and textbox are misplaced when seen in a larger screen or if zoomed in and out. Suggestion please.
See my sample code. This is working. Change the height of parent div, the child always stays at bottom:
<div style="height:300px;border:1px solid red;position:relative">
<div style="height:100px;width:20px;border:1px solid red;position:absolute;bottom:0px">
</div>
</div>
If you want them always to the top of the text box. Make the parent control as relative.
The box or anything which you want to maintain constant distance make it absolute position
.Container {
position:relative
}
.child{
position:absolute
bottom:0px; // how much u wants to maintain..from the element
}