This is the code:
<form id="the_form" action="">ev
</div>
<!-- final pay_block -->
<div class="linea"/>
<div class="spacer"/>
the linea is overlapping the buy button, now is in the middle because there is margin-bottom: 15px aplied.
Edit:
This is the site: http://tinyurl.com/cboyymm
also what I want is to display the pay button in the same position. I left space enough to product description, and I fixed a height to the diferents divs before. Is this the right thing? I want to make it in the most minimalism way. Tips are very welcome, as Im using this project to learn.
Thanks in advance. At first I was afraid of posting things here because I didn´t want to mess, and Im quite ashame Im so nob. But I found a very warm welcome. Dont want to abuse, just know why this little things happen.
Now define min-height
#pay_block {
min-height: 78px; // add this line
height:78px; // remove this line
}
Line No :- 612 in this css file tienda1.css
Result is this
Related
I'm trying to center a button in an ASP.NET container. I've looked at quite a few answers here and on other sites. I found one post that says to use
<center></center>
Tags and that's the only suggestion that works somewhat so far. It does center the button mostly, but it is still just a little bit off to one side. What I would like to do is instead of using a suggestion that kind of works like the center tag above I would like to be able to set the margins for the button. Will someone please help me with this? I know it's probably a simple answer but I'm very new to ASP.NET.Thanks in advance.
Here is my code I am using:
<asp:Button id="uxUploadExcel" runat="server" Text="Pull Student Data"/>
A simple solution would be to use CSS here and apply it on the parent container. You can also set margins on the button via CSS.
.parentContainer {
text-align: center;
}
#uxUploadExcel {
margin: 10px;
}
<div class="parentContainer">
<button id="uxUploadExcel" runat="server">Pull Student Data</button>
</div>
Note: I wrote out a plain html button here but an ASP.NET button can be used in place of it.
I'm trying to make a simple yet interactive webpage for my school. Our current homepage we use for links is plain and boring.
I've created this: JSFiddle
But when I open the 'Student Links', the 'PHHS Website' button seems to automatically position itself ~50 pixels up.
Code because I have to:
<a class="itemLink" href="http://hcps.us/phhs/">
<div class="itemStudentsLink" id="PHHSWebsite">
<p class="itemText">PHHS Website</p>
</div>
</a>
If anyone knows why it's acting like this, please tell me. I'm not sure why this problem occurs.
This has to do with the vertical alignment of the blocks and the fact that one of the block's text goes onto two lines. Add
.itemStudentsLink {
vertical-align: bottom;
}
http://jsfiddle.net/ExplosionPIlls/mKYaL/19/
I am building the following site:
http://www.verbum.xtrweb.com/soon.php
But as you can see, everything is zoomed. Not if you adjust it, but I dont want users to have to adjust their view for my site. I want my site to always appear with the same zoom, as in the picture I uploaded here:
ctrl + 0 is not a solution I am looking for. If not something in the code, probably a style property or something of the kind. See code in your browser to check. Thanks!!
Apart from all the small errors and mistakes found on your page by previous users, I would advise you to wrap your header content into a container with a percantege width. This way it will keep the same width according to the browser window width in all browsers. The font size of your paragraphs should be em also to adjust itself easily. Keeping all this in mind and cleaning up your code, you should be able to deliver the same experience to most of the users
Looks like you made a typing-error. Change the font-size of your paragraphs into px or em. So font-size: 37px (instead of 37pt).
Here, the file did not exist:
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
Maybe you should fix this first.
Also, I don't think it's a good idea to include multiple versions of jQuery on the same page.
Update:
<div id="facebook" style="display: inline; opacity: 1.0999999999999999;">
<input style=" " id="fb-button" type="submit" value=" " onclick="window.location.href='http://www.facebook.com/sharer.php?u=<http://verbum.xtrweb.com/>&t=<Verbum, the new dictionary>'" <="" input="">
</div>
The HTML above (copied from your page) is wrong; the input tag does not close properly.
How do i go about piecing each and every div together?
I'm learning how to code in CSS and i'm fairly new, and i want to piece 3 - 8 pieces of the divs in each row. Once i've pieced some together, they appear uneven inside the dreamweaver IDE (and also inside the browser display).
Also, how do i get to resize them automatically? I've been trying width:100%; but all i'm getting is weird resized shapes and sizes.
If you don't get what i mean, my webpage technically looks like this
----------------------------------------------------------------------------------
| |
| background image 1 |
|--------------------------------------------------------------------------------|
| | | | |
| bg img 2 | bg img 3 | bg img 4 | bg img 5 |
| | | | |
|--------------------------------------------------------------------------------|
| |
| background image 5 |
| |
|--------------------------------------------------------------------------------|
but everytime i put my divs in the same row with a containing div for each row, i.e
<div class="container">
<div id="bg1" width:100; height:20;>
<div id="bg2" width:150; height:20;>
<div id="bg3" width: 250; height:20; >
<div id="bg4" width:130; height:20;>
</div>
</div>
</div>
</div>
</div>
it gets all jumbled up at the same location. Am i doing something wrong?
Would appreciate if someone could tell me a step by step solution...
Once again, i want to go about doing:
Construction of website with CSS for the layout.
Auto resizing of entire page according to web browser size.
Thanks.
First, don't use inline styles for prototyping something when you're a beginner. They're too hard to edit live. It will slow the process way way down.
You sound new to this, but that's cool! We all started somewhere.
Create your 5 divs first, and give them each a unique ID. IDs are for things that only appear on the page once. Classes are for things that appear more than once, or might at some future point appear more than once.
Then link a css file that your a separate declaration for each div. You're on the right track with width=100% for responsive design, although in practice it's often something like 92% even for a "full-width" div, because a little spacing is nice, and borders and padding add to the overall width. A 90% width div with 6% padding is always wider than the window itself (greater than 100%) which makes for strange behavior, so keep the box model in mind from the start.
Here are some tips I wish somebody had broken down to me early on:
Nowadays things are a LOT easier than they used to be for rapid prototyping CSS. The best way to figure this stuff out is to edit the stylesheet live in Chrome Developer Tools. Download and install Chrome if you're not using it already. Control click on your div and choose "Inspect Element." Play around in the inspector, and see how all the CSS styles can be edited live by doubleclicking on them and entering new values. If you click the "resources" tab you can see your whole stylesheet at once, and similarly edit the properties, and even add new ones. The best way to see what's happening with sizing is to temporarily declare an outline like:
#mydiv1 {outline: 2px dashed red;}
because outlines don't add to the width of the element, unlike borders. Then when you're done you can remove the outline declarations. Also keep in mind that any changes to a document's CSS in Chrome Dev Tools will be lost when you navigate away. So copy and paste your work into a text editor as you go.
If you're interested in responsive design, which is great, once you're getting good at all of the above, buckle in and read Ethan Marcotte's book:
http://www.abookapart.com/products/responsive-web-design
Marcotte's instructional approach is to start with pixels and then translate into percentages and ems in the stylesheet, but it doesn't need to be that way. You can design "live" with those variables in the browser.
hope this helps!
First of all, get rid of Dreamweaver. It's a hindrance. And has always been buggy. The sooner you get rid of that crutch, the better off you will be.
Secondly, looking at your example, I see a template for the old slice-n-dice photoshop into a table methodology. Replicating that with DIVs in CSS is rather pointless.
Third. If you truly need a table (data) keep it a table. Nothing wrong with that.
Fourth. The key to all of this is understanding floats and what contains floats. Most of the CSS grid systems base everything off of that. I'd take a look at 960.css and start playing with that a bit. It should help point you in the right direction of understanding what is going on.
You could use a <header> tag for the topmost part, and a <footer> tag for the bottom part. Clearly it works also with divs, but in my opinion it's cleaner that way.
That means that you'll have the following code:
HTML:
<header id="img1">
</header>
<div id="img2">
</div>
<div id="img3">
</div>
<div id="img4">
</div>
<div id="img5" class="newrow">
</div>
<footer id="img6">
</footer>
that could represent your desired structure pretty well. To style this, you can use CSS, and there are many possible solutions to the problem. One simple solution would be to set <header> and <footer> to 100% width, and to float all <div>s but the last one to the left, so that the remaining content (the other <div>s, in this case) will be on its right. Then you just have to set the width on all the <div>s, if you want you can even set it in percent, just make sure that it adds up to 100 or else you'll have a gap on the right. Also, you should put a margin-left on the last div to ensure that the content is placed properly.
This could be coded like this
CSS
body > header,
body > footer {
width: 100%;
clear: both;
}
body > div {
float: left;
}
#img2 {
width: 30%;
}
#img3 {
width: 10%;
}
#img4 {
width: 30%;
}
#img5 {
width: 30%;
}
body > div.newrow {
float: none;
margin-left: 70%;
}
You can see a little example of this code here, and you can grab it's code and play around with it here.
but like I said, there are many ways to achieve the layout you want, this is just one example.
As per your layout, what you want, Its better to have semantic HTML markup.
Example
<div class="containerWrap">
<div class="fullWidth"><img src="/imagePath"/></div>
<ul class="container">
<li id="bg1"><img src="/imagePath"/></li>
<li id="bg2"><img src="/imagePath"/></li>
<li id="bg3"><img src="/imagePath"/></li>
<li id="bg4"><img src="/imagePath"/></li>
</ul>
<div><img src="/imagePath"/></div>
<div>
CSS Would be
.fullWidth{
width:100%;
}
.containerWrap ul li{
list-style-type: none;
height:20px;
float:left;
}
#bg1{
width:100px;
}
#bg2{
width:150px;
}
#bg3{
width:250px;
}
#bg4{
width:130px;
}
You were all so helpful last time, I'm hoping you can help me with something that has been bugging me for the last 2 days...
I installed a plugin on Wordpress called Snazzy Archives to show my archives in an interesting way. I like it, it's great BUT for some reason, there's a massive space between my H1 tag and my archives.. and the other thing that's annoying me is that I can't seem to get any spacing between the header image and the H1 tag, despite it being there on every other page...
Anyone able to help with this? The problematic page is http://www.electrickiwi.co.uk/blog/archives
Thanks!
Ross
You have the following in your markup:
<p>
<code> </code>
</p>
Right below the Post Archives h1. You should also review the margin and padding on the bottom of the h1; currently, it's adding about 26px total space between.
And then, to fix the spacing of the h1 to the menu above it, add clear: both; to the div id="container4".
Also, your div class="snazzy" has a child code block that doesn't appear to do anything.
Try a combination of removing
<p>
<code> </code>
</p>
and setting a margin:0; padding:0 to your h1.archives