Positioning of elements of the CSS. format my header and keep him in a position fixed?

I have a few things here. Any help would be grateful. Thank you in advance.

I was styling my head, and it has become a bit more complex, kind of looked a little crazy. So I'm all stripping back so that I can totally understand how everything can be placed on a page (via the widths of margins, paddings, heights, line-heights etc. But even through a few tuts lynda.com, I always find it a bit confusing how control the positions of my items on the page. As you can see I have colored the colors of different backgrounds so that the items are easier to see. As well as the screenshots I posted ONLY relevant CSS/HTML

First of all, I use my head as my banner at the top of the page, which includes my h1, menu navigation nav text logo and links from social network button.

However, there is about a 10-20px gap/gray bar at the top of the page, which I suppose is my body (so the same color). I want to know how can transparent so that the Red header at the top is completely.

Screen Shot 2015-09-12 at 10.39.00.png

Screen Shot 2015-09-12 at 10.43.49.png

Next is social networking buttons (green). Above you can see that they are placed to the right of the page. However, given that I fixed the header so that it remains at the top of the page social buttons to go directly to the left of the page. Now I can solve this by using padding on the left side. This pushes the right buttons, but I really don't see that as a real solution, rather a twisted. I want to move the section to the right, not use margins and others to push the element.

Screen Shot 2015-09-12 at 15.44.48.png

Here is the HTML and CSS section for this part. You will see that I commented on a part of the code to try to figure out what is the issue. Feel free to play with it.

I appreciate that very much. Thank you.

<! doctype html >

< html >

< head >

"< link rel ="stylesheet"type =" text/css"href ="... / /CSS/style.css ">"

< meta charset = "UTF-8" >

< meta http-equiv = "content-type" content = "text" >

< meta http-equiv = "X-UA-Compatible" content = "IE = edge" >

< meta name = "viewport" content = "width = device-width, original scale = 1.0" >

creation of < title > BGDR < / title >

<!-the following script tag downloads a font of Adobe Edge Web server fonts to use in the web page. We recommend that you do not modify it.--> < script > var __adobewebfontsappname__ = "dreamweaver" < /script >

<!-the following script tag downloads a font of Adobe Edge Web server fonts to use in the web page. We recommend that you do not modify it.-->

<!-< script > var __adobewebfontsappname__ = 'dreamweaver' < /script >->

" < script src =" http://use.edgefonts.NET/quicksand:N3, i3, N4, I4, n7, i7:All.js "type =" text/javascript"> < / script > "

< / head >

< body >

"" <!-< img src = "... / Assests/Pics/dots_lines.gif" class = "dotimg" alt = "Points and lines in motion" >-->

< header >

<!-h1 is a text logo (I need to check to see have a h1 text logo is ok)->

< h1 id = "logo" role = "button" >

< a href = "Home.html" title = "return to the front page" role = "link" > "

< span id = "bgdr" >

BGDR

</span >

< br >

< span id = 'creative' >

Creative

</span >

< /a >

< / h1 >

< nav id = "nav" role = "navigation" align = "right" >

< ul >

< li > < a href = "Home.html" title = 'Go Home' rel 'next' = > FRONT PAGE < /a > < /li > "

< li > < a href = "About.html" title = "On BGDR" rel = "next" > ON < /a > < /li > "

< li > < a href = "CV.html' title ="CV"rel = 'next' > CV < /a > < /li >"

< li > < a href = "Blog.html" title = "A blog of my work and thoughts" > BLOG < /a > < /li > "

< li > < a href = "Contact.html" title = "contact me" rel = 'next' > CONTACT < /a > < /li > "

< /ul >

< / nav >

< br >

<!-Here's the social netowrking with < a > tags buttons put an external link-->

< section class = "social" role = "button" align = "right" >

" < a href =" https://Twitter.com/sambegdouri "title =" Tweet Me! "target ="_blank"> "

"" < img src = "... / Assests/Icons/twitter.svg" alt = "Twitter" width = "40" height = "40" >

< /a >

< a href = "..." "title ="Facebook Page"target ="_blank">

"" < img src = "... / Assests/Icons/facebook.svg" name = "Facebook" alt = "Facebook" width = "40" height = "40" >

< /a >

" < a href =" https://Instagram.com/sambegdouri/ "title ="My Insta Feed"target ="_blank"> "

