I'm trying to make a scrollbox for my webpage with two separate text fields. I implemented a solution and tested it on my local machine. Later I looked at it from another computer, and the web page was not looking as expected - it placed the right text field under the left one.
What should i do, so that my web page works and looks as expected on every computer? Can you point me to the right direction.
My HTML so far:
<style="text/css">
.scroll {
padding: 10px;
height: 280px;
width: 566px;
overflow: auto;
</style>
<div class="scroll">
<p style="margin: 10; float: left;">
etc <br />
etc <br />
etc <br />
</p>
<p style="margin-left: 25px; float: left;">
etc <br />
etc <br />
etc <br />
</p>
Are you using floats so they don't stack one on top of the other? Of course if your text fields are too wide then you'll need to reduce the size so they have room to appear side by side. As you can see it works in this example. Added new example with scrolling here
HTML
<div id="righttext">
<input type="text">
</div>
</div>
<div style="float:none;"></div>
CSS
#lefttext, #righttext {
float: left;
}
#container {
height: 100px;
overflow:scroll;
}
Related
So I've been building a collection of webpages with mainly HTML only, and I've decided to add a 'Back to start' div at the top, which is linked to the Welcome page. It currently appears above the header and question at the edge of the page, and this makes it push down the rest of the content, leaving a big gap along the top.
In other words, a div is pushing all my content down, when I'd rather have it aligned with the header which is otherwise the usual top of the page.
<!DOCTYPE html>
<head>
<title>Question 5</title>
<div class="leftbox">
<a href="file:///G:/Business/Business%20Sector%20Quiz/Welcome.html">
<div style="width: 80px; height: 40px; padding: 2.5px" float: left>
<p> ← Back to start</p>
</div>
</a>
<a href="file:///G:/Business/Business%20Sector%20Quiz/Question%204.html">
<div style="width: 100px; height: 40px; padding: 2.5px" float: left>
<p> ← Back 1 question</p>
</div>
</a>
</div>
I haven't managed to do this using the method as my CSS formats any divs, so I end up with a long strip down the left side which is formatted.
So what I'm asking is, does anyone know how to move my divs over to the side aligned with the header, or how to get around the div class="left" issue I have? Thanks - Oisin
Note: I apologise if I am being overly vague or not very specific with my question - I'm not too sure about HTML formatting, and about website building. Also, if you need to read some more code or see more about my website, just ask; I still have all the files.
the div with the class .leftbox needs to be floated left since it contains all the anchor links and it is the parent for all header elements
other issues with your html (you have float:left outside of your style)
div style="width: 80px; height: 40px; padding: 2.5px" float: left>
<div style="width: 100px; height: 40px; padding: 2.5px" float: left>
here is a snippet
.leftbox{
float:left;
}
<title>Question 5</title>
<div class="leftbox">
<a href="file:///G:/Business/Business%20Sector%20Quiz/Welcome.html">
<div style="width: 80px; height: 40px; padding: 2.5px">
<p> ← Back to start</p>
</div>
</a>
<a href="file:///G:/Business/Business%20Sector%20Quiz/Question%204.html">
<div style="width: 100px; height: 40px; padding: 2.5px" >
<p> ← Back 1 question</p>
</div>
</a>
</div>
<p>
<h1>
This is the header
</h1>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAvG8n4pH7Awr-5ISF1rif1RQMv8Rko1zTctYDaARiYOCJi4TDhY5ye1w'
</p>
I just started a basic MVC 4 application and I'm having a hard time trying to figure out how to make two divs appear in blocks instead of next to each other. In my _Layout.cshtml file, I have the following code for the body tag:
<body>
<div style="width: 60%; margin: 0 auto; display: block">
<div id="header">
<div class="headerImage" style="height: 200px; width: 150px; float: left"></div>
</div>
<div id="body" style="display: block">
#RenderBody()
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
And the headerImage class:
.headerImage
{
background: url('#Url.Content("~/Content/Images/foo.jpg")');
background-repeat:no-repeat;
background-size:100%;
}
Now in my Index.cshtml view, which gets rendered as part of #RenderBody(), I have a simple button:
<div>
#using (Html.BeginForm("action", "controller"))
{
<input type="submit" value="hello world" />
}
</div>
When I run this, the button is placed right next to the image, even though they are in different divs:
I even tried setting display:block on the divs but that didn't help either. Any idea how to do this?
Looks like you need to clear your second <div>, as follows:
#body {
clear: both;
}
More information on clearing your floats can be found at CSS Tricks
I've been having a lot of trouble trying to center an external script and I was hoping SO could help me out. I'm designing a page to use a Google widget that uses Google Maps to give directions to an office. Here is my code:
<asp:Content ID="Content1" ContentPlaceHolderID="page_content" runat="server">
<div class="centered">
<span class="header_large_bold">Directions to our office:</span><br /><br />
<span class="header_bold">Please type your address in the top bar and click "Go".</span><br />
<script src="[link to the widget here]"</script>
</div>
</asp:Content>
And here is the CSS for it:
.centered {
width: 100%;
margin: 0 auto;
text-align: center;
}
As it is, the text is centered perfectly fine, but the widget from the is left aligned. I can fix this using a tag, but I'm trying to avoid using it as best I can. Any idea what I'm doing wrong?
You can insert the tag in a div
<div id="parent">
<script src='...'></script>
</div>
and then center the div..
#parent {
width: 30%;
margin: 0 auto;
}
But it might depend on the script content
Easily put your code between
<div align=center>
and
</div>
:)
User fa7d0 has the exact solution, but maybe a little unclear for the beginner:
Step 1 - Use a div with a "parent" ID to encapsulate your script as follows:
<div id="parent">
<script src='...'></script>
</div>
Step 2 - Go up to the top of your code, probably inside the area where you are defining the header information, and in the style section place the definitions:
<style>
#parent {
width: 30%;
margin: 0 auto;
}
</style>
I find it helpful to put all the div styling stuff in one area, all the p styling stuff in one area, etc.
<div id="textcontent">
<center>
<br /><p>........... ARTICLE IN HERE .........</p>
</center>
</div>
#textcontent {
margin-right: 25px;
}
#textcontent p {
margin-right: -24px;
width: 663px;
}
ARTICLE IN HERE will display an article posted by user.
Snapshot:
Problem:
A line of an article by pass the side boundries. How can i set specific fixed width so the text gets indented (moved to second line) automatically and doesn't pass the side borders?
Note: text area height gets expanded automatically as lines of text increase.
Extra Info:
<div id="posted_wrap">
<div id="posted_middle">
<div id="posted_top"></div>
<div id="textcontent">
<center>
<br /><p><?php echo $thread; ?></p>
</center>
</div>
<br />
<div id="posted_bottom"></div>
</div></div>
#textcontent p {
margin:0 auto;
text-align:center;
width: 663px;
Remove <center> as it's not needed, and is deprecated. Set your margin of your paragraph tag to have auto (left and right).
That code works. The code you posted works too - so you may have a positioning or float issue going on above the code you're struggling with.
If those black "chalk" lines are a background image you can add:
padding:0 10px (for example) to your <p> tag to keep the text inside further from the edges.
I want to position this HTML snippet
<div id="D1">
<div id="D1.1">HeaderText</div>
<div id="D1.2"> From
<input id="from" name="from" value=""/>
</div>
<div id="D1.3"> To
<input id="To" name="To" value=""/>
</div>
</div>
this way
+-(D1)-------------------------------------------------------------------------+
|+-(D1.1)---------------------------++-(D1.2)-------------++-(D1.3)-----------+|
|| || +-(from)-------+|| +-(to)---------+||
|| HeaderText ||From| |||To| |||
|| || +--------------+|| +--------------+||
|+----------------------------------++--------------------++------------------+|
+------------------------------------------------------------------------------+
using CSS
Things I need:
D1.1 must be left aligned and D1.2 y D1.3 must take only the space they need and must be right aligned.
Even though I represented here the width of D1.1 to take all the remaining horizontal space, it's not required to do that.
D1 should grow vertically to contain D1.1, D1.2, D1.3 completely. (No overflow, all divs completely visible)
The design must be fluid (i.e. if I change the font sizes of the text inside the divs, the layout adjust itself accordingly.
Is it possible to do all of this using only CSS and no tables? How?
Yanko,
Your ID names have periods in them and that'll be a problem in CSS since period is reserved. Best thing is to not use reserved characters in names but if you must have them, then you have to escape the periods with a backward slash. Markup can stay as is.
Here is the CSS:
#D1 {
background-color: gold;
padding: 10px;
overflow: auto;
}
#D1\.1 , #D1\.2 , #D1\.3 {
float: left;
padding: 10px;
}
If you need help understanding overflow property, here's a tutorial that discusses it.
===
Layout Gala is a pretty good reference for CSS based layouts.
You might want to take a look at this layout, or possibly this layout since they both look roughly like what you're asking for.
Good luck, and hope this helps some.
#D1 {
background-color: gold;
padding: 10px;
overflow: auto;
}
#D1\.1 {
float: left;
padding: 10px;
}
#D1\.2 , #D1\.3 {
float: right;
padding: 10px;
}
</style>
</head>
<body>
<div id="D1">
<div id="D1.1">HeaderText</div>
<div id="D1.3"> To
<input id="To" name="To" value=""/>
</div>
<div id="D1.2"> From
<input id="from" name="from" value=""/>
</div>
</div>
</body>
</html>