basic html css design of a box with image and title - html

I am not a very good designer. At least not with html and css. I have been using a very simple code like this:
<fieldset style=\"color: #000000; border: 1px solid #000000; width: 225px; text-align: left; padding: 5px;\">
<legend style=\"color: #999999; font-weight: bold;\">Headline.</legend>
<p>text</p>
</fieldset>
To output information in a php online game i am working on. I need something similar, put a little better looking. Can I get some help. I was thinking something like:
<h2 class="entry-title">Example</h2>
<img= examples.jpg" >
<div class="entry-content">
</div>
But im not sure what css code i can write to make a similar effect to the fieldset/legend that im currently using. I need a box with a title, an image on the left side and tekst on the right side of the image.

You could try use the div block below.
<div class="fieldset">
<h2 class="entry-title">Example</h2>
<img= examples.jpg" >
<div class="entry-content">
</div>
</div>
As styling, first give a border to your fieldset div. Then, you could just position the h2 tag relatively to your fieldset div playing top and left values. and be sure that your body background, filedset div's background and h2 tag's background is the same. Finally float both div entry-content and the image to left.
With a little tweaking you should get a similar looking of tag.

Related

Somewhat new to html and css

I´ve been working with Html for a bit these last 2 weeks and just started css today. I understand some of the basics of css (some of the elements and how to make the code look neater) but there are a few things i dont quite understand and haven´t been able to find so far. Such as making an image smaller for example. Can anyone explain to me why this css code isn't working?
h1{
Color: #8a1319
}
.name {
color: #ba454b;
}
/*help with this part please? Cant figure out how to properly make it smaller*/
.joke{
border: 2px solid red;
max-height: 250px;
width: 50%;
}
body {
text-align:center;
background: powderblue
}
<div class="name">
<h1>Dylan Carlson</h1>
</div>
<section>
<h1 class="title">
website
</h1>
<p>
<div class=joke>
<img src=http://www.jeremychin.com/repository/tickled/0355.jpg class=image />
<div>
<br>
<br> Age: 17
<br>
<br> Grade:12
<br>
<br> Intrest: programming
<br>
<br> extra curricular: N/A
<br>
<img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSJjXu1Ulhi3ExUJYOsgRxEcXywik5FG2B-ouj4E3RqgDIARssdQ>
</div>
</p>
<p>
Favorite Icecream: IDFK
<br>
<br>
Favorite color: Gold/Black
</p>
</section>
Remove the DIV around the image and add joke to the class:
<img src="http://www.jeremychin.com/repository/tickled/0355.jpg" class="joke">
Since you had joke as a class of the DIV, it applied to the DIV and NOT the IMG. Thus, the max height of the DIV was 250px and since the picture was larger, it overlapped.
A bit of advice: Keep CSS at the lowest level you can (the IMG in this case and not the DIV).
You are editing the image's parent div, that's why it's not working. Use the image's class instead.
.image{
border: 2px solid red;
max-height: 250px;
width: 50%;
}
Css is not for creating things on the browser it is for styling elements. Ii is used to make things look as desired. The code as per your question will make a div (if styled on to) have a border with 2px in size with red colour and the div would be having width 50 percent as per the availability space and a maximum height of 250px

Website looking really weird

Why is my paragraph bigger than the div when its inside it. To me it doesn't make any sense. Can you guys explain why this is happening and how I can fix it.
CSS:
#whos{
font-size: 15px;
color: black;
}
HTML:
<div id="Text">
<b id="bold">Hello,my name is Navjeeven</b>
<p id="whos">
I am Currently enrolled at
Brampton Christian School
</p>
</div>
What it looks like right now?
You have another style: #inside p which overrides the font size.
https://css-tricks.com/specifics-on-css-specificity/

L-shaped border using HTML and CSS

I need to populate data in the white space of the box shown in the picture. The Red portion will be an image,
But still data has to be shown continuously in the white space. How can i achieve this using HTML and CSS ?
Updated with code :
<div id="Content" runat="server">
<img id="ad" src="images/sandbox.gif"
style="float:right; height: 200px; width: 150px;" alt="{alt}" />
</div>
#Anuya take a look at this http://jsfiddle.net/TfXNf/
Its better if you define a class in you css style in order to toggle all pictures that needs to have the same layout so
HTML
<img src="http://link.to/image.jpg" class="className" alt="Image"/>
CSS
.className{
float: right;
margin-right:2px; /*change these based on your layout*/
margin-bottom: 2px; /*change these based on your layout*/
}
Margins are needed to push the text a little bit away from the picture so you can create the illusion of the border
Just put a float onto your image:
<img src="{imageLocation}" alt="{alt}" style="float:right;" />
Ideally you would want to keep the styling separate from the content but this will give you the idea. Hope that helps

Containing a text in an oval shaped area

I have a html page which looks like the following:
I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <img> tag for it if it would help. One lame way is to use <p> tags with padding, but that is not an efficient way, so kindly suggest some good methods.
EDIT: HTML:
<div id="leftStage" class="rounded-corners">
<div id="questionDisp" align="center">
</div>
</div>
CSS:
#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}
JS: (When the appropriate function is called: )
$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1); //data read from xml
EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed
There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.
EDIT:
The concept here is to float <div>'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated <div>'s, you can create a wide variety of cascading "stencils."
See concept illustrated here: fiddle
If it is background-image then use the position:absolute with proper margins (top and left), and set the width less than that the oval background-image. Then display property 'block'.
Maybe you could try the jQuery plugin Text Fill
also see: https://stackoverflow.com/a/688362/753676
I removed my answer since only the left float worked.
If you paste this code: it'll show you exactly how it works. I did a border-radius instead of creating a circle png.
<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
You have not shared any HTML, The working code is with some assumption
The HTML is,
<div id="main">
<div class="text">This is text</div>
</div>​
Where div with classtext is the text container.
The CSS for same will be,
#main{
background-image:url('http://i.stack.imgur.com/bw2HK.png');
height:563px;
width:691px;
}
#main .text{
color:#FF0000;
width:240px;
text-align:center;
top:100px;
border:1px solid;
float:left;
position:absolute;
}
​Here .text is the class that represent the text styling. The main part is position:absolute;. This will set the text div position to absolute. Now you can move the div above image div using top and left styles.
Please do review working example here
P.S. The border, color and other styles can be changed as per your need.

How do you set up a custom body tag

I want to create a site with a background one color and the centered content section another color. I am having trouble setting up custom tags to achieve this. Here's what I have:
A custom body tag -
<body style="background-color: #000000" >
<div style="text-align:right; padding: 10px; background-color:white; width:800px">
<jsp:doBody />
</div>
<n:footer></n:footer>
</body>
It seems to me that anything that I include between the custom body tags on my jsp should have the background-color = white and everything else around it should be color = #000000. This isn't the case. Instead I only have a band 10px high across the page. What am I doing wrong?
The <div> collapses if there is no content. Give it some text.
usually I just do this:
<body style="padding:0;margin:0;background-color:#000;">
<div style="margin:0 auto;width:800px;background-color:#fff;">This is the content</div>
</body>
since div has margin:auto for its left and right margins, it will automatically center itself. Just make sure to add a width property, else it won't work.