"" < img src = "... / Assests/Icons/Insta.svg" height = "40" width = "40" alt = "Instagram" >

" < /a > < a href =" "" " https://UK.LinkedIn.com/in/sambegdouri title ' = 'My Linkedin profile' target = '_blank' > < img src ="... / Assests/Icons/linkedin.svg "height ="40"width ="40"alt ="Linkedin"> < /a > < / section >

< / header >

< / body >

< / html >

/ * This section is for! the value default global styling for the entire site * /.

HTML {}

margin: 0 auto;

padding: 0;

}

{body

Police-family: quicksand, didact-Gothic, without serif.

margin: auto;

make-style: normal;

Police-weight: 300;

height: auto;

Width: auto;

background-color: gray;

}

/ * This section isfor the header section that includes the header itself, my M1, the navigation bar text logo and social buttons Albums * /.

{to header

background-color: hsla(359,70%,46%,1.00);

position: fixed;

Width: inherit;

}

H1 {}

background-color: orange;

Width: 175px;

height: 83px;

/ * font size: 4;

text-align: justify;

color: black;

margin: 0;

position: inherit;

top: 0em;

left: 0.5em;

padding: 0;

top of the margin: 7px;

margin-bottom:-82px; * /

}

/ * {#logo

line-height: 30px

}

{#bgdr}

}

{#creative}

font-size: 0.6em;

letter-spacing: 0.04em;

padding-left:0.5%;

line-height: px;

}*/

a: link {}

color: hsla(0,0%,0%,1.00);

-webkit-transition: color 0.5 s ease-out;

-moz-transition: color 0. 5 s;

-o - transition: color 0. 5 s;

transition: color 0. 5 s;

text-decoration: none;

Police-weight: 500;

}

a: visited {}

color: hsla(0,0%,0%,1.00);

}

a: hover {}

color: hsla(0,0%,72%,1.00);

}

UL {}

/ * Here, the ul, li and .nav control the top nav menu * /.

background-color: blue;

list-style-type: none;

float: right;

position: inherit;

top: 5th;

right: 3em;

top of the margin: 0em;

right margin: 2.5em.

left margin: 0em;

margin-bottom: 0em;

Padding: 0em;

font size: 1.15em;

}

Li {}

float: right;

display: block;

Width: inherit;

left margin: 3em;

}

.the {}

position: inherit;

left: 1200px;

top: 0;

display: block;

Width: 11èm;

Padding: inherit;

Size: 1em;

background-color: green;

}

Sticky header using position: fixed.

ALT-Web demos: CSS Sticky header

Tags: Dreamweaver

Similar Questions

  • I'm losing the css formatting when I move the files in the local directory

    I'm rethinking our old site, so I myself created a temporary folder in my site all the pages with the new look. When I'm ready to download these pages, I'll copy them to their actual location on the site, which will replace the old pages. But when I tried to do this as a test, I lost the css formatting. It seems that the css file is not stayed attached. Why?

    Thank you!

    Liolee

    Copy your CSS file in the folder NewSite

    Do a search & replace to remove the ... /

  • I can't drop my icons on the desktop next to the Start button. My 'elements of the locked office' is disabled, and "auto arrange" is unchecked. What can I do so that he abandoned the ions next to the Start button?

    I can't drop my icons on the desktop next to the Start button. My 'elements of the locked office' is disabled, and "auto arrange" is unchecked. What can I do so that he abandoned the ions next to the Start button?

    Hi richardcollis,

    You did changes to the computer before this problem?

    You try to run the system restore that will repair return the computer to the point while it was working fine.

    How to restore Windows XP to a previous state

    Hope the helps of information.

    Please post back and we do know.

  • I tried the license of my trial version of photoshop elements, but the download is for windows and I use a mac.  Secondly, I get an error message saying that the serial numbers provided by Adobe in the received email are not correct.

    I tried the license of my trial version of photoshop elements, but the download is for windows and I use a mac.  Secondly, I get an error message saying that the serial numbers provided by Adobe in the received email are not correct.

    Regarding the download, the correct trial version going, you should be able to manage on the link below.  If you have made a purchase and bought a Windows license so it is not valid for a Mac installation.  You will need to contact the Support from Adobe when they go bacvk vacation to see about getting the correct license.

    You can download the demo version of the software through the page linked below and then use your current serial number to activate it.

    Don't forget to follow the steps described in the Note: very important Instructions in the section on the pages of this site download and have cookies turned on in your browser, otherwise the download will not work correctly.

    Photoshop/Premiere Elements 14: http://prodesigntools.com/photoshop-elements-14-direct-download-links-premiere.html

    To the link below, click on the still need help? option in the blue box below and choose the option to chat or by phone...
    Make sure that you are logged on the Adobe site, having cookies enabled, clearing your cookie cache.  If it fails to connect, try to use another browser.

    Get help from cat with orders, refunds and exchanges (non - CC)
    http://helpx.Adobe.com/x-productkb/global/service-b.html ( http://adobe.ly/1d3k3a5 )

  • Will not empty the messages in my Outbox and keep messages to re-mailed every minute.

    Outbox will not be empty

    Will not empty the messages in my Outbox and keep messages to re-mailed every minute.

    You don't have to tell us what e-mail program use. If it's Outlook Express, then this is the answer.

    You have apparent dbx file corruption.

    Spend most of your messages out of the Inbox and then create new folders to send and sent items box after having moved the messages you want to save to a local folder that you create.

    Tools | Options | Maintenance | Store folder will reveal the location of your Outlook Express files. Note the location and navigate on it in Explorer Windows or, copy and paste in start | Run.

    In Windows XP, Win2K & Win2K3 the OE user files (DBX and WAB) are by default marked as hidden. To view these files in Windows Explorer, you must enable Show hidden files and folders under start | Control Panel | Folder Options icon | Opinion, or in Windows Explorer. Tools | Folder options | View.

    With OE closed, find the DBX files for the items in the Outbox and sent and delete them.  New ones will be created automatically when you open OE.

    After you're done, followed by compacting your folders manually while working * off * and do it often.

    Click Outlook Express at the top of the the folder tree so no folders are open. Then: File | Work offline (or double-click on work online in the status bar). File | Folder | Compact all folders. Don't touch anything until the compacting is completed.

    General precautions for Outlook Express:

    Do not archive mail in the receipt or sent items box. Create your own user-defined folders and move messages you want to put in them. Empty the deleted items folder daily. Although the dbx files have a theoretical capacity of 2 GB, I recommend all a 300 MB max for less risk of corruption.

    Information on the maximum size of the .dbx files that are used by Outlook Express:
    http://support.Microsoft.com/?kbid=903095

    Disable analysis in your e-mail anti-virus program. It is a redundant layer of protection that devours the CPUs, slows down sending and receiving and causes a multitude of problems such as time-outs, account setting changes and has even been responsible for the loss of messages. Your up-to-date A / V program will continue to protect you sufficiently. For more information, see:
    http://www.oehelp.com/OETips.aspx#3

    Why you don't need your anti-virus to scan your email
    http://thundercloud.NET/infoave/tutorials/email-scanning/index.htm

    Note that for some AV programs, it may be necessary to uninstall the program and reinstall in custom Mode and uncheck analysis when the option is the result of e-mail messages.

    Compact often as specified above.

    And backup often.

    Outlook Express Quick Backup (OEQB Freeware)
    http://www.oehelp.com/OEBackup/default.aspx

  • Removal of white line in the CSS formatting

    Hi all

    I hope that one of you has experienced many can help a beginner (new!)

    I've been dealing with CSS and build my layout with it instead of tables, following the advice of some of you guys here. He's doing much so far, and I can see why you recommended, but I hit a roadblock.

    At the top of my page, in a div tag, I have my image in the header. Just below that, in a new div, I have an indefinite list of words which I arranged in a single line. Lower than that, again, I have another image.

    What I want is for each of these layers to flow from one to another, without any white space in the middle (my background is white). There is no white space between my list of words that are on a green background, and the image below, but between the top image and block the green background which is my line of words, there is a white line.

    I tried everything in my limited arsenal of "expertise", which amounts to try the margin = 0 tags on the top image and the line of words, but little matter what I try, the white line will not disappear. I've rechecked to be sure, and it is not part of the image. When you insert a picture in html using the CBC, DW automatically adds a white line underneath that you can not delete it in CSS?

    I can put up a screenshot if that helps?

    Thanks in advance for anyone who can help me. It is the engine of my nut of mind n00b!

    Best wishes to all,

    Jack.

    For the best answers here, please download your test files page and no dependents on your remote server and post a link so we can see in our browsers.  Also, please tell us which browsers you see cela in.

    My best guess without benefit of your page appears, you have a few lines of browser by default & padding appearing around one or two images.

    In code view, add the CSS inline style to your images as follows:

    style = "display: block" src = "image1.jpg" > "

    style = "display: block" src = "image2.jpg" > "

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

  • Hidden elements in the apex 4 now hidden and protected

    Hi all

    Hidden and protected option is no longer available in 4 Apex. Now, a hidden item is automatically hidden and protected.

    This gives me problems with my application.
    I created a page with a menu.
    When I click on the menu my page gets filled with content.

    I do this with a text element.
    In this element of text, I fill the content id. When I click on the menu a JavaScript fills the text with the correct content id element.
    The content area shows the content id, and the content is displayed.

    Now if I put the text as hidden field, the page gives me an error
    Checksum error for hidden and protected item ID (2036114079384286), value (5), display of checksum (8EDF8C5C97169E49A9A12B5B15897DB5), the checksum expected (*), index_i (1), index_j (1), index_m (1);

    Any suggestions?

    Huh?

    There is a type of 'Hidden' and a separate place under "settings" to "Protected" and you answer Yes or no to the selection list.

    This does not work for you?

  • I send email to different contacts in different groups. Apple has removed the old symbol of head and shoulders to select contacts. The new system if possible he's so screwed you cannot understand it.

    Apple has removed the symbol of the head and shoulders of e-mail that was used to select contacts. Very very easy. Now, it's so complicated on my new macbook, it is impossible to understand how to select several contacts during transfer or composition. Groups for me is not the answer.

    I'm not sure that I understood what you're asking, but you select several contacts in Contacts.app in the standard way. It is to hold down the ⌘ (cmd) key while selecting them with the mouse clicks. Then drag the names chosen for the To: field of the message.

    C.

  • Illustrator: How to get the overlapping text on transparent and keep gradient and stroke?

    In Illustrator, how can I be part of a transparent text overlapping letter? The circle which lies behind this letter has a gradient and a stroke.  I want the letter to appear that it is hanging around this circle.  In the screenshot, I pointed out the area I want to be transparent with a green arrow. Thank you for your help.

    example.jpg

    Draw a line through the descender of the letter. Select the letter and line, then click on split. Separate the two forms that result and send whatever shape you want behind the ring.

    Result:

  • What is the difference between a header and a Cape?

    Hi there - I'm starting, so please be nice, but I can't - anywhere - find someone who can explain the difference between a Cape and a header when it comes to platelets.

    A "category" would be a tag like

    or

    (they give importance and emphasis to some text in your page) HTML headings

    A "header" is html5

    tag (a container to hold the Info "at the top of the page"): header HTML tag

  • How the taskbar to view the Long format of Date and time? I know that I can click to see, but I want it appear constantly.

    Can someone guide me through these steps.

    1. right click on the bar of tasks then UN -lock the taskbar if there is a tick against this setting.

    2 place your cursor on the top edge of the taskbar until it turns into a two-headed arrow, and then click on & made drag as if you were dragging the edge of any window.  By making the taskbar more fat, you will see the format switch to a view of three lines: hour, day of the week, short date.  This is the best that this point can do on its own, so I don't think it will satisfy you.

    3 you can then upgrade by clicking on the time in the taskbar, click on change date & time..., Date & time tab, click change date, time, Date & settings dialog box, click on change the calendar settings, in the entry for the short date format, enter what you want as DD MMMM yyyy then OK OK, OK, OK.  The taskbar happily modified displays short date in the format.

    4 you can easily try then reset then using the reverse procedure, if you decide that the display of three lines is worse than any date not having do not at all.

  • new format is slow and keeps closing

    new format seems to slow loading and closing constantly... know is not my computer, just had it set up through microsoft... a lot $$$

    Hello

    What version of Windows are you using?  Windows XP, Windows Vista, Windows 7, Windows 8?

    What is the make and model of computer

    In order to exclude malware do the following:

    Restart the computer and start typing the F8 key

    Select Mode safe mode with networking

    If you use Windows 8 or 8.1, type msconfig in the search bar of charms

    Click on the Startup tab

    Select Secure Boot

    Select the network

    Click on apply, Ok

    Reboot and you will load mode safe mode with networking

    Download the following tool and run a scan complete

    http://www.Microsoft.com/security/scanner/en-us/default.aspx

    When you are done, reboot and let Windows load

    With Windows 8 before restarting, click Start > Type msconfig > press enter

    Click on the Startup tab

    Uncheck secure boot

    Click on apply, OK

    Reset

    Once Windows loads, click Start > type CMD

    Right click on CMD > select Run As Administrator

    Windows 8 > right click on start > select command prompt (Admin)

    Type sfc/scannow

    Press enter

    Note: There is a space between sfc and / scannow

    The scan takes a few minutes.

    Use the System File Checker tool to repair missing or corrupted system files

    http://support.Microsoft.com/kb/929833/en-us

    To open the CBS after the scan is complete, follow these steps:

    Click on Start Orb > type cmd in the search box

    Right click on cmd in the results above > click on run as administrator

    At the command prompt, type notepad c:\windows\logs\cbs\cbs.log then press enter

    Download a copy of the CBS log to your account of OneDrive (formerly SkyDrive) and post a link in your next reply.

  • recently the videos will start ok and keep cutting all the seconds

    When look at a vidoes will start ok, then sound will cut every few seconds, and then come back and left. Visual ok.

    Hello

    · What operation are you using?

    · You use Windows media player to play videos?

    · If so, what is the version of the same thing?

    · Were you able to play videos previously?

    · Do you remember all the recent changes on the computer before the show?

    · You play the downloaded music or is it CD/DVD?

    · This happens with any format of file in particular?

    You can access the link below: Tips for solving common audio problems: http://windows.microsoft.com/en-US/windows-vista/Tips-for-fixing-common-sound-problems

  • How to rotate the numbers in a circle and keep them like numbers on a clock face.

    Please can someone help me with my question.clock face.jpg

    Draw a crircle. It cracks. No fill, no respect

    Draw a rectangle and make a copy of it. The box should be large enough to contain the largest number.

    Select all, melt.

    On mixture not the number of objects that you need. The original two will be stacked on each other, so you need an extra.

    Make a copy so that you can easily return.

    depends on how you drew the circle you will need to take over the management of mixture.

    Expand one of your mixes.

    Disassociate.

    Remove the duplicate object.

    Select all of the check boxes on the circle and Type > threaded text > do

    Type the numbers with a return as a divider in the boxes. Format the text.

  • The restore button on the top right of the screen is not clear and I was wondering how to fix this please

    Restore down and reduce to a minimum the button are grayed out looking. However, the close button is ok. How can I get these showing clear please?

    Start Firefox in Safe Mode to check if one of the extensions (Firefox/tools > Modules > Extensions) or if hardware acceleration is the cause of the problem.

    • Put yourself in the DEFAULT theme: Firefox/tools > Modules > appearance
    • Do NOT click on the reset button on the startup window Mode safe

    If you use a windows theme non standard or other changes in appearance and then try to undo these changes and use a (different) standard theme or wallpaper of Windows.

    • Control Panel > personalization > Theme & window color and appearance

Maybe you are looking for

  • Firefox in silent mode won't load websites - no error, other browsers work well, no program parasite.

    Info request here: http://pastebin.com/6W8CmjS3Reset has been performed without any effect. Other browsers work fine. The firewall is configured correctly and no potentially conflicting software has been installed recently. The computer is generally

  • Satellite Pro U400 - 24 - crack appeared in the frame above the DVD drive

    I have a fairly new Satellite Pro U400 - 24 hours (seven months), where a crack appeared just above the DVD drive, close to the screen where the slot ends. I know for sure that I havn't dropped it, so I just want to know if it is a problem that every

  • Evil under MacOS after video call chat window

    If when calling video with Person1, I going to chat with person2 (no no typing, only to switch), after finishing call chat with person2 window will be displayed for all contacts. By clicking on contacts, switching only contact above, but the "body" o

  • Problem of cooling system on my Satellite C660

    Hello Have a new Satellite C660 I used it for 2 months and he started to give me the following system warning It has detected a problem with the cooling system please pay immediately the computer and return it for service. So what could be the proble

  • HP Officejet Pro 8500: Paper feeding problems

    Why my printer HP Officejet Pro 8500 has constant pain to pick up the first sheet of paper, when the 'Print' is selected.  He invariably through a blank sheet and then gives the message "on paper" when the paper is in the tray.  It's same with envelo